/*
 * Tema de InPrestamos.
 *
 * Los colores viven aquí como variables y se usan tanto desde las clases de
 * Tailwind (assets/js/tailwind.config.js apunta a estas variables) como desde
 * los componentes de abajo. Cambiar el modo noche es cambiar este bloque, no
 * repasar las pantallas.
 */
:root {
  --background: #f7f9fb;
  --on-background: #191c1e;
  --surface: #f7f9fb;
  --surface-dim: #d8dadc;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f4f6;
  --surface-container: #eceef0;
  --surface-container-high: #e6e8ea;
  --surface-container-highest: #e0e3e5;
  --surface-variant: #e0e3e5;
  --surface-tint: #565e74;
  --on-surface: #191c1e;
  --on-surface-variant: #45464d;
  --inverse-surface: #2d3133;
  --inverse-on-surface: #eff1f3;
  --outline: #76777d;
  --outline-variant: #c6c6cd;

  --primary: #000000;
  --on-primary: #ffffff;
  --primary-container: #131b2e;
  --on-primary-container: #7c839b;
  --inverse-primary: #bec6e0;
  --primary-fixed: #dae2fd;
  --primary-fixed-dim: #bec6e0;
  --on-primary-fixed: #131b2e;
  --on-primary-fixed-variant: #3f465c;

  --secondary: #006c49;
  --on-secondary: #ffffff;
  --secondary-container: #6cf8bb;
  --on-secondary-container: #00714d;
  --secondary-fixed: #6ffbbe;
  --secondary-fixed-dim: #4edea3;
  --on-secondary-fixed: #002113;
  --on-secondary-fixed-variant: #005236;

  --tertiary: #000000;
  --on-tertiary: #ffffff;
  --tertiary-container: #0b1c30;
  --on-tertiary-container: #75859d;
  --tertiary-fixed: #d3e4fe;
  --tertiary-fixed-dim: #b7c8e1;
  --on-tertiary-fixed: #0b1c30;
  --on-tertiary-fixed-variant: #38485d;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* Barra lateral */
  --sidebar-bg: #38485d;
  --sidebar-item: #2b3a4d;
  --sidebar-borde: #4a5a6d;

  /* Estados de aviso usados en las pantallas */
  --aviso-bg: #fef3c7;      /* ámbar suave: pendiente, atención */
  --aviso-fg: #92400e;
  --aviso-borde: #d97706;
  --alerta-bg: #ffedd5;     /* naranja: atraso medio */
  --alerta-fg: #9a3412;
  --exito-bg: #e8f5ef;      /* verde suave: resultados del simulador */
  --exito-borde: #b9e3d2;
  --fila-vencida: rgba(255, 218, 214, .45);
}

/* Modo noche: mismos nombres, valores oscuros.
   Solo en pantalla: en papel manda siempre la paleta clara. Si no, con el modo
   noche puesto los textos salían en sus colores claros sobre el papel blanco y
   la hoja se imprimía en blanco (pasó con el cierre de caja). */
@media screen {
  [data-tema="oscuro"] {
    --background: #10151a;
    --on-background: #e2e2e5;
    --surface: #10151a;
    --surface-dim: #0b1014;
    --surface-bright: #2d343d;
    --surface-container-lowest: #161b21;
    --surface-container-low: #1b2026;
    --surface-container: #20262d;
    --surface-container-high: #262d35;
    --surface-container-highest: #2d343d;
    --surface-variant: #40474f;
    --surface-tint: #bec6e0;
    --on-surface: #e2e2e5;
    --on-surface-variant: #c2c7cf;
    --inverse-surface: #e2e2e5;
    --inverse-on-surface: #2d3133;
    --outline: #a1a7ae;          /* el texto tenue necesita más luz sobre fondo oscuro */
    --outline-variant: #3a4149;

    --primary: #dae2fd;              /* en oscuro el color de acción se aclara */
    --on-primary: #131b2e;
    --primary-container: #3f465c;
    --on-primary-container: #dae2fd;
    --inverse-primary: #3f465c;
    --primary-fixed: #dae2fd;
    --primary-fixed-dim: #2a3040;
    --on-primary-fixed: #131b2e;
    --on-primary-fixed-variant: #bec6e0;

    --secondary: #4edea3;
    --on-secondary: #003824;
    --secondary-container: #005236;
    --on-secondary-container: #6ffbbe;
    --secondary-fixed: #6ffbbe;
    --secondary-fixed-dim: #4edea3;
    --on-secondary-fixed: #002113;
    --on-secondary-fixed-variant: #4edea3;

    --tertiary: #b7c8e1;
    --on-tertiary: #ffffff;
    --tertiary-container: #38485d;
    --on-tertiary-container: #d3e4fe;
    --tertiary-fixed: #d3e4fe;
    --tertiary-fixed-dim: #2a3646;
    --on-tertiary-fixed: #0b1c30;
    --on-tertiary-fixed-variant: #1b2026;

    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;

    --sidebar-bg: #161b21;
    --sidebar-item: #262d35;
    --sidebar-borde: #3a4149;

    --aviso-bg: #3a2e12;
    --aviso-fg: #fcd34d;
    --aviso-borde: #b45309;
    --alerta-bg: #3a2415;
    --alerta-fg: #fdba74;
    --exito-bg: #0f2a20;
    --exito-borde: #1f4d3a;
    --fila-vencida: rgba(147, 0, 10, .35);
  }
}

/* Al cambiar de tema se apagan las transiciones un instante: si no, los
   botones y tarjetas animan el color y el cambio se ve sucio. */
.sin-transicion, .sin-transicion * { transition: none !important; }

html { color-scheme: light; }
@media screen { [data-tema="oscuro"] { color-scheme: dark; } }

body {
  background-color: var(--background);
  color: var(--on-background);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* --- Clases de apoyo del tema --- */
.sidebar-bg   { background: var(--sidebar-bg); }
.sidebar-item { background: var(--sidebar-item); }
.aviso   { background: var(--aviso-bg);  color: var(--aviso-fg);  border-color: var(--aviso-borde); }
.alerta  { background: var(--alerta-bg); color: var(--alerta-fg); }
.exito-suave { background: var(--exito-bg); border: 1px solid var(--exito-borde); }
.fila-vencida { background: var(--fila-vencida); }
.texto-aviso  { color: var(--aviso-fg); }
.texto-alerta { color: var(--alerta-fg); }

/* --- Componentes reutilizables --- */
.card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 0.5rem;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 0.5rem;
  font-family: Inter, sans-serif; font-size: 14px; font-weight: 600;
  transition: all .15s ease; cursor: pointer; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--inverse-surface); color: var(--inverse-on-surface); }
.btn-secondary { background: var(--secondary); color: var(--on-secondary); }
.btn-secondary:hover { filter: brightness(1.1); }
.btn-outline { background: transparent; color: var(--on-surface); border: 1px solid var(--outline); }
.btn-outline:hover { background: var(--surface-container); }
.btn-ghost { background: transparent; color: var(--on-surface-variant); }
.btn-ghost:hover { background: var(--surface-container); }
.btn-danger { background: var(--error); color: var(--on-error); }
.btn-danger:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.form-label {
  display: block; margin-bottom: 4px;
  font-family: Inter, sans-serif; font-size: 12px; font-weight: 600;
  color: var(--on-surface-variant);
}
/* Los selectores van repetidos a propósito.
   El complemento de formularios de Tailwind pinta los campos con reglas del
   tipo [type='text'], que pesan más que una clase suelta: en modo noche ganaba
   él y los campos salían blancos con letra clara, ilegibles. Repetir la clase
   sube el peso sin recurrir a !important. */
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 8px 12px; border-radius: 0.5rem;
  font-family: Inter, sans-serif; font-size: 14px;
}
/* El peso extra se reserva para lo que pisa el complemento —color, fondo y
   borde—; el espaciado se deja con peso normal para que las utilidades de
   Tailwind (por ejemplo `pl-11`, que hace sitio al ícono del campo) sigan
   mandando sobre él. */
.form-input.form-input, .form-select.form-select, .form-textarea.form-textarea {
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.form-input.form-input:focus, .form-select.form-select:focus, .form-textarea.form-textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 108, 73, .18);
}
.form-input.form-input:disabled, .form-select.form-select:disabled, .form-textarea.form-textarea:disabled {
  background: var(--surface-container-low); color: var(--on-surface-variant);
}
.form-input.form-input::placeholder, .form-textarea.form-textarea::placeholder { color: var(--outline); }
/* Un número a medias (teléfono, cédula, RNC) después de salir del campo. */
.form-input.form-input.campo-incompleto { border-color: var(--error); }

/* Casillas y radios: mismo problema, el complemento los deja blancos. */
body input[type="checkbox"], body input[type="radio"] {
  background-color: var(--surface-container-lowest);
  border-color: var(--outline);
}
body input[type="checkbox"]:checked, body input[type="radio"]:checked {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
/* En modo noche el color de acción es un verde claro, y el complemento dibuja
   la marca en blanco: casi no se ve. Se redibuja en tinta oscura. */
[data-tema="oscuro"] input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23003824' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
[data-tema="oscuro"] input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23003824' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

/* El calendario de los campos de fecha también se invierte */
[data-tema="oscuro"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
/* El desplegable nativo lo pinta el sistema; color-scheme ya lo oscurece, pero
   se declara para los navegadores que no lo respetan. */
[data-tema="oscuro"] select option { background: var(--surface-container); color: var(--on-surface); }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; text-align: left; }
.tabla thead tr {
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.tabla th, .tabla td { padding: 12px 16px; }
.tabla tbody tr { border-bottom: 1px solid var(--outline-variant); font-size: 14px; }
.tabla tbody tr:hover { background: var(--surface-container-low); }
.num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* --- Menú lateral oculto (computadora) --- */
@media (min-width: 1024px) {
  html.menu-oculto #sidebar { transform: translateX(-100%) !important; }
  html.menu-oculto #contenido { margin-left: 0 !important; width: 100% !important; }
  #contenido { transition: margin-left .2s ease, width .2s ease; }
}

/* --- Barra inferior (móvil y tableta) --- */
.nav-movil { display: none; }
@media (max-width: 1023.98px) {
  .nav-movil {
    display: grid;
    align-items: end;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 35;
    padding: 4px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--outline-variant);
  }
  .nav-movil a, .nav-movil button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 52px; padding: 0; border: 0; background: none;
    color: var(--on-surface-variant);
    font-size: 11px; font-weight: 500; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-movil .material-symbols-outlined { font-size: 24px; }
  .nav-movil .activo { color: var(--secondary); font-weight: 700; }
  .nav-movil .boton-principal {
    width: 50px; height: 50px; margin-top: -20px; border-radius: 16px;
    background: var(--secondary); color: var(--on-secondary);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  }
  .nav-movil .boton-principal .material-symbols-outlined { font-size: 28px; }
  /* Que lo último de cada pantalla no quede debajo de la barra. */
  #contenido > main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media print {
  #sidebar, #sidebar-overlay, header, .no-print, .nav-movil { display: none !important; }
  body, main { overflow: visible !important; height: auto !important; }
  .lg\:ml-sidebar-width { margin-left: 0 !important; }
  /* En papel siempre se imprime en claro, aunque la pantalla esté en oscuro. */
  body { background: #fff !important; color: #191c1e !important; }
  .card { background: #fff !important; }
}

/* Tablas anchas en móvil: el desplazamiento horizontal no debe secuestrar
   el gesto vertical de la página. */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

/* Contenido exclusivo del papel: la columna para anotar lo recibido y el pie
   de firmas de la hoja de ruta. */
.solo-print { display: none !important; }
@media print {
  .solo-print { display: table-cell !important; }
  div.solo-print, h1.solo-print { display: block !important; }
  .card { border: 0 !important; break-inside: auto; }
  .tabla thead { display: table-header-group; }   /* repite el encabezado en cada hoja */
  .tabla tbody tr { break-inside: avoid; }
  .tabla th, .tabla td { padding: 6px 8px; font-size: 11px; }
  .fila-vencida { background: #f4f4f4 !important; }
}