/* ===========================================================
   Code4you UI · login v1.1
   Pantalla de acceso común a los productos: panel de acceso a la izquierda y
   zona visual del producto a la derecha (opcional).
   Carga: tokens.css → base.css → diagram.css → login.css → producto.css.
   No carga shell.css ni components.css: por eso los nombres de campo del login
   se acotan a body.c4y-auth y no chocan con los del administrador.
   =========================================================== */

/* El login se aprobó antes que v1 y fija radios, feedback sobre grafito y
   alturas propias. Se declaran aquí, acotados a la pantalla de acceso, para no
   tocar los tokens universales. */
body.c4y-auth{
  --c4y-r-sm:5px;
  --c4y-r-md:7px;
  --c4y-r-lg:8px;
  --c4y-danger-ink:#e8a998;
  --c4y-danger-bg:rgba(209,106,84,.10);
  --c4y-danger-border:rgba(209,106,84,.5);
  --c4y-ok:#5f9c72;
  --c4y-stage:radial-gradient(130% 100% at 58% 38%,#1a1a19 0%,#101010 55%,#0a0a0a 100%);
  --c4y-field-h:46px;
  --c4y-cta-h:47px;

  background:var(--c4y-bg);
  color:var(--c4y-ink);
}
body.c4y-auth a{color:var(--c4y-ink-2)}
body.c4y-auth a:hover{color:var(--c4y-accent)}
body.c4y-auth :focus-visible{outline-color:var(--c4y-focus-dark)}
/* alerta y spinner declaran display propio: el atributo hidden debe ganar */
body.c4y-auth [hidden]{display:none!important}

/* ---------- estructura: un solo lienzo, dos zonas ---------- */
.c4y-auth__grid{display:flex;flex-wrap:wrap;min-height:100vh;min-height:100dvh}
.c4y-auth__panel{
  flex:0 1 clamp(340px,37%,510px);min-width:320px;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  padding:var(--c4y-space-5) clamp(28px,4vw,60px);
  border-right:1px solid var(--c4y-border);
  background:linear-gradient(180deg,var(--c4y-panel-from) 0%,var(--c4y-panel-to) 100%);
}
.c4y-auth__stage{
  flex:1 1 460px;min-width:320px;min-height:min(82vh,680px);
  position:relative;overflow:hidden;background:var(--c4y-stage);
}

/* ---------- marca ---------- */
.c4y-brand{display:flex;align-items:center;gap:var(--c4y-space-2)}
.c4y-brand img{width:26px;height:26px;object-fit:contain}
.c4y-brand span{font:500 11px/1 var(--c4y-mono);letter-spacing:.22em;color:var(--c4y-ink-3)}

/* ---------- bloque de acceso ---------- */
.c4y-auth__body{display:flex;flex-direction:column;gap:var(--c4y-space-4);max-width:372px;width:100%}
.c4y-auth__head{display:flex;flex-direction:column;gap:var(--c4y-space-1)}
.c4y-auth__head h1{margin:0;font:600 25px/1.15 var(--c4y-font);letter-spacing:-.015em;color:#f4f2ee}
.c4y-auth__head p{margin:0;font:400 14px/1.5 var(--c4y-font);color:var(--c4y-ink-3)}

.c4y-form{display:flex;flex-direction:column;gap:var(--c4y-space-3)}
.c4y-auth .c4y-field{display:flex;flex-direction:column;gap:8px}
.c4y-auth .c4y-field__label{font:500 11px/1 var(--c4y-mono);letter-spacing:.16em;color:var(--c4y-ink-3)}
.c4y-auth .c4y-input{
  height:var(--c4y-field-h);width:100%;padding:0 14px;
  background:var(--c4y-field-bg);border:1px solid var(--c4y-field-border);border-radius:var(--c4y-r-md);
  color:var(--c4y-ink);font:400 14.5px/1 var(--c4y-font);outline:none;
  transition:border-color var(--c4y-t-fast) var(--c4y-ease),background var(--c4y-t-fast) var(--c4y-ease);
}
.c4y-auth .c4y-input::placeholder{color:var(--c4y-ink-4)}
.c4y-auth .c4y-input:hover{border-color:rgba(236,233,228,.2)}
.c4y-auth .c4y-input:focus{border-color:var(--c4y-accent);background:var(--c4y-field-bg-focus)}
.c4y-auth .c4y-input[aria-invalid="true"]{border-color:var(--c4y-danger-border)}
.c4y-auth .c4y-input-wrap{position:relative;display:block}
.c4y-auth .c4y-input--pass{padding-right:82px}
.c4y-reveal{
  position:absolute;top:50%;right:7px;transform:translateY(-50%);
  height:clamp(32px,6vw,40px);min-width:var(--c4y-touch);padding:0 11px;
  background:var(--c4y-control-bg);border:1px solid var(--c4y-control-border);border-radius:var(--c4y-r-sm);
  color:#c7c4be;font:500 11px/1 var(--c4y-mono);letter-spacing:.1em;cursor:pointer;
  transition:color var(--c4y-t-fast) var(--c4y-ease),border-color var(--c4y-t-fast) var(--c4y-ease);
}
.c4y-reveal:hover{color:#f4f2ee;border-color:rgba(236,233,228,.26)}

.c4y-cta{
  height:var(--c4y-cta-h);margin-top:2px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--c4y-accent);border:0;border-radius:var(--c4y-r-md);
  color:var(--c4y-accent-ink);font:700 14px/1 var(--c4y-font);cursor:pointer;
  transition:filter var(--c4y-t-fast) var(--c4y-ease),transform .12s var(--c4y-ease),opacity var(--c4y-t-fast) var(--c4y-ease);
}
.c4y-cta:hover{filter:brightness(1.07)}
.c4y-cta:active{transform:translateY(1px)}
.c4y-cta[disabled]{opacity:.62;cursor:default}
.c4y-spinner{
  width:14px;height:14px;border:2px solid rgba(23,22,15,.28);border-top-color:var(--c4y-accent-ink);
  border-radius:50%;animation:c4ySpin .7s linear infinite;
}
@keyframes c4ySpin{to{transform:rotate(360deg)}}

/* ---------- estados ---------- */
.c4y-alert{
  display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--c4y-r-lg);
  border:1px solid var(--c4y-danger-border);background:var(--c4y-danger-bg);
}
.c4y-alert__dot{width:7px;height:7px;border-radius:50%;background:var(--c4y-danger);margin-top:6px;flex:none}
.c4y-alert p{margin:0;font:500 12.5px/1.45 var(--c4y-font);color:var(--c4y-danger-ink)}

/* ---------- pie del panel ---------- */
.c4y-auth__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font:400 12px/1 var(--c4y-font);color:var(--c4y-ink-3);
}
.c4y-auth__foot .c4y-by{display:flex;align-items:center;gap:8px}
.c4y-auth__foot .c4y-by::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c4y-accent)}
.c4y-auth__links{display:flex;gap:16px}

/* ---------- zona de visualización ---------- */
.c4y-stage__caption{
  position:absolute;top:40px;left:clamp(24px,3.4vw,48px);z-index:2;
  display:flex;flex-direction:column;gap:6px;
}
.c4y-stage__caption b{font:500 10.5px/1 var(--c4y-mono);letter-spacing:.22em;color:var(--c4y-accent)}
.c4y-stage__caption span{font:400 12.5px/1 var(--c4y-mono);color:var(--c4y-ink-3)}
/* bandas reservadas: 72px arriba, 132px abajo — el gráfico nunca invade caption ni readout */
.c4y-stage__diagram{position:absolute;top:72px;left:0;right:0;bottom:132px}
.c4y-stage__diagram svg{width:100%;height:100%;display:block}
.c4y-stage__foot{
  position:absolute;bottom:34px;left:clamp(24px,3.4vw,48px);right:clamp(24px,3.4vw,48px);z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
}
.c4y-readout{font:400 12px/1.5 var(--c4y-mono);color:var(--c4y-ink-3);max-width:46ch}
.c4y-auth .c4y-status{display:flex;align-items:center;gap:8px;font:400 12px/1 var(--c4y-mono);color:var(--c4y-ink-3);white-space:nowrap}
.c4y-auth .c4y-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c4y-ok);animation:c4yBreathe 6.5s ease-in-out infinite}
@keyframes c4yBreathe{0%,100%{opacity:.28}50%{opacity:.6}}

/* ---------- diagrama compacto (se muestra sólo en tablet/móvil) ---------- */
.c4y-compact{display:none}

/* ====================== RESPONSIVE ======================
   desktop 1440+  : dos zonas, panel clamp(340,37%,510) ≈ 510px, diagrama completo
   laptop 1280    : idéntico; el SVG escala solo (viewBox), sin cambios de layout
   tablet ≤1023   : una columna; diagrama compacto 200px sobre el formulario
   móvil ≤640     : una columna; diagrama compacto 160px; formulario prioritario
   ======================================================== */
@media (max-width:1023px){
  .c4y-auth__grid{flex-direction:column}
  .c4y-auth__panel{
    flex:1 1 auto;max-width:none;border-right:0;border-bottom:1px solid var(--c4y-border);
    align-items:center;padding:28px clamp(24px,5vw,40px) 40px;gap:28px;
  }
  .c4y-auth__panel > *{width:100%;max-width:480px}
  .c4y-auth__body{max-width:480px}
  .c4y-auth__stage{display:none}
  .c4y-compact{display:block;border-bottom:1px solid var(--c4y-border);padding-bottom:22px}
  .c4y-compact__svg{height:200px;background:var(--c4y-stage);border-radius:var(--c4y-r-lg)}
  .c4y-compact__svg svg{width:100%;height:100%;display:block}
  .c4y-compact__meta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;
    font:400 11px/1.4 var(--c4y-mono);color:var(--c4y-ink-3)}
}
@media (max-width:640px){
  .c4y-auth__panel{padding:20px 20px 32px;gap:22px}
  .c4y-auth__head h1{font-size:22px}
  .c4y-compact__svg{height:160px}
  .c4y-compact__meta{display:none}          /* detalle secundario fuera en móvil */
  .c4y-cta{font-size:15px;height:48px}
  .c4y-auth .c4y-input{font-size:16px}   /* por debajo de 16px, iOS hace zoom al enfocar el campo */
  .c4y-auth__foot{font-size:11.5px;gap:10px}
}
@media (prefers-reduced-motion: reduce){
  .c4y-spinner{animation-duration:1.4s}
  .c4y-auth .c4y-status::before{animation:none;opacity:.6}
}