/* ==========================================================================
   Sala Simplificada — tercera vista de la agenda del día (/agenda)
   Render: agendaPrincipal/funciones/salaSimplificada.php
   Prefijo `ags-` (AGenda Simplificada) para no chocar con `agenda-card*`.

   PALETA: la del Workspace Clínico de hospitalización (`hospitalizado/css/`),
   deliberadamente sobria. Las tarjetas de las otras dos salas usan un color por
   cada estado y otro por cada origen; en una tabla de 20 filas eso se lee como
   ruido. Acá el color se reserva para lo que exige una decisión AHORA:
     · celeste #38bdf8 → confirmada (el tutor avisó que viene)
     · azul  #1a6fc4 → el paciente está esperando / la acción que sigue el flujo
     · ámbar #b45309 → atención en curso
     · verde #198754 → atendida, y la única acción viva del día (llamar al paciente)
     · rojo  #dc3545 → no asistió
   O sea: la franja de la izquierda cuenta el CICLO de la cita de un vistazo. Lo que
   todavía no tiene novedad (sin confirmar, pendiente) no lleva franja, y eso es la
   información. Todo lo demás —origen, peso, ficha, botones secundarios— va en gris.
   ========================================================================== */

:root {
    --ags-azul: #1a6fc4;
    --ags-azul-hover: #145390;
    --ags-celeste: #38bdf8;
    --ags-verde: #198754;
    --ags-verde-hover: #157347;
    --ags-ambar: #b45309;
    --ags-rojo: #dc3545;

    --ags-texto: #1f2937;
    --ags-texto-2: #374151;
    --ags-suave: #6b7280;
    --ags-tenue: #9ca3af;
    --ags-borde: #dee2e6;
    --ags-borde-2: #d1d5db;
    --ags-fondo: #f9fafb;
    --ags-fondo-2: #f3f4f6;
    --ags-hover: #f0f7ff;
}

.ags-wrap {
    height: 570px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ags-borde);
    border-radius: 10px;
}

.ags-tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--ags-texto);
}

/* La cabecera acompaña el scroll: en una agenda larga se pierde la referencia
   de qué columna se está leyendo. */
.ags-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--ags-fondo);
    border-bottom: 1px solid var(--ags-borde);
    padding: 10px 12px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ags-suave);
    white-space: nowrap;
}

.ags-tabla tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
}

.ags-tabla tbody tr:last-child td {
    border-bottom: 0;
}

.ags-fila:hover td {
    background: var(--ags-hover);
}

/* Marca de estado: una franja fina a la izquierda, SOLO cuando la fila pide algo.
   Las filas en gris no llevan marca — que no la lleven es la información. */
.ags-fila td:first-child {
    box-shadow: inset 3px 0 0 0 transparent;
}

.ags-fila--confirmado td:first-child {
    box-shadow: inset 3px 0 0 0 var(--ags-celeste);
}

.ags-fila--espera td:first-child {
    box-shadow: inset 3px 0 0 0 var(--ags-azul);
}

.ags-fila--curso td:first-child {
    box-shadow: inset 3px 0 0 0 var(--ags-ambar);
}

.ags-fila--alerta td:first-child {
    box-shadow: inset 3px 0 0 0 var(--ags-rojo);
}

.ags-fila--atendido td:first-child {
    box-shadow: inset 3px 0 0 0 var(--ags-verde);
}

/* Las citas ya atendidas se atenúan: siguen ahí para consultarlas y cobrarlas,
   pero lo vivo del día es lo que aún no se atiende. */
.ags-fila--atendido td {
    color: var(--ags-suave);
}

.ags-fila--atendido .ags-paciente-nombre,
.ags-fila--atendido .ags-hora {
    color: var(--ags-texto-2);
    font-weight: 600;
}

/* Anchos de columna ------------------------------------------------------- */
.ags-tabla tbody td:nth-child(1) { width: 16%; }
.ags-tabla tbody td:nth-child(2) { width: 28%; }
.ags-tabla tbody td:nth-child(3) { width: 7%; }
.ags-tabla tbody td:nth-child(4) { width: 20%; }
.ags-tabla tbody td:nth-child(5) { width: 19%; }
.ags-tabla tbody td:nth-child(6) { width: 10%; }

/* Paciente ---------------------------------------------------------------- */
.ags-paciente {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ags-paciente > .fa-paw {
    color: var(--ags-tenue);
    font-size: 11px;
}

.ags-paciente-nombre {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ags-texto);
}

.ags-ficha {
    color: var(--ags-suave);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ags-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ags-tenue);
}

/* El origen (consulta, vacuna, cirugía…) es una etiqueta, no un semáforo:
   va en gris, igual para todos los módulos. */
.ags-origen {
    background: var(--ags-fondo-2);
    color: var(--ags-suave);
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .04em;
}

.ags-peso {
    color: var(--ags-tenue);
    font-size: 10.5px;
}

.ags-hora {
    font-weight: 700;
    font-size: 14px;
    color: var(--ags-texto);
    white-space: nowrap;
}

.ags-tutor {
    font-weight: 600;
    color: var(--ags-texto-2);
}

/* Estado ------------------------------------------------------------------ */
.ags-estado {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    background: var(--ags-fondo-2);
    color: var(--ags-suave);
}

.ags-estado--confirmado {
    background: #e0f2fe;
    color: #0369a1;
}

.ags-estado--espera {
    background: #eaf2fb;
    color: var(--ags-azul);
}

.ags-estado--curso {
    background: #fff7ed;
    color: var(--ags-ambar);
}

.ags-estado--atendido {
    background: #e8f5ee;
    color: #146c43;
}

.ags-estado--alerta {
    background: #fdecea;
    color: #b42318;
}

/* Acciones ---------------------------------------------------------------- */
.ags-acciones {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ags-btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.ags-btn:hover {
    text-decoration: none;
}

/* Verde: la acción viva del día (llamar al paciente que ya está en sala). */
.ags-btn--primaria {
    background: var(--ags-verde);
    border-color: var(--ags-verde);
    color: #fff;
}

.ags-btn--primaria:hover {
    background: var(--ags-verde-hover);
    border-color: var(--ags-verde-hover);
    color: #fff;
}

/* Azul: lo que continúa el flujo (seguir la atención, cobrar). */
.ags-btn--accion {
    background: var(--ags-azul);
    border-color: var(--ags-azul);
    color: #fff;
}

.ags-btn--accion:hover {
    background: var(--ags-azul-hover);
    border-color: var(--ags-azul-hover);
    color: #fff;
}

/* Gris: todo lo secundario (ver documento, ir a pabellón, gestionar estado). */
.ags-btn--neutro {
    background: transparent;
    border-color: var(--ags-borde-2);
    color: var(--ags-texto-2);
}

.ags-btn--neutro:hover {
    background: var(--ags-fondo-2);
    border-color: var(--ags-tenue);
    color: var(--ags-texto-2);
}

.ags-btn--nulo {
    background: var(--ags-fondo-2);
    border-color: var(--ags-fondo-2);
    color: var(--ags-tenue);
    cursor: not-allowed;
}

.ags-menu-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--ags-borde-2);
    border-radius: 6px;
    background: #fff;
    color: var(--ags-suave);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: background .15s, border-color .15s;
}

.ags-menu-btn:hover {
    background: var(--ags-fondo-2);
    border-color: var(--ags-tenue);
}

.ags-menu-lista {
    font-size: 12.5px;
    border: 1px solid var(--ags-borde);
    border-radius: 8px;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .3);
    padding: 6px 0;
    max-height: 320px;
    overflow-y: auto;
}

.ags-menu-lista .dropdown-item {
    padding: 7px 14px;
    display: flex;
    align-items: center;
    color: var(--ags-texto-2);
}

/* Los iconos del menú acompañan, no compiten: un solo gris para todos. */
.ags-menu-lista .dropdown-item .ags-ico {
    width: 18px;
    margin-right: 8px;
    text-align: center;
    color: var(--ags-tenue);
}

.ags-menu-lista .dropdown-item:hover .ags-ico {
    color: var(--ags-azul);
}

.ags-vacio {
    text-align: center;
    padding: 90px 20px;
    color: var(--ags-tenue);
}

.ags-vacio i {
    font-size: 2.6rem;
    opacity: .3;
    display: block;
    margin-bottom: 14px;
}

.ags-vacio p {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}

/* ==========================================================================
   Móvil: la tabla se convierte en tarjetas apiladas.
   ⚠️ El `width:auto !important` es obligatorio: los `td:nth-child(){width:%}`
   de arriba tienen MÁS especificidad que una regla genérica dentro del media
   query (los media queries no suman especificidad). Sin esto cada celda queda
   de ~30px y el texto se parte letra por letra en vertical.
   ========================================================================== */
@media (max-width: 860px) {
    .ags-wrap {
        height: auto;
        max-height: 70vh;
        border: 0;
        background: transparent;
    }

    .ags-tabla thead {
        display: none;
    }

    .ags-tabla,
    .ags-tabla tbody,
    .ags-tabla tbody tr,
    .ags-tabla tbody td {
        display: block;
        width: auto !important;
    }

    .ags-tabla tbody tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--ags-borde);
        border-left: 3px solid var(--ags-borde-2);
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 4px 0;
    }

    /* En la tarjeta la marca de estado pasa al borde izquierdo. */
    .ags-fila--confirmado { border-left-color: var(--ags-celeste) !important; }
    .ags-fila--espera { border-left-color: var(--ags-azul) !important; }
    .ags-fila--curso  { border-left-color: var(--ags-ambar) !important; }
    .ags-fila--atendido { border-left-color: var(--ags-verde) !important; }
    .ags-fila--alerta { border-left-color: var(--ags-rojo) !important; }

    .ags-tabla tbody td {
        border-bottom: 0;
        padding: 6px 14px;
    }

    .ags-fila td:first-child {
        box-shadow: none;
    }

    /* Cada celda se rotula con el nombre de su columna, salvo las que se
       explican solas (paciente y acciones). */
    .ags-tabla tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--ags-tenue);
        margin-bottom: 2px;
    }

    .ags-td-paciente::before,
    .ags-td-acciones::before {
        display: none;
    }

    /* En la tarjeta, el paciente encabeza y la hora va junto a él. */
    .ags-td-paciente {
        order: -2;
        padding-top: 10px !important;
    }

    .ags-td-hora {
        order: -1;
    }

    .ags-td-acciones {
        order: 10;
        border-top: 1px solid #eef1f5 !important;
        margin-top: 4px;
        padding-top: 10px !important;
    }

    .ags-acciones {
        width: 100%;
    }

    .ags-btn {
        min-height: 38px;
        font-size: 12.5px;
    }

    .ags-menu-btn {
        width: 38px;
        height: 38px;
    }
}