/* Pequeños ajustes para dar look moderno */
/* --- DEFINICIÓN DE VARIABLES DE COLOR --- */
:root {
    --color-dark: #34383d; /* Gris Oscuro Institucional */
    --color-wine: #611232; /* Vino Institucional */
    --color-wine-hover: #4a0e26; /* Vino un poco más oscuro para hovers */
    --brand-wine: #611232;
    --brand-dark: #34383d;
    --brand-wine-light: rgba(97, 18, 50, 0.05);
    --bg-body: #f3f4f6; /* Fondo gris muy suave para contraste */
    --brand-wine-light: rgba(97, 18, 50, 0.05);
}

.card {
    border: none;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

    .card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #eaeaea;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
}

/* Bordes superiores de color para identificar tipos de indicadores */
.card-border-wine {
    border-top: 4px solid var(--color-wine);
}

.card-border-dark {
    border-top: 4px solid var(--color-dark);
}



/* --- BOTONES --- */
.btn-brand {
    background-color: var(--brand-wine);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 0.35rem;
    transition: all 0.3s;
}

    .btn-brand:hover {
        background-color: #4a0d26;
        color: white;
        transform: translateY(-1px);
    }

/* --- CALENDARIO GRID SYSTEM --- */

/* Contenedor para los Días (Cuerpo) */
.calendar-wrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columnas iguales */
    gap: 12px;
}

/* Contenedor principal donde inyectas htmlTr */
#calendar-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    background-color: #eee;
    padding: 10px;
}

/* El título del mes y la fila de nombres deben ocupar las 7 columnas */
.month-separator,
.calendar-headers-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* Sub-cuadrícula de 7 */
}

.month-separator {
    background: #343a40;
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
}

.day-name-header {
    text-align: center;
    font-weight: 700;
    color: var(--brand-dark);
    text-transform: uppercase;
    font-size: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand-wine);
}

.day-card {
    background: white;
    min-height: 100px;
    border: 1px solid #ddd;
    padding: 5px;
}

.empty-offset {
    background: #fafafa;
    border: 1px dashed #eee;
}

/* --- TARJETAS DE DÍA --- */
.day-card {
    background: white;
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

    .day-card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.10);
        transform: translateY(-2px);
        border-color: var(--brand-wine);
        z-index: 5;
    }

    /* Días vacíos (sin visitas o días de otro mes) */
    .day-card.empty-state {
        background-color: #fcfcfc;
        border-style: dashed;
    }

    /* Días deshabilitados (offset inicial/final) */
    .day-card.offset-day {
        background-color: #f8f9fa;
        border: none;
        opacity: 0.5;
    }

.day-header {
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f8f9fa;
    background-color: #fff;
}

.day-number {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand-wine);
}

.total-badge {
    font-size: 0.70rem;
    background-color: var(--brand-dark);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-align: end;
}

    .total-badge.no-data {
        background-color: #e9ecef;
        color: #6c757d;
    }

.day-body {
    padding: 8px 10px;
    font-size: 0.75rem;
    flex-grow: 1;
}

/* Lista interna de regiones */
.region-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    color: #555;
}

.region-val {
    font-weight: 700;
    color: var(--brand-dark);
}

/* Barras de progreso mini */
.progress-mini {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    margin-bottom: 6px;
}

.progress-bar-wine {
    background-color: var(--brand-wine);
}

.progress-bar-success {
    background-color: #4caf50;
}

.progress-bar-error {
    background-color: #ce2519;
}

.nav-pills .nav-link {
    color: var(--color-dark);
    font-weight: 500;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    margin-right: 0.5rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    cursor: pointer;
}

    .nav-pills .nav-link.active {
        background-color: var(--color-dark);
        color: white !important; /* Importante para sobreescribir estilos base */
        box-shadow: 0 4px 6px rgba(52,56,61, 0.3);
        border-color: var(--color-dark);
    }

    .nav-pills .nav-link:hover:not(.active) {
        background-color: #e9ecef;
    }


/* --- ESTILOS PARA LA SECCIÓN DE RECONOCIMIENTOS --- */
.winner-card {
    background: #fff;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

    .winner-card:hover {
        transform: translateY(-5px);
    }

.winner-avatar-container {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

/* Modificado para foto vertical y bordes redondeados */
.winner-avatar {
    width: auto;
    height: auto; /* Altura mayor para formato retrato */
    max-width: 150px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 15px; /* Bordes redondeados suaves, no circulares */
}

.winner-icon {
    position: absolute;
    bottom: -5px; /* Ajustado para el borde cuadrado */
    right: -5px; /* Ajustado para el borde cuadrado */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.winner-badge {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    /* Ocultar encabezados en móvil */
    .calendar-wrapper {
        grid-template-columns: 1fr;
    }
    /* Lista vertical en móvil */
    .day-card.offset-day {
        display: none;
    }
    /* Ocultar días vacíos en móvil */
    .day-card {
        min-height: auto;
        margin-bottom: 10px;
    }
}