/* ════════════════════════════════════════════════════════════════════════
   RESINALIA — sistema de diseño de las páginas PÚBLICAS
   (cuentas: entrar, registro, restablecer, confirmar; avisos de error;
   directorio y fichas que se vayan pasando a la marca nueva)

   PARA QUÉ
   Los tokens y componentes vivían copiados en línea en landing-cliente-v2.html
   (bloque <style>) y en pdr/directorio.html. Este archivo es la copia ÚNICA para
   las páginas nuevas: paleta naranja / crema / tinta, letra Figtree, barra
   naranja con el cubo, botones en píldora, formularios accesibles, avisos,
   estado vacío, pie y aviso de "sin conexión". Nada de verde ni de azul.
   (Las dos páginas de arriba todavía no lo cargan: se pasan cuando se toquen.)

   CÓMO SE USA (orden de carga en el <head>)
     <meta name="theme-color" content="#EA4A0F">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap">
     <link rel="stylesheet" href="css/resinalia.5312891091.css">      (desde pdr/: ../css/resinalia.css?v=1)
   - Si la página usa la ventana o los avisos de la app (js/pdr-ui.js), carga
     css/pdr-shared.css ANTES que este archivo: el bloque "Puente" de abajo le
     cambia el azul/verde de la app por brasa y tinta.
   - NO cargues js/pdr-theme.js: mete el acento azul y el tema oscuro del hub
     encima de esta paleta (ver mapa/errores.md).
   - Caché: Cloudflare sirve /css/* como immutable por un año. Cada vez que
     cambie este archivo, sube el ?v= en las páginas que lo cargan.
   - Ningún componente necesita JS en línea. Los avisos aceptan el texto con
     textContent (el ícono sale del CSS, no del HTML), así no hace falta innerHTML.

   CUBO DEL LOGO — barra naranja (variante a color, la de landing-cliente-v2.html)
     <svg class="logo-cubo" width="42" height="42" viewBox="0 0 40 40" aria-hidden="true">
       <g transform="translate(20 22)">
         <path d="M-13 0 L-13 7 L0 18 L0 11 Z" fill="#1F1F1D"/>
         <path d="M13 0 L13 7 L0 18 L0 11 Z" fill="#8B8B85"/>
         <path d="M0 -11 L13 0 L0 11 L-13 0 Z" fill="#0A0A09"/>
         <line x1="-13" y1="0" x2="13" y2="0" stroke="#FAFAF7" stroke-width="0.6" opacity="0.7"/>
         <line x1="0" y1="-11" x2="0" y2="11" stroke="#FAFAF7" stroke-width="0.6" opacity="0.7"/>
         <line x1="6.5" y1="-5.5" x2="-6.5" y2="5.5" stroke="#FAFAF7" stroke-width="0.5" opacity="0.55"/>
         <line x1="-6.5" y1="-5.5" x2="6.5" y2="5.5" stroke="#FAFAF7" stroke-width="0.5" opacity="0.55"/>
       </g>
     </svg>
   CUBO DEL LOGO — pie oscuro (variante "claro invertido"), width/height 34
     <svg class="logo-cubo" width="34" height="34" viewBox="0 0 40 40" aria-hidden="true">
       <g transform="translate(20 22)">
         <path d="M-13 0 L-13 7 L0 18 L0 11 Z" fill="#E5E5E0"/>
         <path d="M13 0 L13 7 L0 18 L0 11 Z" fill="#8B8B85"/>
         <path d="M0 -11 L13 0 L0 11 L-13 0 Z" fill="#FAFAF7"/>
         <line x1="-13" y1="0" x2="13" y2="0" stroke="#0A0A09" stroke-width="0.6" opacity="0.6"/>
         <line x1="0" y1="-11" x2="0" y2="11" stroke="#0A0A09" stroke-width="0.6" opacity="0.6"/>
         <line x1="6.5" y1="-5.5" x2="-6.5" y2="5.5" stroke="#0A0A09" stroke-width="0.5" opacity="0.45"/>
         <line x1="-6.5" y1="-5.5" x2="6.5" y2="5.5" stroke="#0A0A09" stroke-width="0.5" opacity="0.45"/>
       </g>
     </svg>

   EJEMPLO MÍNIMO (barra + caja de cuenta + pie)
     <body>
       <a class="saltar" href="#contenido">Saltar al contenido</a>
       <header class="top">
         <a class="logo" href="/" aria-label="Resinalia, inicio">[cubo de la barra] Resinalia</a>
         <nav class="top-nav" aria-label="Aplicadores">
           <a class="top-link" href="entrar">Entrar</a>
           <a class="top-btn" href="/">Soy aplicador</a>
         </nav>
       </header>
       <main class="cuenta-pagina" id="contenido">
         <section class="cuenta-caja" aria-labelledby="t">
           <h1 class="cuenta-titulo" id="t">Entra a tu cuenta</h1>
           <p class="cuenta-sub">Usa el correo con el que te registraste.</p>
           <div class="aviso aviso-error" role="alert" hidden></div>
           <form novalidate>
             <div class="campo">
               <label for="correo">Correo</label>
               <input id="correo" name="email" type="email" autocomplete="email" inputmode="email"
                      aria-describedby="correo-error" required>
               <p class="error" id="correo-error" hidden></p>
             </div>
             <div class="campo">
               <label for="clave">Contraseña</label>
               <div class="campo-contrasena">
                 <input id="clave" name="password" type="password" autocomplete="current-password" required>
                 <button class="ver-contrasena" type="button" aria-controls="clave" aria-pressed="false">Mostrar</button>
               </div>
             </div>
             <div class="cuenta-acciones">
               <button class="btn btn-pri btn-bloque" type="submit">Entrar</button>
               <a class="btn btn-link" href="entrar?modo=recuperar">Olvidé mi contraseña</a>
             </div>
           </form>
           <p class="cuenta-alterna">¿Aún no tienes cuenta? <a href="entrar?modo=registro">Crea tu cuenta</a></p>
         </section>
       </main>
       <footer class="pie"><div class="pie-in">[logo del pie] <nav aria-label="Pie de página">…</nav> <span>© 2026 Resinalia</span></div></footer>
       <div class="sin-red" role="status" hidden>Sin conexión. Revisa tu internet; lo que escribiste no se pierde.</div>
     </body>

   CONTRATO DE CLASES (no renombrar: otras páginas las usan)
     Base ........ .sr-only .saltar .envoltura .texto-2   ([hidden] siempre oculta)
     Barra ....... .top .logo .logo-cubo .top-nav .top-link .top-btn
     Botones ..... .btn + .btn-pri | .btn-sec | .btn-link ; .btn-bloque (ancho completo)
                   Deshabilitado: atributo disabled o aria-disabled="true"
                   Cargando: clase .cargando o aria-busy="true" (pon también disabled)
     Pestañas .... .pestanas > button.pestana[role=tab][aria-selected]
                   Con js/pestanas.js el fondo naranja se DESLIZA a la elegida (§5);
                   el JS agrega .con-fondo y span.pestanas-fondo > .pestanas-pista
     Formularios . .campo > label + input|select|textarea + .ayuda + .error
                   (alias: .campo-etiqueta .campo-ayuda .campo-error; .entrada para un
                   control fuera de .campo; .opcional dentro del label)
                   Error del campo: aria-invalid="true" en el control (o .con-error en .campo)
                   Contraseña: .campo-contrasena > input + button.ver-contrasena
                   Casilla: label.casilla > input[type=checkbox] + texto
     Avisos ...... .aviso + .aviso-ok | .aviso-error | .aviso-info | .aviso-alerta
                   (.sin-icono quita el ícono; error → role="alert", lo demás → role="status")
     Cuenta ...... .cuenta-pagina > .cuenta-caja > .cuenta-icono .cuenta-titulo .cuenta-sub
                   .cuenta-acciones .cuenta-alterna
     Vacío ....... .vacio (> .vacio-ico, b, p, .btn, .sub)
     Pie ......... .pie > .pie-in > .logo + nav + span
     Sin red ..... .sin-red (fijo abajo; hidden mientras haya red; botón adentro opcional)
   Cortes: 768 / 520 / 400 (y 340 para pantallas de 320 px).
   ════════════════════════════════════════════════════════════════════════ */


/* ── 1. Tokens ────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;              /* controles nativos claros aunque el teléfono esté en oscuro */

  /* Paleta (la de landing-cliente-v2.html). Contrastes medidos con la fórmula WCAG. */
  --naranja:#EF4F12;               /* contorno del foco: 3.4:1 sobre crema, 3.6:1 sobre blanco */
  --durazno:#FFEFE4;               /* fondos suaves (pestañas, aviso de éxito, hover) */
  --brasa:#C2410C;                 /* fondos con texto blanco (5.2:1) y enlaces (4.9:1 sobre crema) */
  --brasa-h:#A8360A;               /* hover de brasa (6.6:1 con blanco) */
  --brasa-a:#8F2E08;               /* botón presionado (8.2:1) */
  --crema:#FAF7F2;                 /* fondo de página */
  --papel:#F7EEE5;                 /* bandas y aviso informativo */
  --blanco:#FFFFFF;
  --tinta:#151B2B;                 /* texto principal: 16:1 sobre crema */
  --tinta-h:#262E44;               /* hover del botón tinta */
  --tinta-2:#4A5163;               /* texto secundario: 7.4:1 sobre crema */
  --linea:#E8E0D5;                 /* bordes decorativos (tarjetas) */
  --linea-2:#DDD5CB;
  --borde-campo:#8A7E71;           /* borde de input: 3.96:1 sobre blanco (WCAG 1.4.11 pide 3:1) */
  --marcador:#6E655C;              /* placeholder: 5.7:1 sobre blanco */

  /* Estados. Error en rojo ladrillo (no verde, no azul) y SIEMPRE con ícono + texto. */
  --error:#A3261B;                 /* texto/borde de error: 7.4:1 blanco, 6.9:1 crema */
  --error-tinta:#8A1F16;           /* texto dentro del aviso de error: 8.1:1 sobre su fondo */
  --error-fondo:#FDEEEB;
  --error-linea:#F0C2BA;
  --ok-fondo:var(--durazno);       /* éxito: durazno + brasa + palomita (sin verde) */
  --ok-linea:#F5C9AC;
  --info-fondo:var(--papel);
  --info-linea:#E6D8C9;
  --alerta:#9A5B00;                /* ámbar: ícono y borde; texto en tinta */
  --alerta-fondo:#FFF5DD;
  --alerta-linea:#EFD49A;
  --deshabilitado:#EDE3DB;
  --deshabilitado-tinta:#6F655C;   /* 4.5:1 sobre su fondo: se lee aunque esté apagado */

  /* Foco, radios, sombras */
  --foco:rgba(239,79,18,.38);
  --r-chico:10px; --r:14px; --r-grande:20px; --r-caja:22px; --r-pildora:999px;
  --sombra-suave:0 10px 24px -18px rgba(21,27,43,.35);
  --sombra-caja:0 24px 48px -30px rgba(21,27,43,.42),0 2px 8px rgba(21,27,43,.04);
  --sombra-barra:0 8px 22px rgba(194,65,12,.18);
  --degradado-barra:linear-gradient(90deg,#EA4A0F 0%,#F2611F 28%,#F7915A 56%,#FCCDB0 80%,#FFF1E8 100%);

  --fuente:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ancho:1180px;

  /* Íconos de los avisos (máscaras: el color sale de background-color) */
  --ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.4v.2' stroke-width='2.8'/%3E%3C/svg%3E");
  --ico-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.6 12.3 3 3 5.8-6.2'/%3E%3C/svg%3E");
  --ico-error:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M12 6.8v6.4' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.55' fill='black'/%3E%3C/mask%3E%3Ccircle cx='12' cy='12' r='10.5' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
  --ico-alerta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4.4'/%3E%3Cpath d='M12 17.1v.2' stroke-width='2.8'/%3E%3C/svg%3E");
  --ico-sin-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l20 20'/%3E%3Cpath d='M8.5 16.4a5 5 0 0 1 7 0'/%3E%3Cpath d='M5 12.9a10 10 0 0 1 5.2-2.8'/%3E%3Cpath d='M19 12.9a10 10 0 0 0-2-1.5'/%3E%3Cpath d='M2 8.8a15 15 0 0 1 4.2-2.7'/%3E%3Cpath d='M22 8.8A15 15 0 0 0 11.2 5'/%3E%3Ccircle cx='12' cy='20' r='.6' fill='black'/%3E%3C/svg%3E");

  /* ── Puente con la app (css/pdr-shared.css + js/pdr-ui.js) ──────────────
     Si la página también carga pdr-shared.css (antes que este archivo), la
     ventana de cotización, los toasts y .pdr-input salen en brasa y tinta en
     vez de cobalto y verde. Sin pdr-shared estas variables no hacen nada.
     Copiado de pdr/directorio.html:31-41. */
  --bg:var(--crema); --bg-2:#F3EDE4; --bg-3:#ECE4D8; --bg-card:var(--blanco);
  --ink:var(--tinta); --ink-soft:rgba(21,27,43,.8); --muted:var(--tinta-2); --muted-2:rgba(21,27,43,.6);
  --line:rgba(21,27,43,.1); --line-2:rgba(21,27,43,.18); --hover:rgba(21,27,43,.04);
  --accent:var(--brasa); --accent-2:#D6500F; --accent-soft:rgba(194,65,12,.14); --accent-glow:rgba(194,65,12,.3); --accent-ink:var(--brasa);
  --green:var(--brasa); --green-2:#F7915A; --green-soft:rgba(194,65,12,.12);
  --red:var(--error); --red-soft:rgba(163,38,27,.1);
  --ring:0 0 0 3px rgba(194,65,12,.22);
}


/* ── 2. Base ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:rgba(194,65,12,.16)}
html,body{background:var(--crema);color:var(--tinta);font-family:var(--fuente);letter-spacing:0;font-feature-settings:normal;accent-color:var(--brasa)}
body{margin:0;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto}
/* `hidden` manda siempre (una clase con display:flex le ganaría al atributo). */
[hidden]{display:none !important}

a{color:var(--brasa);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brasa-h);text-decoration-thickness:2px}

/* Foco: contorno naranja. Sobre la barra naranja va en tinta; sobre tinta, en blanco. */
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}
.top :focus-visible{outline-color:var(--tinta)}
.pie :focus-visible,.sin-red :focus-visible{outline-color:var(--blanco)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* "Saltar al contenido": invisible hasta que llega el foco del teclado */
.saltar{position:absolute;left:16px;top:-200px;z-index:1001;padding:10px 16px;border-radius:var(--r-chico);background:var(--tinta);color:var(--blanco);font-weight:700;text-decoration:none}
.saltar:focus,.saltar:focus-visible{top:12px;color:var(--blanco);outline-color:var(--naranja)}
.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding:22px clamp(16px,3vw,28px) 56px}
.texto-2{color:var(--tinta-2)}


/* ── 3. Barra superior ────────────────────────────────────────────────── */
.top{position:relative;z-index:3;display:flex;flex-wrap:wrap;row-gap:6px;align-items:center;justify-content:space-between;gap:12px;min-height:64px;margin:12px 12px 0;padding:8px clamp(14px,2.2vw,26px);border:1px solid transparent;border-radius:var(--r-grande);background:var(--degradado-barra) border-box;box-shadow:var(--sombra-barra)}
/* border-box: con el borde transparente (que sirve en alto contraste) el degradado
   se repetía en el borde y asomaba una raya naranja a la derecha. */
.logo{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--tinta);font-weight:800;font-size:1.4rem;line-height:1.2;letter-spacing:-.015em;text-decoration:none}
.logo:hover{color:inherit}
.logo-cubo{display:block;flex:none;width:42px;height:42px;margin:-4px 0 -4px -6px}
.top-nav{display:flex;align-items:center;gap:clamp(10px,2.2vw,24px);margin-left:auto}
.top-link{color:var(--tinta);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;padding:10px 2px}
.top-link:hover{color:var(--tinta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.top-link[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.top-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 16px;border:1px solid transparent;border-radius:var(--r-pildora);background:var(--tinta);color:var(--blanco);font-weight:700;font-size:.95rem;line-height:1.2;text-decoration:none;white-space:nowrap}
.top-btn:hover{background:var(--tinta-h);color:var(--blanco)}
/* pdr-shared.css pone border-radius:6px a todo botón con foco: aquí se respeta la píldora */
.top-btn:focus-visible{border-radius:var(--r-pildora)}


/* ── 4. Botones ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border:1.5px solid transparent;border-radius:var(--r-pildora);background:transparent;color:var(--tinta);font:inherit;font-size:1rem;font-weight:700;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:background-color .15s,border-color .15s,color .15s}
/* outline completo aquí (no solo en :focus-visible) para ganarle a button:focus-visible de pdr-shared */
.btn:focus-visible{outline:3px solid var(--naranja);outline-offset:2px;border-radius:var(--r-pildora)}
.btn svg{flex:none;width:18px;height:18px}
.btn-pri{background:var(--brasa);color:var(--blanco)}
.btn-pri:hover{background:var(--brasa-h);color:var(--blanco)}
.btn-pri:active{background:var(--brasa-a)}
.btn-sec{background:var(--blanco);color:var(--tinta);border-color:var(--linea-2)}
.btn-sec:hover{background:var(--durazno);border-color:#E9B79A;color:var(--tinta)}
.btn-sec:active{background:#FFE2CF}
.btn-link{min-height:44px;padding:8px 6px;border-radius:var(--r-chico);color:var(--brasa);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.btn-link:hover{color:var(--brasa-h);text-decoration-thickness:2px}
.btn-link:focus-visible{border-radius:var(--r-chico)}
.btn-bloque{display:flex;width:100%}

.btn:disabled,.btn[aria-disabled="true"]{background:var(--deshabilitado);border-color:transparent;color:var(--deshabilitado-tinta);cursor:not-allowed}
.btn-link:disabled,.btn-link[aria-disabled="true"]{background:transparent;text-decoration:none}

/* Cargando: la página pone disabled + aria-busy="true" (o .cargando) y cambia el
   texto ("Entrando…"). El botón conserva su color para que no parezca apagado. */
.btn:is(.cargando,[aria-busy="true"]){cursor:progress;pointer-events:none}
.btn-pri:is(.cargando,[aria-busy="true"]){background:var(--brasa);color:var(--blanco)}
.btn-sec:is(.cargando,[aria-busy="true"]){background:var(--blanco);color:var(--tinta);border-color:var(--linea-2)}
.btn:is(.cargando,[aria-busy="true"])::before{content:"";flex:none;width:1.05em;height:1.05em;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rs-girar .75s linear infinite}
@keyframes rs-girar{to{transform:rotate(360deg)}}


/* ── 5. Pestañas (p. ej. "Entrar | Crear cuenta") ─────────────────────── */
.pestanas{position:relative;display:flex;gap:2px;margin:0 0 20px;padding:4px;border:1px solid transparent;border-radius:var(--r-pildora);background:var(--durazno)}
.pestana{flex:1 1 0;min-width:0;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border:0;border-radius:var(--r-pildora);background:transparent;color:#8A2F08;font:inherit;font-size:.95rem;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;transition:background-color .15s,color .15s}
.pestana:hover{background:rgba(239,79,18,.1)}
.pestana:focus-visible{outline:3px solid var(--naranja);outline-offset:2px;border-radius:var(--r-pildora)}
/* Degradado oscuro a propósito: blanco encima mide 5.3:1 y 4.8:1 */
.pestana[aria-selected="true"]{background:linear-gradient(90deg,#BF3F0B,#C9480C);color:var(--blanco);font-weight:700;box-shadow:0 3px 10px rgba(194,65,12,.3)}

/* Fondo que se DESLIZA (js/pestanas.js; la landing de clientes copia estas reglas).
   El JS mete en la lista: span.pestanas-fondo[aria-hidden][inert] > span.pestanas-pista >
   copias de las pestañas. El fondo viaja con transform + width hasta la pestaña con
   aria-selected="true"; la pista hace el movimiento contrario y deja las copias BLANCAS
   quietas sobre las originales: el fondo las recorta y el texto cambia de color justo
   cuando el fondo lo cruza. Fondo y pista DEBEN llevar la misma duración y curva.
   Hasta que el JS coloca el fondo (.con-fondo), la activa conserva su propio fondo. */
.pestanas-fondo{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;visibility:hidden;border-radius:var(--r-pildora);background:linear-gradient(90deg,#BF3F0B,#C9480C);box-shadow:0 3px 10px rgba(194,65,12,.3);pointer-events:none;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1)}
.pestanas-pista{position:absolute;left:0;top:0;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.pestanas-pista > *{position:absolute;margin:0;background:none;box-shadow:none;color:var(--blanco);white-space:nowrap;transition:none}
.pestanas-pista > [data-activa]{font-weight:700}
.con-fondo > .pestanas-fondo{visibility:visible}
/* Las originales quedan todas en su color normal: la activa la tapa el fondo y la
   que deja de estarlo ya se lee sobre durazno mientras el fondo se va. */
.con-fondo > [role="tab"][aria-selected="true"]{background:transparent;box-shadow:none;color:#8A2F08}
/* Primera pintura, cambio de tamaño, letra que carga, vista que aparece: sin animación */
.pestanas-quieto > .pestanas-fondo,.pestanas-quieto .pestanas-pista{transition:none}


/* ── 6. Formularios ───────────────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0 0 16px}
.campo > label,.campo-etiqueta{color:var(--tinta);font-size:.95rem;font-weight:700;line-height:1.3}
.opcional{color:var(--tinta-2);font-weight:500}

.campo :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea),.entrada{
  display:block;width:100%;min-width:0;min-height:48px;margin:0;padding:11px 14px;
  border:1.5px solid var(--borde-campo);border-radius:var(--r);background:var(--blanco);color:var(--tinta);
  font:inherit;font-size:1rem;  /* 16px: el iPhone no hace zoom al tocar */
  line-height:1.35;box-shadow:none;-webkit-appearance:none;appearance:none;
  transition:border-color .15s,box-shadow .15s}
.campo :is(input,textarea)::placeholder,.entrada::placeholder{color:var(--marcador);opacity:1}
.campo :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea):hover,.entrada:hover{border-color:var(--tinta-2)}
.campo textarea,textarea.entrada{min-height:110px;resize:vertical}
.campo select,select.entrada{padding-right:42px;cursor:pointer;background:var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23151B2B' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center no-repeat}

/* Foco del campo: borde brasa más grueso + halo naranja. El outline transparente
   aparece en modo de alto contraste (Windows lo pinta con el color del sistema). */
.campo :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea):focus-visible,.entrada:focus-visible{
  border-color:var(--brasa);box-shadow:0 0 0 1px var(--brasa),0 0 0 5px var(--foco);
  outline:2px solid transparent;outline-offset:2px}

/* Autorrelleno de Chrome/Edge: su fondo azul claro se tapa con crema */
.campo input:-webkit-autofill,.entrada:-webkit-autofill{box-shadow:inset 0 0 0 1000px #FFF8F2;-webkit-text-fill-color:var(--tinta);caret-color:var(--tinta)}
.campo input:-webkit-autofill:focus-visible,.entrada:-webkit-autofill:focus-visible{box-shadow:inset 0 0 0 1000px #FFF8F2,0 0 0 1px var(--brasa),0 0 0 5px var(--foco)}

.campo .ayuda,.campo-ayuda{margin:0;color:var(--tinta-2);font-size:.88rem;line-height:1.4}

/* Error del campo: borde más grueso en ladrillo + texto con ícono. No depende
   solo del color: cambia el grosor del borde y el mensaje lleva el signo "!". */
.campo :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea)[aria-invalid="true"],.campo.con-error :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea),.entrada[aria-invalid="true"]{
  border-color:var(--error);box-shadow:0 0 0 1px var(--error);background-color:#FFFBFA}
.campo :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea)[aria-invalid="true"]:focus-visible,.campo.con-error :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea):focus-visible,.entrada[aria-invalid="true"]:focus-visible{
  border-color:var(--error);box-shadow:0 0 0 1px var(--error),0 0 0 5px rgba(163,38,27,.22)}
.campo.con-error > label{color:var(--error)}
/* Ícono en posición absoluta (no flex): así un <b> o un enlace dentro del
   mensaje sigue en el mismo renglón que el texto. */
.campo .error,.campo-error{position:relative;margin:0;padding-left:22px;color:var(--error);font-size:.9rem;font-weight:600;line-height:1.4}
.campo .error::before,.campo-error::before{content:"";position:absolute;left:0;top:.14em;width:16px;height:16px;background-color:currentColor;-webkit-mask:var(--ico-error) center/contain no-repeat;mask:var(--ico-error) center/contain no-repeat}
.campo .error:empty,.campo-error:empty{display:none}

/* Contraseña con botón "Mostrar / Ocultar" dentro del campo. La página cambia
   type="password" ↔ "text", aria-pressed y el texto del botón. */
.campo-contrasena{position:relative;display:block;min-width:0}
.campo-contrasena :is(input,.entrada){padding-right:100px}
.campo-contrasena input::-ms-reveal,.campo:has(.ver-contrasena) input::-ms-reveal{display:none}  /* el ojo propio de Edge */
.ver-contrasena{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;min-width:44px;padding:6px 12px;border:1px solid transparent;border-radius:var(--r-chico);background:transparent;color:var(--brasa);font:inherit;font-size:.9rem;font-weight:700;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none}
.ver-contrasena:hover{background:var(--durazno);color:var(--brasa-h)}
.ver-contrasena svg{flex:none;width:18px;height:18px}
.ver-contrasena:focus-visible{outline:3px solid var(--naranja);outline-offset:0;border-radius:var(--r-chico)}
.campo-contrasena .ver-contrasena{position:absolute;top:50%;right:4px;transform:translateY(-50%)}
/* Fuera de .campo-contrasena el botón queda debajo del campo, a la derecha */
.campo > .ver-contrasena{align-self:flex-end;margin-top:-2px}

/* Casilla (aceptar aviso de privacidad, recordarme…) */
/* La casilla va en posición absoluta (no flex) para que el texto y un enlace
   dentro de la etiqueta fluyan juntos y se partan bien en el celular. */
.casilla{position:relative;display:block;min-height:44px;margin:0 0 12px;padding:10px 0 10px 32px;color:var(--tinta);font-size:.95rem;line-height:1.4;cursor:pointer}
.casilla input{position:absolute;left:0;top:10px;width:20px;height:20px;margin:0;accent-color:var(--brasa);cursor:pointer}
.casilla input:focus-visible{outline-offset:2px}
.casilla input[aria-invalid="true"]{outline:2px solid var(--error);outline-offset:2px}


/* ── 7. Avisos ────────────────────────────────────────────────────────── */
/* El ícono lo pone el CSS (::before), así que la página puede escribir el
   mensaje con textContent sin perderlo. */
.aviso{position:relative;margin:0 0 16px;padding:12px 14px;border:1px solid var(--linea);border-left-width:4px;border-radius:12px;background:var(--blanco);color:var(--tinta);font-size:.95rem;line-height:1.45;text-wrap:pretty}
.aviso > :first-child{margin-top:0}
.aviso > :last-child{margin-bottom:0}
.aviso p{margin:4px 0 0}
.aviso :is(b,strong),.aviso-titulo{font-weight:700}
.aviso a{color:inherit;font-weight:700}
.aviso .btn-link{min-height:0;padding:0;color:inherit;font-size:inherit}
.aviso:is(.aviso-ok,.aviso-error,.aviso-info,.aviso-alerta){padding-left:44px}
.aviso:is(.aviso-ok,.aviso-error,.aviso-info,.aviso-alerta)::before{content:"";position:absolute;left:13px;top:13px;width:20px;height:20px;background-color:var(--aviso-ico,currentColor);-webkit-mask:var(--aviso-mask) center/contain no-repeat;mask:var(--aviso-mask) center/contain no-repeat}
.aviso-ok{--aviso-mask:var(--ico-ok);--aviso-ico:var(--brasa);background:var(--ok-fondo);border-color:var(--ok-linea);border-left-color:var(--brasa)}
.aviso-error{--aviso-mask:var(--ico-error);--aviso-ico:var(--error);background:var(--error-fondo);border-color:var(--error-linea);border-left-color:var(--error);color:var(--error-tinta)}
.aviso-info{--aviso-mask:var(--ico-info);--aviso-ico:var(--tinta-2);background:var(--info-fondo);border-color:var(--info-linea);border-left-color:var(--tinta-2)}
.aviso-alerta{--aviso-mask:var(--ico-alerta);--aviso-ico:var(--alerta);background:var(--alerta-fondo);border-color:var(--alerta-linea);border-left-color:var(--alerta)}
.aviso.sin-icono{padding-left:14px}
.aviso.sin-icono::before{content:none}


/* ── 8. Pantallas de cuenta ───────────────────────────────────────────── */
/* La página se estira para que el pie quede abajo aunque la caja sea corta. */
body:has(> .cuenta-pagina){display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.cuenta-pagina{flex:1 0 auto;display:flex;justify-content:center;align-items:flex-start;width:100%;min-width:0;padding:clamp(20px,5vh,56px) 16px 48px}
.cuenta-caja{width:100%;max-width:420px;min-width:0;padding:30px 28px 26px;border:1px solid var(--linea);border-radius:var(--r-caja);background:var(--blanco);box-shadow:var(--sombra-caja)}
.cuenta-caja > :first-child{margin-top:0}
.cuenta-caja form{margin:0}
.cuenta-icono{display:grid;place-items:center;width:56px;height:56px;margin:0 0 14px;border-radius:50%;background:var(--durazno);color:var(--brasa)}
.cuenta-icono svg{width:28px;height:28px}
.cuenta-titulo{margin:0;color:var(--tinta);font-size:clamp(1.4rem,1.2rem + 1vw,1.65rem);font-weight:800;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.cuenta-sub{margin:6px 0 22px;color:var(--tinta-2);font-size:.98rem;line-height:1.45;text-wrap:pretty}
.cuenta-acciones{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:22px}
.cuenta-acciones .btn-link{align-self:center}
/* Código del correo (entrar, nueva-contrasena): plegado para no estorbar a quien usa el enlace */
.codigo-correo{margin:18px 0 0;padding:12px 14px;border:1px solid var(--linea);border-radius:12px;background:var(--blanco)}
.codigo-correo>summary{cursor:pointer;font-weight:700;color:var(--tinta);line-height:1.4;min-height:24px}
.codigo-correo[open]>summary{margin-bottom:10px}
.codigo-correo .campo-ayuda{margin:0 0 12px}
.codigo-correo .cuenta-acciones{margin-top:8px}
.cuenta-alterna{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--linea);color:var(--tinta-2);font-size:.95rem;text-align:center;text-wrap:balance}
.cuenta-alterna a{font-weight:700}
.cuenta-legal{margin:14px 0 0;color:var(--tinta-2);font-size:.82rem;line-height:1.45;text-align:center}
.cuenta-legal a{color:var(--tinta);font-weight:600}


/* ── 9. Estado vacío / error de carga (el del directorio) ─────────────── */
.vacio{grid-column:1/-1;padding:28px 24px;border:1px dashed #D9BFA8;border-radius:18px;background:var(--blanco);text-align:center}
.vacio-ico{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px;border-radius:50%;background:var(--durazno);color:var(--brasa)}
.vacio-ico svg{width:26px;height:26px}
.vacio b{display:block;color:var(--tinta);font-size:1.1rem;font-weight:800;line-height:1.3}
.vacio p{margin:8px auto 0;max-width:46ch;color:var(--tinta-2);text-wrap:pretty}
.vacio .btn{margin-top:16px}
.vacio .sub{margin-top:14px;font-size:.9rem}
.vacio a:not(.btn){color:var(--brasa);font-weight:700}


/* ── 10. Pie ──────────────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:rgba(255,255,255,.82);font-size:.9rem}
.pie-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;max-width:var(--ancho);margin:0 auto;padding:26px clamp(16px,3vw,28px) calc(26px + env(safe-area-inset-bottom,0px))}
.pie .logo{color:var(--blanco);font-size:1.15rem}
.pie .logo-cubo{width:34px;height:34px}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.pie a{color:inherit;text-decoration:none}
.pie a:hover{color:var(--blanco);text-decoration:underline;text-underline-offset:3px}


/* ── 11. Sin conexión ─────────────────────────────────────────────────── */
/* La página lo muestra con los eventos offline/online (hidden = false/true).
   role="status" para que el lector de pantalla lo anuncie sin interrumpir. */
.sin-red{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1000;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 32px);padding:12px 18px 12px 14px;border:1px solid transparent;border-radius:16px;background:var(--tinta);color:var(--blanco);font-size:.95rem;font-weight:600;line-height:1.35;box-shadow:0 16px 36px -12px rgba(21,27,43,.55);transform:translateX(-50%);animation:rs-subir .25s ease-out}
.sin-red::before{content:"";flex:none;width:20px;height:20px;background-color:#FFB48F;-webkit-mask:var(--ico-sin-red) center/contain no-repeat;mask:var(--ico-sin-red) center/contain no-repeat}
.sin-red :is(button,a){flex:none;margin-left:4px;padding:6px 4px;border:0;background:none;color:#FFC9AE;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sin-red :is(button,a):hover{color:var(--blanco)}
@keyframes rs-subir{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}


/* ── 12. Cortes del proyecto: 768 / 520 / 400 (+340) ──────────────────── */
@media (min-width:769px){
  /* En escritorio la caja va arriba con un margen fijo, no centrada: centrada,
     cada cambio de alto (la pestaña "Crear cuenta" es más alta que "Entrar") la
     volvía a centrar y toda la caja brincaba bajo el dedo. En el celular ya iba
     arriba (si se centrara, el teclado la empujaría fuera de la vista). */
  .cuenta-pagina{align-items:flex-start;padding-top:clamp(24px,8vh,96px)}
}
@media (max-width:768px){
  .pie-in{justify-content:flex-start}
}
@media (max-width:520px){
  .top{margin:8px 8px 0;min-height:56px;border-radius:16px}
  .logo{font-size:1.25rem}
  .cuenta-pagina{padding-top:20px}
  .cuenta-caja{padding:26px 22px 22px;border-radius:20px}
  .vacio{padding:24px 18px}
  .pie-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:400px){
  .top{padding-left:10px;padding-right:10px}
  .top-nav{gap:10px}
  .top-btn{padding:8px 12px}
  .logo{font-size:1.15rem}
  .logo-cubo{width:36px;height:36px;margin-left:-4px}
  .cuenta-caja{padding:22px 16px 20px}
  .pestana{padding:8px 10px;font-size:.9rem}
  .sin-red{max-width:calc(100% - 24px);bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:340px){
  /* 320 px: como en la landing, "Entrar" se oculta para que la barra quepa en
     un renglón. Si es la única salida de la página, usa .top-btn. */
  .top-link{display:none}
}


/* ── 13. Movimiento reducido y alto contraste ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;scroll-behavior:auto !important}
  .sin-red{animation:none}
  /* Pestañas: el fondo salta a la elegida, sin deslizarse */
  .pestanas-fondo,.pestanas-pista{transition:none !important}
  /* El indicador de "cargando" sigue diciendo que algo pasa, pero despacio */
  .btn:is(.cargando,[aria-busy="true"])::before{animation-duration:2.4s}
}
@media (forced-colors:active){
  /* Los íconos son máscaras con color de fondo: en alto contraste se pintan
     con el color del texto del sistema para que no desaparezcan. */
  .aviso:is(.aviso-ok,.aviso-error,.aviso-info,.aviso-alerta)::before,.campo .error::before,.campo-error::before,.sin-red::before{forced-color-adjust:none;background-color:CanvasText}
  .btn,.top-btn,.pestanas,.sin-red,.top{border-color:CanvasText}
  .btn:disabled,.btn[aria-disabled="true"]{border-color:GrayText;color:GrayText}
  .pestana[aria-selected="true"]{outline:2px solid Highlight;outline-offset:-2px}
  /* El fondo que se desliza perdería su color: se quita y queda el contorno de arriba */
  .pestanas-fondo{display:none}
  .campo select,select.entrada{appearance:auto;-webkit-appearance:auto;background-image:none;padding-right:12px}
  .campo :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea)[aria-invalid="true"],.campo.con-error :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea){border-width:3px}
  .campo :is(input:where(:not([type="checkbox"],[type="radio"],[type="range"],[type="file"])),select,textarea):focus-visible,.entrada:focus-visible{outline:3px solid Highlight}
}