/* =============================================================================
 * PicoBase — Sistema de Diseño unificado "Amber"
 * -----------------------------------------------------------------------------
 * Única fuente de verdad de la identidad visual. La consumen las 4 superficies:
 * la plataforma de almacenamiento (/), la app "Mi Espacio" (/user), el panel
 * (/studio) y los correos (versión inline en las plantillas).
 *
 * Identidad: paleta cálida naranja, profesional y equilibrada. Dos temas de
 * primera clase (claro por defecto + oscuro). Define TANTO tokens semánticos
 * nuevos (--brand-*, --primary, --surface, --r-*, --sp-*, --sh-*) COMO los
 * alias heredados que ya usan los componentes de cada SPA (--bg, --panel, --acc,
 * --txt, --mut, --ok, --err, --warn, --blue, --shadow, …) para migrar sin romper.
 *
 * Servido como estático por nginx en /assets/pb-theme.css (CSP style-src 'self').
 * ========================================================================== */

/* ---- Rampa de marca (naranja, fija en ambos temas) ---------------------- */
:root{
  --brand-50:#fff7ed;  --brand-100:#ffedd5; --brand-200:#fed7aa; --brand-300:#fdba74;
  --brand-400:#fb923c; --brand-500:#f97316; --brand-600:#ea580c; --brand-700:#c2410c;
  --brand-800:#9a3412; --brand-900:#7c2d12; --brand-950:#431407;

  /* Tipografía */
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Apple Color Emoji',sans-serif;
  --font-mono:ui-monospace,'SF Mono',SFMono-Regular,'JetBrains Mono','Cascadia Code',Consolas,monospace;
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:14.5px; --fs-md:16px; --fs-lg:19px; --fs-xl:24px; --fs-2xl:32px;
  --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  /* Radios */
  --r-xs:6px; --r-sm:8px; --r:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* Espaciado (escala 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Transición estándar */
  --t-fast:.12s ease; --t:.15s ease; --t-slow:.25s ease;

  --on-primary:#ffffff;   /* texto sobre relleno de marca, siempre blanco */
}

/* ============================ TEMA CLARO (por defecto) ===================== *
 * Limpio, corporativo, ligero. Blancos y grises cálidos muy suaves, naranja
 * estratégico como primario, alto contraste para el contenido importante.    */
:root,
:root[data-theme="light"]{
  color-scheme: light;

  /* Superficies (semántico) */
  --bg:#faf9f7;        --bg2:#f1efeb;
  --surface:#ffffff;   --surface-2:#f6f4f1; --surface-3:#edeae5;

  /* Bordes */
  --border:#e6e2db;    --border-strong:#d8d2c9;

  /* Texto (--text-faint endurecido a AA: 5.4:1 sobre blanco, usado en metadatos) */
  --text:#1b1a17;      --text-muted:#6a625a; --text-faint:#6f6960;

  /* Marca / primario */
  --primary:#ea580c;        --primary-hover:#c2410c; --primary-active:#9a3412;
  --primary-soft:#fff1e7;   --primary-border:#fcd9bf;
  /* Relleno del CTA: más profundo que --primary para que el texto blanco pase AA
     (white sobre #c2410c = 5.18:1). --primary queda para acentos/iconos/bordes. */
  --btn-bg:#c2410c;         --btn-bg-hover:#9a3412;  --btn-fg:#ffffff;
  --accent-2:#c2410c;       /* enlaces/acentos de texto sobre claro (AA) */

  /* Estados */
  --success:#15803d;   --success-soft:#e7f6ec;
  --danger:#dc2626;    --danger-soft:#fdeaea;
  --warning:#b45309;   --warning-soft:#fbf1e0;
  --info:#2563eb;      --info-soft:#e9effd;

  /* Acentos secundarios cálidos */
  --amber:#d97706; --rose:#e11d48; --purple:#7c3aed; --pink:#db2777; --teal:#0d9488;
  --code:#9a3412;

  /* Sombras (tinte cálido, sutiles) */
  --sh-1:0 1px 2px rgba(124,45,18,.06), 0 1px 1px rgba(28,26,23,.04);
  --sh-2:0 4px 12px rgba(124,45,18,.08), 0 2px 4px rgba(28,26,23,.04);
  --sh-3:0 14px 34px rgba(124,45,18,.12), 0 4px 10px rgba(28,26,23,.06);
  --shadow:var(--sh-3);

  /* Foco accesible */
  --ring:0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);

  /* Degradados de identidad (cálidos) */
  --g-brand:linear-gradient(135deg, var(--brand-500), var(--brand-700));
  --g-warm:linear-gradient(135deg, var(--brand-400), #e11d48);
  --g-bar:linear-gradient(90deg, var(--brand-400), var(--brand-600));
  --g-glow:radial-gradient(60% 60% at 50% 0%, color-mix(in srgb,var(--brand-400) 22%,transparent), transparent 70%);
}

/* ============================ TEMA OSCURO ================================= *
 * Fondos oscuros neutros (con un susurro cálido), excelente contraste, naranja
 * vivo como color de interacción, estados coherentes con el claro.           */
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:#18150f;        --bg2:#100e09;
  --surface:#221e16;   --surface-2:#2b271d; --surface-3:#353026;

  --border:#3b362b;    --border-strong:#4c4636;

  --text:#f5f2ec;      --text-muted:#b1a899; --text-faint:#998f7b;

  --primary:#f97316;        --primary-hover:#fb923c; --primary-active:#ea580c;
  --primary-soft:#2a1d10;   --primary-border:#5a3416;
  /* En oscuro el CTA usa el naranja vivo con texto OSCURO (#1a1410 sobre #f97316
     = 7.3:1) — alto contraste y estética premium del modo oscuro. */
  --btn-bg:#f97316;         --btn-bg-hover:#fb923c;  --btn-fg:#1a1410;
  --accent-2:#fdba74;

  --success:#34d399;   --success-soft:#10241b;
  --danger:#f87171;    --danger-soft:#2a1414;
  --warning:#fbbf24;   --warning-soft:#2a200d;
  --info:#60a5fa;      --info-soft:#11203a;

  --amber:#fbbf24; --rose:#fb7185; --purple:#c084fc; --pink:#f472b6; --teal:#2dd4bf;
  --code:#fdba74;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 18px rgba(0,0,0,.45);
  --sh-3:0 16px 40px rgba(0,0,0,.55);
  --shadow:var(--sh-3);

  --ring:0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);

  --g-brand:linear-gradient(135deg, var(--brand-400), var(--brand-600));
  --g-warm:linear-gradient(135deg, var(--brand-400), #fb7185);
  --g-bar:linear-gradient(90deg, var(--brand-500), var(--brand-300));
  --g-glow:radial-gradient(60% 60% at 50% 0%, color-mix(in srgb,var(--brand-500) 26%,transparent), transparent 70%);
}

/* ============================ BASE COMPARTIDA ============================= */
*{box-sizing:border-box}
::selection{background:color-mix(in srgb,var(--primary) 30%,transparent);color:var(--text)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint);background-clip:padding-box}
:focus-visible{outline:none;box-shadow:var(--ring)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Utilidades opcionales del sistema (las SPA pueden usarlas o ignorarlas) */
.ds-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-semibold);background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}
.ds-chip.ok{background:var(--success-soft);color:var(--success);border-color:transparent}
.ds-chip.warn{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.ds-chip.err{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.ds-chip.brand{background:var(--primary-soft);color:var(--primary);border-color:var(--primary-border)}

/* =============================================================================
 * RESPONSIVE — estrategia mobile-first, fluida y escalable (todas las superficies)
 * -----------------------------------------------------------------------------
 * Breakpoints CONSISTENTES (max-width): xs 480 · sm 640 · md 768 · lg 1024 · xl 1440.
 * Tipografía y padding FLUIDOS (clamp) + guardas anti-desbordamiento + targets
 * táctiles. Aplica a cualquier módulo presente o futuro que consuma el sistema.
 * ========================================================================== */

/* Tipografía fluida: escala con el viewport sin romper en los extremos. */
:root{
  --fs-xs:clamp(11px, 0.5vw + 9.6px, 12px);
  --fs-sm:clamp(12px, 0.6vw + 10.6px, 13px);
  --fs-base:clamp(14px, 0.4vw + 13.2px, 15px);
  --fs-md:clamp(15px, 0.7vw + 13.6px, 16px);
  --fs-lg:clamp(17px, 1.1vw + 14px, 20px);
  --fs-xl:clamp(21px, 2vw + 15px, 26px);
  --fs-2xl:clamp(26px, 4vw + 16px, 36px);
  --pad-x:clamp(16px, 5vw, 56px);          /* padding horizontal de secciones, fluido */
  --tap:44px;                               /* área táctil mínima recomendada */
}

/* Guardas globales anti-desbordamiento horizontal (causa nº1 de "scroll lateral") */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word}
img,svg,video,canvas,picture,iframe{max-width:100%}
*{min-width:0}                              /* hijos flex/grid no fuerzan overflow (lo pisan min-width explícitos) */

/* Punteros gruesos (móvil/tablet): áreas táctiles cómodas + sin zoom de iOS. */
@media (pointer:coarse){
  button,.btn,.iconbtn,.navb,select{min-height:40px}
  input,textarea,select{font-size:16px}     /* 16px evita el auto-zoom de iOS al enfocar */
}

/* Tablas responsivas: scroll horizontal controlado en pantallas pequeñas
 * (display:block conserva alineación cabecera/cuerpo y evita romper el layout). */
@media (max-width:760px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%}
}

/* Utilidades responsivas reutilizables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
@media (max-width:640px){
  .hide-sm{display:none!important}
  .stack-sm{flex-direction:column!important;align-items:stretch!important}
  .stack-sm>*{width:100%!important}
  .full-sm{width:100%!important}
}

/* ===== Splash anti-flash de sesion (pb-auth-init + data-session) =====
   Si hay sesion (data-session="1"), oculta el gate/landing y muestra un splash limpio
   ANTES del primer paint, hasta que la app confirme la sesion (pbSplash.done/fail). */
#splash{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:var(--bg)}
#splash::after{content:"";width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:pbSplashSpin .7s linear infinite}
@keyframes pbSplashSpin{to{transform:rotate(360deg)}}
html[data-session="1"] #splash{display:flex}
html[data-session="1"] #gate,html[data-session="1"] #landing{display:none!important}