/* ═══════════════════════════════════════════════════════════
   IALARIFE | PORTAL CLIENTE | DESIGN SYSTEM v1.0 | 2026-04-30
   Editorial Brutalism — gemelo funcional de la app iOS.
   Mobile-first con expansión a sidebar en >1024px.
   ═══════════════════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }
::selection { background:#CCFF00; color:#000; }

:root {
  /* Surfaces (dark — base) */
  --surface-0:#000000;
  --surface-1:#0a0a0a;
  --surface-2:#111111;
  --surface-3:#1a1a1a;
  --surface-4:#222222;
  /* Surfaces (gallery — entregables) */
  --canvas-base:#F5F2EC;
  --canvas-card:#FFFFFF;
  --canvas-text:#1A1A1A;
  --canvas-lime:#6B8A00;
  /* Borders */
  --border-subtle:rgba(255,255,255,0.06);
  --border-medium:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.20);
  /* Accents */
  --lime:#CCFF00;
  --lime-10:rgba(204,255,0,0.10);
  --lime-20:rgba(204,255,0,0.20);
  --lime-40:rgba(204,255,0,0.40);
  --vicio-red:#FF3B30;
  --warning:#FFB844;
  --success:#44FF88;
  /* Text */
  --text-primary:#F5F5F7;
  --text-secondary:#86868B;
  --text-tertiary:#48484A;
  /* Glass */
  --glass-bg:rgba(255,255,255,0.04);
  --glass-lime-bg:rgba(204,255,0,0.04);
  --glass-lime-border:rgba(204,255,0,0.20);
  --glass-blur:24px;
  /* Fonts */
  --font-grito:'Archivo Black',sans-serif;
  --font-tech:'Chakra Petch',sans-serif;
  --font-serif:'DM Serif Display',serif;
  /* Motion */
  --ease:cubic-bezier(0.25,1,0.5,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  /* Layout */
  --max-w-mobile:640px;
  --max-w-desktop:1200px;
  --sidebar-w:260px;
  --pad:24px;
  --pad-sm:16px;
  --gap:2px;
}

html, body { height:100%; background:var(--surface-0); color:var(--text-primary); font-family:var(--font-tech); -webkit-font-smoothing:antialiased; }
body { display:flex; flex-direction:column; }
input::placeholder, textarea::placeholder { color:var(--text-tertiary); font-family:var(--font-tech); }
textarea { resize:vertical; }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface-4); }
a { color:var(--lime); text-decoration:none; }

/* ═══ KEYFRAMES ═══ */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseDot { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes pulseRec { 0%,100% { box-shadow:0 0 0 0 rgba(255,59,48,0.4); } 70% { box-shadow:0 0 0 12px rgba(255,59,48,0); } }

/* ═══ HATCHING ═══ */
.hatching { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.015; background-image:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.5) 10px, rgba(255,255,255,0.5) 10.5px); }

/* ═══ APP SHELL ═══ */
.app-shell { min-height:100dvh; display:flex; flex-direction:column; position:relative; z-index:1; width:100%; max-width:var(--max-w-mobile); margin:0 auto; }
@media (min-width:1024px) {
  .app-shell.with-sidebar { max-width:var(--max-w-desktop); display:grid; grid-template-columns:var(--sidebar-w) 1fr; align-items:stretch; }
}

/* ═══ SIDEBAR (≥1024px) ═══ */
.sidebar { display:none; }
@media (min-width:1024px) {
  .sidebar { display:flex; flex-direction:column; padding:var(--pad); border-right:1px solid var(--border-subtle); position:sticky; top:0; height:100dvh; overflow-y:auto; }
  .sidebar .logo { font-family:var(--font-grito); font-size:24px; letter-spacing:-0.1em; margin-bottom:32px; text-transform:uppercase; }
  .sidebar .logo .dot { color:var(--lime); }
  .sidebar nav { display:flex; flex-direction:column; gap:2px; flex:1; }
  .sidebar nav a { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface-1); border:1px solid var(--border-subtle); color:var(--text-primary); font-family:var(--font-tech); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; transition:all 0.2s var(--ease); }
  .sidebar nav a:hover { border-color:var(--border-medium); background:var(--surface-2); }
  .sidebar nav a.active { border-color:var(--lime); background:var(--glass-lime-bg); color:var(--lime); }
  .sidebar nav a .ico { font-size:14px; opacity:0.7; width:18px; }
  .sidebar .user-foot { margin-top:24px; padding-top:18px; border-top:1px solid var(--border-subtle); font-family:var(--font-tech); font-size:0.65rem; color:var(--text-tertiary); letter-spacing:0.1em; text-transform:uppercase; }
  .sidebar .user-foot .email { color:var(--text-secondary); margin-top:4px; word-break:break-all; }
  .sidebar .user-foot button { margin-top:10px; padding:6px 0; background:transparent; color:var(--text-tertiary); border:none; cursor:pointer; font-family:inherit; font-size:inherit; letter-spacing:inherit; text-transform:inherit; }
  .sidebar .user-foot button:hover { color:var(--vicio-red); }
}

/* ═══ MASTHEAD (móvil top bar) ═══ */
.masthead { display:flex; justify-content:space-between; align-items:center; padding:14px var(--pad); border-bottom:1px solid var(--border-subtle); flex-shrink:0; }
.masthead .brand { font-family:var(--font-grito); font-size:18px; letter-spacing:-0.08em; text-transform:uppercase; }
.masthead .brand .dot { color:var(--lime); }
.masthead .section { font-family:var(--font-tech); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--lime); }
.masthead .section::before { content:'// '; opacity:0.5; }
.masthead .menu-btn { background:transparent; border:none; color:var(--text-primary); font-size:18px; cursor:pointer; padding:4px; }
@media (min-width:1024px) {
  .with-sidebar .masthead { display:none; }
}

/* ═══ MAIN CONTENT ═══ */
.main { flex:1; display:flex; flex-direction:column; padding:var(--pad); }
.main-section { padding:0; margin-bottom:32px; }
.main-section .label { font-family:var(--font-tech); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--lime); margin-bottom:8px; }
.main-section .label::before { content:'// '; opacity:0.5; }
.main-section .title { font-family:var(--font-grito); font-size:clamp(22px, 5vw, 32px); letter-spacing:-0.02em; line-height:1.18; text-transform:uppercase; margin-bottom:6px; }
.main-section .subtitle { font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--text-secondary); line-height:1.5; }

/* ═══ MISSION BAND (gemelo del componente iOS) ═══ */
.mission-list { display:flex; flex-direction:column; gap:var(--gap); }
.mission-band { position:relative; display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:18px 18px 18px 0; background:var(--surface-1); border:1px solid var(--border-subtle); cursor:pointer; transition:all 0.2s var(--ease); overflow:hidden; }
.mission-band:hover { border-color:var(--border-medium); background:var(--surface-2); }
.mission-band.done { border-left:2px solid var(--lime); }
.mission-band.active { border-color:var(--lime); background:var(--glass-lime-bg); }
.mission-band.pending { opacity:0.5; pointer-events:none; }
.mission-band .num { font-family:var(--font-grito); font-size:64px; line-height:1; color:var(--surface-3); align-self:center; text-align:center; pointer-events:none; user-select:none; }
.mission-band.active .num,
.mission-band.done .num { color:var(--surface-4); }
.mission-band .body { display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; }
.mission-band .band-title { font-family:var(--font-grito); font-size:1rem; text-transform:uppercase; letter-spacing:0.02em; }
.mission-band .band-body { font-family:var(--font-serif); font-style:italic; font-size:13px; color:var(--text-secondary); line-height:1.4; }
.mission-band .chip { align-self:center; padding:6px 10px; background:var(--surface-2); border:1px solid var(--border-medium); font-family:var(--font-tech); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-secondary); white-space:nowrap; }
.mission-band.done .chip { border-color:var(--lime); color:var(--lime); }
.mission-band.active .chip { border-color:var(--lime); background:var(--lime); color:var(--surface-0); font-weight:700; }

/* ═══ STEPPER RAIL ═══ */
.stepper { display:grid; grid-template-columns:repeat(4, 1fr); gap:2px; margin-bottom:var(--pad); }
.stepper .step { padding:10px 8px; background:var(--surface-1); border:1px solid var(--border-subtle); text-align:center; }
.stepper .step.done { background:var(--glass-lime-bg); border-color:var(--lime); }
.stepper .step.active { border-color:var(--lime); }
.stepper .step .step-id { font-family:var(--font-tech); font-size:0.55rem; letter-spacing:0.1em; color:var(--text-tertiary); text-transform:uppercase; }
.stepper .step.done .step-id, .stepper .step.active .step-id { color:var(--lime); }
.stepper .step .step-label { font-family:var(--font-grito); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.02em; margin-top:2px; }
.stepper .step .step-detail { font-family:var(--font-tech); font-size:0.55rem; color:var(--text-tertiary); margin-top:2px; }

/* ═══ COUNTDOWN BLOCK ═══ */
.countdown { padding:18px var(--pad); background:var(--glass-lime-bg); border:1px solid var(--lime-40); margin-bottom:var(--pad); }
.countdown .label { font-family:var(--font-tech); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--lime); }
.countdown .label::before { content:'// '; opacity:0.5; }
.countdown .time { font-family:var(--font-grito); font-size:clamp(28px, 6vw, 40px); letter-spacing:-0.02em; margin:6px 0 4px; }
.countdown .sub { font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--text-secondary); }

/* ═══ CARDS ═══ */
.card { background:var(--surface-1); border:1px solid var(--border-subtle); padding:var(--pad); }
.card-title { font-family:var(--font-grito); font-size:1rem; text-transform:uppercase; margin-bottom:6px; }
.card-body { font-family:var(--font-tech); font-size:0.85rem; color:var(--text-secondary); line-height:1.5; }

/* ═══ BUTTONS ═══ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-grito); font-weight:900; font-size:0.85rem; letter-spacing:0.05em; text-transform:uppercase; padding:0 22px; height:52px; cursor:pointer; border:none; transition:all 0.2s var(--ease); text-decoration:none; }
.btn-primary { background:var(--lime); color:var(--surface-0); }
.btn-primary:hover { transform:translateY(-1px); }
.btn-primary:disabled { background:rgba(204,255,0,0.18); color:rgba(0,0,0,0.5); cursor:not-allowed; transform:none; }
.btn-secondary { background:transparent; color:var(--text-primary); border:1px solid var(--border-medium); }
.btn-secondary:hover { border-color:var(--border-strong); background:var(--surface-1); }
.btn-ghost { background:transparent; color:var(--text-tertiary); border:none; padding:0; height:auto; font-size:0.7rem; letter-spacing:0.18em; }
.btn-ghost:hover { color:var(--text-primary); }
.btn .arrow { font-size:1.1rem; transform:translateY(-1px); }

/* ═══ INPUTS ═══ */
.text-input { width:100%; font-family:var(--font-tech); font-size:0.95rem; color:var(--text-primary); background:var(--surface-1); border:1px solid var(--border-medium); padding:14px 16px; outline:none; transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.text-input:focus { border-color:var(--lime-40); box-shadow:0 0 0 1px rgba(204,255,0,0.15); }
.input-label { font-family:var(--font-tech); font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-tertiary); display:block; margin-bottom:6px; }

/* ═══ TOAST / BANNER ═══ */
.banner { padding:14px var(--pad); border:1px solid; font-family:var(--font-tech); font-size:0.8rem; line-height:1.5; }
.banner.banner-success { border-color:var(--lime-40); background:var(--glass-lime-bg); color:var(--text-primary); }
.banner.banner-error { border-color:var(--vicio-red); background:rgba(255,59,48,0.05); color:var(--vicio-red); }
.banner.banner-warning { border-color:var(--warning); background:rgba(255,184,68,0.06); color:var(--warning); }
.banner.banner-info { border-color:var(--border-medium); background:var(--surface-1); color:var(--text-secondary); }

/* ═══ LOADING SPINNER ═══ */
.spinner { width:24px; height:24px; border:2px solid var(--surface-3); border-top-color:var(--lime); border-radius:50%; animation:spin 0.8s linear infinite; }
.loading-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,0.92); display:none; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.loading-overlay.visible { display:flex; }
.loading-overlay .dot { font-size:48px; color:var(--lime); animation:pulseDot 1.4s ease-in-out infinite; }
.loading-overlay .text { margin-top:14px; font-family:var(--font-tech); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-secondary); text-align:center; }

/* ═══ REALTIME INDICATOR (SSE conectado) ═══ */
.rt-indicator { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-tech); font-size:0.55rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-tertiary); }
.rt-indicator .dot { width:6px; height:6px; background:var(--text-tertiary); }
.rt-indicator.live .dot { background:var(--lime); animation:pulseDot 1.4s ease-in-out infinite; }
.rt-indicator.live { color:var(--lime); }