/* ============================================================
   MAREA LAB — Sistema de diseño "Aurora" (plataforma)
   Mismos tokens que la vidriera (2-MARCA/Direccion-Aurora/tokens.css).
   Base blanca fría · Outfit · vidrio · pill · aqua como luz.
   ============================================================ */

:root {
  --blanco:#FFFFFF; --papel:#F4F8FA; --niebla:#6B7E84; --tinta:#0E2A33;
  --petroleo:#044C5E; --teal:#00748E; --crema:#EDE7E4;
  --aqua:#4FC3D6; --aqua-claro:#BCE6EE;
  --radio-card:24px; --radio:16px; --radio-pill:999px;
  --vidrio:rgba(255,255,255,.55); --vidrio-borde:rgba(255,255,255,.7);
  --sombra-suave:0 20px 60px -20px rgba(4,76,94,.25);
  --sombra-card:0 10px 30px -16px rgba(4,76,94,.22);
  --linea:rgba(4,76,94,.12);
  --ok:#1d7a48; --ok-bg:#d6f0e0; --warn:#9a6b00; --warn-bg:#fdf0d5; --err:#c0392b;
  --fuente:'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--fuente); color:var(--petroleo);
  background:var(--papel); -webkit-font-smoothing:antialiased; line-height:1.5;
}

/* --- Fondo aurora (sutil, para pantallas de app) --- */
.bg-aurora { position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--papel); }
.bg-aurora .blob { position:absolute; border-radius:50%; filter:blur(80px); mix-blend-mode:multiply; }
.bg-aurora .b1 { width:620px;height:620px; top:-280px; left:-140px; opacity:.45;
  background:radial-gradient(circle at 30% 30%,var(--aqua),transparent 65%); animation:flota 28s ease-in-out infinite; }
.bg-aurora .b2 { width:560px;height:560px; top:-200px; right:-120px; opacity:.32;
  background:radial-gradient(circle at 60% 40%,var(--teal),transparent 62%); animation:flota2 32s ease-in-out infinite; }
.grain { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
@keyframes flota { 50%{ transform:translate(50px,40px) scale(1.07); } }
@keyframes flota2 { 50%{ transform:translate(-40px,30px) scale(1.05); } }

/* --- Tipografía --- */
.eyebrow { font-size:13px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--teal); }
h1 { font-weight:300; letter-spacing:-1px; line-height:1.08; color:var(--petroleo); }
h1 b, h1 strong { font-weight:400; color:var(--teal); }
h2 { font-weight:500; letter-spacing:-.3px; color:var(--petroleo); }
h3 { font-weight:600; color:var(--petroleo); }

/* --- Barra superior (glass pill) --- */
.topbar {
  position:sticky; top:14px; z-index:50; margin:14px auto 0; width:calc(100% - 28px); max-width:1120px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--vidrio); border:1px solid var(--vidrio-borde);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-radius:var(--radio-pill); padding:10px 14px 10px 20px; box-shadow:var(--sombra-suave);
}
.topbar .brand { display:flex; align-items:center; gap:10px; }
.topbar .brand img { height:26px; display:block; }
.topbar .ctx { font-size:.82rem; color:var(--niebla); font-weight:500; }
.topbar .sp { flex:1; }

/* --- Botones --- */
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:var(--radio-pill);
  font-family:var(--fuente); font-weight:500; font-size:15px; text-decoration:none; cursor:pointer; border:0;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { color:#fff; background:linear-gradient(120deg,var(--teal),var(--petroleo));
  box-shadow:0 12px 26px -12px rgba(0,116,142,.8); }
.btn-primary:disabled { opacity:.5; cursor:default; transform:none; }
.btn-ghost { color:var(--petroleo); background:var(--vidrio); border:1px solid var(--vidrio-borde);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.btn-ghost:hover { background:#fff; }
.btn-sm { padding:7px 13px; font-size:.84rem; }
.btn-light { background:#fff; color:var(--petroleo); box-shadow:0 6px 18px -8px rgba(4,76,94,.5); }
.btn-wa { background:#fff; color:var(--petroleo); }

/* --- Tarjetas --- */
.card { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio-card);
  box-shadow:var(--sombra-card); padding:24px; }
.glass { background:var(--vidrio); border:1px solid var(--vidrio-borde);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-radius:var(--radio-card); box-shadow:var(--sombra-suave); }

/* --- Formularios --- */
label { display:block; font-weight:600; font-size:.86rem; margin:12px 0 5px; color:var(--petroleo); }
input[type=text], input[type=email], input[type=password], input[type=tel], textarea, select {
  width:100%; padding:11px 13px; border:1.5px solid var(--linea); border-radius:var(--radio);
  font:inherit; color:var(--petroleo); background:#fff; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,116,142,.12); }
textarea { min-height:64px; resize:vertical; }
fieldset { border:1px solid var(--linea); border-radius:var(--radio-card); padding:14px 18px; margin:0 0 16px; background:#fff; }
legend { font-weight:600; padding:0 8px; }

/* --- Pills / badges --- */
.pill { display:inline-block; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:var(--radio-pill);
  background:rgba(79,195,214,.16); color:var(--teal); border:1px solid rgba(79,195,214,.3); }
.estado { font-size:.7rem; font-weight:600; padding:2px 9px; border-radius:var(--radio-pill); }
.estado.ok, .estado.aprobada, .estado.activa { background:var(--ok-bg); color:var(--ok); }
.estado.warn, .estado.borrador, .estado.trial, .estado.impago { background:var(--warn-bg); color:var(--warn); }
.estado.sin, .estado.cancelada { background:#edf1f3; color:var(--niebla); }

/* --- Mensajes --- */
.msg { font-weight:600; font-size:.88rem; }
.msg.ok { color:var(--ok); } .msg.err { color:var(--err); }
.hint { color:var(--teal); font-weight:500; font-size:.88rem; }

/* --- Tablas --- */
table.marea { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radio-card);
  overflow:hidden; box-shadow:var(--sombra-card); }
table.marea th { background:var(--petroleo); color:#fff; text-align:left; padding:10px 12px; font-size:.8rem; font-weight:500; }
table.marea td { padding:9px 12px; font-size:.86rem; font-weight:400; border-top:1px solid var(--linea); color:var(--tinta); }
table.marea tr:nth-child(even) td { background:#f7fafb; }

/* En pantallas chicas la barra muestra solo logo + acción (oculta los contextos). */
@media (max-width:600px) {
  .topbar { padding:9px 12px 9px 16px; }
  .topbar .ctx { display:none; }
  .topbar .brand img { height:22px; }
}

@media (prefers-reduced-motion:reduce) {
  .bg-aurora .blob { animation:none !important; }
  html { scroll-behavior:auto; }
}