/* ==========================================================================
   Private Fitness Co. — Auth pages (login / register): centered card over a
   radial-wash papel background, matching login.html / register-cliente.html
   from the uploaded design system (no side photo panel).
   Scoped to .pf-auth-* so Vue-rendered form internals (customer-register,
   supplier-register, form-phone-input, Bootstrap modal) keep their own
   form-control/btn classes untouched — only the surrounding chrome changes.
   ========================================================================== */

.pf-auth-section{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 20px 64px;text-align:center;
  background:radial-gradient(900px 500px at 30% 0%,var(--verde-suave),transparent 65%),radial-gradient(700px 400px at 90% 100%,var(--crema),transparent 60%),var(--papel)}
.pf-auth-brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:28px}
.pf-auth-brand img{height:72px;margin-bottom:14px}
.pf-auth-brand h1{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:28px;letter-spacing:var(--tracking-display);color:var(--tinta);margin:0}
.pf-auth-card{width:100%;max-width:480px;background:var(--blanco);border-radius:var(--radius-hero-card);box-shadow:var(--shadow-lg);padding:40px;text-align:left}
.pf-auth-card--wide{max-width:720px}
.pf-auth-foot{text-align:center;margin-top:24px;font-size:14px;color:var(--niebla)}
.pf-auth-foot a{color:var(--verde);font-weight:600;text-decoration:none}
.pf-auth-foot a:hover{text-decoration:underline}
.pf-auth-back{margin-top:28px;font-size:13.5px;color:var(--niebla)}
.pf-auth-back a{color:var(--niebla);text-decoration:none}
.pf-auth-back a:hover{color:var(--verde)}

/* Bootstrap pill tabs (customer/supplier register switch) — restyled, same markup/behavior */
.pf-auth-tabs.nav-pills{display:flex;background:var(--blanco);border-radius:var(--radius-pill);box-shadow:var(--shadow-xs);padding:5px;gap:5px;margin-bottom:28px}
.pf-auth-tabs.nav-pills .nav-link{font-family:var(--font-body);font-weight:600;font-size:14.5px;color:var(--niebla);border-radius:var(--radius-pill);padding:10px 26px;border:none;background:transparent}
.pf-auth-tabs.nav-pills .nav-link:not(.active):hover{background:var(--crema);color:var(--tinta)}
.pf-auth-tabs.nav-pills .nav-link.active{background:var(--verde);color:#fff;box-shadow:var(--shadow-xs)}

/* Bootstrap form controls, restyled to match the token system without
   changing their classes (Laravel @error()/is-invalid keep working) */
.pf-auth-card .form-control,
.pf-auth-card .form-select{background:var(--papel);border-radius:var(--radius-btn);border-color:var(--border-hairline);font-family:var(--font-body);padding:12px 16px}
.pf-auth-card .form-control:focus,
.pf-auth-card .form-select:focus{border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-suave)}
.pf-auth-card label{font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--tinta)}
.pf-auth-card .btn-primary{background:var(--verde);border-color:var(--verde);border-radius:var(--radius-btn);font-weight:600}
.pf-auth-card .btn-primary:hover,
.pf-auth-card .btn-primary:focus{background:#265a41;border-color:#265a41}

@media (max-width:560px){.pf-auth-card{padding:28px}}