/* ============================================================
   SERENO — sistema de diseño v2.0 (mockups aprobados 2026-11-05)
   Superficies sólidas, sin vidrio. El azul es la firma y sólo él.
   Se carga DESPUÉS de styles.css. Los valores base se personalizan
   en el módulo Personalización (index.html genera #tema-personalizado).
   Todo lo demás (tonos suaves, líneas, degradado) se DERIVA de 5 bases
   por tema: acento, fondo, superficie, texto, línea.
   ============================================================ */

/* ── Bases · tema claro ─────────────────────────────────────── */
:root {
  --accent:  #2F80FF;
  --bg:      #F5F6F8;
  --surface: #FFFFFF;
  --text:    #121720;
  --line:    #E2E5EA;

  --ok:#1E7F47;  --ok-soft:#E6F4EC;
  --warn:#985A00; --warn-soft:#FFF3DC;
  --bad:#B93333; --bad-soft:#FCEBEB;
  --muted:#556070; --muted-soft:#EDEFF2;

  --shadow-1:0 1px 2px rgba(18,23,32,.05);
  --shadow-2:0 1px 2px rgba(18,23,32,.04),0 8px 24px -8px rgba(18,23,32,.10);
  --shadow-pop:0 2px 4px rgba(18,23,32,.06),0 16px 40px -12px rgba(18,23,32,.22);
  --font-base:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display-base:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  --radio: 10px;
  --r-btn: 999px;   /* botones en cápsula (PO 2026-11-05); Personalización → Tipografía y forma */
  color-scheme: light;
}

/* Derivados: se calculan sobre <body> para que sigan al tema activo y a lo personalizado */
body {
  --btn-shadow:0 1px 2px color-mix(in srgb,var(--accent) 30%,transparent),0 4px 12px -4px color-mix(in srgb,var(--accent) 45%,transparent);
  --accent-ink:  color-mix(in srgb, var(--accent) 80%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 26%, var(--surface));
  --surface-2:   color-mix(in srgb, var(--text) 5%,  var(--surface));
  --surface-3:   color-mix(in srgb, var(--text) 9%,  var(--surface));
  --line-strong: color-mix(in srgb, var(--line) 82%, var(--text));
  --text-2:      color-mix(in srgb, var(--text) 74%, var(--surface));
  --text-3:      color-mix(in srgb, var(--text) 56%, var(--surface));
  --grad: linear-gradient(160deg, color-mix(in srgb,var(--accent) 64%,#fff) 0%, var(--accent) 45%, color-mix(in srgb,var(--accent) 88%,#000) 100%);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --r-sm: calc(var(--radio) * .6); --r: var(--radio); --r-lg: calc(var(--radio) * 1.4);

  /* Alias para los estilos v1 que aún no se migran (se eliminan en fases 3–5) */
  --blue: var(--accent);
  --blue-glow: color-mix(in srgb, var(--accent) 64%, #fff);
  --smoke: var(--surface);
  --mod-accent: var(--accent);
  --mod-accent2: var(--accent);
  --dk-bg1: var(--bg); --dk-bg2: var(--surface); --dk-blue: var(--accent);
  --dk-silver: var(--text-2); --dk-text: var(--text);
}

/* ── Bases · tema oscuro (diseñado aparte, no es el claro invertido) ── */
body.theme-dark {
  --accent:  #4C93FF;
  --bg:      #0C0F14;
  --surface: #141920;
  --text:    #E9EDF3;
  --line:    #252C37;

  --ok:#5BC98C;  --ok-soft:#12271C;
  --warn:#F2B552; --warn-soft:#2C2212;
  --bad:#F27E7E; --bad-soft:#321719;
  --muted:#A3ADBB; --muted-soft:#232A35;

  --shadow-1:0 1px 0 rgba(255,255,255,.02);
  --shadow-2:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-pop:0 0 0 1px rgba(255,255,255,.04),0 20px 48px -12px rgba(0,0,0,.75);
  --btn-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px -6px color-mix(in srgb,var(--accent) 55%,transparent);

  --accent-ink:  color-mix(in srgb, var(--accent) 58%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 34%, var(--surface));
  --line-strong: color-mix(in srgb, var(--line) 78%, var(--text));
  --text-3:      color-mix(in srgb, var(--text) 54%, var(--surface));
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
  color-scheme: dark;
}

/* ── Base global ────────────────────────────────────────────── */
html body {
  font-family: var(--font-base);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
}
html body.theme-dark {
  background: var(--bg) !important;
  color: var(--text);
}
h1, h2, h3 { font-family: var(--font-display-base); letter-spacing: -.01em; }

/* ============================================================
   ACCESO (login · recuperar · nueva contraseña)
   Panel lateral fijo (marca + mensaje) + formulario a la derecha.
   Se muestra sólo mientras alguna pantalla de acceso está visible.
   ============================================================ */
#acceso-lado, #acceso-tema { display: none; }
body:has(#login:not([style*="display: none"])) #acceso-lado,
body:has(#forgot-panel[style*="display: block"]) #acceso-lado,
body:has(#reset-panel[style*="display: block"]) #acceso-lado { display: flex; }
body:has(#login:not([style*="display: none"])) #acceso-tema,
body:has(#forgot-panel[style*="display: block"]) #acceso-tema,
body:has(#reset-panel[style*="display: block"]) #acceso-tema { display: inline-flex; }

#acceso-lado {
  position: fixed; inset: 0 auto 0 0; width: 52vw; z-index: 1;
  flex-direction: column; padding: 44px 56px; overflow: hidden;
  background: var(--surface); border-right: 1px solid var(--line); color: var(--text);
}
#acceso-lado::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .55;
  mask-image: radial-gradient(ellipse at 30% 70%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 70%, #000 0%, transparent 70%);
}
#acceso-lado > * { position: relative; }
#acceso-lado .acc-logo { height: 92px; width: auto; max-width: 480px; object-fit: contain; object-position: left center; align-self: flex-start; }
#acceso-lado .acc-claim { margin-top: auto; max-width: 460px; }
#acceso-lado .acc-eyebrow { font: 600 11px var(--font-base); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
#acceso-lado h1 { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; margin: 12px 0 0; color: var(--text); }
#acceso-lado h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
#acceso-lado p { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 16px 0 0; max-width: 410px; }
#acceso-lado .acc-facts { display: flex; gap: 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
#acceso-lado .acc-facts b { display: block; font: 600 22px var(--font-display-base); letter-spacing: -.02em; color: var(--text); }
#acceso-lado .acc-facts span { font-size: 12.5px; color: var(--text-3); }
#acceso-lado .acc-pie { margin-top: 40px; font-size: 12px; color: var(--text-3); }

/* Selector de tema (arriba a la derecha) */
#acceso-tema {
  position: fixed; top: 24px; right: 32px; z-index: 3; padding: 3px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
}
#acceso-tema button {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; font: 400 12px var(--font-base); color: var(--text-3);
}
#acceso-tema button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#acceso-tema button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }

/* Formularios de acceso: columna derecha, sin tarjeta de vidrio */
html body .login-container,
html body.theme-dark .login-container {
  position: relative; z-index: 2;
  max-width: none; width: auto; min-height: 100vh;
  margin: 0 0 0 52vw;
  padding: 16vh max(40px, calc((48vw - 380px) / 2)) 48px;
  border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  background: var(--bg); color: var(--text); text-align: left;
}
html body .login-container::before { display: none; }
html body:not(.theme-dark) .login-container { border: 0 !important; } /* anula el bisel v1 (styles.css, !important) */
html body .login-container .login-logo { display: none; }
html body .login-container h2,
html body.theme-dark .login-container h2 {
  font: 600 24px var(--font-display-base); letter-spacing: -.01em; color: var(--text);
  margin: 0 0 6px !important; text-align: left;
}
#login .acc-nombre { font: 600 11px var(--font-base); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; }
#login .acc-sub { color: var(--text-2); font-size: 14px; margin: 0 0 22px; }
html body .login-container p { color: var(--text-2) !important; text-align: left !important; }

html body .login-container .input-group { margin-bottom: 16px; }
html body .login-container .input-group label { display: block; font: 600 12.5px var(--font-base); color: var(--text-2); margin-bottom: 6px; }
html body .login-container input,
html body.theme-dark .login-container input {
  height: 42px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 400 14px var(--font-base); box-shadow: none; caret-color: var(--accent);
}
html body .login-container input::placeholder,
html body.theme-dark .login-container input::placeholder { color: var(--text-3); }
html body .login-container input:focus,
html body.theme-dark .login-container input:focus {
  background: var(--surface); border-color: var(--accent); box-shadow: var(--focus); transform: none;
}

html body .login-container button,
html body.theme-dark .login-container button {
  height: 44px; padding: 0 16px; margin-top: 6px; border-radius: var(--r-btn); border: 0;
  background: var(--grad); color: #fff; font: 600 14.5px var(--font-base);
  box-shadow: var(--btn-shadow); text-shadow: none;
}
html body .login-container button:hover:not(:disabled),
html body.theme-dark .login-container button:hover:not(:disabled) { filter: brightness(1.06); transform: none; box-shadow: var(--btn-shadow); }
html body .login-container button:focus-visible { box-shadow: var(--btn-shadow), var(--focus); outline: none; }
html body .login-container button:disabled { opacity: .55; filter: none; }

html body .login-container a { color: var(--accent-ink) !important; font-size: 13px !important; }
html body .login-container div[style*="text-align:center"] { text-align: left !important; }
#login .acc-ayuda { font-size: 12.5px; color: var(--text-3); margin-top: 18px; }

/* Reglas de contraseña (formulario de nueva contraseña) */
#reset-panel div[style*="line-height:1.9"] { background: var(--surface-2) !important; border: 1px solid var(--line); color: var(--text-2); }

/* Versión: abajo a la derecha, discreta */
.app-version { color: var(--text-3) !important; background: transparent !important; }

/* ── Móvil (≤ 760 px): marca arriba, formulario abajo ───────── */
@media (max-width: 760px) {
  #acceso-lado { position: relative; inset: auto; width: auto; padding: 20px 20px 26px; border-right: 0; border-bottom: 1px solid var(--line); }
  body:has(#login:not([style*="display: none"])) #acceso-lado,
  body:has(#forgot-panel[style*="display: block"]) #acceso-lado,
  body:has(#reset-panel[style*="display: block"]) #acceso-lado { display: flex; }
  #acceso-lado .acc-logo { height: 64px; max-width: 70vw; }
  #acceso-lado .acc-claim { margin-top: 28px; }
  #acceso-lado h1 { font-size: 27px; }
  #acceso-lado p { font-size: 14.5px; margin-top: 10px; }
  #acceso-lado .acc-facts, #acceso-lado .acc-pie { display: none; }
  #acceso-tema { position: absolute; top: 14px; right: 14px; }
  #acceso-tema button { font-size: 0; gap: 0; width: 40px; height: 36px; justify-content: center; padding: 0; }
  #acceso-tema button svg { width: 17px; height: 17px; }
  html body .login-container, html body.theme-dark .login-container { margin: 0; min-height: 0; padding: 26px 20px 48px; }
  html body .login-container input { height: 46px; font-size: 16px; }
  html body .login-container button { height: 48px; }
}

/* RET-01: ver/ocultar contraseña */
.sr-pass{position:relative;display:block;width:100%}
.sr-pass>input{width:100%;padding-right:44px!important;box-sizing:border-box}
.sr-pass-ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;
  border:0!important;background:transparent!important;color:var(--text-2,var(--text));opacity:.7;cursor:pointer;border-radius:999px;padding:0!important;margin:0!important;box-shadow:none!important;min-width:0!important}
.sr-pass-ojo:hover,.sr-pass-ojo:focus-visible{opacity:1;background:color-mix(in srgb,var(--accent) 12%,transparent)!important;outline:none}

/* Ojo de contraseña: los estilos de los botones del login (ancho completo, posición) no deben alcanzarlo */
html body .sr-pass > input { display: block !important; margin: 0 !important; }
html body .sr-pass > .sr-pass-ojo {
  position: absolute !important; top: 50% !important; right: 6px !important; left: auto !important; bottom: auto !important;
  transform: translateY(-50%) !important; width: 34px !important; height: 34px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; box-shadow: none !important; color: var(--text-2) !important; display: grid !important; place-items: center;
}
html body .sr-pass > .sr-pass-ojo:hover, html body .sr-pass > .sr-pass-ojo:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent) !important; color: var(--text) !important; }
/* Reglas de la nueva contraseña: texto pendiente con el color del tema (antes gris fijo, invisible en oscuro) */
#reset-panel #reset-form [id^="rule-"] { color: var(--text-2); }