/* =====================================================================
   MTP PLATFORM · Hoja de estilos del sistema
   CSS propio (sin frameworks) · Flexbox + Grid · Mobile first
   Paleta heredada del sitio institucional de MTP Platform
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* Fondos */
  --bg:#07080c;
  --bg2:#0f1117;
  --bg3:#161821;
  --bg4:#1d1f2b;

  /* Bordes */
  --border:rgba(255,255,255,0.06);
  --border2:rgba(255,255,255,0.11);
  --border3:rgba(255,255,255,0.18);

  /* Texto */
  --text:#dde0ec;
  --text2:#7f84a0;
  --text3:#44475a;

  /* Acentos */
  --indigo:#6366f1;    --indigo2:#818cf8;   --indigo-bg:rgba(99,102,241,0.09);
  --emerald:#10b981;   --emerald2:#34d399;  --emerald-bg:rgba(16,185,129,0.09);
  --amber:#f59e0b;                          --amber-bg:rgba(245,158,11,0.09);
  --rose:#f43f5e;                           --rose-bg:rgba(244,63,94,0.09);
  --sky:#0ea5e9;                            --sky-bg:rgba(14,165,233,0.09);
  --violet:#8b5cf6;                         --violet-bg:rgba(139,92,246,0.09);

  --r:12px; --r2:8px; --r3:6px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  --sidebar:248px;
  --topbar:58px;
  --sombra:0 8px 28px rgba(0,0,0,.28);
  --transicion:.2s cubic-bezier(.4,0,.2,1);
}

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* Textura sutil heredada del sitio */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

a{ color:var(--indigo2); text-decoration:none; transition:color var(--transicion); }
a:hover{ color:var(--text); }

::selection{ background:rgba(99,102,241,.35); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg2); }
::-webkit-scrollbar-thumb{ background:var(--bg4); border-radius:6px; border:2px solid var(--bg2); }
::-webkit-scrollbar-thumb:hover{ background:var(--text3); }

/* =====================================================================
   LOGIN
   ===================================================================== */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; position:relative; overflow:hidden;
}
.login-orb1,.login-orb2{ position:absolute; pointer-events:none; }
.login-orb1{ top:-10%; left:50%; transform:translateX(-50%); width:min(700px,120vw); height:420px;
  background:radial-gradient(ellipse,rgba(99,102,241,.16) 0%,transparent 70%); }
.login-orb2{ bottom:-5%; left:15%; width:min(420px,80vw); height:300px;
  background:radial-gradient(ellipse,rgba(16,185,129,.09) 0%,transparent 70%); }

.login-card{
  position:relative; z-index:2; width:100%; max-width:410px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; padding:2.5rem 2rem;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:subir .5s cubic-bezier(.16,1,.3,1) both;
}
.login-head{ text-align:center; margin-bottom:1.75rem; }
.login-logo{
  width:56px; height:56px; margin:0 auto .9rem;
  background:linear-gradient(135deg,var(--indigo),var(--emerald));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:700; color:#fff; letter-spacing:-.5px;
  box-shadow:0 8px 24px rgba(99,102,241,.35);
}
.login-nombre{ font-size:1.3rem; font-weight:700; letter-spacing:-.02em; }
.login-lema{ font-size:12px; color:var(--text2); margin-top:.25rem; }
.login-pie{
  margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--border);
  text-align:center; font-size:11px; color:var(--text3); line-height:1.7;
}

@keyframes subir{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes aparecer{ from{opacity:0} to{opacity:1} }

/* =====================================================================
   LAYOUT DEL SISTEMA
   ===================================================================== */
.app{ display:flex; min-height:100vh; position:relative; z-index:1; }

/* ── Sidebar ── */
.sidebar{
  width:var(--sidebar); flex-shrink:0; background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0; z-index:120;
  transition:transform var(--transicion);
}
.sidebar-head{
  height:var(--topbar); display:flex; align-items:center; gap:9px;
  padding:0 1.1rem; border-bottom:1px solid var(--border); flex-shrink:0;
}
.sidebar-logo{
  width:30px;height:30px;flex-shrink:0;
  background:linear-gradient(135deg,var(--indigo),var(--emerald));
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;letter-spacing:-.5px;
}
.sidebar-nombre{ font-size:13px; font-weight:600; line-height:1.2; }
.sidebar-rol{ font-size:10px; color:var(--text3); }

.sidebar-nav{ flex:1; overflow-y:auto; padding:1rem .7rem 2rem; }
.nav-grupo{ font-size:10px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text3); padding:.9rem .6rem .45rem; }
.nav-item{
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .65rem; border-radius:var(--r2);
  font-size:13px; color:var(--text2); margin-bottom:2px;
  transition:background var(--transicion),color var(--transicion);
}
.nav-item:hover{ background:var(--bg3); color:var(--text); }
.nav-item.activo{ background:var(--indigo-bg); color:var(--indigo2); font-weight:500; }
.nav-item.activo .nav-icono{ opacity:1; }
.nav-icono{ width:17px; text-align:center; font-size:14px; opacity:.75; flex-shrink:0; }
.nav-badge{
  margin-left:auto; font-size:10px; font-weight:600; padding:1px 7px;
  border-radius:10px; background:var(--rose-bg); color:var(--rose);
}

.sidebar-pie{ padding:.9rem 1.1rem; border-top:1px solid var(--border); font-size:10.5px; color:var(--text3); }

/* ── Contenido ── */
.main{ flex:1; min-width:0; margin-left:var(--sidebar); display:flex; flex-direction:column; }

.topbar{
  height:var(--topbar); flex-shrink:0;
  display:flex; align-items:center; gap:1rem; padding:0 1.5rem;
  background:rgba(7,8,12,.88); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.topbar h1{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.topbar-derecha{ margin-left:auto; display:flex; align-items:center; gap:.6rem; }

.menu-btn{
  display:none; background:none; border:1px solid var(--border2); color:var(--text2);
  width:32px;height:32px;border-radius:var(--r3); cursor:pointer; font-size:15px;
}

.usuario-chip{
  display:flex; align-items:center; gap:.55rem; padding:4px 10px 4px 4px;
  border:1px solid var(--border2); border-radius:20px; cursor:pointer;
  background:none; color:var(--text2); font-size:12px; font-family:var(--font);
  transition:border-color var(--transicion),color var(--transicion);
}
.usuario-chip:hover{ border-color:var(--border3); color:var(--text); }
.avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--indigo),var(--violet));
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;color:#fff;
}
.avatar.lg{ width:64px;height:64px;font-size:22px;border-radius:16px; }

.menu-usuario{
  position:absolute; top:calc(var(--topbar) - 6px); right:1.5rem;
  background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r);
  min-width:212px; padding:.4rem; box-shadow:var(--sombra); z-index:150;
  display:none; animation:subir .18s ease both;
}
.menu-usuario.abierto{ display:block; }
.menu-usuario .cabecera{ padding:.6rem .7rem; border-bottom:1px solid var(--border); margin-bottom:.35rem; }
.menu-usuario .nombre{ font-size:13px; font-weight:600; color:var(--text); }
.menu-usuario .mail{ font-size:11px; color:var(--text3); word-break:break-all; }
.menu-usuario a, .menu-usuario button{
  display:flex; align-items:center; gap:.55rem; width:100%;
  padding:.5rem .7rem; border-radius:var(--r3); font-size:12.5px;
  color:var(--text2); background:none; border:none; cursor:pointer;
  font-family:var(--font); text-align:left;
}
.menu-usuario a:hover, .menu-usuario button:hover{ background:var(--bg3); color:var(--text); }
.menu-usuario .salir{ color:var(--rose); }

.contenido{ padding:1.6rem 1.5rem 4rem; flex:1; }
.contenido-limpio{ padding:2rem 1.5rem; }

/* =====================================================================
   COMPONENTES
   ===================================================================== */

/* ── Encabezado de sección ── */
.seccion-head{
  display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.seccion-head h2{ font-size:1.35rem; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.seccion-head p{ font-size:13px; color:var(--text2); margin-top:.2rem; max-width:62ch; }
.seccion-head .acciones{ margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Tarjetas ── */
.card{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:1.3rem; transition:border-color var(--transicion),transform var(--transicion);
}
.card.hover:hover{ border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--sombra); }
.card-head{
  display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;
  padding-bottom:.85rem; border-bottom:1px solid var(--border);
}
.card-head h3{ font-size:13.5px; font-weight:600; }
.card-head .acciones{ margin-left:auto; display:flex; gap:.4rem; }
.card-titulo{ font-size:13.5px; font-weight:600; margin-bottom:.8rem; }

/* ── Grillas ── */
.g2,.g3,.g4,.g5{ display:grid; gap:14px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g5{ grid-template-columns:repeat(5,1fr); }
.g-auto{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.mb{ margin-bottom:1.2rem; }
.mt{ margin-top:1.2rem; }

/* ── Tarjeta de métrica ── */
.metrica{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:1.15rem 1.25rem; position:relative; overflow:hidden;
  transition:border-color var(--transicion),transform var(--transicion);
}
.metrica:hover{ border-color:var(--border2); transform:translateY(-2px); }
.metrica::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--indigo); }
.metrica.emerald::before{ background:var(--emerald); }
.metrica.amber::before{ background:var(--amber); }
.metrica.rose::before{ background:var(--rose); }
.metrica.sky::before{ background:var(--sky); }
.metrica.violet::before{ background:var(--violet); }
.metrica-label{ font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text3); }
.metrica-valor{ font-size:1.75rem; font-weight:700; line-height:1.15; margin:.35rem 0 .1rem; letter-spacing:-.02em; }
.metrica-nota{ font-size:11.5px; color:var(--text2); }
.metrica-icono{ position:absolute; top:1rem; right:1.1rem; font-size:1.15rem; opacity:.3; }

/* ── Badges ── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
  padding:3px 9px; border-radius:20px; white-space:nowrap;
  background:var(--bg4); color:var(--text2); border:1px solid var(--border2);
}
.badge.ok{ background:var(--emerald-bg); color:var(--emerald); border-color:rgba(16,185,129,.25); }
.badge.warn{ background:var(--amber-bg); color:var(--amber); border-color:rgba(245,158,11,.25); }
.badge.bad{ background:var(--rose-bg); color:var(--rose); border-color:rgba(244,63,94,.25); }
.badge.info{ background:var(--indigo-bg); color:var(--indigo2); border-color:rgba(99,102,241,.25); }
.badge.sky{ background:var(--sky-bg); color:var(--sky); border-color:rgba(14,165,233,.25); }
.badge.violet{ background:var(--violet-bg); color:var(--violet); border-color:rgba(139,92,246,.25); }
.badge.neutral{ background:var(--bg4); color:var(--text2); }
.badge .punto{ width:5px;height:5px;border-radius:50%;background:currentColor; }

.chip{
  display:inline-block; font-size:10px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; padding:3px 10px; border-radius:14px;
  background:var(--indigo-bg); color:var(--indigo2);
}
.chip.emerald{ background:var(--emerald-bg); color:var(--emerald); }
.chip.amber{ background:var(--amber-bg); color:var(--amber); }
.chip.rose{ background:var(--rose-bg); color:var(--rose); }
.chip.sky{ background:var(--sky-bg); color:var(--sky); }
.chip.violet{ background:var(--violet-bg); color:var(--violet); }

/* ── Botones ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:9px 18px; border-radius:9px; font-size:13px; font-weight:500;
  font-family:var(--font); cursor:pointer; border:1px solid transparent;
  transition:transform .14s,box-shadow .14s,background var(--transicion),
             color var(--transicion),border-color var(--transicion);
  white-space:nowrap;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-p{ background:linear-gradient(135deg,var(--indigo),#4f46e5); color:#fff;
  box-shadow:0 4px 18px rgba(99,102,241,.28); }
.btn-p:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 8px 26px rgba(99,102,241,.4); color:#fff; }
.btn-s{ background:transparent; color:var(--text2); border-color:var(--border2); }
.btn-s:hover:not(:disabled){ color:var(--text); border-color:var(--border3); background:var(--bg3); }
.btn-ok{ background:var(--emerald); color:#04231a; font-weight:600; }
.btn-ok:hover:not(:disabled){ filter:brightness(1.08); color:#04231a; }
.btn-bad{ background:var(--rose-bg); color:var(--rose); border-color:rgba(244,63,94,.28); }

/* Botón chico para las acciones dentro de una tarjeta */
.btn-mini{ padding:6px 12px; font-size:12px; border-radius:7px; }
.btn-bad:hover:not(:disabled){ background:var(--rose); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 12px; font-size:11.5px; border-radius:7px; }
.btn-icono{
  width:30px;height:30px;padding:0;border-radius:7px; font-size:13px;
  background:transparent; border:1px solid var(--border2); color:var(--text2);
}
.btn-icono:hover{ color:var(--text); border-color:var(--border3); background:var(--bg3); }
.btn-icono.peligro:hover{ color:var(--rose); border-color:rgba(244,63,94,.4); }

.btn-grupo{ display:flex; gap:.45rem; flex-wrap:wrap; }

/* ── Formularios ── */
.form-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.campo{ display:flex; flex-direction:column; gap:.35rem; }
.campo.ancho-total{ grid-column:1 / -1; }
label{ font-size:12px; font-weight:500; color:var(--text2); }
label .req{ color:var(--rose); }

input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=tel],input[type=search],select,textarea{
  width:100%; padding:10px 12px; font-size:13.5px; font-family:var(--font);
  color:var(--text); background:var(--bg3);
  border:1px solid var(--border2); border-radius:9px;
  transition:border-color var(--transicion),box-shadow var(--transicion),background var(--transicion);
}
input::placeholder,textarea::placeholder{ color:var(--text3); }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(99,102,241,.15); background:var(--bg4);
}
input.error,select.error,textarea.error{ border-color:var(--rose); }
input:disabled,select:disabled,textarea:disabled{ opacity:.55; cursor:not-allowed; }
textarea{ resize:vertical; min-height:96px; line-height:1.6; }
select{
  appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237f84a0' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
select option{ background:var(--bg3); color:var(--text); }

.ayuda{ font-size:11px; color:var(--text3); line-height:1.55; }
.msj-error{ font-size:11.5px; color:var(--rose); }

.check{ display:flex; align-items:flex-start; gap:.55rem; cursor:pointer; font-size:12.5px; color:var(--text2); }
.check input[type=checkbox],.check input[type=radio]{
  width:16px;height:16px;margin-top:2px;flex-shrink:0;cursor:pointer;accent-color:var(--indigo);
}

.password-wrap{ position:relative; }
.password-wrap input{ padding-right:44px; }
.ver-pass{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text3); cursor:pointer;
  font-size:14px; padding:6px 8px; border-radius:6px; line-height:1;
}
.ver-pass:hover{ color:var(--text2); background:var(--bg4); }

.form-acciones{
  display:flex; gap:.6rem; flex-wrap:wrap;
  margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--border);
}
.form-acciones .derecha{ margin-left:auto; display:flex; gap:.6rem; }

fieldset{ border:1px solid var(--border); border-radius:var(--r); padding:1.2rem; margin-bottom:1.2rem; }
legend{ font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text3); padding:0 .5rem; }

/* ── Filtros ── */
.filtros{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:.9rem 1rem; margin-bottom:1.2rem;
}
.filtros .campo{ min-width:150px; flex:1 1 150px; }
.filtros .campo.busqueda{ flex:2 1 240px; }

/* ── Tablas ── */
.tabla-wrap{
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
}
.tabla-scroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
thead th{
  text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text3);
  padding:.75rem 1rem; background:var(--bg3); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
tbody td{ padding:.8rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background var(--transicion); }
tbody tr:hover{ background:rgba(255,255,255,.018); }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }
td.acciones{ text-align:right; white-space:nowrap; }
td.acciones .btn-grupo{ justify-content:flex-end; }
.tabla-pie{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.8rem 1rem; border-top:1px solid var(--border);
  font-size:12px; color:var(--text2); background:var(--bg2);
}

.celda-usuario{ display:flex; align-items:center; gap:.6rem; }
.celda-usuario .datos{ min-width:0; }
.celda-usuario .nombre{ font-weight:500; color:var(--text); font-size:13px; }
.celda-usuario .sub{ font-size:11px; color:var(--text3); }

.mono{ font-family:var(--mono); font-size:12px; }
.txt2{ color:var(--text2); }
.txt3{ color:var(--text3); }
.mini{ font-size:11.5px; }
.negrita{ font-weight:600; }
.centro{ text-align:center; }
.derecha{ text-align:right; }
.nowrap{ white-space:nowrap; }

/* ── Paginación ── */
.paginacion{ display:flex; gap:.3rem; margin-left:auto; flex-wrap:wrap; }
.paginacion a,.paginacion span{
  min-width:30px; height:30px; padding:0 9px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border2); border-radius:7px;
  font-size:12px; color:var(--text2);
}
.paginacion a:hover{ border-color:var(--border3); color:var(--text); background:var(--bg3); }
.paginacion .activa{ background:var(--indigo); border-color:var(--indigo); color:#fff; font-weight:600; }
.paginacion .inerte{ opacity:.35; }

/* ── Alertas y flash ── */
.flash-zona{ position:fixed; top:calc(var(--topbar) + 12px); right:1.2rem; z-index:400;
  display:flex; flex-direction:column; gap:.5rem; max-width:min(400px,calc(100vw - 2.4rem)); }
.alerta{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.85rem 1rem; border-radius:var(--r); font-size:12.5px; line-height:1.6;
  border:1px solid var(--border2); background:var(--bg3); color:var(--text);
  box-shadow:var(--sombra); animation:subir .28s cubic-bezier(.16,1,.3,1) both;
}
.alerta .icono{ flex-shrink:0; font-size:14px; line-height:1.3; }
.alerta.exito{ border-color:rgba(16,185,129,.3); background:linear-gradient(var(--emerald-bg),var(--emerald-bg)),var(--bg3); }
.alerta.exito .icono{ color:var(--emerald); }
.alerta.error{ border-color:rgba(244,63,94,.3); background:linear-gradient(var(--rose-bg),var(--rose-bg)),var(--bg3); }
.alerta.error .icono{ color:var(--rose); }
.alerta.aviso{ border-color:rgba(245,158,11,.3); background:linear-gradient(var(--amber-bg),var(--amber-bg)),var(--bg3); }
.alerta.aviso .icono{ color:var(--amber); }
.alerta.info{ border-color:rgba(99,102,241,.3); background:linear-gradient(var(--indigo-bg),var(--indigo-bg)),var(--bg3); }
.alerta.info .icono{ color:var(--indigo2); }
.alerta .cerrar{ margin-left:auto; background:none; border:none; color:var(--text3);
  cursor:pointer; font-size:15px; line-height:1; padding:0 2px; }
.alerta .cerrar:hover{ color:var(--text); }

.alerta.estatica{ position:static; box-shadow:none; margin-bottom:1.1rem; animation:none; }

/* ── Estado vacío ── */
.vacio{ text-align:center; padding:3rem 1.5rem; color:var(--text2); }
.vacio .icono{ font-size:2.2rem; opacity:.35; margin-bottom:.7rem; }
.vacio h3{ font-size:14px; font-weight:600; color:var(--text); margin-bottom:.35rem; }
.vacio p{ font-size:12.5px; max-width:44ch; margin:0 auto 1.1rem; line-height:1.7; }

/* ── Barra de progreso ── */
.progreso{ height:6px; background:var(--bg4); border-radius:4px; overflow:hidden; }
.progreso .barra{ height:100%; border-radius:4px; background:linear-gradient(90deg,var(--indigo),var(--indigo2));
  transition:width .5s cubic-bezier(.16,1,.3,1); }
.progreso .barra.ok{ background:linear-gradient(90deg,var(--emerald),var(--emerald2)); }
.progreso .barra.warn{ background:linear-gradient(90deg,var(--amber),#fbbf24); }
.progreso .barra.bad{ background:linear-gradient(90deg,var(--rose),#fb7185); }

/* ── Lista de datos ── */
.datos-lista{ display:flex; flex-direction:column; gap:.1rem; }
.datos-lista .fila{
  display:flex; gap:1rem; justify-content:space-between; align-items:baseline;
  padding:.55rem 0; border-bottom:1px solid var(--border); font-size:12.5px;
}
.datos-lista .fila:last-child{ border-bottom:none; }
.datos-lista .et{ color:var(--text3); flex-shrink:0; }
.datos-lista .va{ color:var(--text); text-align:right; font-weight:500; }

/* ── Timeline ── */
.timeline{ display:flex; flex-direction:column; gap:0; }
.tl-item{ display:flex; gap:.85rem; padding:.65rem 0; position:relative; }
.tl-item::before{
  content:''; position:absolute; left:9px; top:26px; bottom:-6px;
  width:1px; background:var(--border2);
}
.tl-item:last-child::before{ display:none; }
.tl-punto{
  width:19px;height:19px;flex-shrink:0;border-radius:50%;
  background:var(--bg3); border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center; font-size:9px; z-index:1;
}
.tl-cuerpo{ min-width:0; flex:1; }
.tl-titulo{ font-size:12.5px; color:var(--text); }
.tl-meta{ font-size:11px; color:var(--text3); margin-top:1px; }

/* ── Planes de membresía ── */
.plan{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:1.6rem 1.4rem; position:relative; overflow:hidden; display:flex; flex-direction:column;
  transition:border-color var(--transicion),transform var(--transicion);
}
.plan:hover{ border-color:var(--border2); transform:translateY(-3px); box-shadow:var(--sombra); }
.plan::after{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--indigo); }
.plan.emerald::after{ background:linear-gradient(90deg,var(--emerald),var(--emerald2)); }
.plan.violet::after{ background:linear-gradient(90deg,var(--violet),var(--indigo2)); }
.plan.sky::after{ background:linear-gradient(90deg,var(--sky),var(--indigo2)); }
.plan.amber::after{ background:linear-gradient(90deg,var(--amber),#fbbf24); }
.plan.rose::after{ background:linear-gradient(90deg,var(--rose),#fb7185); }
.plan.indigo::after{ background:linear-gradient(90deg,var(--indigo),var(--indigo2)); }
.plan-nombre{ font-size:1.05rem; font-weight:700; letter-spacing:-.015em; margin:.7rem 0 .2rem; }
.plan-sub{ font-size:12px; color:var(--text2); line-height:1.6; min-height:2.5em; }
.plan-precio{ font-size:2rem; font-weight:700; letter-spacing:-.03em; margin:.9rem 0 .1rem; }
.plan-precio small{ font-size:.75rem; font-weight:500; color:var(--text2); letter-spacing:0; }
.plan-periodo{ font-size:11px; color:var(--text3); margin-bottom:1.1rem; }
.plan-lista{ list-style:none; display:flex; flex-direction:column; gap:.5rem; flex:1;
  padding-top:1rem; border-top:1px solid var(--border); }
.plan-lista li{ display:flex; gap:.5rem; font-size:12.5px; color:var(--text2); line-height:1.55; }
.plan-lista li::before{ content:'✓'; color:var(--emerald); flex-shrink:0; font-weight:700; font-size:11px; }
.plan-pie{ margin-top:1.2rem; }

/* ── Tarjeta de proyecto ── */
.proyecto-card{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
  padding:1.2rem; display:flex; flex-direction:column; gap:.6rem;
  transition:border-color var(--transicion),transform var(--transicion);
}
.proyecto-card:hover{ border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--sombra); }
.proyecto-card .codigo{ font-family:var(--mono); font-size:10.5px; color:var(--text3); letter-spacing:.02em; }
.proyecto-card h3{ font-size:14px; font-weight:600; line-height:1.35; }
.proyecto-card .desc{ font-size:12px; color:var(--text2); line-height:1.6; flex:1; }
.proyecto-card .pie{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding-top:.7rem; border-top:1px solid var(--border); font-size:11px; color:var(--text3); }

/* ── Score ── */
.score{ display:flex; align-items:baseline; gap:.25rem; }
.score .n{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; }
.score .de{ font-size:11px; color:var(--text3); }

/* ── Calendario ── */
.calendario{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-dia-nombre{ font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text3); text-align:center; padding:.4rem 0; }
.cal-celda{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--r3);
  min-height:82px; padding:.4rem; font-size:11px; display:flex; flex-direction:column; gap:3px;
}
.cal-celda.vacia{ background:transparent; border-color:transparent; }
.cal-celda.hoy{ border-color:var(--indigo); background:var(--indigo-bg); }
.cal-num{ font-size:11px; font-weight:600; color:var(--text2); }
.cal-evento{
  font-size:10px; padding:2px 5px; border-radius:4px; line-height:1.35;
  background:var(--amber-bg); color:var(--amber); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal-evento.pagada{ background:var(--emerald-bg); color:var(--emerald); }
.cal-evento.vencida{ background:var(--rose-bg); color:var(--rose); }

/* ── Pestañas ── */
.tabs{ display:flex; gap:.3rem; border-bottom:1px solid var(--border); margin-bottom:1.4rem;
  overflow-x:auto; padding-bottom:1px; }
.tab{
  padding:.6rem 1rem; font-size:12.5px; color:var(--text2); white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--transicion),border-color var(--transicion);
}
.tab:hover{ color:var(--text); }
.tab.activo{ color:var(--indigo2); border-bottom-color:var(--indigo); font-weight:500; }

/* ── Gráfico de barras ── */
.barras{ display:flex; align-items:flex-end; gap:.55rem; height:132px; padding-top:.5rem; }
.barra-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; height:100%; justify-content:flex-end; }
.barra-fig{
  width:100%; border-radius:5px 5px 0 0; min-height:3px;
  background:linear-gradient(180deg,var(--indigo2),var(--indigo));
  transition:height .6s cubic-bezier(.16,1,.3,1);
}
.barra-et{ font-size:10px; color:var(--text3); white-space:nowrap; }
.barra-val{ font-size:10px; color:var(--text2); font-variant-numeric:tabular-nums; }

/* ── WhatsApp flotante ── */
.wa-flotante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:300;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:11px 16px 11px 12px; border-radius:30px;
  background:#25D366; color:#04231a; font-size:13px; font-weight:600;
  box-shadow:0 8px 26px rgba(37,211,102,.34);
  transition:transform .16s,box-shadow .16s;
}
.wa-flotante:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(37,211,102,.45); color:#04231a; }
.wa-flotante svg{ width:20px; height:20px; flex-shrink:0; }
.wa-flotante .texto{ display:inline; }

/* ── Certificado ── */
.certificado{
  max-width:840px; margin:0 auto; background:var(--bg2);
  border:1px solid var(--border2); border-radius:16px; padding:3rem 2.5rem;
  position:relative; overflow:hidden;
}
.certificado::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--indigo),var(--emerald));
}
.cert-sello{
  width:78px;height:78px;margin:0 auto 1.2rem;
  background:linear-gradient(135deg,var(--indigo),var(--emerald));
  border-radius:20px; display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;color:#fff; box-shadow:0 10px 30px rgba(99,102,241,.35);
}
.cert-tipo{ text-align:center; font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--indigo2); }
.cert-titulo{ text-align:center; font-size:1.6rem; font-weight:700; letter-spacing:-.03em;
  margin:.5rem 0 .3rem; line-height:1.2; }
.cert-numero{ text-align:center; font-family:var(--mono); font-size:13px; color:var(--text2); }
.cert-hash{
  font-family:var(--mono); font-size:10.5px; color:var(--text3);
  word-break:break-all; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--r3); padding:.7rem .85rem; line-height:1.6;
}
.cert-firma{ text-align:center; padding-top:1rem; border-top:1px solid var(--border); }

/* ── Etiquetas del marketplace ── */
.tag-mini{
  display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:5px;
  background:var(--bg4); color:var(--text2); border:1px solid var(--border);
  white-space:nowrap;
}

/* ── Hallazgos del motor de análisis ── */
.hallazgo{ display:flex; gap:.85rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.hallazgo:last-child{ border-bottom:none; }

/* ── Utilidades ── */
.flex{ display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.entre{ justify-content:space-between; }
.centrado{ align-items:center; }
.gap{ gap:.6rem; }
.gap-lg{ gap:1.2rem; }
.wrap{ flex-wrap:wrap; }
.crecer{ flex:1; }
.oculto{ display:none !important; }
.hr{ height:1px; background:var(--border); margin:1.2rem 0; border:none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1200px){
  .g5{ grid-template-columns:repeat(3,1fr); }
  .g4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1000px){
  .g3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  :root{ --sidebar:236px; }
  .sidebar{ transform:translateX(-100%); box-shadow:0 0 60px rgba(0,0,0,.6); }
  .sidebar.abierto{ transform:translateX(0); }
  .main{ margin-left:0; }
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; }
  .velo{
    position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:110;
    display:none; animation:aparecer .2s ease both; backdrop-filter:blur(2px);
  }
  .velo.visible{ display:block; }
}
@media (max-width:700px){
  body{ font-size:14.5px; }
  .contenido{ padding:1.1rem 1rem 5rem; }
  .topbar{ padding:0 1rem; }
  .g2,.g3,.g4,.g5{ grid-template-columns:1fr; }
  .metrica-valor{ font-size:1.5rem; }
  .seccion-head h2{ font-size:1.18rem; }
  .seccion-head .acciones{ margin-left:0; width:100%; }
  .seccion-head .acciones .btn{ flex:1; }
  .flash-zona{ left:.8rem; right:.8rem; max-width:none; top:calc(var(--topbar) + 8px); }
  .menu-usuario{ right:.8rem; left:.8rem; min-width:0; }
  .login-card{ padding:2rem 1.4rem; }
  .certificado{ padding:2rem 1.2rem; }
  .wa-flotante .texto{ display:none; }
  .wa-flotante{ padding:13px; border-radius:50%; }
  .filtros{ padding:.8rem; }
  .filtros .campo{ flex-basis:100%; }
  .calendario{ gap:3px; }
  .cal-celda{ min-height:62px; padding:.3rem; }
}
@media (max-width:420px){
  .usuario-chip .nombre-chip{ display:none; }
}

/* ── Impresión ── */
@media print{
  body{ background:#fff; color:#111; }
  body::after,.sidebar,.topbar,.wa-flotante,.flash-zona,.no-print{ display:none !important; }
  .main{ margin-left:0; }
  .contenido,.contenido-limpio{ padding:0; }
  .certificado{ background:#fff; border:1px solid #ccc; box-shadow:none; max-width:100%; }
  .cert-titulo,.cert-numero,.cert-hash,.datos-lista .va{ color:#111; }
  .cert-hash{ background:#f5f5f5; }
  .txt2,.txt3,.datos-lista .et{ color:#555; }
}