/* AUTH PAGE (login / register) — mismo marcado y mismos ids; solo cambia la presentación */

.auth-main{max-width:1060px;padding-top:40px;padding-bottom:72px}
.auth-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:0;align-items:stretch;border-radius:30px;box-shadow:0 40px 80px -46px rgba(10,61,54,.6);animation:auth-in .7s var(--ease-out) both}
@keyframes auth-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Panel de marca ---------- */
.auth-aside{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;padding:64px 36px 48px;color:#fff;border-radius:30px 0 0 30px;
  background:
    radial-gradient(300px 220px at 15% 10%,rgba(127,224,204,.38),transparent 70%),
    radial-gradient(320px 260px at 100% 100%,rgba(63,127,208,.36),transparent 70%),
    linear-gradient(160deg,#12886F 0%,var(--primary) 45%,var(--pine) 100%)}
.auth-aside::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);background-size:20px 20px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.auth-aside::after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 0 34px rgba(255,255,255,.04)}
.auth-aside>*{position:relative;z-index:1}
.aside-pulse{width:100%;height:auto;max-height:90px;overflow:visible}
.aside-pulse path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 8px rgba(255,255,255,.55));animation:aside-trace 2.2s .4s var(--ease-out) forwards}
.aside-pulse .pulse-ghost{stroke:rgba(255,255,255,.22);stroke-dashoffset:0;filter:none;animation:none}
@keyframes aside-trace{to{stroke-dashoffset:0}}
.auth-aside h2{font-family:var(--font-heading);font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:500;color:#fff;margin:0;line-height:1.1}
.auth-aside p{color:#CDEBE4;font-size:.98rem;line-height:1.6;margin:0}
.auth-aside ul{list-style:none;display:grid;gap:12px;margin-top:6px}
.auth-aside li{display:flex;align-items:center;gap:12px;font-size:.92rem;color:#E6F6F2;font-weight:500}
.auth-aside li span{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:#fff}

/* ---------- Tarjeta ---------- */
.auth-card{background:var(--surface);border:1px solid var(--line);border-left:0;border-radius:0 30px 30px 0;padding:clamp(26px,4.5vw,46px);min-width:0}
.auth-card .tag{margin-bottom:16px}
.auth-card h1{font-size:clamp(1.9rem,3.6vw,2.5rem);margin:0 0 10px;letter-spacing:-.02em}
.auth-card h2{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin:26px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.auth-card h2:first-child{margin-top:0}
.auth-intro{color:var(--muted);max-width:60ch;margin-bottom:22px;font-size:.98rem}

/* Mensajes del servidor */
.auth-card .search-status{margin:0 0 14px;font-size:.9rem;line-height:1.5;border-radius:12px}
.auth-card .search-status:empty{display:none}
.auth-card #flash-ok,.auth-card #flash-error,.auth-card #login-status:not(:empty),.auth-card #patient-status:not(:empty),.auth-card #doctor-status:not(:empty){padding:11px 14px;background:var(--bg);border:1px solid var(--line)}
.auth-card #flash-ok{background:#E8F6EE;border-color:#BFE3CE}
.auth-card #flash-error{background:#FDEEEA;border-color:#F4CFC6}
.auth-card #login-status:not(:empty){background:var(--amber-soft);border-color:#F2D9B3;color:#7A4A0A}

/* Pestañas principales: control segmentado */
.auth-tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:4px;margin:22px 0}
.auth-tab{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:.95rem;padding:11px 14px;cursor:pointer;border-radius:10px;border-bottom:0;transition:background .25s var(--ease-out),color .2s,box-shadow .25s}
.auth-tab:hover{color:var(--primary)}
.auth-tab.active{background:var(--surface);color:var(--primary-dark);box-shadow:0 6px 14px -8px rgba(10,61,54,.5),0 0 0 1px var(--line)}
.auth-tab:focus-visible{outline:3px solid rgba(14,107,92,.3);outline-offset:1px}
.auth-tabs-small{border:1px solid var(--line);margin:4px 0 20px;background:var(--bg);border-radius:12px;padding:4px}
.auth-tabs-small .auth-tab{border-radius:9px;font-size:.9rem;padding:9px 12px}

/* Formularios (con animación suave al mostrarse) */
.auth-form:not([hidden]),#register-panel:not([hidden]){animation:form-in .45s var(--ease-out) both}
@keyframes form-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:end}
.auth-span{grid-column:1/-1}

/* Campos */
.auth-card .form-group{margin-bottom:18px}
.auth-card .form-group label{font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:.005em}
.auth-card .form-group input,.auth-form select{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:13px;background:var(--bg);color:var(--ink);font:inherit;font-size:.95rem;outline:0;transition:border-color .2s,box-shadow .2s,background .2s}
.auth-card .form-group input:hover,.auth-form select:hover{border-color:#B9D2CA}
.auth-card .form-group input:focus,.auth-form select:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 4px rgba(14,107,92,.14)}
.auth-card .form-group input::placeholder{color:#93A6A0}
/* Un campo vacío no debe verse como error: solo se marca tras interactuar con él */
.auth-card .form-group input:invalid:not(:placeholder-shown):not(:focus){border-color:var(--line);background:var(--bg)}
@supports selector(:user-invalid){
  .auth-card .form-group input:user-invalid:not(:focus),.auth-form select:user-invalid:not(:focus){border-color:#D9806C;background:#FFFAF8}
}
.auth-form select{text-overflow:ellipsis;appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C726C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.auth-form small{display:block;color:var(--muted);margin-top:7px;font-size:.8rem;line-height:1.45}

/* Botón principal */
.auth-form>.btn{width:100%;justify-content:center;height:50px;margin-top:6px;font-size:1rem;border-radius:13px;background:linear-gradient(135deg,var(--primary),#12886F);color:#fff;box-shadow:0 16px 26px -16px rgba(14,107,92,.95);transition:transform .2s var(--ease-out),box-shadow .2s,background .2s}
.auth-form>.btn:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary));transform:translateY(-2px);box-shadow:0 20px 30px -16px rgba(14,107,92,.95)}
.auth-form>.btn:active{transform:translateY(0)}
.auth-form>.btn:focus-visible{outline:3px solid rgba(14,107,92,.35);outline-offset:3px}

.auth-note{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:14px;background:var(--aqua-soft);border:1px solid #BFE5DC;color:var(--primary-dark);font-size:.88rem;line-height:1.5;margin:6px 0 18px}
.auth-note::before{content:"i";flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:700;font-size:.8rem;font-style:italic;font-family:var(--font-heading)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .auth-layout{grid-template-columns:1fr;border-radius:26px}
  .auth-aside{border-radius:26px 26px 0 0;padding:28px 26px;gap:12px}
  .auth-aside ul{grid-template-columns:1fr 1fr;gap:10px}
  .aside-pulse{max-height:56px}
  .auth-card{border-left:1px solid var(--line);border-top:0;border-radius:0 0 26px 26px}
}
@media(max-width:620px){
  .auth-main{padding-top:20px;padding-bottom:48px}
  .auth-aside ul,.auth-aside p{display:none}
  .auth-aside{padding:22px 22px 18px}
  .auth-aside h2{font-size:1.5rem}
  .auth-grid{grid-template-columns:1fr}
  .auth-span{grid-column:auto}
  .auth-tab{padding:10px 8px;font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){
  .auth-layout,.auth-form,#register-panel,.aside-pulse path{animation:none!important}
  .aside-pulse path{stroke-dashoffset:0}
}