/* ══════════════════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════════════════ */
.app-card {
    background: var(--surface); border-radius: var(--radius);
    border: 1px solid var(--border); padding: 22px;
    margin-bottom: 20px; box-shadow: var(--shadow-sm); overflow: hidden;
}
/* table-card: sin padding interno (la tabla va pegada al borde) y
   overflow visible para que los dropdowns se vean */
.app-card.table-card {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    border-radius: 0;
    background: var(--surface);
    margin-bottom: 20px;
}

/* Neutralize ALL padding/margin that creates gaps around the table */
.app-card.table-card .tabla-wrap                            { padding: 0; }
.app-card.table-card .dataTables_wrapper                    { padding: 0; width: 100%; }
.app-card.table-card .dataTables_wrapper .row               { margin: 0 !important; width: 100%; }
.app-card.table-card .dataTables_wrapper .row > *           { padding: 0 !important; width: 100%; }
.app-card.table-card .dataTables_wrapper .dataTables_info,
.app-card.table-card .dataTables_wrapper .dataTables_paginate { padding: 8px 14px; }
.app-card.table-card .tabla-base { width: 100% !important; margin-top: 0 !important; }

/* Info + paginación: misma línea */
.app-card.table-card .dataTables_wrapper > .row:last-child {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.app-card.table-card .dataTables_wrapper > .row:last-child > * {
    width: auto !important;
    padding: 0 !important;
}
/* Page header area inside table-card (title + filters) */
.table-card > .page-header,
.table-card > .page-header--estudios {
    padding: 10px 16px;
    margin: 0;
    background: #E7EAED;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}
.app-card.p-0 { padding: 0; }


/* ══════════════════════════════════════════════════════════════
   ╔═══════════════════════════════════════════════════════════╗
   ║  SISTEMA DE TABLAS — fuente única de verdad               ║
   ║  Markup esperado:                                         ║
   ║    <div class="app-card table-card">                      ║
   ║      <div class="tabla-wrap">                             ║
   ║        <table class="tabla-base">...                      ║
   ╚═══════════════════════════════════════════════════════════╝
   ══════════════════════════════════════════════════════════════ */

/* Wrapper: ancla overlays. NO usar overflow-x:auto + overflow-y:visible:
   el spec convierte el visible a auto y atrapa los dropdowns.
   Si en mobile querés scroll horizontal, envolvé la tabla con
   .tabla-scroll-mobile (definido más abajo). */
.tabla-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Solo mientras carga: altura mínima para evitar salto, sin scroll vertical */
.tabla-wrap:has(.dt-overlay.is-visible) {
    min-height: 200px;
    overflow-y: hidden;
}

/* Tabla base */
.tabla-base {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    table-layout: auto;   /* las columnas con width fijo respetan el px;
                             las que no, absorben el espacio sobrante.
                             Con `fixed` la tabla no se expande al 100%. */
    margin: 0;
}

/* Cabecera */
.tabla-base thead th {
    background: #E7EAED;
    color: #2e3d4e;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-bottom: 1px solid #c1cdd8;
    padding: 12px 8px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
/* thead corners — sin redondeado */
/* .app-card.table-card .tabla-base thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); } */
/* .app-card.table-card .tabla-base thead th:last-child  { border-top-right-radius: calc(var(--radius) - 1px); } */
.app-card.table-card .tabla-base thead th:first-child { border-top-left-radius: 0; }
.app-card.table-card .tabla-base thead th:last-child  { border-top-right-radius: 0; }

/* Celdas — sin overflow:hidden global (atrapaba dropdowns).
   Truncado opcional vía .cell-ellipsis. */
.tabla-base td {
    padding: 5px 8px;
    vertical-align: middle;
    border-bottom: 1px solid var(--tbl-row-border);
    color: #111;
}

.tabla-base td.cell-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tabla-base tbody tr:last-child td       { border-bottom: none; }
.tabla-base tbody tr:nth-child(odd)  td  { background-color: var(--tbl-stripe); }
.tabla-base tbody tr:nth-child(even) td  { background-color: var(--surface); }
.tabla-base tbody tr:hover td            { background-color: var(--tbl-hover); }

/* Override obligado: DataTables agrega .odd/.even */
.tabla-base.dataTable tbody tr.odd  td,
.tabla-base.dataTable tbody tr.odd  > * { background-color: var(--tbl-stripe) !important; }
.tabla-base.dataTable tbody tr.even td,
.tabla-base.dataTable tbody tr.even > * { background-color: var(--surface) !important; }
.tabla-base.dataTable tbody tr:hover td,
.tabla-base.dataTable tbody tr:hover > * { background-color: var(--tbl-hover) !important; }

/* Anular flechas de sort */
/* Hide DataTables default sort icons (encoding issues with Bootstrap5 integration) */
.tabla-base th.sorting::before,   .tabla-base th.sorting::after,
.tabla-base th.sorting_asc::after, .tabla-base th.sorting_desc::before { display: none; }

/* Custom FA sort icons */
.tabla-base th.sorting::after         { display:inline-block; font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f0dc"; margin-left:5px; opacity:.35; font-size:10px; }
.tabla-base th.sorting_asc::after     { display:inline-block; font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f0de"; margin-left:5px; opacity:.8; font-size:10px; }
.tabla-base th.sorting_desc::after    { display:inline-block; font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f0dd"; margin-left:5px; opacity:.8; font-size:10px; }

/* ───────── Jerarquía tipográfica tabla Pacientes ───────── */



/* Nombre: principal (lo primero que tiene que ver el ojo) */
#tablaPacientes td:nth-child(2) {
  font-weight: 600;
}

/* Apellido: acompaña al nombre */
#tablaPacientes td:nth-child(3) {
  font-weight: 500;
}

/* ── Anchos de columna ──────────────────────────────────────
   Las columnas "estructurales" (id, triaje, tipo, fecha, etc.)
   tienen width fijo. La columna "col-desc" NO tiene width, así
   absorbe todo el espacio sobrante hasta llenar el 100%.
   ──────────────────────────────────────────────────────────── */
.tabla-base .col-id        { width: 50px;  text-align: center; white-space: nowrap; }
.tabla-base .col-triaje    { width: 28px;  text-align: center; }
.tabla-base .col-tipo      { width: 80px;  text-align: center; white-space: nowrap; }
.tabla-base .col-tipo-badge{ width: 60px;  text-align: center; }
.tabla-base .col-turno-desc{ width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.tabla-base .col-img       { width: 36px;  text-align: center; }
.tabla-base .col-fmt       { width: 50px;  white-space: nowrap; }
.tabla-base .col-paciente  { width: 117px; white-space: nowrap; }
.tabla-base .col-pac       { width: 117px; white-space: nowrap; }
.tabla-base .col-informar  { width: 80px;  white-space: nowrap; }
.tabla-base .col-fecha     { width: 70px;  white-space: nowrap; }
.tabla-base .col-opciones  { width: 1px;   white-space: nowrap; } /* width:1px + nowrap = se ajusta al contenido */
.tabla-base .col-llamar    { width: 82px;  white-space: nowrap; }
.tabla-base .col-atendido  { width: 48px;  text-align: center; }
.tabla-base .col-cond      { width: 60px;  white-space: nowrap; }

/* Columnas específicas de pacientes */
.tabla-base .col-pac-dni  { width: 80px;  white-space: nowrap; }
.tabla-base .col-pac-tipo { width: 80px;  white-space: nowrap; }
.tabla-base .col-pac-edad { width: 65px;  text-align: center; }
.tabla-base .col-pac-qr   { width: 44px;  text-align: center; }

/* Columnas específicas de turnos */
.tabla-base .col-turno-fecha  { width: 115px; white-space: nowrap; }
.tabla-base .col-turno-medico { width: 72px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); font-size: 12px; }
.tabla-base .col-turno-dni    { width: 90px;  white-space: nowrap; }
.tabla-base .col-turno-estado { width: 110px; }
.tabla-base .col-turno-obra   { width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Alto de fila fijo — cambiá height para ajustar todas las tablas */
.tabla-base tbody td {
    height: auto;
    line-height: 1.3;
    padding: 8px 14px;
}

/* fmt-cell: FMT + nota icono SIEMPRE en la misma línea */
.fmt-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1;
}

/* col-desc: la columna "elástica" — absorbe el espacio sobrante.
   Una sola línea con elipsis para mantener el layout estable. */
.tabla-base .col-desc,
.tabla-base td.col-desc,
.tabla-base td.col-desc-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;          /* truco: con table-layout:auto + max-width:0 + width sin definir,
                              la celda se estira ocupando lo que sobre, pero el contenido
                              respeta el ancho real con elipsis */
    color: #111;
}

/* ══════════════════════════════════════════════════════════════
   DATATABLES — el plugin dataTables.bootstrap5 ya estiliza la
   paginacion con Bootstrap 5. Solo pisamos lo minimo necesario.
   ══════════════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_processing { display: none !important; }
.dataTables_wrapper .row { margin: 0; align-items: center; }
.dataTables_wrapper .row > [class*="col-"] { padding: 6px 10px; }

.dataTables_wrapper .dataTables_info {
    font-size: 14px;
    color: #111827;
}

.dataTables_wrapper .dataTables_paginate .page-link {
    font-size: 14px;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: #4a5568;
    border-color: #4a5568;
    color: #fff;
}

.dataTables_wrapper .dataTables_paginate .page-link {
    color: #4a5568;
}

.dataTables_wrapper .dataTables_paginate .page-link:focus {
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY DE CARGA (encima del tbody)
   ══════════════════════════════════════════════════════════════ */
.dt-overlay {
    display: none;
}
/* Mientras carga: pill anclado a una distancia fija del tope del contenedor
   de la tabla (que ya está a la derecha de la sidebar). Centrado horizontal
   dentro del contenedor — sin cuentas de sidebar. Sin centrado vertical →
   no se mueve cuando DataTables crece el contenedor (adiós escalerita). */
.dt-overlay.is-visible {
    display: flex;
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    pointer-events: none;
}

/* Sin skeleton: un solo indicador (pill) */
.dt-overlay::before,
.dt-overlay::after { content: none; display: none !important; }

@keyframes dt-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.dt-overlay__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.dt-overlay__pill i { color: #1A5C88; }

/* ══════════════════════════════════════════════════════════════
   BOTONES EN TABLA — agrupador unificado
   Markup: <td><div class="tabla-opciones">...</div></td>
   ══════════════════════════════════════════════════════════════ */
.tabla-opciones {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.tabla-opciones .btn-group { gap: 0; }
.tabla-opciones .btn-group + .btn,
.tabla-opciones .btn + .btn { margin-left: 0; }

/* Tamaño unificado para todo lo que viva en tabla-opciones.
   IMPORTANTE: NO setear border-radius acá — los botones split
   (.btn-accion-main + .btn-accion-split) necesitan esquinas
   asimétricas que vienen del bloque específico más abajo.
   Si lo setás acá, las esquinas pegadas se redondean y el
   split se ve "roto". */
.tabla-opciones > .btn,
.tabla-opciones .btn-tabla {
    height: var(--btn-tabla-h);
    padding: 0 var(--btn-tabla-px);
    font-size: var(--btn-tabla-fs);
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    text-decoration: none;
}

/* btn-accion: solo unificar tamaño, NO border-radius (lo dicta el bloque específico) */
.tabla-opciones .btn-accion-main,
.tabla-opciones .btn-accion-split,
.tabla-opciones .btn-inf-main,
.tabla-opciones .btn-inf-split,
.tabla-opciones .btn-ver-main,
.tabla-opciones .btn-ver-split {
    height: var(--btn-tabla-h);
    font-size: var(--btn-tabla-fs);
    font-weight: 400;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
}

/* Compatibilidad: btn-sm de Bootstrap dentro de tabla → mismo tamaño */
.tabla-base .btn-sm,
.tabla-opciones .btn-sm {
    height: var(--btn-tabla-h);
    padding: 0 var(--btn-tabla-px);
    font-size: var(--btn-tabla-fs);
    font-weight: 400;
    border-radius: var(--radius-sm);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Íconos dentro de botones de tabla — levemente más pequeños que el texto */
.tabla-opciones .btn i,
.tabla-opciones .btn-tabla i,
.tabla-base .btn-sm i,
.btn-accion-main i,
.btn-inf-main i,
.btn-ver-main i {
    font-size: 10px;
    line-height: 1;
}

/* Variantes semánticas (botones "sueltos" en celdas) */
.btn-tabla-primary  { background: #4EA8D8; border: none; color: rgba(255,255,255,.92); }
.btn-tabla-primary:hover  { background: #3A8EC4; color: #fff; }
.btn-tabla-edit     { background: #64748b; border: none; color: #fff; }
.btn-tabla-edit:hover     { background: #556270; color: #fff; }
.btn-tabla-success  { background: #16a34a; border: none; color: #fff; }
.btn-tabla-success:hover  { background: #15803d; color: #fff; }
.btn-tabla-danger   { background: #e05555; border: none; color: #fff; }
.btn-tabla-danger:hover   { background: #cc4444; color: #fff; }
.btn-tabla-warning  { background: #f59e0b; border: none; color: #fff; }
.btn-tabla-warning:hover  { background: #d97706; color: #fff; }
.btn-tabla-ghost    { background: transparent; border: 1px solid var(--border); color: var(--text-soft); }
.btn-tabla-ghost:hover    { background: var(--surface-2); color: var(--text-h); border-color: var(--text-muted); }

/* Compat: .table .btn-warning/.btn-danger/.btn-success
   → necesario solo mientras queden vistas con clases viejas */
.tabla-base .btn-warning             { background: #e8e8e8; border-color: #bbb;     color: #444; }
.tabla-base .btn-warning:hover       { background: #d4881f; border-color: #d4881f; color: #fff; }
.tabla-base .btn-danger              { background: #fde8e8; border-color: #f5aaaa; color: #b91c1c; }
.tabla-base .btn-danger:hover        { background: #c0392b; border-color: #c0392b; color: #fff; }
.tabla-base .btn-success             { background: #d8f5eb; border-color: #6ee7b7; color: #065f46; }
.tabla-base .btn-success:hover       { background: #059669; border-color: #059669; color: #fff; }
.tabla-base .btn-info                { background: #3a8fad; border-color: #3a8fad; color: #fff; }
.tabla-base .btn-info:hover          { background: #2d7a96; border-color: #2d7a96; }

/* ══════════════════════════════════════════════════════════════
   BOTÓN ACCIÓN SPLIT (Adjuntar / Ver / Informar + dropdown)
   ══════════════════════════════════════════════════════════════ */
.btn-accion-main,
.btn-inf-main,
.btn-ver-main {
    background:    #4EA8D8;
    color:         rgba(255,255,255,.95);
    border:        none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding:       0 9px;
    font-size:     11px;
    font-weight:   500;
    height:        22px;
    display:       inline-flex;
    align-items:   center;
    white-space:   nowrap;
    transition:    background .12s;
    text-decoration: none;
    line-height:   1;
    letter-spacing: .01em;
}
.btn-accion-main:hover,
.btn-inf-main:hover,
.btn-ver-main:hover {
    background: #3A8EC4;
    color: #fff;
}

/* Standalone (sin split): todas las esquinas redondeadas */
.btn-adjuntar-orden {
    border-radius: var(--radius-sm);
}

.btn-accion-split,
.btn-inf-split,
.btn-ver-split {
    background:    #3A8EC4;
    color:         rgba(255,255,255,.75);
    border:        none;
    border-left:   1px solid rgba(255,255,255,.18);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding:       0 8px;
    height:        22px;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    line-height:   1;
    transition:    background .12s, color .12s;
    cursor:        pointer;
    font-size:     11px;
}
.btn-accion-split:hover,
.btn-inf-split:hover,
.btn-ver-split:hover {
    background: #2E78AE;
    color: #fff;
}

.btn-abrir-inf.btn-accion-main {
    height: 22px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 500;
    background: #4EA8D8;
    color: rgba(255,255,255,.94);
    border: none;
}
.btn-abrir-inf.btn-accion-main:hover {
    background: #3A8EC4;
    color: #fff;
}
.btn-abrir-inf.btn-accion-split {
    height: 22px;
    padding: 0 8px;
    background: #3A8EC4;
    color: rgba(255,255,255,.72);
    border: none;
    border-left: 1px solid rgba(255,255,255,.18);
}
.btn-abrir-inf.btn-accion-split:hover {
    background: #2E78AE;
    color: #fff;
}

.btn-accion-icon { font-size: 10px; }

/* ══════════════════════════════════════════════════════════════
   DROPDOWN — z-index alto, SIN tocar el posicionamiento de Popper
   ══════════════════════════════════════════════════════════════ */
.dropdown-menu        { z-index: 9999; }
.tabla-dropdown       { min-width: 210px; padding: 6px; border-radius: 8px; }
.tabla-dropdown .dropdown-item {
    padding: 10px 14px; border-radius: 5px;
    font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-h, #1e2b38);
    display: flex; align-items: center;
}
.tabla-dropdown .dropdown-item:hover { background: var(--surface-2, #f0f4f8); color: var(--blue, #1a5c85); }
.tabla-dropdown .dropdown-item + li { margin-top: 2px; }
.tabla-dropdown .dropdown-item i { font-size: 13px; width: 20px; text-align: center; flex-shrink: 0; }
/* OJO: NO setear position/top/right/inset/transform sobre .tabla-dropdown.
   Bootstrap 5 + Popper.js posiciona el menú con transform inline.
   Si lo sobreescribís, el menú queda pegado al td. */


/* ══════════════════════════════════════════════════════════════
   BOTÓN PRIMARIO DEL SISTEMA (Nueva orden / Filtrar / etc.)
   Aplicar como: class="btn btn-sistema"
   ══════════════════════════════════════════════════════════════ */
.btn-sistema {
    background: var(--sistema);
    color: #fff;
    border: 1px solid var(--sistema-dark);
    border-radius: var(--radius-sm);
    padding: 7px 22px;
    font-size: 14px;
    font-weight: 400;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
    line-height: 1.5;
}
/* Altura unificada 38px para form-control-sm / form-select-sm globales */
.form-select-sm, .form-control-sm { font-size: 13px; padding: 4px 8px; height: 38px; }
.form-select-sm { padding-right: 24px; }
.input-group-sm .form-control,
.input-group-sm .input-group-text { height: 38px; font-size: 13px; }
/* page-header btn sizing → see modules.css */
.btn-sistema:hover { background: var(--sistema-dark); color: #fff; border-color: #007a6f; }

/* ══════════════════════════════════════════════════════════════
   BOTONES PERÍODO (Hoy / Semana / Todos)
   ══════════════════════════════════════════════════════════════ */
.btn-periodo {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 14px;
    line-height: 1.4;
    transition: background-color .12s, color .12s, border-color .12s;
}
.btn-periodo:focus,
.btn-periodo:active,
.btn-group .btn-periodo:focus,
.btn-group .btn-periodo:active {
    box-shadow: none;
    outline: none;
}
.btn-periodo--active,
.btn-periodo--active:hover,
.btn-periodo--active:focus,
.btn-periodo--active:active,
.btn-group .btn-periodo--active {
    background-color: var(--sistema);
    border-color:     var(--sistema-dark);
    color:            #fff;
    box-shadow: none;
}
.btn-group > .btn-outline-secondary:not(.btn-periodo--active):hover {
    background-color: var(--surface-2);
    color: var(--text-h);
}

/* ══════════════════════════════════════════════════════════════
   TRIAGE / DOTS / PATIENT CELL
   ══════════════════════════════════════════════════════════════ */
.triage-badge {
    display: inline-flex; align-items: center; justify-content: center;
    height: 22px; min-width: 22px; padding: 0 8px;
    border-radius: 4px;
    font-size: 11px; font-weight: 400; line-height: 1;
    margin-right: 6px; flex-shrink: 0; vertical-align: middle;
}

/* NORMAL (gris neutro) */
.triage-n {
  background: #9ca3af;
  color: #fff;
}

/* PRIORITARIO (ámbar dorado encendido) */
.triage-p {
  background: #d97706;
  color: #fffbeb;
}

/* URGENTE (carmísí clínico) */
.triage-u {
  background: #c0152a;
  color: #fff;
}

.triage-badge.triage-off {
    opacity: .35;
    filter: grayscale(.6);
}

/* Pinta toda la fila cuando el triaje está encendido (no informado) */
.tabla-base.dataTable tbody tr:has(.triage-u:not(.triage-off)) td,
.tabla-base.dataTable tbody tr:has(.triage-u:not(.triage-off)) > * { background-color: rgba(210, 40, 60, 0.13) !important; }
.tabla-base.dataTable tbody tr:has(.triage-p:not(.triage-off)) td,
.tabla-base.dataTable tbody tr:has(.triage-p:not(.triage-off)) > * { background-color: rgba(217, 119, 6,  0.22) !important; }

.dot-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-green  { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.20); }
.dot-gray   { background: #cbd5e1; }

.patient-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.patient-dot {
    width: 13px; height: 13px; border-radius: 50%;
    display: inline-block; cursor: pointer; flex-shrink: 0;
    transition: transform .15s; text-decoration: none;
}
.patient-dot:hover { transform: scale(1.35); }
.patient-dot.loading { animation: dotPulse .6s ease-in-out infinite alternate; }
@keyframes dotPulse {
  from { transform: scale(1);   opacity: .4; }
  to   { transform: scale(1.4); opacity: 1;  }
}
.dot-first { background: #cbd5e1; box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.dot-other { background: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.18); }
.dot-same  { background: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.20); }
.patient-name { font-size: 13.5px; color: var(--text-h); font-weight: 300; text-decoration: none; text-transform: uppercase; }
.patient-name:hover { text-decoration: underline; color: var(--blue); }

/* Nota icono */
.nota-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text-muted);
  cursor: help;
  font-size: 16px;
  transition: color .13s;
}

.nota-icono--sm {
  font-size: 13px;
  flex-shrink: 0;
}

.nota-badge.nota-icono {
  padding: 0;
  max-width: none;
  justify-content: center;
}

/* Tipo cell / Fmt */
.tipo-cell { display: flex; align-items: center; gap: 5px; }
.tipo-label, .fmt-label { font-size: 13px; color: var(--text); }
.fmt-label { cursor: help; font-weight: 400; }

/* Fecha compacta */
.fecha-inline { font-size: 14px; white-space: nowrap; color: var(--text); font-weight: 400; }

/* Celda fecha: texto + ícono log al lado, mismo font que el resto */
.fecha-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.fecha-cell .fecha-text {
    font-size: 14px;
    color: var(--text);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 108px;
}
.fecha-cell .fecha-log-link {
    color: #6b7280;
    font-size: 13px;
    text-decoration: none;
    transition: color .12s;
    line-height: 1;
}
.fecha-cell .fecha-log-link:hover {
    color: #575c67;
}

/* Desc compact con ellipsis */
.desc-compact {
    display: inline-block; max-width: 240px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 14px;
    vertical-align: middle;
}

/* Tipo badge — color único, ancho fijo */
.tipo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 22px;
  min-width: 44px;
  max-width: 56px;

  padding: 0 6px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;

  border-radius: 4px;

  background: #dadee5;
  color: #1f2937;
  border: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  box-sizing: border-box;
}

.turno-desc-txt   { font-size: 11px; font-weight: 600; color: #334155; letter-spacing: .2px; cursor: default; white-space: nowrap; }
.turno-desc-empty { font-size: 11px; color: #94a3b8; }

.turno-tipo-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    padding: 3px 7px; border-radius: 4px;
    min-width: 44px; text-align: center;
    letter-spacing: .2px;
    background: #4a6fa5; color: #fff;
}

/* Estados de turno */
.estado-badge {
    font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap; min-width: 48px; height: 22px;
    border: none; cursor: default;
    transition: filter .12s;
}
.estado-badge:hover { filter: brightness(.88); }
.estado-programado   { background: #1a5c85; color: #fff; }
.estado-reprogramado { background: #0e7490; color: #fff; }
.estado-atendido     { background: #16a34a; color: #fff; }
.estado-ausente      { background: #d97706; color: #fff; }
.estado-cancelado    { background: #64748b; color: #fff; }

/* Filas semánticas (staff) */
.row-staff-admin   td { background-color: #fff8f8; }
.row-staff-medico  td { background-color: #f6fef9; }
.row-staff-tecnico td { background-color: #f8fafc; }

.badge-staff         { display: inline-block; border-radius: 3px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.badge-staff-admin   { background: #fee2e2; color: #7f1d1d; border: 1px solid #d47a7a; }
.badge-staff-medico  { background: #dcfce7; color: #0f2a1a; border: 1px solid #6ad48e; }
.badge-staff-tecnico { background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; }

/* Botón llamar / rellamar / atendido */
.btn-llamar, .btn-rellamar, .btn-atendido {
    border: none; box-shadow: none;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    height: 22px; padding: 0 9px; font-size: 11px; line-height: 1;
}
.btn-llamar         { background: #4EA8D8; color: #fff; font-weight: 400; }
.btn-llamar:hover   { background: #3A8EC4; color: #fff; }
.btn-rellamar       { background: #f1f3f5; color: #6c757d; font-weight: 400; }
.btn-rellamar:hover { background: #e2e6ea; color: #5a6268; }
.btn-atendido.btn-success         { background: #4EA8D8; color: #fff; font-weight: 400; }
.btn-atendido.btn-success:hover   { background: #3A8EC4; color: #fff; }
.btn-atendido.btn-outline-secondary         { background: transparent; color: var(--text-muted); font-weight: 400; }
.btn-atendido.btn-outline-secondary:hover   { background: var(--surface-2); color: var(--text-h); }
.btn-llamar:focus, .btn-rellamar:focus, .btn-atendido:focus {
    outline: none; box-shadow: none;
}
.btn-redo-icon { font-size: 11px; margin-left: 4px; }

/* Estado informado / no requiere */
.inf-status--ok {
    background: #e9ecef;
    color: #6c757d;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-block;
}

/* ══════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════ */
.form-control, .form-select {
    font-size: 14px; border-color: var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 11px; color: var(--text); font-weight: 500;
}
.form-control:focus, .form-select:focus {
    border-color: #7baed6;
    box-shadow: 0 0 0 3px rgba(30,95,160,.10);
}
.form-label { font-size: 13.5px; font-weight: 600; color: #000; margin-bottom: 4px; }
.input-group-text { background: var(--surface-2); border-color: var(--border); font-size: 12px; color: var(--text-muted); }

/* btn-sm de Bootstrap (fuera de tabla) */
.btn-sm {
    padding: 4px 12px;
    font-size: 12.5px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.btn-sm .badge { line-height: 1; vertical-align: middle; }

/* Filtros estándar */
.filtro-tipo   { width: 160px; }
.filtro-buscar { width: 200px; }

/* ══════════════════════════════════════════════════════════════
   MODAL / ALERTS / NAV-TABS
   ══════════════════════════════════════════════════════════════ */
.modal-header {
    background: #f1f5f9;
}

.alert         { font-size: 14px; font-weight: 500; border-radius: var(--radius); border: none; }
.alert-success { background: var(--green-bg); color: #065f46; border: 1px solid var(--green-border); }
.alert-danger  { background: var(--red-bg);   color: #3a1414; border: 1px solid #fecaca; }

.nav-tabs .nav-link             { color: var(--text-soft); font-size: 13.5px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs .nav-link:hover       { color: var(--blue); background: var(--blue-light); }
.nav-tabs .nav-link.active      { color: var(--blue); font-weight: 700; border-bottom: 2px solid var(--blue); background: #fff; }

/* ══════════════════════════════════════════════════════════════
   PANEL INFO PACIENTE / POPOVER
   El JS crea el panel con id="infoPacPanel" — NO renombrar.
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   PANEL INFO PACIENTE / POPOVER (mejorado spacing + aire)
   ══════════════════════════════════════════════════════════════ */

@keyframes popSlideUp {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes popFadeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(4px) scale(.97); }
}

#infoPacPanel,
.info-pac-panel,
.info-pac-panel-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow: hidden;
  animation: popSlideUp .2s cubic-bezier(.22,.68,0,1.1) both;
  font-size: 14px;
}

/* HEADER */
.pac-panel-header {
  background: var(--sb-bg);
  color: rgba(220,235,250,.92);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* BODY */
.pac-panel-body {
  padding: 14px 18px 14px;
}

/* NOMBRE */
.pac-panel-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-h);
  margin-bottom: 8px;
  line-height: 1.35;
}

/* ROWS */
.pac-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}

.pac-panel-row span {
  color: var(--text-muted);
  font-size: 12.5px;
}

.pac-panel-row strong {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-h);
}

/* DIVIDER */
.pac-panel-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 0;
}

/* TIPOS */
.pac-panel-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* BADGES */
#infoPacPanel .tipo-badge,
.pac-panel-tipos .tipo-badge,
.popover-paciente .tipo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  min-width: unset;
  max-width: unset;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 999px;
  padding: 3px 9px;
  text-decoration: none;
  background: #dce2ea;
  color: #1f2937;
  border: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

#infoPacPanel .tipo-badge:hover,
.pac-panel-tipos .tipo-badge:hover,
.popover-paciente .tipo-badge:hover {
  background: #c8d0d9;
  color: #111827;
}

#infoPacPanel .tipo-count,
.pac-panel-tipos .tipo-count,
.popover-paciente .tipo-count {
  font-size: 11px;
  font-weight: 600;
  background: rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 1px 8px;
  color: inherit;
}

/* ACTIVO — mismo tipo que el estudio actual */
#infoPacPanel .tipo-activo,
.pac-panel-tipos .tipo-activo,
.popover-paciente .tipo-activo {
  background: #16A48F;
  color: #fff;
  border-color: transparent;
}

#infoPacPanel .tipo-activo:hover,
.pac-panel-tipos .tipo-activo:hover,
.popover-paciente .tipo-activo:hover {
  background: #12907C;
  color: #fff;
}

#infoPacPanel .tipo-activo .tipo-count,
.pac-panel-tipos .tipo-activo .tipo-count,
.popover-paciente .tipo-activo .tipo-count {
  background: rgba(0,0,0,.18);
  color: #fff;
}

/* POPOVER */
.popover-paciente {
  min-width: 260px;
  max-width: 320px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow: hidden;
}

.popover-paciente .popover-header {
  font-size: 13px;
  font-weight: 700;
  padding: 12px 16px;
  background: var(--sb-bg);
  color: rgba(220,235,250,.92);
  border-bottom: none;
}

.popover-paciente .popover-body {
  padding: 14px 16px 12px;
}

.popover-paciente .popover-arrow,
.popover-paciente.bs-popover-start,
.popover-paciente.bs-popover-end {
  display: none;
}

/* LOADING */
.pac-panel-loading {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}
/* ══════════════════════════════════════════════════════════════

/* Hide DataTables default length/search row - we use custom filters */
.app-card.table-card .dataTables_wrapper .dataTables_length,
.app-card.table-card .dataTables_wrapper .dataTables_filter { display: none; }

/* ── DataTables processing — hidden, we use custom dt-overlay ───── */
div.dataTables_processing { display: none !important; }

/* ── Small online dot for pacientes table ───────────────────────── */
.dot-online-sm {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-bottom: 1px;
    margin-right: 14px;
    flex-shrink: 0;
}
.dot-online-sm.dot-online  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.20); }
.dot-online-sm.dot-offline { background: #cbd5e1; }

/* ── Pacientes table — nombre/apellido match estudios descripción ── */
#tablaPacientes td { font-size: 14px; font-weight: 400; color: #111; }
#tablaPacientes td.col-pac-nombre,
#tablaPacientes td.col-pac-apellido { text-transform: uppercase; font-weight: 400; }

/* ── Tabla compacta (logs) ───────────────────────────────────────── */
.tabla-base.tabla-compacta td  { padding: 9px 12px !important; font-size: 14px; line-height: 1.3; }
.tabla-base.tabla-compacta thead th  { padding: 9px 12px !important; }
/* Links en tabla: color pero sin underline */
.tabla-compacta td a { text-decoration: none; color: var(--blue); }
.tabla-compacta td a:hover { text-decoration: none; color: var(--blue-hover); }

/* Log: texto un poco más grande + links en azul más oscuro */
#tablaLog td, #tablaLog thead th,
#tablaAdmin td, #tablaAdmin thead th { font-size: 15px; }
#tablaLog td a, #tablaAdmin td a { color: #0a4f73; }
#tablaLog td a:hover, #tablaAdmin td a:hover { color: #063a56; }
/* Anchos columna mensaje -20%, paciente +20% */
#tablaLog thead th:nth-child(2),
#tablaLog tbody td:nth-child(2) { width: 44% !important; }
#tablaLog thead th:nth-child(4),
#tablaLog tbody td:nth-child(4) { width: 22% !important; }

/* ── Botones de acción en tabla de turnos ────────────────────── */
/* Orden: ámbar cálido */
.btn-orden-generar {
    background: #f59e0b; color: #fff; border: none;
    font-weight: 600; font-size: 12px; letter-spacing: .2px;
    transition: background .15s;
}
.btn-orden-generar:hover { background: #d97706; color: #fff; }

/* Reprogramar: slate suave — neutro profesional */
.btn-reprogramar {
    background: #d4d8dd; color: #334155; border: none;
    font-size: 12px; border-radius: var(--radius-sm);
    transition: background .12s, color .12s;
}
.btn-reprogramar:hover { background: rgb(184, 193, 204); color: #0f172a; }

/* Botones disabled en tabla de turnos — bien apagados */
.tabla-opciones .btn:disabled,
.tabla-opciones .btn[disabled] {
    opacity: .22;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.4);
}

/* ── Drop zone para DICOM ────────────────────────────────────── */
.drop-zone {
    border: 2px dashed #adb5bd;
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.drop-zone:hover,
.drop-zone--active { border-color: var(--sistema); background: #f0f9f6; }

/* 1366px: menos aire horizontal y titulos largos con elipsis */
@media (min-width: 1000px) and (max-width: 1400px) {
    .tabla-opciones {
        gap: 4px;
    }

    .desc-compact {
        display: inline-block;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}