/* =========================================================================
   Sistema de Diseño SisCréditos · DS-SC-001
   Hoja única de tokens + componentes (§02–06 del documento normativo).
   Refactoriza las clases YA existentes en las vistas; no crea elementos.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;800&display=swap');

:root {
  /* Superficies */
  --surface-0: #0E1013;
  --surface-1: #171A20;
  --surface-2: #21252E;
  --surface-3: #2C313C;
  --navy-900: #0A1730;
  --border-subtle: #3A3F49;

  /* Texto y acentos */
  --text-primary: #F2F5F8;
  --text-secondary: #A9B2BF;
  --text-tertiary: #79828F;      /* solo surface-0/1 */
  --green-400: #5BD65B;
  --green-500: #3FBF3F;
  --warning: #F2C230;
  --danger-400: #E05B5B;         /* solo surface-0/1 */
  --danger-300: #F08A8A;         /* texto sobre cat-risk */
  --info-400: #5FB8E8;

  /* Categorías y botones */
  --cat-action: #0E3B33;
  --cat-info: #12275C;
  --cat-risk: #6E1414;
  --btn-primary: #1D6FA5;
  --btn-destructive: #B02A2A;

  /* Marca */
  --brand-navy-500: #1B3A6B;

  /* Espaciado (base 4) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Tipografía */
  --font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --type-display-kpi: 700 34px/40px var(--font-family);
  --type-title-page: 700 22px/28px var(--font-family);
  --type-title-section: 700 16px/22px var(--font-family);
  --type-body: 400 14px/21px var(--font-family);
  --type-data: 400 13px/18px var(--font-family);
  --type-label: 600 12px/16px var(--font-family);
  --type-caption: 400 11px/15px var(--font-family);

  /* Interacción */
  --touch-target-min: 44px;
  --focus-ring: 2px solid var(--green-500);
  --overlay-veil: rgba(0, 0, 0, 0.55);
}

/* ---------- Reset y base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font: var(--type-body);
  background-color: var(--surface-0);
  color: var(--text-primary);
  min-height: 100vh;
}

a { color: var(--green-400); }

/* Cifras comparables verticalmente: tabular-nums obligatorio (§03) */
table, .data-table, .datagrid, input, .kpi-value, .num { font-variant-numeric: tabular-nums; }

/* Anillo de foco visible en navegación por teclado (§4.4) */
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ---------- Zona 1 · Header de marca (navbar / app-header) ---------- */
.navbar,
.app-header {
  background-color: var(--navy-900);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
}

.logo-container, .header-left, .header-right { display: flex; align-items: center; gap: var(--sp-3); }

/* Lockup Grupo Cash (navy sobre blanco): contenedor claro que garantiza
   legibilidad sobre el header oscuro. El SVG trae el fondo blanco redondeado. */
.logo-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2);
}
.logo { height: 32px; display: block; }

.nav-icons {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}

.nav-icon-group {
  position: relative;
}

.nav-icon-trigger {
  min-height: 44px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.nav-icon-trigger:hover,
.nav-icon-trigger:focus-visible {
  background-color: var(--surface-2);
  border-color: var(--border-subtle);
}

.nav-icon-shell {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background-color: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: 0 0 auto;
}

.nav-icon-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
}

.nav-icon-label {
  font: var(--type-label);
  color: var(--text-primary);
}

.nav-icon-caption {
  font: var(--type-caption);
  color: var(--text-secondary);
}

.nav-icon-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background-color: var(--surface-2);
  color: var(--text-primary);
  font: var(--type-caption);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.nav-icon-group.is-empty .nav-icon-badge {
  opacity: 0.72;
}

.nav-icon-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, 85vw);
  background-color: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  padding: var(--sp-3);
  display: none;
  z-index: 1300;
}

.nav-icon-group.is-open .nav-icon-panel {
  display: block;
}

.nav-icon-panel-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-icon-panel-head strong {
  font: var(--type-title-section);
  color: var(--text-primary);
}

.nav-icon-panel-head span {
  font: var(--type-caption);
  color: var(--text-secondary);
}

.nav-icon-panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 320px;
  overflow: auto;
}

.nav-icon-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
}

.nav-icon-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-icon-item-main strong {
  font: var(--type-label);
  color: var(--text-primary);
}

.nav-icon-item-main span,
.nav-icon-item-meta {
  font: var(--type-caption);
  color: var(--text-secondary);
}

.nav-icon-item-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}

.nav-icon-empty {
  padding: var(--sp-3);
  font: var(--type-caption);
  color: var(--text-secondary);
  text-align: center;
}

.nav-icon-panel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font: var(--type-label);
  font-weight: 700;
  text-decoration: none;
}

.nav-icon-panel-link:hover,
.nav-icon-panel-link:focus-visible {
  border-color: var(--green-500);
  color: var(--green-400);
}

/* Pastilla de usuario activo (contexto operativo) */
#userInfoPill, .user-pill {
  background-color: var(--surface-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-full);
  font: var(--type-label);
  color: var(--text-secondary);
}

/* ---------- Zona 2 · Título de vista (H1 único) ---------- */
h1,
.title, .admin-title, .vencidos-title, .deposito-title, .page-title {
  font: var(--type-title-page);
  color: var(--text-primary);
  letter-spacing: normal;
}

/* ---------- Botones (§6.2) ---------- */
/* Área táctil e identidad común */
.btn-submit, .btn-enviar, .btn, .btn-approve, .btn-admin-edit,
.btn-reject, .btn-admin-deactivate, .btn-Desactivar, .btn-logout,
.btn-buscar, .btn-admin-search, .btn-volver, .btn-cancel, .btn-secondary,
.btn-dark, .btn-Editar, .card-btn, .card-btn:link, .result-item .btn-buscar {
  min-height: 36px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font: var(--type-body);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-decoration: none;
  transition: filter 0.15s;
  border: none;
}
.btn-submit:hover, .btn-enviar:hover, .btn:hover, .btn-approve:hover, .btn-admin-edit:hover,
.btn-reject:hover, .btn-admin-deactivate:hover, .btn-Desactivar:hover, .btn-logout:hover,
.btn-buscar:hover, .btn-admin-search:hover, .btn-volver:hover, .btn-cancel:hover,
.btn-secondary:hover, .btn-dark:hover, .btn-Editar:hover, .card-btn:hover { filter: brightness(1.08); }
button:active, .card-btn:active { filter: brightness(0.92); }
button:disabled { opacity: 0.4; pointer-events: none; }

/* Primaria (azul) — una por vista: registrar / guardar / editar / aprobar */
.btn-submit, .btn-enviar, .btn, .btn-admin-edit, .btn-approve {
  background-color: var(--btn-primary);
  color: #fff;
}

/* Destructiva (rojo) — anular / rechazar / desactivar / salir / cancelar operación */
.btn-reject, .btn-admin-deactivate, .btn-Desactivar, .btn-logout, .btn-cancel {
  background-color: var(--btn-destructive);
  color: #fff;
}

/* Acción de fila (§6.2): único uso del amarillo en enlaces */
.btn-select {
  background: transparent;
  border: none;
  color: var(--warning);
  font: var(--type-body);
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  padding: var(--sp-2) var(--sp-3);
}

/* Búsqueda — acción principal de consulta */
.btn-buscar, .btn-admin-search {
  background-color: var(--btn-primary);
  border: 1.5px solid var(--btn-primary);
  color: #fff;
}

/* Fantasma — acciones de apoyo */
.btn-secondary, .btn-Editar {
  background-color: transparent;
  border: 1.5px solid var(--btn-primary);
  color: var(--info-400);
}

.btn-volver, .btn-volver:link, .btn-volver:visited {
  background-color: var(--btn-primary);
  border: 1.5px solid var(--btn-primary);
  color: #fff;
}

/* Enlace de navegación (verde) — tarjetas del menú */
.card-btn, .btn-dark {
  background-color: transparent;
  border: 1.5px solid var(--green-500);
  color: var(--green-400);
}
/* En la tarjeta el enlace verde va como texto: sin recuadro ni sangría, alineado
   a la izquierda al ras del texto de la card (mismo borde que el título/label). */
.card-btn, .card-btn:link, .card-btn:visited {
  border: none;
  padding: 0;
  justify-content: flex-start;
  align-self: flex-start;
  margin-top: auto;   /* acción anclada a la esquina inferior izquierda en TODOS los tamaños */
}

/* ---------- Tarjeta KPI / categoría (§6.1) — dashboard ---------- */
.grid-container, .grid-solicitudes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-4);
}

.card, .tarjeta-solicitud {
  background-color: var(--cat-info);
  border: 1px solid rgba(255, 255, 255, 0.08);   /* define la tarjeta sobre surface-0 (contraste) */
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: stretch;   /* el contenido llena la altura para anclar la acción abajo (todas las medidas) */
  gap: var(--sp-4);
}
/* Categorías por token (§2.3) — el fondo declara el significado */
.card.cat-action, .tarjeta-solicitud.cat-action { background-color: var(--cat-action); }
.card.cat-info,   .tarjeta-solicitud.cat-info   { background-color: var(--cat-info); }
.card.cat-risk,   .tarjeta-solicitud.cat-risk   { background-color: var(--cat-risk); }
/* El enlace de acción va SIEMPRE en verde, también en las tarjetas rojas (unificado) */
.card.cat-risk .card-btn, .card.cat-risk .card-btn:link, .card.cat-risk .card-btn:visited { color: var(--green-400); }

.card-content, .card-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
  max-width: 70%;
}
.card-content h3, .tarjeta-solicitud h3, .card-info h3 { font: var(--type-title-section); color: var(--text-primary); }
.card-count {
  display: block;
  min-height: 40px;
  font-family: var(--font-family);
  font-size: 34px;
  font-weight: 700;
  line-height: 40px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.kpi-value {
  font-variant-numeric: tabular-nums;
}
.card-count-label {
  display: none;   /* subtítulos ocultos: la tarjeta muestra número + título + acción */
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card-icon { width: 56px; height: 56px; object-fit: contain; align-self: flex-start; }   /* no estirarse con la card */
/* Iconos FA monocromáticos en tarjetas (§01: monolínea, monocromo) */
i.card-icon { width: auto; height: auto; font-size: 40px; color: var(--text-secondary); }

/* ---------- Tabla de datos (§6.3) ---------- */
.data-table-container, .table-container, .table-responsive {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  overflow-x: auto;
  background-color: var(--surface-1);
}

.data-table, .datagrid, table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th, .datagrid th, table th {
  background-color: var(--surface-2);
  color: var(--text-primary);
  font: var(--type-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.data-table td, .datagrid td, table td {
  font: var(--type-data);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}

/* Cebra: filas pares en surface-1 (§6.3) */
.data-table tbody tr:nth-child(even) td,
.datagrid tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) td { background-color: var(--surface-1); }
.data-table tbody tr:last-child td, .datagrid tbody tr:last-child td { border-bottom: none; }

/* Números y fechas a la derecha */
.data-table td.num, .data-table th.num { text-align: right; }

/* Fila seleccionable / activa: surface-2 + barra amarilla (§6.3) */
.selectable-row { cursor: pointer; }
.selectable-row:hover td { background-color: var(--surface-2); }
.selectable-row.selected-highlight td { background-color: var(--surface-2); }
.selectable-row.selected-highlight td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

/* ---------- Badges (§6.4) ---------- */
.badge-success, .badge-danger, .badge-warning {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  font: var(--type-label);
}
.badge-success { color: var(--green-400);   background-color: var(--surface-2); }
.badge-danger  { color: var(--danger-400);  background-color: var(--surface-2); }
.badge-warning { color: var(--warning);     background-color: var(--surface-2); }

/* Texto semántico reutilizable (inyectado por JS de las tablas) */
.txt-pos  { color: var(--green-400);  font-weight: 600; }
.txt-neg  { color: var(--danger-400); font-weight: 600; }
.txt-warn { color: var(--warning);    font-weight: 600; }
.txt-info { color: var(--info-400);   font-weight: 600; }
.txt-muted { color: var(--text-secondary); }

.form-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); text-align: left; }
.form-group label, .search-panel label, .rejection-panel label, label {
  font: var(--type-label);
  font-weight: 700;
  color: var(--text-primary);
}

.form-control.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: var(--danger-400);
  box-shadow: 0 0 0 1px var(--danger-400);
}
.form-control.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: var(--danger-400);
  box-shadow: 0 0 0 2px rgba(224, 91, 91, 0.35);
}
.field-error {
  font: var(--type-caption);
  color: var(--danger-400);
  margin-top: calc(var(--sp-1) * -1);
  margin-bottom: var(--sp-1);
}
.form-group.has-error label {
  color: var(--danger-400);
}

.subtitle {
  font: var(--type-title-section);
  color: var(--text-primary);
  font-weight: 800;
}

.form-control, input, select, textarea {
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: var(--type-body);
  min-height: 44px;
  padding: 0 var(--sp-3);
  outline: none;
  width: 100%;
}
textarea { padding: var(--sp-3); min-height: 66px; resize: vertical; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--green-500); }

.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  background-color: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--text-secondary);
  font: var(--type-body);
  font-weight: 600;
  white-space: nowrap;
  min-height: 44px;
}
.input-group .form-control,
.input-group input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  flex: 1;
}

/* Contenedores de formulario / búsqueda */
.search-panel, .search-section, .search-results, .deposito-card, .form-container, .admin-container > form {
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.input-with-icon { position: relative; flex: 1; }
.input-with-icon i { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }
.input-with-icon input { padding-left: var(--sp-6); }

/* ---------- Mensajes del sistema (Zona 6) ---------- */
.alert-box, .role-alert, .rejection-panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  font: var(--type-body);
  text-align: left;
}
.alert-box {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background-color: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  box-shadow: inset 3px 0 0 var(--danger-400);
}
.alert-box i {
  color: var(--danger-400);
  margin-top: 2px;
}
.alert-box strong {
  color: var(--text-primary);
}
.role-alert { background-color: var(--surface-2); color: var(--warning); }
.rejection-panel { background-color: var(--surface-2); color: var(--text-primary); }
.rejection-panel label { color: var(--danger-400); }

/* ---------- Modal centrado (§4.3, §6.6) ---------- */
.edit-modal {
  position: fixed; inset: 0;
  background-color: var(--overlay-veil);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.edit-modal-card {
  background-color: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: 90%; max-width: 600px;
  padding: var(--sp-5);
  color: var(--text-primary);
}

/* Resultados de búsqueda (Depósito) */
.result-item { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.result-item:last-child { border-bottom: none; }

/* ---------- Contenedores de vista ---------- */
.container, .admin-container, .vencidos-container, .content-area, main {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4);
}
/* Compensar el header fijo (56px) */
body { padding-top: 56px; }

/* Barra de encabezado de vista: volver + título */
.admin-header, .vencidos-header, .header-row, .deposito-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-6);
}

/* ---------- Utilidades de layout (sustituyen estilos inline de las vistas) ---------- */
.grid-row, .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.search-box-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.search-row { display: flex; align-items: flex-end; gap: var(--sp-4); }
.action-buttons-group { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.btn-group { display: flex; gap: var(--sp-4); justify-content: flex-end; margin-top: var(--sp-5); flex-wrap: wrap; }
.modal-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); }
.selected-info {
  background-color: var(--surface-2);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  box-shadow: inset 3px 0 0 var(--info-400);
  margin-bottom: var(--sp-5);
}
.text-center { text-align: center; }

/* Paginador de tablas */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.pagination-info { color: var(--text-secondary); font: var(--type-body-sm); }
.pagination-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pagination-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  color: var(--text-primary);
  cursor: pointer;
}
.pagination-btn:hover:not(:disabled) { border-color: var(--green-500); color: var(--green-400); }
.pagination-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pagination-btn.is-active {
  background-color: var(--green-500);
  border-color: var(--green-500);
  color: #fff;
  font-weight: 700;
}
.btn-select, .btn-table-action {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  color: var(--info-300);
  cursor: pointer;
  white-space: nowrap;
}
.btn-select:hover, .btn-table-action:hover { border-color: var(--green-500); color: var(--green-400); }
.data-table tbody tr.is-selected td { background-color: var(--surface-3); box-shadow: inset 3px 0 0 var(--green-500); }

/* Encabezados de tabla sticky durante scroll vertical (§6.3) */
.data-table-container { max-height: 75vh; overflow: auto; }
.data-table th, .datagrid th { position: sticky; top: 0; z-index: 1; }

/* ---------- Retícula por breakpoint (§5.1) ---------- */
/* Navbar compacto (icono + badge) hasta 900px: las etiquetas de texto no caben
   junto al logo, los 3 avisos y el botón Salir. Badge superpuesto = no ocupa ancho. */
@media (max-width: 899px) {
  .nav-icon-copy { display: none; }
  .nav-icons { gap: var(--sp-2); }
  .nav-icon-trigger { position: relative; padding: var(--sp-1); gap: 0; }
  .nav-icon-shell { width: 34px; height: 34px; }
  .nav-icon-badge {
    position: absolute; top: -2px; right: -2px;
    margin-left: 0; min-width: 18px; height: 18px; padding: 0 5px;
    border: 1px solid var(--navy-900);
  }
}

/* Base (móvil): tarjetas a 2 columnas */
@media (max-width: 600px) {
  .grid-container, .grid-solicitudes { gap: var(--sp-3); padding: var(--sp-3); }
  /* Icono en la esquina sup. der. FUERA del flujo: el texto usa TODO el ancho de la card
     (el número queda a su misma altura). Solo la 1ª línea se aparta para no chocar con el icono. */
  .card, .tarjeta-solicitud { position: relative; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .card-content, .card-info { max-width: none; width: 100%; flex: 1; }   /* llena la altura para poder anclar el botón abajo */
  .card-content > :first-child, .card-info > :first-child { padding-right: 40px; }
  i.card-icon { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: 22px; }
  .card-content h3, .tarjeta-solicitud h3, .card-info h3 { font: var(--type-body); font-weight: 700; }

  /* Formularios y barras a una columna */
  .grid-row, .form-grid-2 { grid-template-columns: 1fr; }
  .search-row { flex-direction: column; align-items: stretch; }
  .search-row .btn-buscar { width: 100%; }
  .btn-group > * { flex: 1; }
  .action-buttons-group { width: 100%; }
  .action-buttons-group > * { flex: 1; }

  .navbar, .app-header, .container, .admin-container, .vencidos-container, main { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .admin-header, .vencidos-header, .header-row, .deposito-header-row { flex-wrap: wrap; gap: var(--sp-3); }
  .nav-icon-panel { left: 0; right: auto; width: min(320px, 92vw); }
}

/* Escritorio: tarjetas a 3 columnas, contenido centrado a 1200px */
@media (min-width: 900px) {
  .grid-container, .grid-solicitudes { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
@media (min-width: 1024px) {
  .navbar, .app-header { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .container, .admin-container, .vencidos-container, main { padding-top: var(--sp-7); }
}

/* ---------- Página reutilizable de cuotas ---------- */
.notifications-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4);
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.notifications-hero {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.notifications-card,
.notifications-panel {
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

.notifications-kpi {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font: var(--type-title-page);
}

.notifications-kpi i {
  font-size: 22px;
}

.notifications-caption {
  margin-top: var(--sp-2);
  color: var(--text-secondary);
  font: var(--type-body);
}

.notifications-segment {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.segment-button {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-2);
  color: var(--text-primary);
  cursor: pointer;
  font: var(--type-label);
  font-weight: 700;
}

.segment-button.is-active {
  border-color: var(--green-500);
  background-color: var(--green-500);
  color: #fff;
}

.notifications-summary {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.summary-chip {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-full);
  background-color: var(--surface-2);
  color: var(--text-secondary);
  font: var(--type-caption);
}

.summary-chip strong {
  color: var(--text-primary);
}

.notifications-empty {
  padding: var(--sp-5);
  text-align: center;
  color: var(--text-secondary);
}

/* ---------- Calendario mensual (compartido: Deposito, Cartera) ----------
   Consolidado desde los <style> inline duplicados de esas vistas. El markup lo
   genera App.renderCalendarioGrid (app.js). Cada vista deja inline solo lo suyo
   (margin-top del contenedor, panel de detalles). */
.calendario-mensual {
  max-width: 460px;   /* evita celdas gigantes en pantallas anchas */
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.calendario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.calendario-header h3 { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.calendario-nav {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.calendario-nav:hover { background: var(--border-subtle); }
.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
}
.calendario-dia-nombre {
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 0;
  color: var(--text-primary);
}
.calendario-dia {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.calendario-dia:hover {
  background: var(--surface-3);
  border-color: var(--text-secondary);
}
.calendario-dia.otro-mes {
  color: var(--text-tertiary);
  background: var(--surface-2);
  border-color: transparent;
}
.calendario-dia.pendiente { background: var(--warning); border-color: var(--warning); color: var(--surface-0); font-weight: 700; }
.calendario-dia.vencida { background: var(--cat-risk); border-color: var(--danger-400); color: var(--text-primary); font-weight: 700; }
.calendario-dia.pagada { background: var(--cat-action); border-color: var(--green-400); color: var(--text-primary); font-weight: 700; }
.calendario-dia.hoy,
.calendario-dia.seleccionado {
  background: var(--btn-primary);
  border-color: var(--btn-primary);
  color: #fff;
  box-shadow: none;
  outline: none;
  font-weight: 700;
}
.calendario-dia .badge-count {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--surface-0);
  background: var(--text-secondary);
  font-weight: bold;
}
.calendario-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.leyenda-item { display: flex; align-items: center; gap: 6px; }
.leyenda-color {
  width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-subtle);
}

@media (max-width: 800px) {
  .notifications-hero {
    grid-template-columns: 1fr;
  }
  .notifications-header {
    flex-direction: column;
    align-items: flex-start;
  }
}