/* Pactopia360 · Login Cliente — v6.8
   - Campos más delgados y un poco más anchos dentro del card
   - Gradiente animado visible (pan + blobs + leve hue-rotate)
   - Toggle de contraseña por data-state (ojo abierto/cerrado)
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

:root{
  --brand-red:#e31b23;
  --brand-red-light:#ff5252;
  --brand-slate:#2d3b4c;
  --brand-gray:#8e96a3;

  --bg-main:#fafafa;
  --card:#ffffff;
  --panel:#f8fafc;
  --shell:#ffffff;
  --border:#e5e7eb;

  --title:#111827; --subtitle:#4b5563; --label:#374151;

  --input-bg:#ffffff; --input-color:#111827; --input-border:#d1d5db; --input-ph:#9ca3af;

  --focus-b:var(--brand-red);
  --focus-ring:rgba(227,27,35,.18);
  --focus-inset:rgba(227,27,35,.35);

  --ok-bg:#ecfdf5; --ok-b:#a7f3d0; --ok:#065f46;
  --err-bg:#fde8e8; --err-b:#fecaca; --err:#991b1b;

  --btn-grad:linear-gradient(135deg,var(--brand-red),#b7131a);
  --btn-shadow:0 10px 20px rgba(227,27,35,.25);

  --cta-pro-grad:linear-gradient(135deg,#8aa3ff,#4f46e5);
}

body:not(.theme-light){
  --title:#ffffff; --subtitle:#c7ced9; --label:#c7ced9;
  --card:#0f1620; --panel:#0b0f15; --shell:#0e141c; --border:rgba(255,255,255,.12);
  --input-bg:#0c131c; --input-color:#e5e7eb; --input-border:rgba(255,255,255,.18); --input-ph:#8e96a3;
  --focus-b:#fb7185; --focus-ring:rgba(251,113,133,.18); --focus-inset:rgba(251,113,133,.35);
}

/* ===== Fondo animado ===== */
html,body{height:100%}
body{
  margin:0; color:var(--title);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  font-weight:500; display:grid; place-items:center; overflow-x:hidden;

  background:
    radial-gradient(1200px 900px at 15% 15%, rgba(255,160,170,.46), transparent 70%),
    radial-gradient(1100px 760px at 88% 85%, rgba(255,115,130,.32), transparent 70%),
    linear-gradient(160deg,#fff8f8 0%,#ffe0e4 40%,#fff0f2 70%,#ffffff 100%);
  background-size:300% 300%;
  animation:p360-bg-pan 16s ease-in-out infinite alternate;
}
body::before,
body::after{
  content:""; position:fixed; z-index:-1; pointer-events:none; filter:blur(18px); opacity:.9; transform-origin:center;
}
body::before{
  width:980px; height:980px; left:-18%; top:-10%;
  background:radial-gradient(closest-side, rgba(255,104,132,.50), rgba(255,104,132,0) 70%);
  animation:blobA 22s ease-in-out infinite alternate, hueA 18s ease-in-out infinite alternate;
}
body::after{
  width:1100px; height:1100px; right:-22%; bottom:-18%;
  background:radial-gradient(closest-side, rgba(255,50,90,.36), rgba(255,50,90,0) 70%);
  animation:blobB 26s ease-in-out infinite alternate, hueB 20s ease-in-out infinite alternate;
}
body:not(.theme-light)::before{ background:radial-gradient(closest-side, rgba(244,63,94,.30), rgba(244,63,94,0) 70%) }
body:not(.theme-light)::after { background:radial-gradient(closest-side, rgba(167,139,250,.25), rgba(167,139,250,0) 70%) }

@keyframes p360-bg-pan{ 0%{background-position:0% 40%} 50%{background-position:100% 60%} 100%{background-position:0% 40%} }
@keyframes blobA{ 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(4%,3%) scale(1.1)} 100%{transform:translate(8%,-2%) scale(1.16)} }
@keyframes blobB{ 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-6%,-2%) scale(1.08)} 100%{transform:translate(-10%,4%) scale(1.14)} }
@keyframes hueA{ 0%{filter:hue-rotate(0deg) blur(18px)} 100%{filter:hue-rotate(18deg) blur(18px)} }
@keyframes hueB{ 0%{filter:hue-rotate(0deg) blur(18px)} 100%{filter:hue-rotate(-16deg) blur(18px)} }
@media (prefers-reduced-motion:reduce){ body,body::before,body::after{animation:none!important} }

/* ===== Shell ===== */
.shell{
  width:100%; max-width:1160px;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--shell); border-radius:18px; overflow:hidden;
  padding:18px; gap:22px; box-shadow:0 24px 60px rgba(0,0,0,.18); align-items:stretch;
}
@media (max-width:980px){ .shell{grid-template-columns:1fr; gap:12px; padding:14px; max-width:640px} }

/* ===== Columna izquierda ===== */
.brand{ background:var(--panel); border-radius:12px; padding:22px; display:flex; flex-direction:column; box-shadow:inset 0 0 0 1px var(--border) }
.brand-inner{display:flex;flex-direction:column;gap:18px}
.brand-top{display:grid;gap:8px;align-content:start;justify-items:center;text-align:center}
.logo.local-brand{display:flex;align-items:center;justify-content:center;width:100%;min-height:72px;padding:6px 0}
.logo-img{height:44px;width:auto;display:block;margin:0 auto}
.logo-light{display:none}
body.theme-light .logo-dark{display:none}
body.theme-light .logo-light{display:block}
.slogan{color:var(--title);font-weight:600;font-size:22px;margin:6px 0 0}
.points{display:grid;gap:10px;color:var(--subtitle);font-size:14px;margin:0}
.extras{background:var(--card);border:1px dashed var(--border);border-radius:10px;padding:12px}
.extras-title{font-weight:600;color:var(--title);margin:0 0 8px;font-size:14px}
.extras-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){ .extras-grid{grid-template-columns:1fr} }
.extra-card{ display:block;text-decoration:none;border:1px solid var(--border);border-radius:10px;padding:12px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--card),#000 1%),color-mix(in oklab,var(--card),#000 3%));
  transition:all .2s ease; }
.extra-card:hover{transform:translateY(-2px);box-shadow:0 12px 20px rgba(0,0,0,.1)}
.extra-card .extra-kicker{font-size:20px;font-weight:800;color:var(--title);line-height:1.2;margin:0 0 4px}
.extra-card .extra-title{font-size:12px;font-weight:600;color:var(--subtitle);letter-spacing:.2px;margin:0 0 6px}
.extra-card .extra-desc{font-size:12px;color:var(--subtitle);margin:2px 0 6px;line-height:1.35}
.extra-card .extra-cta{display:inline-block;font-weight:600;font-size:12px;padding:6px 10px;border-radius:8px;color:#fff;border:0}
.extra-card.free .extra-cta{background-image:linear-gradient(135deg,#16a34a,#22c55e)}
.extra-card.pro  .extra-cta{background-image:var(--cta-pro-grad)}
.foot-note{font-size:12px;color:var(--subtitle);margin-top:auto;text-align:center}

/* ===== Columna derecha (login) ===== */
.panel{padding:0;display:flex;align-items:flex-start;background:transparent}
.card{
  position:relative;width:100%;background:var(--card);
  border:1px solid var(--border);border-radius:14px;padding:22px;
  display:flex;flex-direction:column;align-self:stretch; box-shadow:0 20px 40px rgba(0,0,0,.14);
  max-width:560px;               /* un poco más ancha que antes */
  margin:0 auto;
}
.card-auto{min-height:540px}
.card::before{
  content:"";position:absolute;inset:-1px;border-radius:15px;padding:1px;
  background:linear-gradient(135deg,rgba(227,27,35,.45),rgba(180,20,24,.35));
  pointer-events:none;z-index:0;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.card > *{position:relative;z-index:1}
.card-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 2px 10px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
.card-brand .logo-img{height:32px}
body.theme-light .card-brand .logo-dark{display:none}
body.theme-light .card-brand .logo-light{display:block}

/* Limite interno (ancho de campos dentro del card) */
.card .form-head,
.card .form-fields,
.card .form-actions{
  max-width: min(540px, 100% - 28px);
  margin-left:auto; margin-right:auto;
}

/* ===== Formularios ===== */
.form-body{display:grid;grid-template-rows:auto 1fr auto;row-gap:14px;height:100%}
.form-head{padding-bottom:.5rem;border-bottom:1px dashed var(--border);margin-bottom:.25rem}
.form-fields{align-self:stretch;display:grid;gap:12px;padding-top:.25rem}
.form-fields .field{display:grid;gap:6px}

.title{margin:0;font-weight:800;color:var(--title);font-size:24px;letter-spacing:.2px}
.subtitle{margin:0;color:var(--subtitle);font-size:14px}
label{font-size:12px;color:var(--label);font-weight:600}

/* Inputs MÁS DELGADOS (menos alto) */
.input{
  width:100%; margin-top:6px; margin-bottom:4px; padding:10px 12px; /* <- delgado */
  border:1px solid var(--input-border); border-radius:9px; outline:none;
  color:var(--input-color); background:var(--input-bg); font-size:15px;
  transition:border .15s, box-shadow .15s, background .15s;
}
.input::placeholder{color:var(--input-ph)}
.input:focus{border-color:var(--focus-b);box-shadow:0 0 0 5px var(--focus-ring), 0 0 0 1px var(--focus-inset) inset}
.input.is-invalid{border-color:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.18)}

/* Toggle de contraseña (compat .toggle) */
.pwd-wrap{position:relative}
.pwd-toggle, .toggle{
  --eye-top: 56%;
  position:absolute; right:10px; top:var(--eye-top); transform:translateY(-50%);
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px;
  background:transparent; border:0; cursor:pointer; color:var(--subtitle);
}
.pwd-toggle:focus-visible, .toggle:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(225,29,72,.25) }
.pwd-toggle svg, .toggle svg{ width:20px; height:20px; display:block; pointer-events:none; }
.pwd-toggle .eye-open, .toggle .eye-open{ display:none }
.pwd-toggle[data-showing="true"] .eye-open, .toggle[data-showing="true"] .eye-open{ display:block }
.pwd-toggle[data-showing="true"] .eye-closed, .toggle[data-showing="true"] .eye-closed{ display:none }

/* Fila Recordarme / Olvidaste */
.form-fields .row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.75rem}
.form-fields .row .link-muted{justify-self:end;white-space:nowrap;text-decoration:underline}
.remember{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--label)}
.remember input{inline-size:16px;block-size:16px}

/* Acciones */
.form-actions{margin-top:0;padding-top:.5rem;border-top:1px dashed var(--border);display:grid;gap:.5rem}
.form-actions .btn{height:48px;font-size:18px}
.hint{font-size:12px;color:var(--subtitle)}
.link-muted{color:var(--brand-slate)}
.link-muted:hover{color:var(--brand-red)}

/* Botón principal */
.btn{
  width:100%;padding:12px 16px;border:0;border-radius:9px;color:#fff;
  font-size:18px;font-weight:700;letter-spacing:.2px;line-height:1.15;
  cursor:pointer;background-image:var(--btn-grad);box-shadow:var(--btn-shadow);
  transition:transform .06s ease, filter .2s ease;
}
.btn:hover{filter:saturate(1.05) brightness(1.02)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background-image:linear-gradient(135deg,#a8b0bb,#8b98aa);color:#f8fafc;box-shadow:none;cursor:not-allowed}

/* Switch Tema */
.theme-switch{position:fixed;top:14px;right:14px;z-index:50}
.theme-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--title);font-weight:600;font-size:12px;box-shadow:0 6px 12px rgba(0,0,0,.08)}
.theme-btn:hover{filter:brightness(1.05)}
.theme-btn:active{transform:translateY(1px)}
:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in oklab, var(--focus-b) 60%, transparent)}

/* Responsive */
@media (max-width:768px){
  .title{font-size:22px}
  .slogan{font-size:20px}
  .shell{padding:12px}
  .brand{padding:16px}
  .card{padding:18px;min-height:520px}
}
@media (max-width:480px){
  .shell{box-shadow:none;padding:8px}
  .brand{border-radius:8px}
  .card{border-radius:10px;box-shadow:0 12px 24px rgba(0,0,0,.18)}
  .form-fields .row{grid-template-columns:1fr;gap:.4rem}
  .form-fields .row .link-muted{justify-self:start}
}

/* Compat “panel--wide” (legacy) */
.panel.panel--wide .card{max-width:640px;margin:0 auto}
.panel.panel--wide .form-actions .btn{width:100%}