/* ==========================================================================
   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-urgencia-fondo: #fff7f7;
    --ags-urgencia-fondo-2: #ffeeee;
    --ags-urgencia-borde: #f3b0b0;
    --ags-urgencia-texto: #9b1c1c;

    --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;

    /* Alto de la barra de accesos rápidos. La cabecera sticky de la tabla se pega
       JUSTO debajo de ella, así que este número y el alto real tienen que coincidir:
       por eso la barra nunca envuelve en escritorio (`nowrap` + scroll horizontal). */
    --ags-barra-alto: 44px;
}

.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: var(--ags-barra-alto);
    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);
}

/* Cita de urgencia (creada desde el modal de cita libre). Tiñe la fila entera en vez
   de la franja izquierda, que está tomada por el estado: son dos datos distintos y la
   urgencia tiene que leerse aunque la cita esté confirmada, en sala o ya atendida. */
.ags-fila--urgencia td {
    background: var(--ags-urgencia-fondo);
}

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

/* 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-origen--urgencia {
    background: var(--ags-urgencia-fondo-2);
    color: var(--ags-urgencia-texto);
    border: 1px solid var(--ags-urgencia-borde);
    padding: 0 5px;
}

.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;
}

/* ==========================================================================
   ACCESOS RÁPIDOS — la barra pegada arriba de la lista.
   Los mismos tres botones de la franja de acciones de la pantalla, repetidos acá
   porque esa franja se pierde de vista al recorrer un día de 30 o 40 filas.
   Va DENTRO de `.ags-wrap` (el contenedor con scroll) para que el `sticky` la
   fije mientras se recorre la lista; el `<thead>` se pega justo debajo.
   ⚠️ `nowrap` + `overflow-x:auto` en escritorio son obligatorios: si la barra
   envolviera en dos líneas, su alto dejaría de coincidir con `--ags-barra-alto`
   y la cabecera de la tabla quedaría flotando sobre las primeras filas.
   ========================================================================== */
.ags-rapidos {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    height: var(--ags-barra-alto);
    padding: 0 12px;
    background: #fff;
    border-bottom: 1px solid var(--ags-borde);
    scrollbar-width: none;
}

.ags-rapidos::-webkit-scrollbar {
    display: none;
}

.ags-rapidos-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-right: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ags-tenue);
}

.ags-rapidos-rotulo i {
    font-size: 11px;
}

.ags-rapido {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.ags-rapido i {
    font-size: 12px;
}

.ags-rapido--cita {
    border-color: var(--ags-verde);
    color: var(--ags-verde);
}

.ags-rapido--cita:hover {
    background: var(--ags-verde);
    color: #fff;
}

.ags-rapido--urgencia {
    border-color: var(--ags-rojo);
    color: var(--ags-rojo);
}

.ags-rapido--urgencia:hover {
    background: var(--ags-rojo);
    color: #fff;
}

.ags-rapido--neutro {
    border-color: var(--ags-borde-2);
    color: var(--ags-texto-2);
}

.ags-rapido--neutro:hover {
    background: var(--ags-fondo-2);
    border-color: var(--ags-suave);
}


/* ==========================================================================
   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;
    }

    /* Acá el `<thead>` está oculto, así que el alto de la barra ya no tiene que
       coincidir con nada y los botones pueden envolver en vez de hacer scroll. */
    .ags-rapidos {
        height: auto;
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 6px;
        padding: 8px 4px;
        background: transparent;
        border-bottom: 0;
    }

    .ags-rapidos-rotulo {
        display: none;
    }

    .ags-rapido {
        flex: 1 1 auto;
        justify-content: center;
    }

    .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;
    }
}