/* ============================================================
   Portal del cliente — Capa GUI de apariencia
   v3 "TIENDA" (2026-08-25). Referencia: apple.com.

   Mismo lenguaje que el panel: capsulas, radios de 18px, superficies
   SIN borde separadas por contraste, tracking apretado, Inter Tight,
   un solo acento dorado y escaso. Sobre el papel navy que ya tiene
   el portal — no se invierte a claro porque styles.css pinta texto
   blanco en decenas de sitios y hay colores en linea desde JS.

   En fondo oscuro la separacion no la puede hacer la sombra, asi que
   la hacen dos valores de superficie (papel #0B1420 / tarjeta
   #131E2C) y, donde hace falta, un contorno interior tenue. Bordes
   de caja: ninguno.

   No se toca layout, ni anchos, ni posiciones, ni logica.
   ============================================================ */

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

:root {
  --ap-ui: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif;

  --ap-r-xs: 8px;
  --ap-r-sm: 12px;
  --ap-r-md: 18px;
  --ap-r-lg: 22px;
  --ap-r-pill: 980px;

  --ap-ease: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  --ap-dur-fast: var(--dur-fast, 150ms);

  /* PALETA DE MARCA: navy + dorado. El papel y las superficies son el
     navy de la marca, no un gris azulado cualquiera. */
  --n-bg: #050F1E;         /* navy-deeper de marca */
  --n-card: #0B2749;       /* navy de marca */
  --n-card-2: #0E2F55;
  --n-fill: rgba(204,146,48,.14);
  --n-ink: #F3F6FB;
  --n-ink-2: #B7C4D8;
  --n-ink-3: #8798B4;
  --n-hair: rgba(204,146,48,.20);   /* hairline dorada, no blanca */
  --n-hair-soft: rgba(255,255,255,.07);
  --n-gold: #CC9230;       /* DORADO DE MARCA, exacto */
  --n-gold-light: #E2B65C;
  --n-ok: #4FD08C;
  --n-bad: #F0616A;
}

/* ---------- Tipografia ---------- */
html, body, h1, h2, h3, h4, p, a, li, span, label, th, td,
input, select, textarea, button, .btn { font-family: var(--ap-ui) !important; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1 { letter-spacing: -0.035em !important; font-weight: 700 !important; }
h2 { letter-spacing: -0.03em !important; }
h3, h4 { letter-spacing: -0.02em !important; }
.analysis-stat-value, .bureau-score, .ref-num, .score-value, .bureau-change {
  letter-spacing: -0.04em !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700 !important;
}
.analysis-stat-label, .ref-label, .ref-sub, .doc-item-meta, .phase-desc,
.form-group label { color: var(--n-ink-3) !important; }
.form-group label { text-transform: none !important; letter-spacing: -0.01em !important; font-size: 12px !important; font-weight: 500 !important; }

/* ---------- Papel y superficies: sin bordes de caja ---------- */
html, body { background: var(--n-bg) !important; color: var(--n-ink) !important; }
.section, .chart-container, .ref-section, .ref-card, .doc-field, .doc-item,
.card, .phase, .notification-item {
  background: var(--n-card) !important;
  border: 0 !important;
  border-radius: var(--ap-r-md) !important;
  box-shadow: inset 0 0 0 1px var(--n-hair) !important;
}
.kpi-card, .analysis-stat, .ref-stat, .bureau-card {
  background: var(--n-card-2) !important;
  border: 0 !important;
  border-radius: var(--ap-r-md) !important;
  box-shadow: inset 0 0 0 1px var(--n-hair) !important;
  transition: box-shadow 200ms var(--ap-ease) !important;
}
.kpi-card:hover, .bureau-card:hover {
  transform: none !important;
  box-shadow: inset 0 0 0 1px rgba(204,146,48,.55) !important;
}
.login-card {
  background: var(--n-card) !important;
  border: 0 !important;
  border-radius: var(--ap-r-lg) !important;
  box-shadow: inset 0 0 0 1px var(--n-hair), 0 40px 90px -30px rgba(0,0,0,.7) !important;
}
.empty { background: var(--n-card) !important; border: 0 !important; border-radius: var(--ap-r-md) !important; box-shadow: none !important; color: var(--n-ink-3) !important; }
.analysis-stat-value, .bureau-score { color: var(--n-ink) !important; }
.ref-num { color: var(--n-gold) !important; }

/* ---------- Botones: capsulas ---------- */
.btn, button, .ref-share-btn, input[type="submit"] {
  border-radius: var(--ap-r-pill) !important;
  font-weight: 600 !important;
  border: 0 !important;
  transition: background-color var(--ap-dur-fast) var(--ap-ease),
              color var(--ap-dur-fast) var(--ap-ease),
              opacity var(--ap-dur-fast) var(--ap-ease) !important;
}
.btn { background: rgba(255,255,255,.08) !important; color: var(--n-ink) !important; box-shadow: none !important; }
.btn:hover { background: var(--n-fill) !important; transform: none !important; box-shadow: none !important; }
.btn:active, button:active { transform: scale(.97); box-shadow: none !important; }
.btn-gold {
  background-image: none !important;
  background-color: var(--n-gold) !important;
  color: #08182E !important;
}
.btn-gold:hover { background-color: var(--n-gold-light) !important; }
.btn-ghost, .btn-logout {
  background: transparent !important;
  color: var(--n-ink-2) !important;
  box-shadow: inset 0 0 0 1px var(--n-hair) !important;
}
.btn-ghost:hover, .btn-logout:hover { background: rgba(255,255,255,.08) !important; color: var(--n-ink) !important; }
.btn:disabled, button:disabled, .btn[disabled] { opacity: .38 !important; cursor: not-allowed; box-shadow: none !important; }

/* ---------- Foco: halo ancho, nunca se elimina ---------- */
:is(.btn, button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(204,146,48,.42) !important;
}

/* ---------- Campos ---------- */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="password"], input[type="date"], select, textarea {
  border-radius: var(--ap-r-sm) !important;
  background: rgba(255,255,255,.06) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--n-hair) !important;
  color: var(--n-ink) !important;
}
input::placeholder, textarea::placeholder { color: var(--n-ink-3) !important; }
input:focus, select:focus, textarea:focus {
  background: rgba(255,255,255,.09) !important;
  box-shadow: inset 0 0 0 1px rgba(204,146,48,.60), 0 0 0 4px rgba(204,146,48,.26) !important;
  outline: none !important;
}

/* ---------- Tabla: sin rejilla, separadores finisimos ---------- */
.disputes-table { border-collapse: separate; border-spacing: 0; }
.disputes-table th {
  background: transparent !important;
  color: var(--n-ink-3) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--n-hair) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
.disputes-table td { color: var(--n-ink) !important; border-bottom: 1px solid var(--n-hair-soft) !important; }
.disputes-table tbody tr:last-child td { border-bottom: 0 !important; }
.disputes-table tbody tr:hover td { background: rgba(255,255,255,.04) !important; }

/* ---------- Etiquetas y estados: capsulas de tinte ---------- */
.status-badge, .doc-status, .check-pill, .warn-pill, .stars, .phase-check {
  border-radius: var(--ap-r-pill) !important;
  border: 0 !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.check-pill { background: rgba(79,208,140,.18) !important; color: var(--n-ok) !important; }
.warn-pill { background: rgba(240,97,106,.16) !important; color: var(--n-bad) !important; }
.ref-code, .doc-req-icon, .phase-icon { border-radius: var(--ap-r-sm) !important; }
.login-error { border-radius: var(--ap-r-sm) !important; border: 0 !important; background: rgba(240,97,106,.12) !important; }
.spinner { border-radius: var(--ap-r-pill) !important; }

/* ---------- Iconos: mismo grosor optico ---------- */
.btn svg, .phase-icon svg, .doc-req-icon svg, .dash-header svg {
  stroke-width: 1.6 !important;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-property: opacity, background-color, color, border-color, box-shadow !important;
  }
  .kpi-card, .analysis-stat, .bureau-card, .btn:active, button:active { transform: none !important; }
}