/**
 * SISTEMA DE DISEÑO GLOBAL
 * Portal Digital de Inversiones - Avance Corp S.A.C.
 *
 * Estética: institucional, claro, profesional (BCP-style)
 * Paleta: Navy + Gold + base clara
 */

/* ============================================
   FUENTE
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ===== NAVY (primario institucional) ===== */
  --navy: #1a2f5a;
  --navy-dark: #111e3d;
  --navy-mid: #243a6e;
  --navy-soft: #2b3d6b;

  /* ===== GOLD (acento) ===== */
  --gold: #c8922a;
  --gold-light: #f0c060;
  --gold-pale: #fdf3e0;

  /* ===== BASE ===== */
  --bg: #f0f2f7;
  --surface: #ffffff;
  --surface-soft: #f7f8fc;
  --border: #e2e6f0;
  --border-strong: #c8d0e0;

  /* ===== TEXTO ===== */
  --text-primary: #111827;
  --text-secondary: #5a6480;
  --text-muted: #6b7280;

  /* ===== ESTADOS ===== */
  --green: #0f9b6e;
  --green-bg: #e8f7f2;
  --red: #d63b3b;
  --red-bg: #fdeaea;
  --warn: #c8922a;
  --warn-bg: #fdf3e0;
  --info: #3b5bdb;
  --info-bg: #eef2fc;

  /* ===== LAYOUT ===== */
  --sidebar-w: 248px;

  /* ===== RADIUS ===== */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 20px;

  /* ===== SOMBRAS ===== */
  --shadow-sm: 0 1px 3px rgba(17, 30, 61, 0.06);
  --shadow-md: 0 4px 14px rgba(17, 30, 61, 0.08);
  --shadow-lg: 0 8px 32px rgba(17, 30, 61, 0.12);
  --shadow-card: 0 1px 0 rgba(17, 30, 61, 0.03);

  /* ===== TRANSICIONES ===== */
  --t-fast: 0.12s ease;
  --t: 0.2s ease;
  --t-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: contain;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Touch UX: elimina delay 300ms y previene horizontal overflow */
button, a, [role="button"], input[type="submit"], input[type="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

img, video {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
  border: 0;
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */

h1 { font-size: 22px; font-weight: 800; color: var(--navy-dark); letter-spacing: -0.02em; }
h2 { font-size: 18px; font-weight: 800; color: var(--navy-dark); letter-spacing: -0.015em; }
h3 { font-size: 14px; font-weight: 700; color: var(--navy-dark); letter-spacing: -0.01em; }

.label, .label-up {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

a { color: var(--navy-dark); text-decoration: none; }
a:hover { color: var(--navy); }

/* ============================================
   COMPONENTES BASE
   ============================================ */

/* ----- TARJETAS ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t);
}
.card:hover { box-shadow: var(--shadow-md); }

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-dark);
}

.card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ----- BOTONES ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--navy-dark);
  color: #ffffff;
  border-radius: 100px;
  padding: 12px 26px;
  font-weight: 700;
  letter-spacing: 0.015em;
  box-shadow: 0 1px 2px rgba(17, 30, 61, 0.10);
}
.btn-primary:hover { background: var(--navy); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(17, 30, 61, 0.18); }
.btn-primary:active { transform: translateY(0); }

.btn-gold {
  background: var(--gold);
  color: #ffffff;
  border-radius: 100px;
  padding: 12px 26px;
  font-weight: 700;
  letter-spacing: 0.015em;
  box-shadow: 0 1px 2px rgba(200, 146, 42, 0.18);
}
.btn-gold:hover { background: #b07f1e; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(200, 146, 42, 0.32); }
.btn-gold:active { transform: translateY(0); }

.btn-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--navy-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg); color: var(--navy-dark); }

.btn-danger {
  background: var(--red);
  color: white;
}
.btn-danger:hover { background: #b22929; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ----- INPUTS ----- */
.input-group {
  margin-bottom: 16px;
}

.input-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--t);
}

.input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 47, 90, 0.08);
}

.input::placeholder { color: var(--text-muted); }

.input-pwd-wrap {
  position: relative;
}
.input-pwd-wrap .input {
  padding-right: 42px;
}
.input-pwd-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color var(--t), background var(--t);
}
.input-pwd-toggle:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.04);
}
.input-pwd-toggle:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3e%3cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%239aa2b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ----- BADGES ----- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.badge-activo   { background: var(--green-bg);  color: var(--green); }
.badge-vencido  { background: var(--red-bg);    color: var(--red); }
.badge-renovado { background: var(--info-bg);   color: var(--info); }
.badge-pendiente{ background: var(--warn-bg);   color: var(--warn); }
.badge-pagado   { background: var(--green-bg);  color: var(--green); }
.badge-retirado { background: #f0f2f7;          color: var(--text-secondary); }
.badge-new      { background: var(--gold-pale); color: var(--gold); border: 1px solid #f0c060aa; }

/* Chip pequeño con flecha (cambio %, tasa, etc.) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.chip-success { background: var(--green-bg); color: var(--green); }
.chip-info    { background: var(--info-bg);  color: var(--info); }
.chip-gold    { background: rgba(200,146,42,0.15); color: var(--gold); }
.chip-warn    { background: var(--warn-bg);  color: var(--warn); }

/* ----- ALERTAS ----- */
.alert {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
}

.alert-success { background: var(--green-bg); border-color: rgba(15, 155, 110, 0.25); color: var(--green); }
.alert-warning { background: var(--warn-bg);  border-color: rgba(200, 146, 42, 0.30); color: #8c6113; }
.alert-danger  { background: var(--red-bg);   border-color: rgba(214, 59, 59, 0.25);  color: var(--red); }
.alert-info    { background: var(--info-bg);  border-color: rgba(59, 91, 219, 0.20);  color: var(--info); }

/* ----- TABLAS ----- */
.table-container {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

thead {
  background: var(--surface-soft);
}

th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

tr:last-child td { border-bottom: none; }

tbody tr {
  transition: background var(--t-fast);
}

tbody tr:hover { background: var(--surface-soft); }

/* ============================================
   UTILIDADES
   ============================================ */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.text-success { color: var(--green); }
.text-warning { color: var(--warn); }
.text-danger  { color: var(--red); }
.text-info    { color: var(--info); }
.text-muted   { color: var(--text-muted); }
.text-navy    { color: var(--navy-dark); }
.text-gold    { color: var(--gold); }

.font-mono {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', ui-monospace, monospace;
}

.tabular { font-variant-numeric: tabular-nums; }

.hidden { display: none !important; }

.mt-0 { margin-top: 0; }   .mt-1 { margin-top: 8px; }   .mt-2 { margin-top: 12px; }   .mt-3 { margin-top: 16px; }   .mt-4 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }.mb-1 { margin-bottom: 8px; }.mb-2 { margin-bottom: 12px; }.mb-3 { margin-bottom: 16px; }.mb-4 { margin-bottom: 24px; }

.gap-1 { gap: 8px; } .gap-2 { gap: 12px; } .gap-3 { gap: 16px; } .gap-4 { gap: 24px; }

/* ============================================
   ANIMACIONES
   ============================================ */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.fade-in   { animation: fadeIn 0.3s ease; }
.slide-down{ animation: slideDown 0.3s ease; }

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.pulse-dot.green { background: var(--green); }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #e8ebf4 0%, #f3f5fa 50%, #e8ebf4 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
  color: transparent !important;
}

/* ============================================
   COMPLEMENTOS DE BOTONES Y FORMS
   ============================================ */

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-asset {
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: inherit;
}
.btn-asset:hover {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--navy-dark);
}
.btn-asset.active {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: #ffffff;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.form-input,
.select-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--t);
}
.form-input:focus,
.select-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(26, 47, 90, 0.08);
}
.form-input::placeholder { color: var(--text-muted); }

.form-readonly {
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-dark);
  background: var(--surface-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.data-table thead { background: var(--surface-soft); }
.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 14px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover { background: var(--surface-soft); }

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

.news-toggle {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

/* ============================================
   OVERLAY GLOBAL DEL MENU MOVIL
   ----------------------------------------------
   `body.no-scroll` (regla legacy) fue removida:
   el scroll lock vive en js/utils/scroll-lock.js
   con el patrón position:fixed iOS-safe.
   ============================================ */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(17, 30, 61, 0.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 99;
}
.sidebar-overlay.active { display: block; }

/* Wrapper genérico para tablas con scroll horizontal en móvil */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1px) /* MOVED TO css/mobile.css — bloque original conservado para auditoría */ {
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  .card { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }

  /* Touch targets mínimos 44px y font-size 16px (evita zoom iOS) */
  .input,
  .form-input,
  .select-input,
  input.input,
  select.input,
  textarea.input {
    min-height: 44px;
    font-size: 16px;
  }
  textarea.input { min-height: 88px; }

  .btn {
    min-height: 44px;
    font-size: 14px;
    padding: 11px 18px;
  }
  .btn-sm {
    min-height: 36px;
    font-size: 12.5px;
    padding: 7px 12px;
  }

  /* Tablas: bajar font-size en celdas, mantener scroll */
  .table-responsive,
  .table-wrap,
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive table,
  .table-wrap table,
  .table-container table {
    width: max-content;
    min-width: 100%;
  }
  .table-responsive th,
  .table-responsive td,
  .table-wrap th,
  .table-wrap td,
  .table-container th,
  .table-container td,
  .data-table th,
  .data-table td,
  .table-dense th,
  .table-dense td {
    font-size: 13px;
    padding: 8px 10px;
    white-space: nowrap;
  }
  .table-dense th,
  .data-table th {
    font-size: 11px;
  }
}

@media (max-width: 1px) /* MOVED TO css/mobile.css — bloque original conservado para auditoría (era max-width:480px) */ {
  .btn {
    width: auto;
  }
  /* Botón solitario (acción principal full-width en móvil) */
  .modal-footer .btn,
  .page-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

/* === Accessibility utilities ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — solo visible al hacer Tab desde el inicio (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 999999;
  padding: 10px 16px;
  background: #111e3d;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #c8922a;
  outline-offset: 2px;
}

/* =====================================================================
   Cinturón de seguridad anti scroll horizontal global.
   `clip` no crea contexto de scroll (a diferencia de hidden) y mantiene
   compatibilidad con `position: sticky`. Fallback automático a hidden.
   ===================================================================== */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* =====================================================================
   Accesibilidad — indicador de foco visible (WCAG 2.4.7).
   :focus-visible solo se activa en navegación por teclado (no en click/
   touch), así que no altera la experiencia con mouse. Cubre los controles
   interactivos comunes del portal (cliente y admin).
   ===================================================================== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================================
   BLOQUEO DE ORIENTACIÓN — solo vertical en celulares
   ------------------------------------------------------------
   Si un teléfono se pone en horizontal, se cubre la pantalla con
   un aviso "Gira tu dispositivo". No se puede impedir el giro en
   un navegador, pero esto deja el modo horizontal inutilizable.
   Scoping para NO afectar nada más:
     · pointer: coarse  → solo pantallas táctiles (excluye escritorio/mouse)
     · max-height:600px → solo teléfonos (un tablet/iPad apaisado mide más)
   El panel admin de escritorio NO se ve afectado.
   ============================================================ */
@media screen and (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  html, body { overflow: hidden !important; }
  body::before {
    content: "📱\A Gira tu dispositivo\A Este portal funciona en vertical";
    white-space: pre-line;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 24px;
    background: #050a18;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.2px;
  }
}