/* static/css/style.css */

/* --- Definición de la Paleta de Colores --- */
:root {
    /* Colores Principales */
    --vino: #660920 !important;
    --guindo: #AB1738 !important;
    --dorado: #BC955B !important;

    /* Colores Secundarios (Bootstrap) */
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    
    /* Mapeo de Colores de Bootstrap a tu marca */
    --bs-primary: var(--guindo);
    --bs-secondary: var(--gray);
    --bs-success: var(--green);
    --bs-info: var(--cyan);
    --bs-warning: var(--dorado);
    --bs-danger: var(--red);
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;
    
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
    font-family: var(--bs-font-sans-serif);
    background-color: var(--bs-light);
}

/* --- Estilos de Componentes --- */

/* Navbar con color vino */
.navbar {
    background-color: var(--vino);
}

.navbar-brand {
    font-weight: bold;
    color: var(--dorado);
}

.navbar-brand:hover {
    color: var(--white);
}

/* Botones principales en guindo */
.btn-primary {
    background-color: var(--guindo);
    border-color: var(--guindo);
}

.btn-primary:hover {
    background-color: var(--vino); /* Más oscuro al pasar el mouse */
    border-color: var(--vino);
}

/* Botones de acento en dorado */
.btn-warning, .btn-outline-warning {
    color: #000;
    background-color: var(--dorado);
    border-color: var(--dorado);
}

.btn-warning:hover {
    background-color: #a4824e; /* Dorado más oscuro */
    border-color: #a4824e;
}

/* Tarjetas (Cards) para el dashboard */
.card {
    border: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.card-header {
    background-color: var(--vino);
    color: var(--dorado);
    font-weight: bold;
    border-bottom: 2px solid var(--dorado);
}

/* Animación sutil para la página de inicio (bullets de ayuda) */
.animated-bullet {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ... (Todo tu CSS existente va aquí arriba) ... */


/* --- ESTILOS PARA EL TIMELINE DE SEGUIMIENTO --- */
.timeline {
    list-style: none;
    padding: 10px 0 10px 40px; 
    position: relative;
    margin: 0;
}

.timeline:before {
    /* La LÍNEA vertical */
    content: '';
    position: absolute;
    top: 15px; 
    bottom: 15px;
    left: 15px; 
    width: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px; 
}

.timeline-item:after {
    /* El PUNTO (círculo) en la línea */
    content: '';
    position: absolute;
    left: 15px; 
    top: 8px; 
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--dorado);
    border: 4px solid var(--vino);
    z-index: 1; 
    transform: translateX(-50%); 
}

.timeline-item.actual:after {
    /* El punto más reciente (actual) */
    background-color: var(--vino);
    border-color: var(--dorado);
    width: 22px;
    height: 22px;
    top: 6px; 
}

.timeline-content {
    /* --- CAMBIO AQUÍ --- */
    /* Aumentamos el margen izquierdo para empujar el texto más a la derecha */
    margin-left: 35px; /* <--- VALOR AUMENTADO */
    display: block; 
}

.timeline-content .estatus {
    font-weight: 700;
    font-size: 1.1rem;
}

.timeline-content .fecha {
    font-size: 0.9rem;
    color: #6c757d;
    display: block;
    margin-bottom: 5px;
}

.timeline-content .comentario {
    margin-top: 8px;
    padding: 10px 15px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    white-space: pre-wrap; 
}