/* ============================================================
   cosmo-theme.css — Rediseño visual premium (SaaS / vidrio / cósmico)

   Se carga DESPUÉS de style.css y SOLO mejora valores y agrega
   componentes nuevos (sidebar, stat-card, alert-banner, nav-pill,
   badge-soft). No renombra ni quita ninguna variable/clase existente,
   así que el selector de Apariencia (modo oscuro/claro, color de
   acento, y los estilos Neón/Vidrio/Bento) sigue funcionando igual
   que antes en TODAS las páginas del sitio, no solo en las que
   tocamos en esta pasada.
   ============================================================ */

:root{
  --bg-void:#040d09;
  --bg-void-deep:#020805;
  --nebula-a:#0d6b42;
  --nebula-b:#12a866;
  --surface:rgba(255,255,255,.045);
  --surface-strong:rgba(255,255,255,.08);
  --border:rgba(90,240,180,.16);
  --border-soft:rgba(90,240,180,.10);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:11px;
  --card-shadow:0 20px 60px rgba(0,0,0,.5);
  --card-backdrop:blur(16px); /* vidrio de base en toda la app, no solo en el estilo "Vidrio" */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* Fondo cósmico más presente: más estrellas y halos más grandes */
.cosmos{
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 32% 74%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 14%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 71% 42%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 78%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 95% 26%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 90%, rgba(255,255,255,.4) 50%, transparent 51%),
    linear-gradient(180deg, var(--bg-void-deep) 0%, var(--bg-void) 45%, #061a10 100%);
}
.nebula-1,.nebula-2{ opacity:.4; filter:blur(90px); }
.nebula-1{ width:620px; height:620px; }
.nebula-2{ width:560px; height:560px; }

/* Transiciones suaves globales */
a,button,input,select,
.topbar,.glass-panel,.admin-card,.platform-card,.btn-primary,.btn-secondary,.btn-ghost-sm,
.field input,.field select,.sidebar-link,.stat-card,.nav-pill,table.data-table tbody tr{
  transition:all .22s var(--ease);
}

/* Vidrio más rico en todos los paneles: doble borde + brillo interior sutil */
.topbar,.glass-panel,.admin-card,.platform-card,.ap-pop,.stat-card,.sidebar,.alert-banner{
  background:var(--surface);
  border:1px solid var(--border);
  backdrop-filter:var(--card-backdrop); -webkit-backdrop-filter:var(--card-backdrop);
  box-shadow:var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.04);
}
.platform-card:hover,.admin-card:hover,.stat-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-soft);
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Botones premium */
.btn-primary{
  position:relative;
  box-shadow:0 10px 28px rgba(24,164,88,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 14px 34px rgba(24,164,88,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-primary:active{ transform:translateY(0); }
.btn-secondary:hover,.btn-ghost-sm:hover{ transform:translateY(-1px); }
.platform-btn{ transition:filter .2s var(--ease), transform .2s var(--ease); }
.platform-btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }

/* Inputs con halo de foco más notorio */
.field input:focus,.field select:focus{ box-shadow:0 0 0 3px rgba(24,164,88,.16); }

/* Tablas elegantes */
table.data-table tbody tr:hover{ background:rgba(255,255,255,.025); }
table.data-table th{ background:rgba(255,255,255,.02); }

/* 5 columnas en las filas de "Agregar correos" (correo real / reenvío) */
.email-row{ grid-template-columns:120px 1fr 1fr 1fr 32px; }

/* ---- Nav pill (pestañas superiores, si se usan) ---- */
.nav-pill{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px;
  font-size:.83rem; font-weight:600; color:var(--text-muted); text-decoration:none; border:1px solid transparent;
}
.nav-pill:hover{ color:var(--text); background:var(--surface-strong); }
.nav-pill.active{ color:var(--accent-soft); background:rgba(24,164,88,.12); border-color:var(--border); }

/* ---- Banner de alerta destacado (panel admin) ---- */
.alert-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px;
  border-radius:var(--radius-md); border-color:rgba(251,191,36,.35); background:rgba(251,191,36,.06);
  margin-bottom:22px;
}
.alert-banner .alert-text{ display:flex; gap:14px; align-items:center; }
.alert-banner .alert-text b{ display:block; font-size:.92rem; color:var(--text); }
.alert-banner .alert-text span{ font-size:.8rem; color:var(--text-muted); }
.alert-banner .btn-alert{
  font-family:inherit; font-weight:700; font-size:.82rem; color:var(--warning); background:transparent;
  border:1px solid rgba(251,191,36,.5); border-radius:999px; padding:9px 16px; text-decoration:none; white-space:nowrap; flex:none;
}
.alert-banner .btn-alert:hover{ background:rgba(251,191,36,.1); }

/* ---- Tarjetas de estadística (panel admin) ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-bottom:22px; }
.stat-card{
  border-radius:var(--radius-md); padding:20px 20px 18px; display:flex; flex-direction:column; gap:12px;
  border-color:var(--stat-glow, var(--border));
  box-shadow:var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.04), 0 0 34px var(--stat-glow-soft, transparent);
}
.stat-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.icon-chip{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(24,164,88,.14); color:var(--accent-soft); flex:none; }
.stat-num{ font-family:'Unbounded',sans-serif; font-size:1.9rem; font-weight:700; margin:0; }
.stat-label{ font-size:.82rem; color:var(--text-muted); margin:0; }
.stat-card .btn-primary.auto,.stat-card .platform-btn{ margin-top:2px; width:100%; }

/* ---- Fondo "hero" cósmico del panel admin: planeta + silueta de la
   marca detrás del encabezado y las tarjetas, solo decorativo (no
   afecta el layout ni ningún dato real). ---- */
.admin-home{ position:relative; }
.admin-home::before{
  content:''; position:absolute; top:-120px; right:-90px; width:520px; height:520px;
  border-radius:50%; z-index:-2; pointer-events:none;
  background:radial-gradient(circle at 32% 30%, var(--nebula-b) 0%, var(--nebula-a) 42%, transparent 70%);
  filter:blur(4px); opacity:.45;
}
.admin-home::after{
  content:''; position:absolute; top:-30px; right:-20px; width:380px; height:380px;
  z-index:-1; pointer-events:none; opacity:.07;
  background:url('../img/logo-mark.png') center/contain no-repeat;
}
.page-head .badge.system{ margin-top:0; margin-bottom:14px; }
.page-head h1 .accent{ color:var(--accent-soft); text-shadow:0 0 26px rgba(24,164,88,.35); }
@media (max-width:900px){
  .admin-home::before,.admin-home::after{ width:260px; height:260px; opacity:.3; }
  .admin-home::after{ opacity:.05; }
}

/* ---- Barra lateral (secciones del panel admin) ---- */
.app-with-sidebar{ display:flex; gap:26px; align-items:flex-start; }
.sidebar{
  width:230px; flex:none; border-radius:var(--radius-lg); padding:22px 16px; display:flex; flex-direction:column; gap:18px;
  position:sticky; top:24px;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:0 4px 14px; border-bottom:1px solid var(--border-soft); }
.sidebar-nav{ display:flex; flex-direction:column; gap:4px; }
.sidebar-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm);
  font-size:.86rem; font-weight:600; color:var(--text-muted); text-decoration:none; border:1px solid transparent;
}
.sidebar-link:hover{ color:var(--text); background:var(--surface-strong); }
.sidebar-link.active{ color:var(--accent-soft); background:rgba(24,164,88,.12); border-color:var(--border); }
.sidebar-link svg{ flex:none; }
.sidebar-foot{ margin-top:auto; padding:14px; border-radius:var(--radius-md); background:rgba(24,164,88,.06); border:1px solid rgba(24,164,88,.18); display:flex; gap:10px; }
.sidebar-foot svg{ flex:none; margin-top:1px; }
.sidebar-foot b{ display:block; font-size:.78rem; }
.sidebar-foot span{ font-size:.72rem; color:var(--text-muted); line-height:1.5; }
.app-main{ flex:1; min-width:0; }

@media (max-width:900px){
  .app-with-sidebar{ flex-direction:column; }
  .sidebar{ width:100%; position:static; flex-direction:row; flex-wrap:wrap; }
  .sidebar-brand,.sidebar-foot{ display:none; }
}

/* ---- Badges de estado suaves ---- */
.badge-soft{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; padding:4px 11px; border-radius:999px; }
.badge-soft.ok{ color:var(--success); background:var(--success-bg); border:1px solid rgba(52,211,153,.3); }
.badge-soft.warn{ color:var(--warning); background:var(--warning-bg); border:1px solid rgba(251,191,36,.3); }
.badge-soft .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* Variante neutra del badge existente, para etiquetas informativas (ej. login) */
.badge.system{ background:rgba(24,164,88,.14); color:var(--accent-soft); letter-spacing:.08em; text-transform:uppercase; font-size:.66rem; align-self:flex-start; margin-top:26px; }
.badge.system .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ============================================================
   Pantalla de login — rediseño con la foto real de fondo
   (assets/img/fondo-espacial.jpg) y tarjeta oscura de vidrio,
   siguiendo el mockup que mandó Gustavo. Solo toca esta pantalla:
   el resto del sitio sigue con el fondo cósmico de CSS de siempre.
   ============================================================ */

.auth-shell{
  background:
    linear-gradient(100deg, rgba(2,8,6,.55) 0%, rgba(2,8,6,.15) 45%, rgba(2,8,6,.55) 100%),
    url('../img/fondo-espacial.jpg') center center / cover no-repeat;
}

/* auth-left ya no lleva su propio fondo de degradado ni los blobs —
   ahora se ve la foto compartida de .auth-shell detrás de todo. */
.auth-left{ background:none; }
.auth-left::before,.auth-left::after{ display:none; }

.auth-brand-mark{
  width:auto; height:auto; background:none; box-shadow:none; border-radius:0;
}
.auth-brand-mark img{ width:36px; height:36px; }
.auth-brand-text b{ font-size:1.15rem; }

.auth-headline{ font-size:2.3rem; }
.auth-headline .accent{ color:var(--accent-soft); text-shadow:0 0 30px rgba(24,164,88,.35); }
.auth-lead{ max-width:440px; }

/* Franja "Plataformas disponibles" (reemplaza la caja única de antes) */
.auth-platforms{ margin-top:30px; }
.auth-platforms .label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,255,242,.68); font-weight:700; margin-bottom:12px; }
.auth-platforms-grid{ display:flex; gap:12px; flex-wrap:wrap; }
.auth-platform-chip{
  width:126px; padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.auth-platform-chip .mark{ font-family:'Unbounded',sans-serif; font-weight:800; }
.auth-platform-chip .name{ font-size:.76rem; color:rgba(234,255,242,.75); font-weight:600; }

/* Franja de 3 features (reemplaza la caja de texto única de antes) */
.auth-features{ margin-top:auto; padding-top:34px; display:flex; gap:26px; flex-wrap:wrap; }
.auth-feature-item{ display:flex; gap:11px; align-items:flex-start; max-width:190px; }
.auth-feature-item svg{ flex:none; margin-top:2px; }
.auth-feature-item b{ display:block; font-size:.85rem; margin-bottom:2px; }
.auth-feature-item span{ display:block; font-size:.76rem; color:rgba(234,255,242,.62); line-height:1.4; }

/* Tarjeta de login: vidrio oscuro con resplandor verde, ya no blanca */
.auth-card{
  background:rgba(4,14,10,.72);
  border:1px solid rgba(24,164,88,.4);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  box-shadow:0 30px 90px rgba(0,0,0,.55), 0 0 60px rgba(24,164,88,.1);
  color:#eafff2;
  text-align:center;
}
.auth-card-mark{ width:60px; height:60px; margin:0 auto 12px; display:block; filter:drop-shadow(0 0 18px rgba(24,164,88,.5)); }
.auth-card h2{ display:none; } /* el título visual ahora es el logo + nombre, no un "Iniciar sesión" aparte */
.auth-card-brand{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.25rem; color:#fff; margin-bottom:2px; }
.auth-card-caption{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,255,242,.55); margin-bottom:26px; }
.auth-card .field{ text-align:left; }
.auth-card .field label{ color:rgba(234,255,242,.6); font-size:.7rem; letter-spacing:.08em; }
.auth-card .field input{
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); color:#fff;
  padding-left:38px;
}
.auth-card .field input::placeholder{ color:rgba(234,255,242,.35); }
.auth-card .field input:focus{ border-color:var(--accent-soft); background:rgba(0,0,0,.4); box-shadow:0 0 0 3px rgba(24,164,88,.18); }
.auth-card .field-icon{ position:absolute; left:12px; top:38px; color:rgba(234,255,242,.4); pointer-events:none; }
.auth-card .btn-primary{ color:#06140d; }
.auth-forgot{ color:var(--accent-soft); }
.auth-note{ color:rgba(234,255,242,.55); }
.auth-note-row{ display:flex; gap:9px; align-items:flex-start; justify-content:center; margin-top:18px; }
.auth-divider{ display:flex; align-items:center; gap:10px; margin:18px 0; }
.auth-divider .line{ flex:1; height:1px; background:rgba(255,255,255,.12); }
.auth-divider .dot{ width:6px; height:6px; border-radius:50%; border:1px solid rgba(255,255,255,.3); }
.password-toggle{ color:rgba(234,255,242,.45); }

@media (max-width:860px){
  .auth-features{ flex-direction:column; gap:16px; }
}

/* ============================================================
   "Selecciona una plataforma" (dashboard.php) — tarjetas con foto
   cósmica de fondo (teñida por color de marca) en vez del rectángulo
   de color plano, logo real superpuesto, pill "Activa" y fila de
   "cuentas asignadas". No toca la consulta de código ni el conteo
   real (viene de la misma tabla assignments que ya usa buscar.php).
   ============================================================ */
.platform-card{
  border-color:var(--platform-glow, var(--border));
  box-shadow:var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.04), 0 0 30px var(--platform-glow-soft, transparent);
}
.platform-hero{
  position:relative; display:flex; align-items:flex-start; justify-content:flex-start; padding:14px;
}
.platform-hero-img{
  width:auto; height:32px; object-fit:contain; display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.platform-status{
  position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:700; color:var(--success); background:rgba(4,14,10,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(52,211,153,.35); padding:5px 10px; border-radius:999px;
}
.platform-status .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.platform-assigned-row{
  display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; color:var(--text-muted);
  text-decoration:none; padding:9px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  margin:2px 0 4px;
}
.platform-assigned-row:hover{ color:var(--text); }
.platform-assigned-row span{ flex:1; }
.platform-assigned-row .chev{ flex:none; opacity:.6; }

/* Fondo de la foto real (la misma de fondo-espacial.jpg) detrás de
   TODA la pantalla "Selecciona una plataforma", en vez del degradado
   genérico — igual que Gustavo pidió. Solo esta página (body.dashboard-cosmic),
   el resto del sitio sigue con el fondo cósmico de siempre. */
body.dashboard-cosmic .cosmos{
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 32% 74%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 14%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 71% 42%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 78%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 95% 26%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 90%, rgba(255,255,255,.35) 50%, transparent 51%),
    linear-gradient(180deg, rgba(2,8,6,.4) 0%, rgba(2,8,6,.58) 55%, rgba(3,10,7,.94) 100%),
    url('../img/fondo-espacial.jpg') center 28% / cover no-repeat;
}
body.dashboard-cosmic .nebula{ opacity:.16; }