/* OREKA FIT · ds · Acceso (iniciar sesión y crear cuenta) · auth_view.php */

/* Esta página no tiene ajuste guardado: sigue el modo del sistema */
@media(prefers-color-scheme:dark){
  :root:not([data-appearance]){
    color-scheme:dark;
    --bg:#121117; --card:#1C1B22; --surface:#26242D; --surface-2:#211F27; --line:#34313C;
    --ink:#F3F1EE; --text:#C9C4CE; --muted:#9C97A3;
    --blue:#5B76E0; --blue-ink:#AFC0FF; --blue-soft:#232C4F;
    --orange:#F07A52; --yellow:#F0C062; --red-ink:#FFB4A6; --red-soft:#3D1D18; --red-line:#FF8A75;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}

body[data-auth-layout]{min-height:100vh;min-height:100dvh}
.auth-symbols{position:absolute;width:0;height:0;overflow:hidden}
.auth .only-desktop{display:none}

.auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* ---- Marca ---- */
.auth .brand{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:calc(24px + env(safe-area-inset-top)) 20px 28px}
.brand__logo{display:flex;align-items:center;gap:10px}
.brand__mark{width:34px;height:34px;flex:none}
.brand__wordmark{font:600 22px var(--font-title);color:var(--ink);letter-spacing:-.3px}
.brand__copy{display:flex;flex-direction:column;gap:6px;max-width:30ch}
.brand__title{font-size:26px;line-height:1.15;letter-spacing:-.4px}
.brand__text{font-size:15px;color:var(--text)}
.pillars{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pillars li{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--card);font-size:13px;font-weight:600;color:var(--ink)}
.dot{width:8px;height:8px;border-radius:50%}
.dot--orange{background:var(--orange)}.dot--blue{background:var(--blue)}.dot--yellow{background:var(--yellow)}

/* ---- Hoja del formulario ---- */
.sheet{flex:1;background:var(--card);border-radius:28px 28px 0 0;padding:8px 20px calc(28px + env(safe-area-inset-bottom))}
.sheet>.card{box-shadow:none;padding:16px 0 0;margin:0 auto;max-width:420px;background:transparent}

.tabs{display:flex;gap:2px;padding:4px;border-radius:var(--r-md);background:var(--surface);margin-bottom:24px}
.tab{flex:1;min-height:40px;border:0;border-radius:11px;background:transparent;color:var(--text);font:600 14.5px var(--font);cursor:pointer}
.tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(28,26,36,.1)}
:root:not([data-appearance]) .tab[aria-selected="true"]{background:var(--bg)}
@media(prefers-color-scheme:light){:root:not([data-appearance]) .tab[aria-selected="true"]{background:#fff}}

.panel{display:flex;flex-direction:column;gap:18px}
.panel__head{display:flex;flex-direction:column;gap:4px}
.panel__title{font-size:26px;letter-spacing:-.4px}
.panel__sub{color:var(--text)}

.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.label{font-size:13.5px;font-weight:600;color:var(--ink)}
.link-strong{font-size:13.5px;font-weight:600;text-decoration:none;color:var(--blue-ink)}
.link-strong:hover{text-decoration:underline}
.input-wrap{position:relative}
.input--with-btn{padding-right:52px!important}
.eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.eye:hover{background:var(--surface);color:var(--ink)}
.eye svg{width:20px;height:20px}
.field-error a{color:inherit;font-weight:650}

.check{margin-top:-2px}

.form .btn{width:100%;min-height:50px;font-size:16px;background:var(--blue);color:var(--on-blue)}
.form .btn svg{width:18px;height:18px}
.form .btn.auth-face-id{background:var(--blue-soft);color:var(--blue-ink)}

/* Fuerza de la contraseña */
.pw-grid{display:flex;flex-direction:column;gap:16px}
.strength{display:flex;flex-direction:column;gap:6px}
.strength--mobile{margin-top:4px}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.meter span{height:4px;border-radius:2px;background:var(--line);transition:background .2s}
.meter[data-level="1"] span:nth-child(-n+1){background:var(--orange)}
.meter[data-level="2"] span:nth-child(-n+2){background:var(--yellow)}
.meter[data-level="3"] span:nth-child(-n+3),.meter[data-level="4"] span{background:var(--blue)}
.hint{font-size:12.5px;color:var(--muted)}

/* Entrar con Apple o Google (colores de cada marca) */
.social-access{display:flex;flex-direction:column;gap:10px}
.social-form{margin:0}
.social-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;padding:0 16px;border:0;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font:600 15.5px var(--font);cursor:pointer}
.social-button-apple{background:#000;color:#fff;box-shadow:none}
:root:not([data-appearance]) .social-button-apple{background:#000}
@media(prefers-color-scheme:dark){:root:not([data-appearance]) .social-button-apple{background:#fff;color:#000}}
.social-email-divider{display:flex;align-items:center;gap:14px;margin-top:6px;color:var(--muted);font-size:13px}
.social-email-divider::before,.social-email-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.terms{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5;margin-top:4px}
.terms a{color:var(--text)}

/* ---- Escritorio: dos columnas ---- */
@media(min-width:861px){
  .auth .only-mobile{display:none}
  .auth div.only-desktop{display:flex}
  .auth span.only-desktop{display:inline}
  .auth{display:grid;grid-template-columns:minmax(420px,1fr) minmax(480px,560px)}
  .auth .brand{justify-content:space-between;padding:48px 56px;gap:32px}
  .brand__wordmark{font-size:26px}.brand__mark{width:40px;height:40px}
  .brand__copy{max-width:560px;gap:14px}
  .brand__title{font-size:clamp(40px,4.4vw,60px);line-height:1.05;letter-spacing:-1px}
  .brand__text{font-size:17px;max-width:34ch}
  /* anillo grande de fondo, sin brillos */
  .auth .brand::after{content:"";position:absolute;right:-140px;bottom:-140px;width:440px;height:440px;border-radius:50%;box-shadow:inset 0 0 0 46px color-mix(in srgb,var(--orange) 10%,transparent);pointer-events:none}
  .pillars li{height:34px;font-size:13.5px}
  .sheet{border-radius:0;display:flex;align-items:center;justify-content:center;padding:48px}
  .sheet>.card{width:100%;padding:0}
  .pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}