/* Isabella EA v2.0 — portales de clientes (selector de módulos y acceso).
   Tokens, familias y logotipos: Manual de Marca Isabella EA v2.0 (repo IsabellaEA, docs/Manual_Marca_IsabellaEA/v2.0,
   assets/data/tokens-v2.css). Copia idéntica en cada portal: la fuente es /root/isabella_portales/marca-isabella.
   Sin terceros, sin scripts. El color de acento del cliente (--acento) es solo decorativo: nunca lleva texto. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fuentes/jost-var.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fuentes/opensans-var.woff2') format('woff2'); }
:root {
  --azul-noche: #041423; --azul-abismo: #020A12; --azul-pizarra: #16324A; --azul-bruma: #8FA6BA; --azul-hielo: #EDF3F7;
  --verde-isabella: #61A754; --verde-brote: #ACD694; --verde-texto: #3A7A30; --verde-profundo: #2B5C23; --verde-palido: #EAF4E3;
  --gris-niebla: #F5F7F4; --gris-borde: #DCE3DA; --gris-texto-aa: #566159; --gris-carbon: #28322C; --tinta: #0A100D;
  --rojo-texto: #B02F0B; --rojo-palido: #FDEBE5; --ambar-texto: #7A5300; --ambar-palido: #FFF5DA;
  --f-display: 'Jost', system-ui, sans-serif; --f-sans: 'Open Sans', system-ui, sans-serif;
  --acento: var(--verde-brote); --radio: 20px; --radio-pill: 999px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.isa { margin: 0; min-height: 100vh; font: 400 1rem/1.6 var(--f-sans); color: #fff; background: var(--azul-noche);
  font-synthesis: none; display: flex; flex-direction: column; }
.isa a { color: inherit; }
.isa :focus-visible { outline: 3px solid var(--verde-brote); outline-offset: 3px; border-radius: 6px; }
.isa-saltar { position: absolute; left: 1rem; top: -4rem; background: var(--verde-brote); color: var(--tinta); padding: .6rem 1rem;
  border-radius: var(--radio-pill); font-weight: 600; z-index: 10; text-decoration: none; }
.isa-saltar:focus { top: 1rem; }

/* Fondo: las barras de crecimiento del símbolo (manual §03), en la profundidad del azul. */
.isa-fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 85% 100%, rgba(97,167,84,.16), transparent 70%), var(--azul-noche); }
.isa-fondo svg { position: absolute; right: -2%; bottom: 0; width: min(46vw, 560px); height: auto; opacity: .34; }
.isa-acceso-marca .isa-fondo svg { width: min(48vw, 640px); opacity: .55; }
.isa-fondo .b { fill: url(#isa-g); }
.isa-fondo .t { fill: var(--acento); opacity: .9; }
.isa-capa { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }

/* Barra superior */
.isa-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1rem, 4vw, 3rem); }
.isa-marca { display: inline-flex; align-items: center; text-decoration: none; }
.isa-marca img { display: block; height: 34px; width: auto; }
.isa-boton { display: inline-flex; align-items: center; gap: .5rem; font: 500 .95rem/1 var(--f-display); text-decoration: none;
  padding: .75rem 1.2rem; border-radius: var(--radio-pill); border: 1px solid rgba(255,255,255,.28); color: #fff; min-height: 44px; }
.isa-boton:hover { border-color: var(--verde-brote); color: var(--verde-brote); }

/* Portal (selector) */
.isa-portal { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem) 3rem; }
.isa-hero { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.isa-ceja { margin: 0 0 .9rem; font: 600 .78rem/1.3 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--verde-brote);
  display: inline-flex; align-items: center; gap: .6rem; }
.isa-ceja::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.isa-hero h1, .isa-acceso-marca h1 { margin: 0; font: 600 clamp(2.4rem, 6vw, 4.2rem)/1.04 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.isa-lead { margin: 1rem 0 0; max-width: 46ch; font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255,255,255,.82); }
.isa-placa { margin: 0; background: #fff; border-radius: var(--radio); padding: 1rem; width: clamp(120px, 18vw, 200px); aspect-ratio: 1;
  display: grid; place-items: center; box-shadow: 0 18px 40px rgba(0,0,0,.35); border-top: 6px solid var(--acento); }
.isa-placa img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.isa-modulos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.isa-modulo { position: relative; display: flex; flex-direction: column; gap: .35rem; height: 100%; min-height: 168px; padding: 1.4rem 1.3rem 1.2rem;
  text-decoration: none; border-radius: var(--radio); background: rgba(13,36,56,.94); border: 1px solid rgba(143,166,186,.28);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.isa-modulo:hover { transform: translateY(-3px); border-color: var(--verde-brote); background: var(--azul-pizarra); }
.isa-icono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: .55rem;
  background: rgba(172,214,148,.14); color: var(--verde-brote); }
.isa-icono svg { width: 24px; height: 24px; }
.isa-modulo-t { font: 600 1.2rem/1.25 var(--f-display); }
.isa-modulo-d { font-size: .92rem; color: rgba(255,255,255,.78); }
.isa-modulo-ir { margin-top: auto; padding-top: .6rem; font: 500 .9rem/1 var(--f-display); color: var(--verde-brote); }
.isa-modulo-ir::after { content: ' →'; }
.isa-modulo--sec { background: rgba(4,20,35,.9); border-style: dashed; }
.isa-nota { margin: 2rem 0 0; font-size: .9rem; color: rgba(255,255,255,.7); }

/* Pie */
.isa-pie { padding: 1.4rem clamp(1rem, 4vw, 3rem); border-top: 1px solid rgba(143,166,186,.18); font-size: .88rem; color: rgba(255,255,255,.72);
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: space-between; }
.isa-pie a { color: var(--verde-brote); text-decoration: underline; text-underline-offset: 3px; }

/* Acceso (login): marca del cliente a la izquierda, formulario a la derecha. Los campos y el formulario son los de
   siempre (mismas clases: .login-form, .input-group, .login-input, .login-btn, .alert). */
.isa-acceso { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.isa-acceso-marca { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem); background: var(--azul-noche); }
.isa-acceso-marca .isa-fondo { position: absolute; }
.isa-acceso-marca > * { position: relative; z-index: 1; }
.isa-acceso-marca h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.isa-acceso-marca .isa-placa { width: 120px; margin-bottom: 1.4rem; }
.isa-acceso-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.2rem;
  padding: clamp(1.5rem, 4vw, 3rem); background: var(--gris-niebla); color: var(--tinta); }
.isa-tarjeta { width: 100%; max-width: 420px; background: #fff; border-radius: var(--radio); padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--gris-borde); box-shadow: 0 24px 48px rgba(4,20,35,.08); }
.isa-tarjeta h2 { margin: 0 0 .3rem; font: 600 1.6rem/1.2 var(--f-display); color: var(--azul-noche); }
.isa-tarjeta > p { margin: 0 0 1.4rem; color: var(--gris-texto-aa); font-size: .95rem; }
.isa-tarjeta .login-form { display: grid; gap: .9rem; margin: 0; }
.isa-tarjeta .reauth-email:empty, .isa-tarjeta .profile-name-card:empty { display: none; }
.isa-tarjeta .input-group { position: relative; display: block; width: 100%; margin: 0; }
.isa-tarjeta .input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--gris-texto-aa); pointer-events: none; }
.isa-tarjeta .login-input, .isa-tarjeta input[type=text], .isa-tarjeta input[type=password], .isa-tarjeta input[type=email] {
  width: 100%; min-height: 50px; padding: .8rem 1rem .8rem 2.8rem; font: 400 1rem/1.3 var(--f-sans); color: var(--tinta);
  background: #fff; border: 1.5px solid var(--gris-borde); border-radius: 14px; box-shadow: none; }
.isa-tarjeta .login-input::placeholder { color: var(--gris-texto-aa); opacity: 1; }
.isa-tarjeta .login-input:focus, .isa-tarjeta input:focus { outline: 3px solid rgba(97,167,84,.35); outline-offset: 1px; border-color: var(--verde-texto); }
.isa-tarjeta .login-btn, .isa-tarjeta button[type=submit], .isa-tarjeta input[type=submit] { width: 100%; min-height: 50px; margin-top: .3rem; cursor: pointer;
  font: 600 1.02rem/1 var(--f-display); letter-spacing: .01em; color: #fff; background: var(--verde-texto); border: 0; border-radius: var(--radio-pill); }
.isa-tarjeta .login-btn:hover, .isa-tarjeta button[type=submit]:hover { background: var(--verde-profundo); }
.isa-tarjeta .login-btn:focus-visible { outline: 3px solid var(--verde-isabella); outline-offset: 3px; }
.isa-tarjeta .alert { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; font-size: .93rem; border: 1px solid transparent; }
.isa-tarjeta .alert-danger { background: var(--rojo-palido); color: var(--rojo-texto); border-color: rgba(176,47,11,.25); }
.isa-tarjeta .alert-success { background: var(--verde-palido); color: var(--verde-profundo); border-color: rgba(58,122,48,.25); }
.isa-tarjeta a { color: var(--verde-texto); }
.isa-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; font-size: .9rem; color: var(--gris-texto-aa); }
.isa-enlaces a { color: var(--azul-pizarra); font-weight: 600; text-underline-offset: 3px; }
.isa-acceso-marca .isa-pie-marca { font-size: .85rem; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: .6rem; }
.isa-acceso-marca .isa-pie-marca img { height: 26px; width: auto; }

@media (max-width: 860px) {
  .isa-hero { grid-template-columns: 1fr; }
  .isa-hero .isa-placa { order: -1; width: 120px; }
  .isa-acceso { grid-template-columns: 1fr; }
  .isa-acceso-marca { min-height: 0; padding-bottom: 2.2rem; }
  .isa-acceso-marca .isa-fondo svg { width: 90vw; opacity: .35; }
  .isa-acceso-marca .isa-placa { width: 88px; margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .isa-modulo { transition: none; } .isa-modulo:hover { transform: none; } }