/* Paleta base (modo claro por defecto) */
:root{
  --bg: #F5F7FA;                   /* fondo blanco */
  --surface: rgba(255,255,255,.1);/* +opaco para tapar burbujas */
  --text: #111418;
  --muted:#475569;
  --border:#E7E7F0;

  --primary: #A78BFA;            /* violeta claro */
  --primary-strong:#7C3AED;      /* violeta intenso (botones/enlaces) */
  --secondary:#22C55E;           /* verde alegre */
  --link: var(--primary-strong);
  --shadow: 0 10px 30px rgba(17,20,24,.10);
  --brand-font: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Modo oscuro: solo cambia variables */
html.dark{
  --bg:#0F1117;
  --surface: rgba(21,24,35,.88);
  --text:#EDEDF0;
  --muted:#A0A8B8;
  --border:#2A2F3A;

  --primary:#C4B5FD;
  --primary-strong:#7C3AED;
  --secondary:#4ADE80;
  --link: var(--primary-strong);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Fondo blanco + marco degradado violeta en el borde de la página */
html, body { height:100%; }
body{
	margin:0; 
	background:var(--bg);
	color:var(--text);
	font-family: var(--brand-font);
	}

/* Marco degradado (compatible con light/dark) */
html::before{
  content:none !important;
  position:fixed; inset:0;
  padding:3px;                      /* grosor del marco */
  background: linear-gradient(135deg,#B8A6FF 0%, #7C3AED 50%, #C4B5FD 100%);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none; z-index:0;
}
/* Fallback si el navegador no soporta mask */
@supports not ((-webkit-mask: none) or (mask: none)){
  html{ box-shadow: inset 0 0 0 3px #A78BFA; }
}

/* Tarjetas y controles */
.card{
  position:relative; z-index:1;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px; padding:20px;
  box-shadow:var(--shadow);
}
.input, .select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px; padding:.65rem .8rem;
  color:var(--text);
}
:focus-visible{ outline:2px solid var(--primary-strong); outline-offset:2px; border-radius:10px; }

a{ color:var(--link); text-underline-offset:2px; }
a:hover{ text-decoration:underline; }

/* --- Login específico --- */
.login-title{ color: var(--primary-strong); font-weight:800; } /* "Acceso" en violeta y negrita */
.login-label{ color: var(--primary-strong); font-weight:700; } /* "Usuario" y "Contraseña" en violeta y negrita */
.login-hint{ color: var(--muted); }

/* Botones */
.btn{ display:inline-flex; gap:.5rem; align-items:center; padding:.7rem 1rem; border-radius:12px; font-weight:700; border:0; cursor:pointer; }
.btn-primary{ background:var(--primary-strong); color:#fff; }
.btn-secondary{ background:var(--secondary); color:#0F172A; }
.btn.outline{ background:transparent; color:var(--primary-strong); border:2px solid var(--primary-strong); }