*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --naranja: #F25C05; --azul: #8AC2FF; --azul-oscuro: #4a90d9; --azul-profundo: #1a3a5c;
  --negro: #1a1a1a; --fondo: #f5f0eb; --fondo-alt: #ede8e2; --gris-borde: #d4cdc5; --blanco: #ffffff;
  --fuente-display: 'Oswald', sans-serif; --fuente-cuerpo: 'Inter', sans-serif;
}
body { background: var(--fondo); color: var(--negro); font-family: var(--fuente-cuerpo); line-height: 1.6; min-height: 100vh; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 2rem; background:#fff; border-bottom:1px solid var(--gris-borde); }
.topbar-logo img { height:40px; }
.topbar-salir { font-family:var(--fuente-display); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--naranja); text-decoration:none; }

.envoltorio { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem; }
.envoltorio-estrecho { max-width: 420px; margin: 4rem auto; padding: 0 1.5rem; }
h1 { font-family:var(--fuente-display); font-size:clamp(1.5rem,4vw,2.1rem); font-weight:700; text-transform:uppercase; margin-bottom:.5rem; }
.divisor { width:50px; height:4px; background:linear-gradient(to right,var(--naranja),var(--azul)); margin-bottom:1.5rem; border-radius:2px; }

.tarjeta { background:#fff; border:1px solid var(--gris-borde); border-radius:8px; padding:2rem; margin-bottom:1.5rem; }
label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.35rem; }
input[type=text], input[type=password] {
  font-family: var(--fuente-cuerpo); font-size: 1rem; padding: .7rem .9rem; width: 100%;
  border: 1px solid var(--gris-borde); border-radius: 6px; margin-bottom: 1rem;
}
.btn { display:inline-block; font-family:var(--fuente-display); font-size:.85rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--naranja); border:none; padding:.85rem 1.8rem; cursor:pointer; text-decoration:none; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); width: 100%; text-align:center; }
.btn:hover { background:#d94e00; }

.aviso-error { background:#FBEAE6; color:#b5533c; border:1px solid #f0c3b5; padding:.8rem 1rem; border-radius:6px; font-size:.9rem; margin-bottom:1.2rem; }
.aviso-ok { background:#EAF2E9; color:#2F4B3C; border:1px solid #c9e0c4; padding:.8rem 1rem; border-radius:6px; font-size:.9rem; margin-bottom:1.2rem; }

.clase-tarjeta { border-left: 4px solid var(--naranja); }
.clase-tarjeta h2 { font-family:var(--fuente-display); font-size:1.2rem; text-transform:uppercase; margin-bottom:.4rem; }
.clase-meta { font-size:.85rem; color:rgba(26,26,26,.6); margin-bottom:.8rem; }
.enlace-sesion { background: var(--fondo-alt); border-radius:6px; padding:1rem; margin-top: 1rem; }
.enlace-sesion a { color: var(--azul-oscuro); font-weight:600; word-break: break-all; }
.sin-sesion { color: rgba(26,26,26,.5); font-size: .88rem; font-style: italic; margin-top: 1rem; }