/* ==========================================================================
   Atender Turnos (resources/views/turno/atender.blade.php)
   Pantalla de trabajo del funcionario: se mira de cerca, en un monitor normal
   y durante toda la jornada, así que el objetivo es ocupar el alto disponible
   y dejar una sola acción principal según el estado.

   Se carga como plugin "CustomCSS" desde config/adminlte.php. Todo va bajo
   .atender-* para que la hoja, que es global al panel, no afecte otras vistas.

   Paleta institucional (public/imagenes/logo.png): azul #03328A, verde #52B011.
   ========================================================================== */

.atender-layout {
    /* Alto libre: viewport menos navbar, encabezado de contenido y pie. El
       mínimo evita que en pantallas muy bajas los paneles se aplasten. */
    --atender-alto: calc(100vh - 12.5rem);
    --emco-azul: #03328a;
    --emco-azul-suave: #eef3fb;
    --emco-verde: #52b011;
    --emco-verde-boton: #37790b;
    --emco-ambar: #8a5300;
    --emco-ambar-suave: #fff6e5;
    --emco-borde: #d6dde8;
    --emco-texto: #2b3442;
    --emco-texto-suave: #66707e;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
    min-height: var(--atender-alto);
}

/* --- Columnas -------------------------------------------------------------- */

.atender-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Sin esto el contenido largo (nombres de paciente) estira la columna. */
    min-width: 0;
}

.atender-col-proceso {
    flex: 1 1 22rem;
    max-width: 30rem;
}

.atender-col-cola {
    flex: 1.6 1 26rem;
}

/* Las tarjetas se reparten el alto de su columna en vez de quedar arriba. */
.atender-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    border-top: 3px solid var(--emco-azul);
}

.atender-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--emco-borde);
}

.atender-card > .card-header .card-title {
    margin: 0;
    color: var(--emco-texto);
    font-size: 1rem;
    font-weight: 700;
}

.atender-card > .card-header .card-title > .fas,
.atender-card > .card-header .card-title > .far {
    margin-right: .35rem;
    color: var(--emco-azul);
}

.atender-card > .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* --- Turno en proceso ----------------------------------------------------- */

.atender-reloj {
    color: var(--emco-texto-suave);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.atender-proceso-body {
    align-items: center;
    justify-content: center;
    padding: 1rem .9rem;
    text-align: center;
}

.atender-turno {
    width: 100%;
}

.atender-turno-servicio {
    margin-bottom: .1rem;
    color: var(--emco-azul);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* El código es lo único que se lee a distancia: escala con el alto de la
   ventana para que en 768px de alto siga cabiendo sin recortar el resto. */
.atender-turno-codigo {
    margin-bottom: .5rem;
    color: var(--emco-azul);
    font-size: clamp(3rem, 9vh, 5.5rem);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
}

/* Jerarquía del panel: el código manda, luego el servicio y por último el
   paciente, legible pero sin competir con el número de turno. */
.atender-layout .paciente-activo {
    padding-top: .55rem;
    border-top: 1px dashed var(--emco-borde);
}

.atender-layout .paciente-activo .nombre {
    max-width: 100%;
    color: var(--emco-texto);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
}

.atender-layout .paciente-activo .fa-mars,
.atender-layout .paciente-activo .fa-venus,
.atender-layout .paciente-activo .fa-genderless {
    font-size: 1.3rem;
}

/* Femenino: el violeta de AdminLTE contrasta mejor que un rosa claro. */
.atender-layout .icono-femenino {
    color: #b5179e;
}

.atender-tiempos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .5rem;
    margin-top: .7rem;
}

.atender-tiempo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border: 1px solid var(--emco-borde);
    border-radius: 1rem;
    background-color: #f7f9fc;
    color: var(--emco-texto-suave);
    font-size: .78rem;
    font-weight: 600;
}

.atender-tiempo .fas,
.atender-tiempo .far {
    color: #8b95a3;
}

/* --- Estados vacíos ------------------------------------------------------- */

/* Un estado vacío tiene que leerse como algo intencionado, no como un panel
   que no cargó: icono grande atenuado, título y una línea de ayuda. */
.atender-vacio {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    text-align: center;
}

.atender-vacio > .fas,
.atender-vacio > .far {
    margin-bottom: .75rem;
    color: #c3ccd9;
    font-size: 2.75rem;
}

.atender-vacio-titulo {
    margin-bottom: .25rem;
    color: #55606e;
    font-size: 1.1rem;
    font-weight: 600;
}

.atender-vacio-ayuda {
    max-width: 24rem;
    margin-bottom: 0;
    color: #8b95a3;
    font-size: .85rem;
    line-height: 1.45;
}

.atender-vacio.atender-vacio-error > .fas {
    color: #e0a6a6;
}

.atender-cargando {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

/* --- Acciones ------------------------------------------------------------- */

.atender-acciones {
    padding: .75rem .9rem;
    background-color: #fbfcfe;
    border-top: 1px solid var(--emco-borde);
}

.atender-acciones-secundarias {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.atender-acciones-secundarias > .btn {
    flex: 1 1 0;
    min-width: 0;
}

.atender-layout .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    white-space: nowrap;
}

/* Una sola acción principal, la que corresponde al estado, a todo el ancho. */
.atender-layout .btn-accion-principal {
    width: 100%;
    min-height: 3.4rem;
    border-radius: .3rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.atender-layout .btn-accion-principal > .fas {
    font-size: 1.2rem;
}

.atender-layout .btn-emco-llamar {
    border: 1px solid var(--emco-azul);
    background-color: var(--emco-azul);
    color: #fff;
}

.atender-layout .btn-emco-llamar:hover,
.atender-layout .btn-emco-llamar:focus {
    background-color: #04409f;
    color: #fff;
}

/* Verde institucional oscurecido: el #52B011 del logo no da contraste
   suficiente con texto blanco (2.8:1); este llega a 5.4:1. */
.atender-layout .btn-emco-terminar {
    border: 1px solid var(--emco-verde-boton);
    background-color: var(--emco-verde-boton);
    color: #fff;
}

.atender-layout .btn-emco-terminar:hover,
.atender-layout .btn-emco-terminar:focus {
    background-color: #2e6609;
    color: #fff;
}

/* Secundarias: mismo peso entre ellas y claramente por debajo de la principal. */
.atender-layout .btn-emco-secundario {
    padding: .45rem .5rem;
    border: 1px solid var(--emco-borde);
    background-color: #fff;
    color: var(--emco-azul);
    font-size: .85rem;
    font-weight: 600;
}

.atender-layout .btn-emco-secundario:hover,
.atender-layout .btn-emco-secundario:focus {
    border-color: var(--emco-azul);
    background-color: var(--emco-azul-suave);
    color: var(--emco-azul);
}

/* Ámbar solo donde significa algo: pausar la atención de un paciente. */
.atender-layout .btn-emco-pausa {
    border-color: #e3c088;
    background-color: var(--emco-ambar-suave);
    color: var(--emco-ambar);
}

.atender-layout .btn-emco-pausa:hover,
.atender-layout .btn-emco-pausa:focus {
    border-color: #c99339;
    background-color: #ffefd2;
    color: #6f4300;
}

.atender-layout .btn:disabled,
.atender-layout .btn.disabled {
    opacity: .4;
    box-shadow: none;
    cursor: not-allowed;
}

/* Foco visible y con el azul institucional, no el celeste de Bootstrap. */
.atender-layout .btn:focus,
.atender-layout .btn:focus-visible,
.atender-layout textarea:focus,
.atender-layout a:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 .2rem rgba(3, 50, 138, .35);
}

.atender-layout .btn-emco-pausa:focus {
    box-shadow: 0 0 0 .2rem rgba(201, 147, 57, .4);
}

/* --- Observación ---------------------------------------------------------- */

.atender-observacion {
    margin: .75rem 0 0;
}

.atender-observacion label {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin-bottom: .25rem;
    color: var(--emco-texto);
    font-size: .82rem;
    font-weight: 600;
}

.atender-observacion label .fas {
    color: #8b95a3;
    font-size: .75rem;
}

.atender-observacion-destino {
    color: var(--emco-azul);
    font-weight: 700;
}

.atender-observacion textarea {
    border-color: var(--emco-borde);
    font-size: .9rem;
    resize: none;
}

.atender-observacion textarea:focus {
    border-color: var(--emco-azul);
}

.atender-observacion textarea:disabled {
    background-color: #f4f6f9;
}

.atender-observacion .atender-observacion-ayuda {
    display: block;
    margin-top: .2rem;
    color: #8b95a3;
    font-size: .74rem;
}

/* --- Cola de pendientes --------------------------------------------------- */

.atender-card-cola {
    border-top-color: var(--emco-verde);
}

.atender-card-cola > .card-header .card-title > .fas {
    color: var(--emco-verde-boton);
}

.atender-conteo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 1rem;
    background-color: var(--emco-azul);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.atender-conteo.atender-conteo-vacio {
    background-color: #aab4c1;
}

/* La cola crece hacia abajo y desplaza dentro de la tarjeta: el alto de la
   pantalla no cambia por muchos turnos que haya. */
.atender-cola-body {
    overflow-y: auto;
    padding: .6rem;
}

/* Conteo de turnos de cada servicio, en gris para no repetir el azul de la
   insignia del total que va en la cabecera del panel. */
.atender-grupo-conteo {
    min-width: 1.7rem;
    padding: .1rem .5rem;
    border-radius: 1rem;
    background-color: #e7ecf3;
    color: #46505f;
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
}

/* --- Fichas de turno ------------------------------------------------------ */

/* Cada pendiente es un bloque con el código arriba y el paciente debajo.
   El tope de ancho mantiene varias fichas por fila y recorta el nombre
   largo con puntos suspensivos en vez de estirar la lista. */
.atender-layout .chip-turno {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 8rem;
    max-width: 18rem;
    padding: .4rem .7rem;
    border: 1px solid #cbd5e1;
    border-radius: .375rem;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.atender-layout .chip-turno .codigo {
    color: #1e293b;
    font-size: 1.15em;
    font-weight: 800;
}

.atender-layout .chip-turno .paciente {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-top: .2rem;
    color: #334155;
    font-size: .82rem;
}

.atender-layout .chip-turno .paciente .nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-weight: 600;
}

/* --- Turnos en espera ---------------------------------------------------- */

/* Pausados: mismo lenguaje de tarjeta que la cola, con el ámbar que ya usa el
   botón de poner en espera para que se lean como el mismo concepto. */
.atender-card-espera {
    flex: 0 1 auto;
    max-height: 17rem;
    border-top-color: #c99339;
}

.atender-card-espera > .card-header .card-title > .fas {
    color: #c99339;
}

.atender-card-espera .atender-conteo {
    background-color: #c99339;
}

.atender-espera-body {
    overflow-y: auto;
    padding: .6rem;
}

.atender-espera-ayuda {
    margin-bottom: .5rem;
    color: #8b95a3;
    font-size: .76rem;
}

.atender-layout .chip-turno.chip-espera {
    border-color: #d39e00;
    background-color: #fff3cd;
}

/* --- Avisos (toastr) ------------------------------------------------------ */

/* El plugin se registra para todo el panel, pero por defecto se sitúa sobre la
   barra superior y tapa las insignias de sede, área y módulo. */
#toast-container.toast-top-right {
    top: 4.25rem;
    right: 1rem;
}

/* --- Adaptaciones -------------------------------------------------------- */

/* Portátiles de 768px de alto: se recorta el aire vertical para que la cola
   siga mostrando varias filas sin desplazar. */
@media (max-height: 800px) {
    .atender-layout {
        --atender-alto: calc(100vh - 11rem);
    }

    .atender-proceso-body {
        padding: .6rem .9rem;
    }

    .atender-layout .btn-accion-principal {
        min-height: 3rem;
        font-size: 1rem;
    }

    .atender-vacio > .fas,
    .atender-vacio > .far {
        margin-bottom: .5rem;
        font-size: 2.25rem;
    }
}

/* Una sola columna: los paneles pasan a alto natural y la página desplaza. */
@media (max-width: 767.98px) {
    .atender-layout {
        min-height: 0;
    }

    .atender-col-proceso {
        max-width: none;
    }

    .atender-card-espera {
        max-height: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .atender-layout .btn {
        transition: none;
    }
}