/* =====================================================================================
 *  PANTALLA ALTAS — Hospitalizado (render en cliente, sin DataTable)
 *  Estética coherente con el módulo hospitalizado.
 *
 *  Reutiliza los tokens --ct-* declarados en :root por configTratamiento.css
 *  (cargado ANTES que este archivo en hospitalizadoAltas.php):
 *    --ct-primary #1a6fc4 · --ct-header #1c2a3a · --ct-success #198754
 *    --ct-warning #f0ad4e · --ct-danger #dc3545 · --ct-muted #6c757d
 *    --ct-bg #f4f6f9 · --ct-card-bg #ffffff · --ct-border #dee2e6
 *
 *  El header (.lp-header-bar) y el botón refrescar (.lp-btn-refrescar) ya existen
 *  en configTratamiento.css y se reutilizan tal cual desde el markup.
 *
 *  El menú de acciones de la fila reutiliza el dropdown LOCAL del módulo
 *  (.lp-card-acciones-wrap / .lp-btn-acciones / .lp-acciones-menu / .lp-accion-item),
 *  definido en configTratamiento.css. Aquí solo se agregan los overrides de tabla
 *  (esas reglas viven bajo .lp-tabla y no aplican a .al-tabla).
 *
 *  TODO scopeado bajo #pantallaAltas.
 * ===================================================================================== */

/* Wrapper de pantalla — mismo fondo del módulo */
#pantallaAltas {
  background: var(--ct-bg);
  min-height: 100%;
  padding-bottom: 24px;
}

/* ── Pestañas (estado de pago) ─────────────────────────────────────────────── */
#pantallaAltas .al-tabs {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 14px 0;
}

#pantallaAltas .al-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ct-card-bg);
  color: var(--ct-muted);
  border: 1px solid var(--ct-border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
}

#pantallaAltas .al-tab > i {
  font-size: 13px;
}

#pantallaAltas .al-tab:hover {
  background: #f0f4fa;
  color: #1c2a3a;
  border-color: #c5d3e3;
}

/* Pestaña activa: azul del módulo, texto blanco */
#pantallaAltas .al-tab.activo {
  background: var(--ct-primary);
  color: #fff;
  border-color: var(--ct-primary);
}

/* Subtítulo "últimos 30" — chico y tenue */
#pantallaAltas .al-tab-nota {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.7;
}

/* ── Toolbar (buscador + refrescar) ───────────────────────────────────────── */
#pantallaAltas .al-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 12px 14px 0;
  background: var(--ct-card-bg);
  border: 1px solid var(--ct-border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(28, 42, 58, 0.04);
}

#pantallaAltas .al-buscador {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 320px;
  flex-wrap: wrap;
}

/* El select de tipo de filtro queda acotado; el input de valor crece */
#pantallaAltas .al-buscador > select {
  max-width: 190px;
  flex: 0 0 auto;
}

#pantallaAltas .al-buscador > input[type="text"] {
  flex: 1 1 160px;
  min-width: 140px;
}

/* El botón refrescar (.lp-btn-refrescar, ya definido) se empuja a la derecha */
#pantallaAltas .al-toolbar .lp-btn-refrescar {
  margin-left: auto;
}

/* ── Spinner de carga ─────────────────────────────────────────────────────── */
#pantallaAltas .al-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--ct-muted);
  font-size: 14px;
}

#pantallaAltas .al-spinner > i {
  font-size: 18px;
}

/* ── Tabla ────────────────────────────────────────────────────────────────── */
/* overflow VISIBLE (no overflow-x:auto) para que el dropdown de acciones no se
 * recorte contra el borde del wrapper. El desborde horizontal en pantallas
 * medianas se aborda aparte. */
#pantallaAltas .al-tabla-wrap {
  overflow: visible;
  background: var(--ct-card-bg);
  border: 1px solid var(--ct-border);
  border-radius: 10px;
  margin: 12px 14px 0;
  box-shadow: 0 1px 3px rgba(28, 42, 58, 0.04);
}

#pantallaAltas .al-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: var(--ct-card-bg);
}

/* Header del módulo: fondo azulado suave, texto medio, borde inferior marcado */
#pantallaAltas .al-tabla thead th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left;
  color: var(--ct-muted);
  background: #f0f4fa;
  border-bottom: 2px solid var(--ct-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
}

#pantallaAltas .al-tabla thead th > i {
  color: var(--ct-primary);
  margin-right: 4px;
}

#pantallaAltas .al-tabla tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ct-border);
  vertical-align: middle;
  color: #1c2a3a;
}

#pantallaAltas .al-tabla tbody tr:last-child td {
  border-bottom: none;
}

#pantallaAltas .al-tabla tbody tr:hover td {
  background: #f4f8ff;
}

/* Columnas angostas y centradas */
#pantallaAltas .al-col-cobrar {
  width: 110px;
  text-align: center;
}

#pantallaAltas .al-col-acciones {
  width: 120px;
  text-align: center;
}

/* ── Celdas (contenido apilado) ───────────────────────────────────────────── */
#pantallaAltas .al-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#pantallaAltas .al-cell-title {
  font-weight: 600;
  color: #1c2a3a;
  font-size: 13px;
}

#pantallaAltas .al-cell-sub {
  font-size: 12px;
  color: var(--ct-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#pantallaAltas .al-cell-sub > i {
  font-size: 11px;
}

#pantallaAltas .al-cell-id {
  font-size: 10px;
  color: var(--ct-muted);
  opacity: 0.75;
}

#pantallaAltas .al-cell-time {
  font-size: 10px;
  color: var(--ct-muted);
  opacity: 0.85;
}

#pantallaAltas .al-text-center {
  text-align: center;
  align-items: center;
}

#pantallaAltas .al-muted {
  color: var(--ct-muted);
}

/* ── Botones de la columna Cobrar ─────────────────────────────────────────────
 *  Estética sobria coherente con los botones lp-/ct- del módulo. Reutiliza los
 *  tokens --ct-* (nada de paleta nueva). Tres botones:
 *    .al-btn-cobrar   → acción principal de cobro (relleno ROJO --ct-danger)
 *    .al-btn-boleta   → ver boleta ya pagada (suave verdoso, se rellena en hover)
 *    .al-btn-deshacer → retroceder a hospitalización (ícono; relleno NARANJO #fd7e14)
 * --------------------------------------------------------------------------- */
#pantallaAltas .al-acc-cobrar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Base compartida de los botones con etiqueta (Cobrar / Boleta) */
#pantallaAltas .al-btn-pago {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#pantallaAltas .al-btn-pago > i {
  font-size: 11px;
}

/* Acción principal: cobrar → relleno ROJO del módulo */
#pantallaAltas .al-btn-cobrar {
  background: var(--ct-danger);
  color: #fff;
  border-color: var(--ct-danger);
}

#pantallaAltas .al-btn-cobrar:hover {
  background: #b02a37;
  border-color: #b02a37;
}

/* Ver boleta (ya pagado): estilo suave verdoso, menos peso; se rellena en hover */
#pantallaAltas .al-btn-boleta {
  background: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

#pantallaAltas .al-btn-boleta:hover {
  background: var(--ct-success);
  color: #fff;
  border-color: var(--ct-success);
}

/* Retroceder a hospitalización (deshacer alta): ícono solo, relleno NARANJO */
#pantallaAltas .al-btn-deshacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
  background: #fd7e14;
  color: #fff;
  border: 1px solid #fd7e14;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#pantallaAltas .al-btn-deshacer > i {
  font-size: 12px;
}

#pantallaAltas .al-btn-deshacer:hover {
  background: #e8690b;
  border-color: #e8690b;
  color: #fff;
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
#pantallaAltas .al-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
  white-space: nowrap;
  width: fit-content;
}

#pantallaAltas .al-badge > i {
  font-size: 9px;
}

#pantallaAltas .al-badge-pagado {
  background: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

#pantallaAltas .al-badge-pendiente {
  background: #fff3cd;
  color: #856404;
  border-color: #ffeeba;
}

#pantallaAltas .al-badge-info {
  background: #d1ecf1;
  color: #0c5460;
  border-color: #bee5eb;
}

/* ── Estado vacío ─────────────────────────────────────────────────────────── */
#pantallaAltas .al-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  margin: 12px 14px 0;
  background: var(--ct-card-bg);
  border: 1px dashed var(--ct-border);
  border-radius: 10px;
  text-align: center;
  color: var(--ct-muted);
}

#pantallaAltas .al-vacio-icon {
  font-size: 56px;
  color: #c5d3e3;
  margin-bottom: 12px;
}

#pantallaAltas .al-vacio-titulo {
  font-size: 15px;
  font-weight: 700;
  color: #1c2a3a;
  margin: 0 0 4px;
}

#pantallaAltas .al-vacio-texto {
  font-size: 13px;
  color: var(--ct-muted);
  margin: 0;
}

/* =====================================================================================
 *  DROPDOWN DE ACCIONES EN LA TABLA
 *  El markup usa las clases LOCALES del módulo (.lp-card-acciones-wrap /
 *  .lp-btn-acciones / .lp-acciones-menu, definidas en configTratamiento.css).
 *  Pero esos overrides de tabla del módulo están scopeados a .lp-tabla; nuestra
 *  tabla es .al-tabla, así que se replican aquí bajo #pantallaAltas .al-tabla.
 * ===================================================================================== */

/* Contenedor del dropdown: ancla de posicionamiento absoluto para el menú */
#pantallaAltas .lp-card-acciones-wrap {
  position: relative;
  display: inline-block;
}

/* Botón ícono en fila blanca (mismo criterio que .lp-tabla .lp-btn-acciones) */
#pantallaAltas .al-tabla .lp-btn-acciones {
  background: transparent;
  color: var(--ct-muted);
  border: 1px solid var(--ct-border);
  width: 32px;
  height: 32px;
}

#pantallaAltas .al-tabla .lp-btn-acciones:hover {
  background: #eef4ff;
  color: var(--ct-primary);
}

/* Menú desplegable: se alinea a la DERECHA del botón para no cortarse contra el
 * borde de la tabla (la columna Acciones es la última). */
#pantallaAltas .lp-acciones-menu {
  min-width: 230px;
  left: auto;
  right: 0;
  max-height: 380px;
  overflow-y: auto;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  #pantallaAltas .al-tabs,
  #pantallaAltas .al-toolbar,
  #pantallaAltas .al-tabla-wrap,
  #pantallaAltas .al-vacio {
    margin-left: 10px;
    margin-right: 10px;
  }

  #pantallaAltas .al-buscador {
    flex: 1 1 100%;
  }

  #pantallaAltas .al-buscador > select {
    max-width: none;
    flex: 1 1 100%;
  }

  #pantallaAltas .al-toolbar .lp-btn-refrescar {
    margin-left: 0;
  }

  /* La tabla mantiene su ancho mínimo y scrollea en X sin romper el layout */
  #pantallaAltas .al-tabla {
    min-width: 720px;
  }
}

/* =====================================================================================
 *  SKIN DE DIÁLOGOS SweetAlert2 — pantalla Altas (.al-swal)
 *  --------------------------------------------------------------------------------
 *  Los popups de SweetAlert2 se montan en <body>, FUERA de #pantallaAltas, por eso
 *  estas reglas NO van scopeadas bajo #pantallaAltas: usan la clase `.al-swal` que
 *  el JS agrega vía customClass.popup (Swal.mixin). Aun así están AISLADAS:
 *    · este archivo solo se carga en la pantalla Altas, y
 *    · la clase `.al-swal` solo la ponen los Swal de Altas.
 *  No afecta otras URLs ni otros popups del sistema.
 *
 *  Reutiliza los tokens --ct-* (declarados en configTratamiento.css, cargado antes):
 *    --ct-primary #1a6fc4 · --ct-header #1c2a3a · --ct-muted #6c757d
 *    --ct-border #dee2e6 · --ct-bg #f4f6f9
 *  Radios/sombras/pesos coherentes con el resto del módulo (radius popup ~12px,
 *  botones ~6px, sombra suave azulada).
 *
 *  IMPORTANTE sobre los colores de botón: varios Swal fijan `confirmButtonColor`
 *  inline (ámbar #f0ad4e para "deshacer", verde #28a745 para "generar boleta").
 *  Esos colores semánticos DEBEN prevalecer, por eso aquí NO se usa `!important`
 *  en el `background` de los botones: solo se define forma/padding/radius y el
 *  color inline (cuando existe) gana; cuando no existe, manda el azul --ct-primary.
 * ===================================================================================== */

/* Popup: caja coherente con las cards del módulo */
.al-swal {
  border-radius: 12px;
  padding: 22px 24px 18px;
  border: 1px solid var(--ct-border);
  box-shadow: 0 18px 48px rgba(28, 42, 58, 0.22);
  color: var(--ct-header);
  font-size: 13px;
}

/* Título: color header del módulo, peso fuerte, tamaño contenido */
.al-swal .swal2-title {
  color: var(--ct-header);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 4px 0 0;
}

/* Cuerpo HTML: texto legible; las tablas/listas internas respiran mejor */
.al-swal .swal2-html-container {
  font-size: 13px;
  color: #2b3b52;
  line-height: 1.5;
  margin: 12px 0 4px;
  text-align: left;
}

/* Tablas Bootstrap (.table) que algunos Swal inyectan en el html */
.al-swal .swal2-html-container .table {
  font-size: 12.5px;
  color: #1c2a3a;
  margin-bottom: 8px;
}

.al-swal .swal2-html-container .table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ct-muted);
}

/* Zona de acciones: separación cómoda respecto al cuerpo */
.al-swal .swal2-actions {
  gap: 10px;
  margin-top: 18px;
}

/* Forma base compartida por los tres botones (color lo aporta cada botón/inline) */
.al-swal .swal2-confirm,
.al-swal .swal2-cancel,
.al-swal .swal2-deny {
  border-radius: 7px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Confirm por defecto: azul del módulo.
 * SIN !important a propósito → si el JS fija confirmButtonColor inline
 * (ámbar/verde semántico), ese color gana; si no, manda --ct-primary. */
.al-swal .swal2-confirm {
  background: var(--ct-primary);
  color: #fff;
}

/* Cancel: gris suave tipo outline, en línea con .lp-swal-medico__btn--cancelar */
.al-swal .swal2-cancel {
  background: #fff;
  color: var(--ct-muted);
  border-color: var(--ct-border);
}

.al-swal .swal2-cancel:hover {
  background: var(--ct-bg);
  color: #2b3b52;
  border-color: #c7ced6;
}

/* Foco de teclado accesible sin halo grueso del default de Swal */
.al-swal .swal2-confirm:focus,
.al-swal .swal2-cancel:focus,
.al-swal .swal2-deny:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.22);
}

/* Botón "Imprimir" (.btn.btn-outline-primary de Bootstrap) que se inyecta dentro
 * del resumen: pequeño ajuste para que combine con el radio del módulo. Forma
 * únicamente; el color outline lo sigue dando Bootstrap. */
.al-swal .swal2-html-container .btn-outline-primary {
  border-radius: 6px;
  font-weight: 600;
}