/* ====================================================================
   FILAS Y CAMPOS
   Cada fila es una grilla de 8 columnas; span-N = ancho del campo
   ==================================================================== */

/* 10px entre filas y 9px entre columnas */
.FILA-CAMPOS {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px 9px;
}

.FILA-CAMPOS + .FILA-CAMPOS {
    margin-top: 10px;
}

.CAMPO.span-6 {grid-column: span 6;}
.CAMPO.span-4 {grid-column: span 4;}
.CAMPO.span-3 {grid-column: span 3;}
.CAMPO.span-2 {grid-column: span 2;}
.CAMPO.span-1 {grid-column: span 1;}

.CAMPO {
    position: relative;
    background: var(--bg-card);
    outline: 1px solid var(--border-color);
    border-radius: 8px;
}

.CAMPO:hover,
.CAMPO:focus-within {
    background: var(--bg-hover);
}

.CAMPO input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    outline: none;
    padding: 10px;
    overflow: hidden;
}

.CAMPO input::placeholder {
    color: var(--text-secondary);
}

/* Título del campo montado sobre el borde de arriba (lo crea campos.js desde el placeholder)
   El fondo del color de la tarjeta "corta" la línea del borde detrás del texto */
.CAMPO > label {
    position: absolute;
    top: -7px;
    left: 6px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 14px;
    color: var(--text-secondary);
    background: var(--bg-card);
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Con título, el texto baja un poco para dejar aire bajo el título */
.CAMPO > label + input {
    padding: 14px 10px 8px 10px;
}

/* ====================================================================
   FILA UNIDA
   Campos pegados, con un solo borde por fuera y una línea vertical entre ellos
   (> : solo los campos de la fila, no los que van dentro de un panel de fecha)
   ==================================================================== */

.FILA-CAMPOS.FILA-UNIDA {
    gap: 0;
    outline: 1px solid var(--border-color);
    border-radius: 8px;
}

.FILA-UNIDA > .CAMPO {
    outline: none;
    border-radius: 0;
}

.FILA-UNIDA > .CAMPO + .CAMPO {
    border-left: 1px solid var(--border-color);
}

.FILA-UNIDA > .CAMPO:first-child {
    border-radius: 8px 0 0 8px;
}

.FILA-UNIDA > .CAMPO:last-child {
    border-radius: 0 8px 8px 0;
}

.FILA-UNIDA:has(> .CAMPO:first-child.abierto) {
    border-bottom-left-radius: 0;
}

.FILA-UNIDA:has(> .CAMPO:last-child.abierto) {
    border-bottom-right-radius: 0;
}

/* Fila de 6 columnas: mide 6 de 8 y mantiene el ancho de cada columna */
.FILA-CAMPOS.span-6 {
    width: 75%;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Título de fila: ocupa la primera celda en lugar de un campo */
.FILA-TITULO {
    grid-column: span 2;
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    border-right: 1px solid var(--border-color);
    background: var(--bg-hover);
    white-space: nowrap;
    overflow: hidden;
}

/* ====================================================================
   SELECT PERSONALIZADO
   El input es el campo y el buscador; la lista aparece debajo
   ==================================================================== */

.CAMPO-SELECT input {
    cursor: pointer;
}

/* Abierto (select o fecha): el campo pierde sus esquinas de abajo para pegarse a la lista */
.CAMPO.CAMPO-SELECT.abierto,
.CAMPO.CAMPO-FECHA.abierto {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.SELECT-MENU {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    background: var(--bg-card);
    outline: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    display: none;
    z-index: 10;
    overflow: hidden;
}

.CAMPO-SELECT.abierto .SELECT-MENU {
    display: block;
}

.SELECT-LISTA {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 4px 4px;
    margin-right: 4px;
    container-type: scroll-state;
}

/* Si la lista tiene scroll, separar las opciones de la barra */
@container scroll-state(scrollable: y) {
    .OPCION {
        margin-right: 4px;
    }
}

.OPCION {
    position: relative;
    padding: 10px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.OPCION.seleccionado,
.OPCION.resaltada,
.OPCION:hover {
    background-color: var(--bg-hover);
}

/* Barrita azul a la izquierda de la opción elegida */
.OPCION.seleccionado::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 4px;
    background: var(--accent-color);
}

/* Sigla del área (ej. OOEE), con letras de ancho fijo para que queden alineadas */
.SIGLA {
    font-family: 'Consolas', monospace;
}

/* Texto completo de una opción cortada, flotando encima de ella */
.TOOLTIP-OPCION {
    position: fixed;
    display: none;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    color: var(--text-primary);
    background: var(--bg-hover);
    border-radius: 4px;
    pointer-events: none;
    z-index: 100;
}

.TOOLTIP-OPCION.visible {
    display: block;
}

/* ====================================================================
   CAMPO FECHA
   Al hacer clic se abre un panel con tres select (día, mes y año)
   y un calendario debajo
   ==================================================================== */

/* Panel con los tres select en fila: día y año del mismo ancho, mes más ancho */
.FECHA-MENU {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    z-index: 10;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--bg-card);
    outline: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
}

.CAMPO-FECHA.abierto .FECHA-MENU {
    display: grid;
}

/* Campos del panel: grises y sin borde */
.FECHA-MENU .CAMPO {
    background: var(--bg-principal);
    outline: none;
}

/* Lista del panel: gris sin borde, pegada al campo (sin el 1px del borde) */
.FECHA-MENU .SELECT-MENU {
    top: 100%;
    background: var(--bg-principal);
    outline: none;
}

/* Lista del panel sin barra de scroll (se sigue pudiendo bajar con la rueda) */
.FECHA-MENU .SELECT-LISTA {
    scrollbar-width: none;
}

/* Sin barra no hace falta separar las opciones de ella: 4px a cada lado.
   Texto largo: se corta 10px antes del borde. overflow corta donde termina el padding,
   así que los 10px de la derecha se hacen con un borde transparente (el fondo se ve
   a través de él y el texto no entra ahí) */
.FECHA-MENU .OPCION {
    margin-right: 0;
    padding-right: 0;
    border-right: 10px solid transparent;
}

/* Opciones del color del fondo; blancas al pasar el mouse o al elegirlas */
.FECHA-MENU .OPCION.seleccionado,
.FECHA-MENU .OPCION.resaltada,
.FECHA-MENU .OPCION:hover {
    background: var(--bg-card);
}

/* Días que no existen en el mes elegido (ej. 31 de febrero) */
.OPCION.no-existe {
    display: none;
}

/* Calendario: debajo de los tres select, a todo el ancho del panel, sin cuadro de fondo */
.CALENDARIO {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.CALENDARIO-SEMANA,
.DIA {
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    border-radius: 4px;
}

.CALENDARIO-SEMANA {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Cada día: sin fondo; gris al pasar el mouse o al elegirlo */
.DIA {
    color: var(--text-primary);
    cursor: pointer;
}

.DIA:hover,
.DIA.seleccionado {
    background: var(--bg-principal);
}

/* Sábado y domingo en rojo: el calendario tiene 7 columnas, así que
   el 6.° de cada 7 cuadros es sábado (7n+6) y el 7.° es domingo (7n) */
.CALENDARIO > :nth-child(7n+6),
.CALENDARIO > :nth-child(7n) {
    color: var(--text-fin-semana);
}

/* Modo oscuro: los fondos grises del panel (campos, listas y días) toman
   el color del campo de la fecha, más claro que el panel. Así las opciones
   elegidas (--bg-card) quedan más oscuras, igual que en modo claro quedan blancas */
body.modo-oscuro .FECHA-MENU .CAMPO,
body.modo-oscuro .FECHA-MENU .SELECT-MENU,
body.modo-oscuro .DIA:hover,
body.modo-oscuro .DIA.seleccionado {
    background: var(--bg-hover);
}

/* ====================================================================
   TELÉFONOS: las filas pasan a 2 columnas
   Todo campo ocupa el ancho completo, salvo span-1 que ocupa la mitad
   ==================================================================== */

@media (max-width: 600px) {
    .FILA-CAMPOS {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .CAMPO[class*="span-"] {
        grid-column: span 2;
    }

    .CAMPO.span-1 {
        grid-column: span 1;
    }

    .FILA-UNIDA > .CAMPO + .CAMPO {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .FILA-UNIDA > .CAMPO:first-child {
        border-radius: 8px 8px 0 0;
    }

    .FILA-UNIDA > .CAMPO:last-child {
        border-radius: 0 0 8px 8px;
    }

    .FILA-UNIDA:has(> .CAMPO:first-child.abierto) {
        border-bottom-left-radius: 8px;
    }

    .FILA-TITULO {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .FILA-CAMPOS.span-6 {
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}