:root, .pdf-doc{
    /* Las exportaciones a PDF (.pdf-doc) llevan siempre estos colores claros, aunque la app esté en oscuro. */
    color-scheme: light;
    /* ---- Paleta ---- */
    --navy: #1B3A5C;
    --navy-deep: #0F2540;
    --navy-tint: #EEF2F7;
    --teal: #2C6E5C;
    --teal-light: #5FA88F;
    --teal-soft: #E4EFEA;
    --teal-hover: #235A4B;
    /* Ámbar dorado (no naranja): se distingue del rojo también con daltonismo.
       --amber para rellenos y números grandes; --amber-ink para texto chico. */
    --amber: #A86F0A;
    --amber-ink: #7C5205;
    --amber-soft: #FBF1D9;
    --red: #9B2C2C;
    --red-soft: #F8E4E4;
    --bg: #F5F6F8;
    --panel: #FFFFFF;
    --line: #E2E5EA;
    --line-soft: #EDEFF3;
    --ink: #1F2937;
    --ink-soft: #5B6472;
    --ink-faint: #667080;   /* ≥ 4.5:1 sobre --panel y --bg (WCAG AA) */
    --line-strong: #C7CED8;
    --line-hover: #D3D9E1;
    --code-bg: #F0F2F5;

    /* ---- Superficies y rellenos (Etapa 54): el modo oscuro las redefine abajo ---- */
    --bg-solid: #F5F6F8;          /* fondo opaco, para lo que queda fijo (sticky) */
    --panel-solid: #FFFFFF;       /* panel opaco, idem */
    --navy-tint-solid: #EEF2F7;   /* --navy-tint opaco, idem */
    --navy-tint-hover: #E2E9F1;
    --field-bg: #FFFFFF;          /* campos de formulario */
    --modal-bg: #FFFFFF;          /* ventanas modales y tarjeta del login */
    --scrim: rgba(10,27,48,0.45); /* velo detrás de un modal */
    --glass-border: #E2E5EA;
    --glass-blur: 0px;
    --on-fill: #FFFFFF;           /* texto sobre rellenos de color (rojo, verde, riesgo alto) */
    --riesgo-alto: #B9533F;
    --riesgo-critico: #9B2C2C;
    --riesgo-alto-soft: #F6E6E0;
    --scroll-hover: #AFB8C4;
    --toast-bg: #0F2540;
    --toast-ink: #FFFFFF;

    /* ---- Acento (Etapa 54): en claro es el verde de MOVA de siempre; en oscuro pasa a azul.
       El verde (--teal*) queda para los estados buenos: Al día, Cumple, Finalizado, Aprobado. ---- */
    --link: #2C6E5C;
    --acento: #2C6E5C;
    --acento-2: #5FA88F;
    --acento-soft: #E4EFEA;
    --acento-ring: rgba(44,110,92,0.25);

    /* ---- Sidebar (fondo navy) ---- */
    --sidebar-bottom: #0A1B30;
    --sidebar-text: #DCE4EC;
    --sidebar-link: #B8C6D6;
    --sidebar-muted: #7FA0C0;
    --sidebar-faint: #6E8CAA;
    --sidebar-active: #DCE9F5;

    /* ---- Escala de radios: chico (controles), medio (tarjetas), grande (modal) ---- */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-full: 999px;

    /* ---- Sombras tintadas de navy en vez de negro puro: se siente más de marca ---- */
    --shadow-sm: 0 1px 2px rgba(15,37,64,0.06), 0 1px 3px rgba(15,37,64,0.05);
    --shadow-md: 0 6px 16px rgba(15,37,64,0.08), 0 2px 6px rgba(15,37,64,0.05);
    --shadow-lg: 0 24px 56px rgba(15,37,64,0.20), 0 8px 20px rgba(15,37,64,0.10);

    --ease: cubic-bezier(0.2, 0.65, 0.3, 1);
  }

  /* ---- Tema oscuro "vidrio" (Etapa 54). Solo lo activa tema.js poniendo data-tema="oscuro" en <html>;
     las páginas públicas que comparten esta hoja nunca lo ponen y siguen claras. ---- */
  html[data-tema="oscuro"]{
    color-scheme: dark;
    --navy: #CFE1F2;
    --navy-deep: #F2F6FA;
    --navy-tint: rgba(255,255,255,0.07);
    --teal: #A9E8D0;
    --teal-light: #5FA88F;
    --teal-soft: rgba(95,168,143,0.20);
    --teal-hover: #9FE0C6;
    --amber: #F0C766;
    --amber-ink: #FFE29A;
    --amber-soft: rgba(232,176,60,0.18);
    --red: #FFC2C2;
    --red-soft: rgba(224,90,90,0.20);
    --bg: rgba(5,12,24,0.35);
    --panel: rgba(255,255,255,0.06);
    --line: rgba(255,255,255,0.10);
    --line-soft: rgba(255,255,255,0.07);
    --ink: #E8EEF5;
    --ink-soft: #CBD6E3;
    --ink-faint: #B4C2D3;
    --line-strong: rgba(255,255,255,0.22);
    --line-hover: rgba(255,255,255,0.18);
    --code-bg: rgba(255,255,255,0.08);

    --bg-solid: #0B1626;
    --panel-solid: #12233A;
    --navy-tint-solid: #1A2E48;
    --navy-tint-hover: rgba(255,255,255,0.12);
    --field-bg: rgba(255,255,255,0.07);
    --modal-bg: #12233A;
    --scrim: rgba(4,10,20,0.62);
    --glass-border: rgba(255,255,255,0.10);
    --glass-blur: 12px;
    --on-fill: #0B1626;
    --riesgo-alto: #F0A08A;
    --riesgo-critico: #FF7A7A;
    --riesgo-alto-soft: rgba(240,130,100,0.20);
    --scroll-hover: rgba(255,255,255,0.32);
    --toast-bg: #12233A;
    --toast-ink: #E8EEF5;
    --link: #C4E0FC;
    --acento: #7FB4E8;
    --acento-2: #CFE6FF;
    --acento-soft: rgba(127,180,232,0.16);
    --acento-ring: rgba(207,230,255,0.45);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.25);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
    --shadow-lg: 0 24px 56px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.35);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans',sans-serif;
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    margin:0;
    color:var(--navy-deep);
    letter-spacing:-0.015em;
  }
  code, .mono{ font-family:'IBM Plex Mono',monospace; }
  ::selection{ background:var(--acento-soft); color:var(--navy-deep); }

  a{ color:var(--link); }

  :focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(44,110,92,0.25);
    border-radius:6px;
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:0.01ms !important; animation-delay:0s !important; transition-duration:0.01ms !important; transition-delay:0s !important; }
    .skeleton{ animation:none !important; }
  }

  /* ---- Layout ---- */
  #app{ display:flex; min-height:100vh; }

  #sidebar{
    width:256px;
    flex-shrink:0;
    background-image:
      radial-gradient(rgba(255,255,255,0.05) 1.1px, transparent 1.1px),
      linear-gradient(190deg, var(--navy-deep) 0%, var(--sidebar-bottom) 100%);
    background-size:11px 11px, auto;
    color:var(--sidebar-text);
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
    box-shadow:1px 0 0 rgba(255,255,255,0.04) inset;
  }
  #sidebar .brand{
    padding:26px 22px 20px 22px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  #sidebar .brand .brand-logo{
    display:block;
    height:26px;
    width:auto;
    margin-bottom:12px;
    /* El logo es una marca navy sobre fondo transparente: lo pasamos a blanco
       para que se lea sobre la sidebar oscura (misma marca que en el login). */
    filter:brightness(0) invert(1);
    opacity:0.92;
  }
  #sidebar .brand .mark{
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.16em;
    color:var(--sidebar-muted);
    text-transform:uppercase;
  }
  #sidebar .brand h1{
    color:#fff;
    font-size:20px;
    margin-top:5px;
    font-weight:600;
  }
  nav{ padding:16px 12px; flex:1; }
  nav .navlink{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 12px;
    border-radius:var(--radius-sm);
    color:var(--sidebar-link);
    cursor:pointer;
    font-size:13.5px;
    font-weight:500;
    margin-bottom:3px;
    position:relative;
    transition:background 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease);
    user-select:none;
  }
  nav .navlink::before{
    content:'';
    position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
    background:var(--acento); border-radius:0 3px 3px 0;
    opacity:0; transform:scaleY(0.4); transform-origin:center;
    transition:opacity 0.15s var(--ease), transform 0.15s var(--ease);
  }
  nav .navlink:hover{ background:rgba(255,255,255,0.06); color:#fff; }
  nav .navlink.active{ background:rgba(255,255,255,0.09); color:#fff; }
  nav .navlink.active::before{ opacity:1; transform:scaleY(1); }
  nav .navlink .nav-icon{
    flex-shrink:0; width:18px; height:18px; color:var(--sidebar-muted);
    transition:color 0.15s var(--ease);
  }
  nav .navlink:hover .nav-icon,
  nav .navlink.active .nav-icon{ color:#fff; }
  nav .navlink .nav-label{ flex:1; }
  nav .navlink .clause{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    color:var(--sidebar-faint);
    background:rgba(255,255,255,0.06);
    padding:2px 6px;
    border-radius:var(--radius-full);
    flex-shrink:0;
  }
  nav .navlink.active .clause{ color:var(--sidebar-active); background:rgba(255,255,255,0.12); }

  #sidebar .foot{
    padding:16px 22px 20px 22px;
    font-size:11px;
    color:var(--sidebar-faint);
    border-top:1px solid rgba(255,255,255,0.08);
  }

  #main{ flex:1; min-width:0; padding:44px 48px 80px 48px; max-width:1240px; }
  .view{ display:none; }
  .view.active{ display:block; }
  /* Inicio muestra Vencimientos y el Panel a la vez: espacio entre los dos bloques */
  #view-vencimientos.active + #view-dashboard.active{ margin-top:32px; }
  @keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
  /* Con View Transitions el fundido lo hace el navegador; este queda de respaldo para los que no la soportan. */
  @supports not (view-transition-name: none){ .view.active{ animation:fadein 0.22s var(--ease); } }

  .view-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:32px;
    padding-bottom:22px;
    border-bottom:1px solid var(--line);
  }
  .view-header .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--link);
    margin-bottom:6px;
  }
  .view-header h2{ font-size:28px; line-height:1.15; }
  .view-header p{ color:var(--ink-soft); margin-top:6px; font-size:13.5px; }

  /* ---- Buttons ---- */
  button{ font-family:inherit; cursor:pointer; }
  .btn{
    background:var(--navy);
    color:var(--on-fill);
    border:none;
    padding:10px 18px;
    border-radius:var(--radius-sm);
    font-size:13px;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:6px;
    box-shadow:var(--shadow-sm);
    transition:background 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.1s var(--ease);
  }
  .btn:hover{ background:var(--navy-deep); box-shadow:var(--shadow-md); }
  .btn:active{ transform:translateY(1px); }
  :is(#app, #overlay) .btn:hover{ transform:translateY(-1px); }
  :is(#app, #overlay) .btn:active{ transform:scale(0.98); }
  .btn.secondary{
    background:var(--panel);
    color:var(--navy);
    border:1px solid var(--line);
    box-shadow:none;
  }
  .btn.secondary:hover{ background:var(--navy-tint); border-color:var(--line-hover); }
  .btn.danger{ background:transparent; color:var(--red); border:1px solid var(--red-soft); box-shadow:none;}
  .btn.danger:hover{ background:var(--red-soft); }
  .btn.small{ padding:6px 12px; font-size:12px; }
  .icon-btn{
    background:transparent; border:none; color:var(--ink-faint);
    padding:5px 8px; border-radius:var(--radius-sm); font-size:12.5px;
    transition:background 0.15s var(--ease), color 0.15s var(--ease);
  }
  .icon-btn:hover{ background:var(--navy-tint); color:var(--ink); }

  /* ---- Cards / panels ---- */
  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px 26px;
    box-shadow:var(--shadow-sm);
  }
  .grid{ display:grid; gap:20px; }
  .grid > *{ min-width:0; }
  .grid.cols-5{ grid-template-columns:repeat(5,1fr); }
  .grid.cols-4{ grid-template-columns:repeat(4,1fr); }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .grid.cols-2{ grid-template-columns:repeat(2,1fr); }

  /* Tablas anchas: que desborden dentro de su propio panel, nunca la página */
  .panel{ overflow-x:auto; }
  table{ min-width:max-content; }
  /* Registro de hallazgos: la descripción se corta en líneas en vez de ensanchar la tabla */
  .tabla-hallazgos{ min-width:0; }
  .tabla-hallazgos td:nth-child(2){ min-width:220px; }
  .tabla-hallazgos .badge{ white-space:nowrap; }
  /* Portal del cliente en pestañas (Etapa 33) */
  .portal-tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:8px 0 4px; position:sticky; top:0; background:var(--bg-solid); z-index:5; padding-top:8px; }
  .portal-tabs[hidden]{ display:none; }
  .portal-tab{ background:none; border:none; border-bottom:2px solid transparent; padding:10px 14px; font:inherit; font-size:13.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; margin-bottom:-1px; display:inline-flex; align-items:center; gap:6px; }
  .portal-tab:hover{ color:var(--ink); }
  .portal-tab.activa{ color:var(--navy-deep); border-bottom-color:var(--acento); font-weight:600; }
  .portal-tab-n{ background:var(--red); color:var(--on-fill); border-radius:var(--radius-full); font-size:11px; font-weight:700; min-width:18px; padding:1px 6px; text-align:center; }

  .stat{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 20px 20px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
  }
  .stat::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--line);
  }
  .stat.good::before{ background:var(--teal); }
  .stat.warn::before{ background:var(--amber); }
  .stat.bad::before{ background:var(--red); }
  .stat .label{
    font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--ink-faint); font-weight:600;
  }
  .stat .value{
    font-family:'Space Grotesk',sans-serif;
    font-size:32px; color:var(--navy-deep); margin-top:8px;
    font-variant-numeric:tabular-nums;
    line-height:1.1;
  }
  .stat.warn .value{ color:var(--amber); }
  .stat.bad .value{ color:var(--red); }
  .stat.good .value{ color:var(--teal); }

  /* ---- Mapa de calor de riesgos ---- */
  .heatmap{ display:grid; grid-template-columns:76px repeat(3, 1fr); gap:5px; margin-bottom:6px; max-width:420px; }
  .heatmap .hm-col-label{ font-size:10px; color:var(--ink-faint); text-align:center; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; padding-bottom:2px; }
  .heatmap .hm-label{ font-size:11.5px; color:var(--ink-soft); display:flex; align-items:center; font-weight:600; }
  .heatmap .hm-cell{
    border-radius:var(--radius-sm); padding:12px 6px; text-align:center; min-height:50px; /* filas sin riesgos: misma altura que las que tienen número */
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; color:var(--on-fill);
    font-variant-numeric:tabular-nums;
  }
  /* Escala de 4 pasos. Las celdas vacías llevan el tono suave de su zona, así la
     matriz se lee como gradiente aunque haya pocos riesgos cargados. */
  .heatmap .hm-cell.bajo{ background:var(--teal); }
  .heatmap .hm-cell.medio{ background:var(--amber); }
  .heatmap .hm-cell.alto{ background:var(--riesgo-alto); }
  .heatmap .hm-cell.critico{ background:var(--riesgo-critico); }
  .heatmap .hm-cell.vacio{ background:var(--line-soft); }
  .heatmap .hm-cell.vacio.z-bajo{ background:var(--teal-soft); }
  .heatmap .hm-cell.vacio.z-medio{ background:var(--amber-soft); }
  .heatmap .hm-cell.vacio.z-alto{ background:var(--riesgo-alto-soft); }
  .heatmap .hm-cell.vacio.z-critico{ background:var(--red-soft); }

  /* ---- Anillo de cumplimiento ---- */
  .ring-wrap{ display:flex; align-items:center; gap:14px; margin-top:10px; }
  .ring-track{ stroke:var(--line-soft); }
  .ring-value{ stroke:var(--acento); transition:stroke-dashoffset 0.7s var(--ease); }
  .ring-tick{ stroke:var(--acento-2); stroke-width:1.6; stroke-linecap:round; }
  .ring-label{
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px;
    fill:var(--navy-deep); font-variant-numeric:tabular-nums;
  }

  /* badges */
  .badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; font-weight:600; padding:4px 10px;
    border-radius:var(--radius-full); letter-spacing:0.02em;
  }
  .badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
  .badge.navy{ background:var(--navy-tint); color:var(--navy); }
  .badge.teal{ background:var(--teal-soft); color:var(--teal); }
  .badge.amber{ background:var(--amber-soft); color:var(--amber-ink); }
  .badge.red{ background:var(--red-soft); color:var(--red); }
  .badge.gray{ background:var(--line-soft); color:var(--ink-soft); }

  .clause-tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--link);
    background:var(--acento-soft);
    padding:3px 8px;
    border-radius:var(--radius-sm);
    white-space:nowrap;
  }

  /* table */
  table{ width:100%; border-collapse:collapse; }
  th{
    text-align:left; font-size:10.5px; text-transform:uppercase;
    letter-spacing:0.07em; color:var(--ink-faint);
    padding:10px 12px; border-bottom:1px solid var(--line); font-weight:600;
    font-family:'IBM Plex Mono',monospace;
  }
  td{ padding:13px 12px; border-bottom:1px solid var(--line-soft); font-size:13.5px; vertical-align:middle; }
  tr:last-child td{ border-bottom:none; }
  tr.clickable{ transition:background 0.12s var(--ease); }
  tr.clickable:hover{ background:var(--navy-tint); cursor:pointer; box-shadow:inset 3px 0 0 var(--acento); }

  select, input[type=text], input[type=password], input[type=date], input[type=number], input[type=search], input[type=month], textarea{
    font-family:inherit;
    font-size:13.5px;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--field-bg);
    color:var(--ink);
    width:100%;
    transition:border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  }
  select:hover, input[type=text]:hover, input[type=password]:hover, input[type=date]:hover, input[type=number]:hover, input[type=search]:hover, input[type=month]:hover, textarea:hover{ border-color:var(--line-strong); }
  select:focus, input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=number]:focus, input[type=search]:focus, input[type=month]:focus, textarea:focus{
    outline:none; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-soft);
  }
  input[type=search]{ -webkit-appearance:none; appearance:none; }
  textarea{ resize:vertical; min-height:64px; }
  label.field{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
  .field-row{ margin-bottom:18px; }

  input[type=file]{
    font-size:12.5px; color:var(--ink-soft); width:100%;
  }
  input[type=file]::file-selector-button{
    font-family:inherit; font-size:12px; font-weight:500; cursor:pointer;
    background:var(--navy-tint); color:var(--navy); border:1px solid var(--line);
    padding:7px 12px; border-radius:var(--radius-sm); margin-right:10px;
    transition:background 0.15s var(--ease);
  }
  input[type=file]::file-selector-button:hover{ background:var(--navy-tint-hover); }

  .empty{
    text-align:center; padding:64px 20px; color:var(--ink-faint);
  }
  .empty::before{
    content:''; display:block; width:42px; height:42px; margin:0 auto 16px;
    border:1.6px dashed var(--line); border-radius:50%;
  }
  .empty .mark{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }

  /* modal */
  .overlay{
    position:fixed; inset:0; background:var(--scrim);
    backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:50;
    padding:20px;
  }
  .overlay.active{ display:flex; animation:fadein 0.15s var(--ease); }
  .modal{
    background:var(--modal-bg); border-radius:var(--radius-lg); width:100%; max-width:540px;
    max-height:88vh; overflow-y:auto; padding:30px 32px;
    box-shadow:var(--shadow-lg);
    animation:modalIn 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  }
  @keyframes modalIn{ from{opacity:0; transform:translateY(14px) scale(0.96);} to{opacity:1; transform:none;} }
  .modal h3{ font-size:18px; margin-bottom:20px; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }

  /* Pista de auditoría */
  .act-row{ display:grid; grid-template-columns:16px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
  .act-row:last-child{ border-bottom:none; }
  .act-dot{ width:8px; height:8px; border-radius:50%; background:var(--acento-2); margin-top:6px; }
  .act-text{ font-size:13.5px; line-height:1.5; }
  .act-meta{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; font-family:'IBM Plex Mono',monospace; }

  /* Tarjetas de NC (vista cliente) */
  .nc-card{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; margin-bottom:12px; }
  .nc-card:last-child{ margin-bottom:0; }
  .nc-card textarea{ min-height:60px; }

  /* Mini gráfico de barras (Analítica) */
  .mini-bars{ display:flex; gap:16px; align-items:flex-end; height:140px; padding-top:10px; }
  .mini-bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:4px; }
  .mini-bar{ width:70%; min-height:3px; background:var(--acento); border-radius:3px 3px 0 0; }
  .mini-bar-wrap span{ font-size:11px; color:var(--ink-faint); text-transform:capitalize; }
  .mini-bar-wrap b{ font-size:12px; }

  /* Skeleton de carga */
  .skeleton{
    background:linear-gradient(90deg, var(--line-soft) 25%, rgba(127,127,127,0.20) 50%, var(--line-soft) 75%);
    background-size:200% 100%; border-radius:var(--radius-sm); animation:brillo 1.4s linear infinite;
  }
  @keyframes brillo{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
  .skeleton-row{ height:52px; margin-bottom:10px; }
  .skeleton-title{ height:32px; width:40%; margin-bottom:20px; }
  .navlink:focus-visible{ outline:2px solid var(--acento-2); outline-offset:-2px; }

  /* Chips de asignación */
  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip-check{ display:inline-flex; align-items:center; gap:6px; font-size:13px; border:1px solid var(--line); padding:6px 10px; border-radius:var(--radius-full); cursor:pointer; }
  .chip-check input{ width:auto; margin:0; }

  .section-title{
    font-size:12.5px; font-weight:600; color:var(--navy);
    text-transform:uppercase; letter-spacing:0.07em;
    margin:38px 0 16px 0; display:flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono',monospace;
  }
  .section-title::after{ content:''; flex:1; height:1px; background:var(--line); }

  .toast{
    position:fixed; bottom:26px; right:26px; background:var(--toast-bg);
    color:var(--toast-ink); padding:12px 20px; border-radius:var(--radius-sm); font-size:13px;
    box-shadow:var(--shadow-lg);
    opacity:0; transform:translateY(10px); transition:all 0.25s var(--ease); z-index:100;
  }
  .toast.show{ opacity:1; transform:none; }
  .toast.error{ background:var(--red); color:var(--on-fill); }
  .toast::before{ content:'✓ '; }
  .toast.error::before{ content:'⚠ '; }

  .breadcrumb{ font-size:12px; color:var(--ink-faint); margin-bottom:6px; }
  .breadcrumb a{ color:var(--link); cursor:pointer; text-decoration:none; }
  .breadcrumb a:hover{ text-decoration:underline; }

  .progress-bar{ height:7px; background:var(--line-soft); border-radius:var(--radius-full); overflow:hidden; }
  .progress-bar > div{ height:100%; background:var(--acento); transition:width 0.5s var(--ease); }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:10px; border:2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--scroll-hover); }

  /* ---- Auth screen ---- */
  .auth-screen{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 12% 18%, rgba(44,110,92,0.38), transparent 42%),
      radial-gradient(circle at 88% 82%, rgba(27,58,92,0.55), transparent 46%),
      var(--navy-deep);
    padding:20px;
  }
  .auth-screen::before{
    content:'';
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size:24px 24px;
    -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  }
  .auth-card{
    position:relative;
    background:var(--modal-bg);
    border-radius:var(--radius-lg);
    padding:38px 36px 30px 36px;
    width:100%;
    max-width:400px;
    box-shadow:var(--shadow-lg);
  }
  .auth-card .auth-logo{
    display:block;
    height:38px;
    width:auto;
    margin-bottom:18px;
  }
  .auth-card h1{ font-size:23px; margin-top:8px; }
  .auth-warning{
    background:var(--amber-soft); color:var(--amber-ink);
    font-size:12px; padding:11px 13px; border-radius:var(--radius-sm);
    margin:16px 0; line-height:1.5;
  }
  .auth-warning code{ background:rgba(0,0,0,0.06); padding:1px 4px; border-radius:3px; }
  .auth-error{
    background:var(--red-soft); color:var(--red);
    font-size:12.5px; padding:10px 13px; border-radius:var(--radius-sm); margin-bottom:16px;
  }
  .auth-info{
    background:var(--acento-soft); color:var(--link);
    font-size:12.5px; padding:10px 13px; border-radius:var(--radius-sm); margin-bottom:16px;
  }
  .auth-switch{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:18px; }
  .auth-switch a{ color:var(--link); cursor:pointer; font-weight:600; text-decoration:none; }
  .auth-switch a:hover{ text-decoration:underline; }
  #auth-screen .field-row{ margin-top:18px; margin-bottom:0; }

  /* ---- Responsive ---- */
  @media (max-width:1180px){
    #main{ padding:36px 32px 60px; }
    .grid.cols-5, .grid.cols-4{ grid-template-columns:repeat(2,1fr); }
    .grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:860px){
    #main{ padding:28px 20px 60px; }
    .grid.cols-5, .grid.cols-4, .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr 1fr; }
    .view-header{ flex-direction:column; align-items:flex-start; }
  }
  @media (max-width:560px){
    .grid.cols-5, .grid.cols-4, .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr; }
  }

  /* Etapa 16 — hitos vinculados a subcláusulas */
  .hito-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; align-items:center; }
  .hito-chips .clause-tag{ font-size:10.5px; }
  .hito-chips-avance{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-faint); margin-left:2px; }

  /* Historial del circuito de corrección (Etapa 50) */
  .hist{ margin:12px 0; padding:10px 12px; background:var(--bg); border-radius:var(--radius-sm); border:1px solid var(--line-soft); }
  .hist-titulo{ font-size:11px; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:6px; }
  .hist-e{ border-left:3px solid var(--line-strong); padding:4px 0 4px 10px; margin:0 0 8px; }
  .hist-e:last-child{ margin-bottom:0; }
  .hist-e.cliente{ border-left-color:var(--acento); }
  .hist-e.consultor{ border-left-color:var(--navy); }
  .hist-c{ font-size:11.5px; color:var(--ink-soft); }
  .hist-t{ font-size:13px; margin-top:2px; white-space:pre-wrap; }
  .hist-l{ font-size:12.5px; margin-top:3px; }
  .hist-l a{ color:var(--link); }
  /* Gantt unificado (Etapa 47) */
  .gantt{ --acc:0px; overflow-x:auto; margin-top:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); }
  .gantt-head, .gantt-row{ display:grid; grid-template-columns: 260px 140px repeat(var(--n), minmax(56px, 1fr)) var(--acc); min-width:calc(400px + var(--n) * 56px + var(--acc)); }
  .gantt.con-acciones{ --acc:200px; }
  .gantt-head{ background:var(--navy-tint); font-size:11px; text-transform:uppercase; color:var(--ink-faint); font-weight:600; letter-spacing:.04em; }
  .gantt-head > div{ padding:8px 10px; }
  .gantt-head .gantt-mes-h{ text-align:center; padding:8px 2px; }
  .gantt-head .gantt-mes-h.hoy{ color:var(--red); }
  .gantt-row{ border-top:1px solid var(--line-soft); align-items:stretch; }
  .gantt-nombre{ position:sticky; left:0; z-index:2; background:var(--panel-solid); padding:10px 10px; grid-row:1; }
  .gantt-head .gantt-nombre{ background:var(--navy-tint-solid); }
  .gantt-nombre .gantt-toggle{ background:none; border:0; cursor:pointer; padding:0 6px 0 0; color:var(--ink-faint); font-size:12px; }
  .gantt-estado{ padding:10px 6px; grid-row:1; display:flex; align-items:center; }
  .gantt-mes{ grid-row:1; min-height:44px; border-left:1px solid var(--line-soft); }
  .gantt-mes.hoy{ background:var(--navy-tint); box-shadow:inset 2px 0 0 var(--red); }
  .gantt-mes.clic{ cursor:pointer; }
  .gantt-mes.clic:hover{ background:var(--acento-soft); }
  .gantt-barra{ grid-row:1; align-self:center; height:20px; border-radius:5px; z-index:1; pointer-events:none; margin:0 2px; }
  .gantt-barra.pendiente{ border:1.5px dashed var(--line-strong); }
  .gantt-barra.noaplica{ background:repeating-linear-gradient(45deg, var(--line), var(--line) 4px, var(--panel) 4px, var(--panel) 8px) !important; }
  .gantt-barra.atrasado{ outline:2px solid var(--red); }
  .gantt-acciones{ grid-row:1; padding:8px 8px; white-space:nowrap; display:flex; align-items:center; gap:4px; }
  .gantt-reqs{ grid-column:1 / -1; background:var(--bg); border-top:1px solid var(--line-soft); padding:6px 10px 10px 36px; }
  .gantt-reqs-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin:6px 0; }
  .gantt-reqs-head select{ width:auto; min-width:170px; }
  .gantt-req{ display:grid; grid-template-columns: minmax(180px, 1.6fr) 130px minmax(90px, 1fr) 96px 70px 60px; gap:8px; align-items:center; padding:6px 0; border-top:1px dotted var(--line); font-size:12.5px; }
  .gantt-req:first-of-type{ border-top:0; }
  .gantt-leyenda{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:11px; color:var(--ink-faint); }
  .gantt-leyenda i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
  .gantt-aviso{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; padding:10px 14px; background:var(--amber-soft); border-radius:var(--radius-sm); font-size:13px; }
  @media (max-width: 720px){
    .gantt-head, .gantt-row{ grid-template-columns: 200px 130px repeat(var(--n), minmax(44px, 1fr)) var(--acc); min-width:calc(330px + var(--n) * 44px + var(--acc)); }
    .gantt-req{ grid-template-columns: 1fr 1fr; }
  }
  .cl-picker{ max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; }
  .cl-picker-norma{ font-size:11px; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin:8px 0 4px; }
  .cl-picker-norma:first-child{ margin-top:0; }
  .check-inline{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:400; padding:3px 0; cursor:pointer; }
  .check-inline input{ width:auto; margin:0; }

  /* Etapa 16 — preparación para la certificación */
  .semaforo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
  .semaforo-card{ border:1px solid var(--line); border-left-width:4px; border-radius:var(--radius-sm); padding:12px 14px; }
  .semaforo-card.teal{ border-left-color:var(--teal); }
  .semaforo-card.amber{ border-left-color:var(--amber); }
  .semaforo-card.red{ border-left-color:var(--red); }
  .semaforo-head{ display:flex; align-items:center; gap:8px; font-size:14px; }
  .semaforo-faltantes{ margin:0; padding-left:18px; font-size:12.5px; color:var(--ink-soft); }
  .dot{ display:inline-flex; align-items:center; justify-content:center; min-width:10px; height:10px; border-radius:999px; font-size:9.5px; font-weight:700; color:var(--on-fill); }
  .dot:not(:empty){ min-width:22px; height:16px; padding:0 4px; margin-right:3px; }
  .dot.teal{ background:var(--teal); }
  .dot.amber{ background:var(--amber); }
  .dot.red{ background:var(--red); }

/* Etapa 17 — evidencia por requisito y sistemas integrados */
.ev-list{ list-style:none; margin:4px 0 8px; padding:0; }
.ev-item{ display:flex; gap:8px; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; }
.ev-item:last-child{ border-bottom:none; }
.ev-origen{ font-size:11px; color:var(--ink-faint); margin-top:2px; }
.ev-add{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.ev-add input[type="text"], .ev-add select{ flex:1 1 160px; min-width:0; }
.integrado-tag{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--navy); margin-top:3px; }

  /* ---- Páginas legales (Etapa 21) ---- */
  .legal-page{ max-width:760px; margin:0 auto; padding:48px 24px 80px 24px; }
  .legal-page .legal-logo{ display:block; height:34px; width:auto; margin-bottom:22px; }
  .legal-page .legal-nav{ font-size:13px; margin-bottom:28px; display:flex; flex-wrap:wrap; gap:6px 18px; }
  .legal-page .legal-nav a{ font-weight:600; text-decoration:none; }
  .legal-page .legal-nav a:hover{ text-decoration:underline; }
  .legal-page h1{ font-size:30px; }
  .legal-page .legal-version{ color:var(--ink-soft); font-size:13px; margin:6px 0 30px 0; }
  .legal-page h2{ font-size:18px; margin:30px 0 8px 0; }
  .legal-page p, .legal-page li{ font-size:14.5px; line-height:1.7; }
  .legal-page ul{ padding-left:22px; }
  .legal-page table{ width:100%; min-width:0; border-collapse:collapse; margin:12px 0; font-size:13.5px; }
  .legal-page th, .legal-page td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
  .legal-page th{ color:var(--ink-soft); font-weight:600; white-space:normal; }
  @media (max-width:560px){
    .legal-page{ padding:28px 16px 60px 16px; }
    .legal-page h1{ font-size:24px; }
    .legal-page table{ font-size:12.5px; }
    .legal-page th, .legal-page td{ padding:6px 6px; }
  }

  /* ---- Aceptación legal (Etapa 21) ---- */
  .auth-legal-label{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft); line-height:1.5; cursor:pointer; }
  .auth-legal-label input{ margin-top:3px; flex:none; width:auto; }
  .auth-access-ayuda{ font-size:11.5px; color:var(--ink-faint); margin-top:5px; line-height:1.5; }
  .auth-access-ayuda a{ color:var(--link); }
  .auth-legal-label a{ font-weight:600; }
  .auth-legal-links{ text-align:center; font-size:11.5px; color:var(--ink-soft); margin:14px 0 0 0; }
  .auth-legal-links a{ color:var(--ink-soft); text-decoration:underline; }
  #sidebar .foot .foot-legal{ margin-top:10px; }
  #sidebar .foot .foot-legal a{ color:var(--sidebar-muted); text-decoration:underline; }

  /* ---- Planes (Etapa 22) ---- */
  .plan-banner{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:11px 16px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:24px; }
  .plan-banner a{ font-weight:600; text-decoration:underline; color:inherit; }
  .plan-banner.info{ background:var(--acento-soft); color:var(--link); }
  .plan-banner.warn{ background:var(--amber-soft); color:var(--amber-ink); }
  .plan-banner.error{ background:var(--red-soft); color:var(--red); }
  .plan-panel .plan-nombre{ font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; color:var(--navy-deep); }
  .plan-panel .plan-dato{ font-size:13px; color:var(--ink-soft); margin-top:4px; }

  /* ---- Administración (Etapa 22) ---- */
  .admin-filtros{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
  .admin-aviso{ font-size:12.5px; color:var(--ink-soft); margin:-4px 0 16px; }
  .admin-resumen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:20px; }
  .admin-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
  .admin-card-titulo{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }
  .admin-card-valor{ font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:600; color:var(--navy-deep); margin-top:4px; }
  .admin-card-detalle{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
  .admin-fila-click{ cursor:pointer; }
  .admin-fila-click:hover{ background:var(--line-soft); }
  .modal:has(.admin-ficha){ max-width:960px; }
  .admin-ficha h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin:18px 0 8px; }
  .admin-ficha-datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 16px; font-size:13.5px; }
  .admin-ficha-datos .k{ display:block; font-size:11.5px; color:var(--ink-faint); }

  /* ---- Página de presentación (Etapa 23) ---- */
  .promo{ background:#fff; }
  .promo-wrap{ max-width:1100px; margin:0 auto; padding:0 24px; }
  .promo-nav{ position:sticky; top:0; z-index:10; background:rgba(255,255,255,0.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
  .promo-nav .promo-wrap{ display:flex; align-items:center; gap:24px; height:64px; }
  .promo-nav img{ height:28px; width:auto; }
  .promo-nav .promo-links{ margin-left:auto; flex:none; padding:0; display:flex; align-items:center; gap:22px; font-size:14px; } /* anula nav{flex:1; padding} de la barra lateral de la app */
  .promo-nav .promo-links a{ color:var(--ink); text-decoration:none; font-weight:500; }
  .promo-nav .promo-links a:hover{ color:var(--teal); }
  .promo-nav .promo-links a.promo-btn{ color:#fff; }
  .promo-btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:var(--radius-sm); font-weight:600; font-size:14.5px; text-decoration:none; transition:background 0.15s, box-shadow 0.15s; }
  .promo-btn.primario{ background:var(--teal); color:#fff; }
  .promo-btn.primario:hover{ background:var(--teal-hover); box-shadow:var(--shadow-md); }
  .promo-btn.secundario{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.45); }
  .promo-btn.secundario:hover{ background:rgba(255,255,255,0.08); }
  .promo-btn.claro{ background:var(--navy); color:#fff; }
  .promo-btn.claro:hover{ background:var(--navy-deep); }
  .promo-nav .promo-btn{ padding:8px 16px; font-size:13.5px; }

  .promo-hero{ position:relative; overflow:hidden; color:#fff; padding:80px 0 0;
    background:
      radial-gradient(circle at 12% 18%, rgba(44,110,92,0.38), transparent 42%),
      radial-gradient(circle at 88% 82%, rgba(27,58,92,0.55), transparent 46%),
      var(--navy-deep); }
  .promo-hero::before{ content:''; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size:24px 24px;
    -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 70%); mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 70%); }
  .promo-hero .promo-wrap{ position:relative; text-align:center; }
  .promo-hero h1{ color:#fff; font-size:46px; line-height:1.12; max-width:760px; margin:0 auto; letter-spacing:-0.025em; }
  .promo-hero .promo-bajada{ font-size:18px; color:#C9D5E3; max-width:620px; margin:18px auto 0; }
  .promo-hero .promo-acciones{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
  .promo-hero .promo-nota{ font-size:12.5px; color:#9FB2C8; margin-top:12px; }
  .promo-captura{ display:block; width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-lg); background:#fff; }
  .promo-hero .promo-captura{ margin:48px auto -1px; max-width:1000px; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; }

  .promo-seccion{ padding:84px 0; }
  .promo-seccion.gris{ background:var(--bg); }
  .promo-seccion h2{ font-size:32px; text-align:center; letter-spacing:-0.02em; }
  .promo-seccion .promo-intro{ text-align:center; color:var(--ink-soft); font-size:16px; max-width:640px; margin:12px auto 0; }
  .promo-para{ padding:44px 0; text-align:center; font-size:17px; color:var(--ink-soft); border-bottom:1px solid var(--line); }
  .promo-para strong{ color:var(--navy-deep); }

  .promo-funciones{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin:44px 0; }
  .promo-funcion{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
  .promo-funcion svg{ width:34px; height:34px; color:var(--teal); background:var(--teal-soft); border-radius:10px; padding:7px; }
  .promo-funcion h3{ font-size:17px; margin:14px 0 6px; }
  .promo-funcion p{ font-size:14px; color:var(--ink-soft); margin:0; }

  .promo-portal{ display:grid; grid-template-columns:1fr 1.25fr; gap:48px; align-items:center; }
  .promo-portal h2{ text-align:left; }
  .promo-portal ul{ list-style:none; padding:0; margin:24px 0 0; }
  .promo-portal li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; margin-bottom:14px; }
  .promo-portal li::before{ content:''; flex:none; width:20px; height:20px; margin-top:2px; border-radius:50%; background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%232C6E5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }

  .promo-precios{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:44px; align-items:stretch; }
  .promo-plan{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; display:flex; flex-direction:column; }
  .promo-plan.destacado{ border:2px solid var(--teal); box-shadow:var(--shadow-lg); }
  .promo-plan .promo-etiqueta{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; font-size:12px; font-weight:600; padding:4px 12px; border-radius:999px; white-space:nowrap; }
  .promo-plan h3{ font-size:20px; }
  .promo-plan ul{ list-style:none; padding:0; margin:18px 0 26px; flex:1; }
  .promo-plan li{ font-size:14.5px; padding:8px 0; border-bottom:1px solid var(--line-soft, #EEF1F4); }
  .promo-plan .promo-btn{ width:100%; }
  .promo-letra-chica{ text-align:center; color:var(--ink-soft); font-size:13.5px; margin-top:26px; }

  .promo-faq{ max-width:760px; margin:40px auto 0; }
  .promo-faq details{ border-bottom:1px solid var(--line); padding:18px 4px; }
  .promo-faq summary{ cursor:pointer; font-weight:600; font-size:16px; color:var(--navy-deep); list-style:none; display:flex; justify-content:space-between; gap:16px; }
  .promo-faq summary::-webkit-details-marker{ display:none; }
  .promo-faq summary::after{ content:'+'; font-size:20px; line-height:1; color:var(--teal); }
  .promo-faq details[open] summary::after{ content:'−'; }
  .promo-faq details p{ margin:10px 0 0; color:var(--ink-soft); font-size:15px; }

  .promo-pie{ background:var(--navy-deep); color:#9FB2C8; font-size:13.5px; padding:36px 0; }
  .promo-pie .promo-wrap{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }
  .promo-pie a{ color:#DCE4EC; }
  .promo-pie .promo-pie-links{ margin-left:auto; display:flex; gap:18px; flex-wrap:wrap; }

  @media (max-width:860px){
    .promo-funciones{ grid-template-columns:repeat(2, 1fr); }
    .promo-precios{ grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; gap:28px; }
    .promo-portal{ grid-template-columns:1fr; gap:28px; }
    .promo-hero h1{ font-size:36px; }
  }
  @media (max-width:560px){
    .promo-wrap{ padding:0 16px; }
    .promo-nav .promo-ancla{ display:none; }
    .promo-funciones{ grid-template-columns:1fr; }
    .promo-hero{ padding-top:52px; }
    .promo-hero h1{ font-size:29px; }
    .promo-hero .promo-bajada{ font-size:16px; }
    .promo-seccion{ padding:60px 0; }
    .promo-seccion h2{ font-size:25px; }
    .promo-pie .promo-pie-links{ margin-left:0; }
  }

  .acciones-fila{ white-space:nowrap; }

  /* ---- Etapa 38 — celular y tablet ----
     Hasta 860 px: barra superior con ☰ y el menú lateral completo como panel deslizable.
     Hasta 560 px: tarjetas en vez de tablas (portal), modales a pantalla completa. */
  #topbar, #menu-fondo{ display:none; }
  @media (max-width:860px){
    #app{ flex-direction:column; }
    #topbar{ display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:40; height:56px; padding:0 8px; background:var(--navy-deep); color:#fff; }
    .topbar-menu{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; color:#fff; border-radius:var(--radius-sm); cursor:pointer; }
    .topbar-menu:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
    .topbar-titulo{ font-weight:600; font-size:15px; letter-spacing:0.01em; }
    .topbar-n{ background:var(--red); color:var(--on-fill); border-radius:var(--radius-full); font-size:11px; font-weight:700; min-width:20px; padding:1px 6px; text-align:center; margin-left:auto; margin-right:8px; }
    #sidebar{ position:fixed; top:0; left:0; bottom:0; height:auto; width:min(290px, 86vw); z-index:60; transform:translateX(-105%); transition:transform 0.22s var(--ease); overflow-y:auto; visibility:hidden; }
    body.menu-abierto #sidebar{ transform:none; visibility:visible; box-shadow:var(--shadow-lg); }
    body.menu-abierto #menu-fondo{ display:block; position:fixed; inset:0; background:rgba(15,23,42,0.45); z-index:55; }
    body.menu-abierto{ overflow:hidden; }
    nav .navlink{ padding-top:12px; padding-bottom:12px; }
    .portal-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; top:56px; }
    .portal-tabs::-webkit-scrollbar{ display:none; }
    .portal-tab{ white-space:nowrap; flex-shrink:0; }
    .nc-card{ scroll-margin-top:120px; }
    table.tabla-tarjetas{ min-width:0; }
    .tabla-tarjetas td{ overflow-wrap:break-word; }
    .tabla-tarjetas td .icon-btn{ white-space:nowrap; }
    .acciones-fila{ white-space:normal; }
    .view-header > div{ flex-wrap:wrap; }
  }
  @media (max-width:560px){
    #main{ padding:20px 16px 48px; }
    .view-header{ margin-bottom:20px; padding-bottom:16px; }
    .view-header h2{ font-size:23px; }
    .grid.cols-5, .grid.cols-4{ grid-template-columns:1fr 1fr; gap:12px; }
    .stat{ padding:14px; }
    .panel{ padding:16px 14px; }
    .nc-card{ padding:14px 12px; }
    .card-head{ flex-wrap:wrap; }
    .card-head > :first-child{ flex:1 1 100%; order:2; }
    .fila-pendiente{ flex-direction:column; align-items:stretch !important; }
    .fila-pendiente .btn{ justify-content:center; }

    .overlay{ padding:0; align-items:stretch; }
    .modal{ max-width:none; max-height:none; height:100%; border-radius:0; padding:22px 16px 0; }
    .modal-actions{ position:sticky; bottom:0; background:var(--modal-bg); margin-top:16px; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); flex-wrap:wrap; }
    .modal-actions .btn{ flex:1 1 auto; justify-content:center; }

    table.tabla-tarjetas{ min-width:0; }
    .tabla-tarjetas thead{ display:none; }
    .tabla-tarjetas tr{ display:block; padding:10px 0; border-bottom:1px solid var(--line-soft); }
    .tabla-tarjetas tr:last-child{ border-bottom:0; }
    .tabla-tarjetas td{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:3px 0; border:0; text-align:right; }
    .tabla-tarjetas td[data-label]::before{ content:attr(data-label); font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-faint); text-align:left; flex-shrink:0; }
    .tabla-tarjetas td:first-child{ font-weight:600; text-align:left; }
    .tabla-tarjetas td:first-child::before{ display:none; }
    .tabla-tarjetas td:empty{ display:none; }
    .tabla-tarjetas td .icon-btn{ border:1px solid var(--line); background:var(--field-bg); margin:6px 6px 0 0; }
    .tabla-tarjetas td:not([data-label]){ justify-content:flex-start; flex-wrap:wrap; text-align:left; }
  }
  /* Tamaño táctil: en pantallas táctiles y en cualquier pantalla chica */
  @media (pointer:coarse), (max-width:560px){
    .btn{ min-height:44px; }
    .btn.small, .icon-btn{ min-height:40px; }
    .icon-btn{ padding:8px 12px; }
    .portal-tab{ min-height:44px; }
    input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea{ font-size:16px; min-height:44px; }
    textarea{ min-height:88px; }
    input[type=checkbox], input[type=radio]{ width:20px; height:20px; }
    input[type=file]{ font-size:14px; max-width:100%; }
    input[type=file]::file-selector-button{ min-height:40px; }
  }

/* ---- Biblioteca MOVA (Etapa 42) ---- */
.bib-filtros{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.bib-filtros #bib-texto{ flex:1 1 280px; }
.bib-filtros select{ max-width:220px; }
.bib-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.bib-barra{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin:4px 0 8px; }
.bib-kits{ display:flex; flex-wrap:wrap; gap:6px; }
.bib-codigo{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; color:var(--link); white-space:nowrap; }
.bib-meta{ color:var(--ink-faint); font-size:12px; margin-top:2px; }
.bib-cl{ border:0; cursor:pointer; font:inherit; }
.bib-cl:hover{ filter:brightness(.95); text-decoration:underline; }
.bib-tabla td{ vertical-align:top; }
.bib-tabs{ display:flex; gap:8px; margin-bottom:16px; }
/* Etapa 55: selector de cliente para descargar personalizado */
.bib-cliente{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 16px; }
.bib-cliente label.field{ margin:0; }
.bib-cliente select{ width:auto; min-width:220px; max-width:100%; }
.bib-cliente-ayuda{ flex-basis:100%; font-size:12px; color:var(--ink-faint); line-height:1.5; }
.bib-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.bib-capitulo{ margin-bottom:16px; }
.bib-filas{ margin-top:6px; }
.bib-fila{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:7px 0; border-top:1px solid var(--line, rgba(0,0,0,.08)); font-size:12.5px; }
.bib-fila:first-child{ border-top:0; }
.bib-fila-titulo{ flex:1 1 160px; font-weight:500; }
.bib-fila-acc{ margin-left:auto; white-space:nowrap; }
@media (max-width:860px){ .bib-grid{ grid-template-columns:1fr; } }
@media (max-width:860px){ .bib-filtros select, .bib-filtros input{ max-width:none !important; flex:1 1 100%; } }

/* ---- Ayuda (Etapa 53) ---- */
.ayuda-buscador{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.ayuda-etiqueta{ font-size:12.5px; font-weight:600; color:var(--ink-soft); flex:1 0 100%; }
.ayuda-buscador input{ flex:1 1 280px; min-width:0; }
.ayuda-contador{ color:var(--ink-soft); font-size:12.5px; }
.ayuda-estado{ color:var(--ink-soft); margin:12px 0; }
.ayuda-estado[hidden], .ayuda-item[hidden], .ayuda-bloque[hidden]{ display:none; }
.ayuda-bloque .section-title{ margin-top:28px; }
.ayuda-item{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; box-shadow:var(--shadow-sm); }
.ayuda-item > summary{ cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:10px; padding:12px 16px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--navy-deep); }
.ayuda-item > summary::-webkit-details-marker{ display:none; }
.ayuda-item > summary::after{ content:'+'; margin-left:auto; padding-left:12px; font-size:20px; line-height:1; color:var(--link); }
.ayuda-item[open] > summary::after{ content:'−'; }
.ayuda-item > summary:hover{ background:var(--navy-tint); }
.ayuda-item > summary:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; border-radius:var(--radius-sm); }
.ayuda-num{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; color:var(--ink-faint); }
.ayuda-cuerpo{ padding:2px 18px 16px; max-width:78ch; font-size:14px; }
.ayuda-cuerpo p{ margin:10px 0; }
.ayuda-cuerpo ul, .ayuda-cuerpo ol{ margin:10px 0; padding-left:22px; }
.ayuda-cuerpo li{ margin:4px 0; }
.ayuda-cuerpo h3{ font-size:15px; margin:20px 0 6px; color:var(--navy); }
.ayuda-tecla{ display:inline-block; padding:0 7px; border:1px solid var(--line-strong); border-radius:6px; background:var(--navy-tint); font-size:12.5px; font-weight:500; color:var(--navy-deep); }
.ayuda-cuerpo .tbl{ overflow-x:auto; margin:12px 0; }
.ayuda-cuerpo table{ min-width:0; width:100%; font-size:13px; }
.ayuda-cuerpo th, .ayuda-cuerpo td{ padding:8px 10px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.ayuda-cuerpo td.key{ font-weight:600; white-space:nowrap; }
.ayuda-cuerpo .callout{ margin:12px 0; padding:10px 14px; border-left:3px solid var(--acento); border-radius:var(--radius-sm); background:var(--acento-soft); }
.ayuda-cuerpo .callout.warn{ border-left-color:var(--amber); background:var(--amber-soft); }

/* ============================================================
   Tema oscuro "vidrio" (Etapa 54, Tanda 1): superficies.
   El desenfoque (backdrop-filter) va solo en tarjetas de resumen, modales, velo y menú;
   los .panel (que llevan tablas largas) quedan translúcidos pero sin desenfoque, por rendimiento.
   ============================================================ */
html[data-tema="oscuro"] body{ background:radial-gradient(120% 90% at 80% -10%, #17476B 0%, #0B1626 55%) fixed; background-color:#0B1626; }
html[data-tema="oscuro"] :focus-visible{ box-shadow:0 0 0 3px var(--acento-ring); }

html[data-tema="oscuro"] #sidebar{
  background-image:none; background-color:rgba(255,255,255,0.04);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  border-right:1px solid rgba(255,255,255,0.08); box-shadow:none;
}
html[data-tema="oscuro"] #topbar{ background:var(--bg-solid); color:var(--ink); border-bottom:1px solid var(--glass-border); }
html[data-tema="oscuro"] nav .navlink.active{ background:linear-gradient(90deg, var(--acento), var(--acento-2)); color:#0B1626; }
html[data-tema="oscuro"] nav .navlink.active::before{ display:none; }
html[data-tema="oscuro"] nav .navlink.active .nav-icon{ color:#0B1626; }
html[data-tema="oscuro"] nav .navlink.active .clause{ background:rgba(11,22,38,0.14); color:#0B1626; }
/* el menú deslizable tapa contenido: más opaco para que se lea, y sin desenfoque (no aportaría) */
@media (max-width:860px){
  html[data-tema="oscuro"] #sidebar{ background-color:#0E1D31; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

html[data-tema="oscuro"] .stat{
  border-color:var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
}
html[data-tema="oscuro"] .panel{ border-color:var(--glass-border); }
html[data-tema="oscuro"] .stat:not(.good):not(.warn):not(.bad) .value{
  background:linear-gradient(90deg, #fff, var(--acento-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

html[data-tema="oscuro"] .btn:not(.secondary):not(.danger){ background:linear-gradient(135deg, var(--acento), var(--acento-2)); color:#0B1626; }
html[data-tema="oscuro"] .btn:not(.secondary):not(.danger):hover{ filter:brightness(1.1); }

html[data-tema="oscuro"] .overlay{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
html[data-tema="oscuro"] .modal{ border:1px solid var(--glass-border); }
html[data-tema="oscuro"] .toast{ border:1px solid var(--glass-border); }

/* ============================================================
   Botón de modo oscuro/claro (Etapa 54) y login en oscuro
   ============================================================ */
.tema-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0;
  width:36px; height:36px; padding:0; border-radius:var(--radius-sm);
  border:1px solid transparent; background:transparent; color:inherit; cursor:pointer;
  transition:background 0.15s var(--ease), transform 0.15s var(--ease);
}
.tema-toggle:hover{ background:rgba(127,127,127,0.18); }
.tema-toggle svg{ width:18px; height:18px; transition:transform 0.18s var(--ease); }
.tema-toggle:active svg{ transform:rotate(35deg) scale(0.9); }
.tema-toggle .i-sol{ display:none; }
.tema-toggle .i-luna{ display:block; }
html[data-tema="oscuro"] .tema-toggle .i-sol{ display:block; }
html[data-tema="oscuro"] .tema-toggle .i-luna{ display:none; }
@media (pointer:coarse){ .tema-toggle{ width:44px; height:44px; } .tema-toggle-menu{ width:auto; } }

#topbar .tema-toggle{ margin-left:auto; color:#fff; }
#topbar .tema-toggle + .topbar-n{ margin-left:0; }
html[data-tema="oscuro"] #topbar .tema-toggle{ color:var(--ink); }

#sidebar .tema-toggle-menu{
  width:100%; justify-content:flex-start; padding:0 10px; margin-bottom:12px;
  color:var(--sidebar-link); font-size:12.5px; font-weight:500; font-family:inherit; border-color:rgba(255,255,255,0.10);
}
#sidebar .tema-toggle-menu:hover{ color:#fff; }

#sidebar .tema-toggle:focus-visible, #topbar .tema-toggle:focus-visible{ outline:2px solid #fff; outline-offset:-2px; box-shadow:none; }

.auth-card .tema-toggle-login{ position:absolute; top:14px; right:14px; color:var(--ink-soft); border-color:var(--line); }

html[data-tema="oscuro"] .auth-screen{
  background:
    radial-gradient(circle at 12% 18%, rgba(127,180,232,0.22), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(23,71,107,0.55), transparent 46%),
    #0B1626;
}
html[data-tema="oscuro"] .auth-card{ border:1px solid var(--glass-border); }
html[data-tema="oscuro"] .auth-card .auth-logo{ filter:brightness(0) invert(1); opacity:0.92; }

/* ============================================================
   Movimiento (Etapa 54, Tanda 1). La clase body.pantalla-nueva la pone movimiento.js
   unos instantes tras cada cambio de pantalla: así las entradas no se repiten en cada re-render al editar.
   ============================================================ */
::view-transition-group(root){ animation-duration:0.18s; animation-timing-function:var(--ease); }

@keyframes entrada{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes anillo{ from{ stroke-dashoffset:var(--c); } }
@keyframes barra{ from{ width:0; } }

/* Escalonado: --n es el orden de cada tarjeta (0..8); desde la 9.ª todas esperan lo mismo. */
.view.active .grid > :nth-child(1){ --n:0; }
.view.active .grid > :nth-child(2){ --n:1; }
.view.active .grid > :nth-child(3){ --n:2; }
.view.active .grid > :nth-child(4){ --n:3; }
.view.active .grid > :nth-child(5){ --n:4; }
.view.active .grid > :nth-child(6){ --n:5; }
.view.active .grid > :nth-child(7){ --n:6; }
.view.active .grid > :nth-child(8){ --n:7; }
.view.active .grid > :nth-child(n+9){ --n:8; }
body.pantalla-nueva .view.active .grid > *{ animation:entrada 0.32s var(--ease) both; animation-delay:calc(var(--n, 0) * 40ms); }
body.pantalla-nueva .view.active > .panel{ animation:entrada 0.32s var(--ease) both; animation-delay:60ms; }
body.pantalla-nueva .ring-value{ animation:anillo 0.9s var(--ease) both; animation-delay:120ms; }
body.pantalla-nueva .progress-bar > div{ animation:barra 0.6s var(--ease) both; animation-delay:120ms; }

/* Gantt en oscuro: fondo opaco continuo, así la columna de nombres (sticky, opaca) no queda de otro tono que las celdas. */
html[data-tema="oscuro"] .gantt{ background:var(--panel-solid); }
html[data-tema="oscuro"] .gantt-head{ background:var(--navy-tint-solid); }

/* ============================================================
   Tanda 3 (Etapa 54): portal del cliente y pulido final, en oscuro
   ============================================================ */
/* Barra de pestañas fija del portal: casi opaca y con vidrio, para que no se vea una franja de otro tono sobre el degradé. */
html[data-tema="oscuro"] .portal-tabs{ background:rgba(11,22,38,0.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
/* Botón de peligro (Eliminar): el borde claro-sobre-oscuro de claro casi no se ve. */
html[data-tema="oscuro"] .btn.danger{ border-color:rgba(255,194,194,0.45); }
html[data-tema="oscuro"] .btn.danger:hover{ background:var(--red-soft); border-color:var(--red); }
html[data-tema="oscuro"] .auth-warning code{ background:rgba(255,255,255,0.12); }