:root{
  --primary:#3F726D;
  --dark:#2C534F;
  --soft:#DCEAE6;
  --ink:#2A2622;
  --bg:#FBF7F1;
  --card:#ffffff;
  --border:#E4DCCF;
  --accent:#C97B4A;
  --danger:#B4453B;
  /* Tokens de texto sobre tarjeta: cambian de valor segun el tema para
     garantizar contraste (ver bloques dark mas abajo). NUNCA usar --dark o
     --primary directamente sobre una tarjeta: usar estos en su lugar. */
  --texto-numero: var(--dark);
  --texto-label: var(--primary);
  --sombra-carta: 0 2px 0 rgba(255,255,255,.5) inset, 0 10px 24px -6px rgba(44,83,79,.35), 0 1px 2px rgba(0,0,0,.06);
  --sombra-carta-suave: 0 2px 0 rgba(255,255,255,.5) inset, 0 14px 30px -10px rgba(0,0,0,.3);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#161E1C; --card:#1F2B27; --ink:#F1ECE3; --soft:#2A3835; --border:#324540;
    --texto-numero:#8FD9C9; --texto-label:#9FC7BE;
    --sombra-carta: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px -6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.3);
    --sombra-carta-suave: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 34px -10px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#161E1C; --card:#1F2B27; --ink:#F1ECE3; --soft:#2A3835; --border:#324540;
  --texto-numero:#8FD9C9; --texto-label:#9FC7BE;
  --sombra-carta: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px -6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.3);
  --sombra-carta-suave: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 34px -10px rgba(0,0,0,.6);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  min-height: 100vh;
}

h1, h2, h3, .wordmark{ font-family: 'Fraunces', serif; }

a{ color: var(--primary); }

.logo{
  width: 34px; height: 34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 9px;
  background:#fff; color: var(--dark);
  position: relative; flex:0 0 auto;
}
.logo svg{ display:block; }
.logo.on-dark{ background: var(--dark); color:#fff; }
.logo.on-dark::after{ border-color:#fff; }

/* ---------- Login (foto al costado + panel de vidrio) ---------- */
.login-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 24px 16px;
}
.login-frame{
  width:100%; max-width:900px;
  border-radius:20px; overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  border:1px solid var(--soft);
  display:flex; min-height:560px;
}

/* Lado del formulario: solo degradado oscuro, sin foto de fondo,
   para que el panel de vidrio "flote" sin mostrar el edificio detras */
.login-form-side{
  flex:0.95; position:relative; display:flex; align-items:center; justify-content:center; padding:30px;
  background: linear-gradient(160deg, rgba(22,30,28,.94), rgba(44,83,79,.9));
}

.login-form{
  position:relative; z-index:1; width:100%; max-width:360px; padding:40px 34px; border-radius:18px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 20px 40px -12px rgba(0,0,0,.45);
}
.login-form .brandrow{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.login-form .brandrow span{ font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; color:#fff; }
.login-form h2{ font-size:1.55rem; margin:0 0 4px; color:#fff; }
.login-form .login-sub{ font-size:.85rem; margin:0 0 22px; color:#BFE0D8; }
.login-form label{ font-size:.72rem; color:#BFE0D8; font-weight:800; letter-spacing:.04em; text-transform:uppercase; display:block; }
.login-form input{
  width:100%; padding:12px 14px; margin:6px 0 16px; border-radius:10px;
  border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color:#fff;
  font-family:'Manrope',sans-serif; font-size:.9rem;
}
.login-form input::placeholder{ color:rgba(255,255,255,.55); }
.login-form input:focus{ outline:none; border-color: rgba(255,255,255,.5); }
.btn-primary{
  width:100%; padding:12px; border:none; border-radius:10px;
  background: linear-gradient(180deg,#4A8A83,var(--primary)); color:#fff; font-weight:800;
  font-family:'Manrope',sans-serif; font-size:.95rem; cursor:pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 16px -4px rgba(44,83,79,.5);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary:hover{
  background: linear-gradient(180deg,#3F726D,var(--dark));
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 14px 26px -6px rgba(44,83,79,.6);
}
.btn-primary:active{ transform: translateY(0) scale(.98); }
.login-form .link{ display:block; text-align:center; margin-top:16px; font-size:.85rem; color:#F0C49B; cursor:pointer; text-decoration:underline; background:none; border:none; }
.error-msg{
  background:rgba(251,234,232,.15); color:#FBD9D4; border:1px solid rgba(233,199,194,.4);
  padding:10px 12px; border-radius:8px; font-size:.82rem; margin-bottom:14px; display:none;
}
.info-msg{
  background: rgba(255,255,255,.1); color:#EAF3F0; border:1px solid rgba(255,255,255,.25);
  padding:10px 12px; border-radius:8px; font-size:.82rem; margin-bottom:14px; display:none;
}

.login-photo{ flex:1.05; position:relative; overflow:hidden; }
.login-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.login-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 70%, rgba(22,30,28,.25) 100%); }

@media (max-width:700px){
  .login-frame{ flex-direction:column-reverse; min-height:0; }
  .login-photo{ height:200px; }
  .login-form-side{ padding: 28px 20px; }
}

/* ---------- Panel ---------- */
.panel-wrap{ min-height:100vh; display:flex; }
.panel-nav{
  width:210px; flex:0 0 auto;
  background: linear-gradient(160deg, var(--dark) 0%, var(--primary) 100%);
  padding: 24px 16px; display:flex; flex-direction:column; gap:4px;
  position: sticky; top:0; height:100vh;
}
.panel-nav .brand{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.panel-nav .brand span{ color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; }
.panel-nav a{
  padding:10px 12px; border-radius:8px; font-size:.82rem; font-weight:700;
  color:#fff; opacity:.72; text-decoration:none; display:flex; align-items:center; gap:9px;
}
.panel-nav a i{ font-size:1.05rem; flex:0 0 auto; }
.panel-nav a.active, .panel-nav a:hover{ background: rgba(255,255,255,.2); opacity:1; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset; }
.mod-card{ position:relative; }
.mod-card i{ font-size:1.4rem; color:#fff; opacity:.9; display:block; margin-bottom:8px; }
.panel-nav .logout{
  margin-top:auto; background:none; border:1px solid rgba(255,255,255,.35);
  color:#fff; opacity:.85; padding:9px 12px; border-radius:8px; font-size:.78rem;
  font-weight:700; cursor:pointer; font-family:'Manrope',sans-serif;
}

.panel-main{ flex:1; padding: 32px 36px; max-width: 1100px; }
.panel-main h1{ font-size:1.5rem; margin:0 0 2px; }
.panel-sub{ font-size:.85rem; color: var(--primary); margin:0 0 24px; }

/* ===== Selector de edificio ===== */
.sel-edificio-wrap{ position:relative; display:inline-block; margin-bottom:18px; }
.sel-edificio{
  display:flex; align-items:center; gap:10px; background: var(--card);
  border:1px solid var(--border); border-radius:12px; padding:8px 14px 8px 8px;
  box-shadow: var(--sombra-carta-suave); cursor:pointer; font-family:'Manrope',sans-serif;
}
.sel-edificio[data-estatico="1"]{ cursor:default; }
.sel-edificio-ico{
  width:30px; height:30px; border-radius:8px; background: var(--soft); color: var(--texto-numero);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:1rem;
}
.sel-edificio-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.sel-edificio-etq{ font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color: var(--texto-label); font-weight:800; }
.sel-edificio-nom{ font-size:.86rem; font-weight:800; color: var(--ink); }
.sel-edificio-chev{ color: var(--texto-label); font-size:.85rem; transition: transform .15s ease; }
.sel-edificio[aria-expanded="true"] .sel-edificio-chev{ transform: rotate(180deg); }
.sel-edificio:hover{ border-color: var(--primary); }

.sel-edificio-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:250px; z-index:20;
  background: var(--card); border:1px solid var(--border); border-radius:13px;
  box-shadow:0 20px 44px -12px rgba(0,0,0,.3); padding:8px;
}
.sel-edificio-menu-tit{ font-size:.65rem; letter-spacing:.04em; text-transform:uppercase; color: var(--texto-label); font-weight:800; padding:8px 10px 6px; }
.sel-edificio-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; color: var(--ink); }
.sel-edificio-item:hover{ background: var(--soft); }
.sel-edificio-item.activo{ background: var(--soft); font-weight:800; }
.sel-edificio-punto{ width:7px; height:7px; border-radius:50%; background: var(--border); flex:0 0 auto; }
.sel-edificio-item.activo .sel-edificio-punto{ background: var(--primary); }
.sel-edificio-item-nom{ font-size:.85rem; flex:1; }
.sel-edificio-chk{ color: var(--primary); font-size:.9rem; }

/* ===== Campanita de notificaciones ===== */
.topbar-notif{ display:flex; justify-content:flex-end; margin-bottom:-6px; position:relative; }
.bell-btn{
  position:relative; width:40px; height:40px; border-radius:12px;
  background: var(--card); border:1px solid var(--border); display:flex;
  align-items:center; justify-content:center; cursor:pointer; box-shadow: var(--sombra-carta-suave);
  font-size:1.15rem; color: var(--ink);
}
.bell-badge{
  position:absolute; top:-5px; right:-5px; background: var(--danger); color:#fff;
  font-size:.6rem; font-weight:800; min-width:17px; height:17px; border-radius:20px;
  display:flex; align-items:center; justify-content:center; padding:0 4px; line-height:1;
}
.notif-dropdown{
  position:absolute; top:50px; right:0; width:340px; max-width: calc(100vw - 40px);
  background: var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.3); overflow:hidden; z-index:30;
}
.notif-dropdown.oculto{ display:none; }
.notif-dropdown .cab{
  padding:14px 16px; border-bottom:1px solid var(--border); display:flex;
  justify-content:space-between; align-items:center;
}
.notif-dropdown .cab b{ font-size:.86rem; }
.notif-dropdown .cab span{ font-size:.72rem; color: var(--primary); cursor:pointer; font-weight:700; }
.notif-lista{ max-height:360px; overflow-y:auto; }
.notif-item{
  padding:12px 16px; border-bottom:1px solid var(--border); display:flex; gap:10px;
  cursor:pointer; text-decoration:none; color:inherit;
}
.notif-item:last-child{ border-bottom:none; }
.notif-item.noleida{ background: var(--soft); }
.notif-item:hover{ background: var(--soft); }
.notif-dot{ width:8px; height:8px; border-radius:50%; background: var(--primary); margin-top:5px; flex:0 0 auto; }
.notif-item.leida .notif-dot{ background:transparent; }
.notif-texto b{ font-size:.82rem; display:block; }
.notif-texto p{ margin:2px 0 0; font-size:.76rem; color: var(--texto-label); }
.notif-texto small{ font-size:.68rem; color: var(--texto-label); }
.notif-vacio{ padding:26px 16px; text-align:center; font-size:.82rem; color: var(--texto-label); }

.stats-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:14px; margin-bottom:26px; }
.stat-card{
  background: var(--card);
  border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow: var(--sombra-carta);
}
.stat-card b{ display:block; font-size:1.8rem; font-family:'Fraunces',serif; color: var(--texto-numero); }
.stat-card span{ font-size:.65rem; color: var(--texto-label); text-transform:uppercase; letter-spacing:.03em; font-weight:800; }

.mod-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:14px; }
.mod-card{
  border-radius:16px; padding:18px; color:#fff; text-decoration:none; display:block;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 24px -6px rgba(0,0,0,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mod-card:hover{ transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 18px 30px -6px rgba(0,0,0,.35); }
.mod-card b{ display:block; font-size:.95rem; color:#fff; margin-bottom:3px; }
.mod-card small{ display:block; color:#fff; opacity:.88; font-size:.75rem; font-weight:600; }
.mod-card.c1{ background: linear-gradient(135deg,#3F726D,#2C534F); }
.mod-card.c2{ background: linear-gradient(135deg,#C97B4A,#A85F35); }
.mod-card.c3{ background: linear-gradient(135deg,#4A7A85,#2F5259); }
.mod-card.c4{ background: linear-gradient(135deg,#8A9A5B,#5E6B3D); }
.mod-card.c5{ background: linear-gradient(135deg,#B58A3D,#8C6A2C); }
.mod-card.c6{ background: linear-gradient(135deg,#6E5A8A,#4B3C60); }
.mod-card.c7{ background: linear-gradient(135deg,#5A8A78,#39604F); }
.mod-card.c8{ background: linear-gradient(135deg,#B5553D,#8C3B2C); }

.loading{ text-align:center; padding:40px; color: var(--primary); font-size:.9rem; }

/* ---------- Animaciones de entrada (Modelo 1) ---------- */
@keyframes convive-fade-up{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.stat-card, .mod-card, .table-card, .com-item{ animation: convive-fade-up .45s ease both; }
.stats-row .stat-card:nth-child(2){ animation-delay:.05s; }
.stats-row .stat-card:nth-child(3){ animation-delay:.1s; }
.mod-grid .mod-card:nth-child(2){ animation-delay:.05s; }
.mod-grid .mod-card:nth-child(3){ animation-delay:.1s; }
.mod-grid .mod-card:nth-child(4){ animation-delay:.15s; }
.mod-grid .mod-card:nth-child(5){ animation-delay:.2s; }
.mod-grid .mod-card:nth-child(6){ animation-delay:.25s; }

/* ---------- Tablas (ej: Edificios) ---------- */
.table-card{
  background: var(--card); border:1px solid var(--border); border-radius:16px;
  padding: 6px 18px; box-shadow: var(--sombra-carta-suave); overflow-x:auto;
}
.data-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.data-table th{
  text-align:left; color: var(--texto-label); background: var(--card);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.03em;
  padding:12px 10px; border-bottom:2px solid var(--border); font-weight:800;
}
.data-table td{ padding:12px 10px; border-bottom:1px solid var(--border); color: var(--ink); }
.data-table tr:last-child td{ border-bottom:none; }
.badge-borcam{ background: var(--accent); color:#fff; font-size:.65rem; font-weight:800; padding:3px 9px; border-radius:20px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.badge-propio{ background: var(--soft); color: var(--texto-numero); font-size:.65rem; font-weight:800; padding:3px 9px; border-radius:20px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.btn-add{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:16px; padding:11px 18px; border:none; border-radius:10px;
  background: linear-gradient(180deg,#4A8A83,var(--primary)); color:#fff; font-weight:800; cursor:pointer; font-family:'Manrope',sans-serif;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 16px -4px rgba(44,83,79,.5);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-add:hover{
  background: linear-gradient(180deg,#3F726D,var(--dark));
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 14px 26px -6px rgba(44,83,79,.6);
}
.btn-add:active{ transform: translateY(0) scale(.98); }

@media (max-width: 760px){
  .panel-wrap{ flex-direction:column; }
  .panel-nav{ width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .panel-nav .brand{ margin-bottom:0; margin-right:auto; }
  .panel-nav .logout{ margin-top:0; }
  .panel-main{ padding: 24px 18px; }
}

/* ---- Botón "Cambiar edificio" (reemplaza el desplegable anterior) ---- */
.sel-edificio-wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.sel-edificio-cambiar{
  display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px;
  border:1px solid var(--border); background: var(--card); color: var(--texto-label);
  font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:700; cursor:pointer;
}
.sel-edificio-cambiar:hover{ border-color: var(--primary); color: var(--primary); }
.sel-edificio-cambiar i{ font-size:.95rem; }

/* ---- Pantalla: Elegí tu edificio (post-login) ---- */
.selec-body{ margin:0; font-family:'Manrope',sans-serif; background: var(--bg); color: var(--ink); min-height:100vh; }
.selec-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.selec-card{
  width:100%; max-width:560px; background: var(--card); border-radius:20px; padding:34px 36px 32px;
  box-shadow: var(--sombra-carta-suave);
}
.selec-brandrow{ display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.selec-brandrow span{ font-family:'Fraunces',serif; font-weight:600; font-size:1rem; color: var(--ink); }
.selec-usuario{ margin-left:auto; font-size:.76rem; color: var(--texto-label); }
.selec-intro{ margin-bottom:22px; }
.selec-eyebrow{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color: var(--accent); margin-bottom:10px; }
.selec-intro h1{ font-family:'Fraunces',serif; font-weight:500; font-size:1.7rem; line-height:1.2; margin:0 0 10px; color: var(--ink); }
.selec-intro p{ margin:0; font-size:.86rem; color: var(--texto-label); line-height:1.5; }
.selec-lista{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.selec-fila{
  display:flex; align-items:center; gap:14px; padding:15px 17px; border-radius:13px;
  background: var(--card); border:1px solid var(--border); cursor:pointer; text-align:left; width:100%;
  font-family:'Manrope',sans-serif; transition: border-color .15s ease;
}
.selec-fila:hover{ border-color: var(--primary); }
.selec-fila.activa{ border-color: var(--dark); box-shadow: var(--sombra-carta); }
.selec-fila-ico{ width:38px; height:38px; border-radius:10px; background: var(--soft); color: var(--texto-numero); display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:1.05rem; }
.selec-fila.activa .selec-fila-ico{ background: var(--dark); color:#fff; }
.selec-fila-info{ flex:1; min-width:0; }
.selec-fila-nom{ font-weight:700; font-size:.92rem; color: var(--ink); }
.selec-fila-dir{ font-size:.75rem; color: var(--texto-label); margin-top:2px; }
.selec-fila-chk{ color: var(--dark); font-size:1.1rem; flex:0 0 auto; }
.selec-continuar{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; }
.selec-continuar:disabled{ opacity:.5; cursor:default; }
.selec-footer{ margin-top:18px; display:flex; align-items:center; gap:10px; }
.selec-linea{ flex:1; height:1px; background: var(--border); }
.selec-logout{ display:flex; align-items:center; gap:5px; font-size:.76rem; color: var(--texto-label); background:none; border:none; cursor:pointer; white-space:nowrap; }
.selec-logout:hover{ color: var(--primary); }
.selec-vacio{ text-align:center; padding:20px; font-size:.85rem; color: var(--texto-label); }

/* =========================================================================
   Panel Superadmin (interno, solo Federico) — paleta oscura fija a propósito
   para que nunca se confunda con las pantallas de las Administraciones
   clientes. No usa los tokens --texto-numero/--texto-label de arriba: este
   bloque define sus propios colores sobre fondo oscuro, siempre.
   ========================================================================= */
.sa-body{ margin:0; font-family:'Manrope',sans-serif; background:#13181B; color:#E9E6DF; min-height:100vh; color-scheme:dark; }
.sa-body input::placeholder{ color:#5C6A6C; }
.sa-body input:focus{ outline:none; border-color:#4F8E86 !important; }

.sa-brandrow{ display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.sa-brandrow span{ font-family:'Fraunces',serif; font-weight:600; font-size:1rem; color:#E9E6DF; }
.sa-tag{ margin-left:6px; padding:3px 8px; border-radius:5px; background:rgba(79,142,134,.18); color:#8FD9C9; font-family:'JetBrains Mono',monospace; font-size:.62rem !important; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }

.sa-input-label{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A9496; margin-bottom:7px; }
.sa-body label{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A9496; margin:14px 0 7px; }
.sa-body label:first-of-type{ margin-top:0; }
.sa-body input[type="text"], .sa-body input[type="password"], .sa-body input[type="email"]{
  width:100%; box-sizing:border-box; padding:12px 14px; border-radius:9px; background:#1B2226;
  border:1px solid #2B3438; color:#E9E6DF; font-family:'Manrope',sans-serif; font-size:.88rem;
}
.sa-btn-primary{
  margin-top:22px; width:100%; padding:13px; border:none; border-radius:9px; background:#E9E6DF; color:#13181B;
  font-weight:700; font-family:'Manrope',sans-serif; font-size:.88rem; cursor:pointer;
}
.sa-btn-primary:hover{ background:#F4F2EC; }
.sa-btn-primary:disabled{ opacity:.6; cursor:default; }
.sa-error{ display:none; background:rgba(197,122,111,.12); border:1px solid #5A3530; color:#E09288; padding:10px 13px; border-radius:9px; font-size:.82rem; margin-bottom:16px; }

/* Login */
.sa-login-bg{ position:fixed; inset:0; background-image:url('/img/superadmin-bg.jpg'); background-size:cover; background-position:65% 50%; z-index:0; }
.sa-login-fade{ position:fixed; inset:0; background:linear-gradient(100deg, #13181B 0%, #13181B 30%, rgba(19,24,27,.86) 48%, rgba(19,24,27,.4) 68%, rgba(19,24,27,.12) 100%); z-index:1; }
.sa-login-wrap{ position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; padding:40px 32px; }
.sa-login-box{ width:100%; max-width:380px; margin-left:4vw; }
.sa-login-box h1{ font-family:'Fraunces',serif; font-weight:500; font-size:1.7rem; line-height:1.25; margin:0 0 8px; color:#F4F2EC; }
.sa-sub{ margin:0 0 30px; font-size:.84rem; color:#8A9496; line-height:1.5; max-width:380px; }
.sa-footer-note{ margin:22px 0 0; font-size:.72rem; color:#5C6A6C; text-align:center; line-height:1.5; }
@media (max-width:720px){ .sa-login-box{ margin-left:0; } }

/* Lista de administraciones */
.sa-topbar{ display:flex; align-items:center; gap:14px; padding:22px 40px; border-bottom:1px solid #22292C; flex-wrap:wrap; }
.sa-topbar-user{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.sa-salir{ display:flex; align-items:center; gap:6px; background:none; border:none; color:#8A9496; font-size:.76rem; cursor:pointer; font-family:'Manrope',sans-serif; }
.sa-salir:hover{ color:#E9E6DF; }
.sa-main{ flex:1; padding:34px 40px 40px; max-width:1040px; width:100%; box-sizing:border-box; margin:0 auto; }
.sa-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.sa-eyebrow{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8FD9C9; margin-bottom:8px; }
.sa-head-row h1{ font-family:'Fraunces',serif; font-weight:500; font-size:1.6rem; margin:0; color:#F4F2EC; }
.sa-btn-nueva{ display:flex; align-items:center; gap:8px; padding:12px 18px; border:none; border-radius:10px; background:#E9E6DF; color:#13181B; font-weight:700; font-family:'Manrope',sans-serif; font-size:.84rem; cursor:pointer; }
.sa-btn-nueva:hover{ background:#F4F2EC; }
.sa-resumen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:28px; }
.sa-resumen-card{ background:#1B2226; border:1px solid #22292C; border-radius:13px; padding:16px 18px; }
.sa-resumen-card b{ display:block; font-size:1.6rem; font-family:'Fraunces',serif; font-variant-numeric:tabular-nums; }
.sa-resumen-card span{ font-size:.64rem; color:#8A9496; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.sa-tabla{ background:#1B2226; border:1px solid #22292C; border-radius:14px; overflow:hidden; }
.sa-tabla-head{ display:grid; grid-template-columns:2.1fr 1fr 1fr .9fr 1.3fr; gap:12px; padding:13px 20px; font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8A9496; border-bottom:1px solid #22292C; }
.sa-fila{ display:grid; grid-template-columns:2.1fr 1fr 1fr .9fr 1.3fr; gap:12px; align-items:center; padding:15px 20px; border-bottom:1px solid #22292C; border-left:2px solid transparent; transition:border-color .15s ease, background .15s ease; }
.sa-fila:last-child{ border-bottom:none; }
.sa-fila:hover{ background:#202a2d; }
.sa-fila.pendiente{ border-left-color:#D9A86B; background:rgba(217,168,107,.05); }
.sa-fila.suspendida{ opacity:.6; }
.sa-fila-nombre{ font-weight:700; font-size:.88rem; color:#F4F2EC; }
.sa-fila-email{ font-size:.74rem; color:#8A9496; margin-top:2px; }
.sa-fila-origen{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:#8A9496; width:fit-content; }
.sa-estado{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; }
.sa-estado .punto{ width:6px; height:6px; border-radius:50%; }
.sa-estado.activa{ color:#7FCB8F; } .sa-estado.activa .punto{ background:#7FCB8F; }
.sa-estado.pendiente{ color:#D9A86B; } .sa-estado.pendiente .punto{ background:#D9A86B; }
.sa-estado.suspendida{ color:#C57A6F; } .sa-estado.suspendida .punto{ background:#C57A6F; }
.sa-fila-acciones{ display:flex; justify-content:flex-end; gap:6px; }
.sa-accion{ padding:7px 12px; border-radius:7px; border:1px solid #2B3438; background:none; color:#8A9496; font-size:.74rem; font-family:'Manrope',sans-serif; cursor:pointer; transition:background .15s ease, color .15s ease; }
.sa-accion:hover{ background:#2B3438; color:#E9E6DF; }
.sa-accion.aprobar{ border-color:#3F6B5E; background:rgba(143,217,201,.08); color:#8FD9C9; font-weight:700; }
.sa-vacio{ padding:40px; text-align:center; color:#8A9496; font-size:.85rem; }

/* Pestañas (Administraciones / Usuarios) */
.sa-tabs{ display:flex; align-items:center; gap:22px; padding:0 40px; border-bottom:1px solid #22292C; }
.sa-tab{ padding:14px 0; font-size:.82rem; font-weight:700; color:#8A9496; text-decoration:none; border-bottom:2px solid transparent; }
.sa-tab:hover{ color:#E9E6DF; }
.sa-tab.active{ color:#E9E6DF; border-bottom-color:#8FD9C9; }

/* Usuarios superadmin */
.sa-usuarios-intro{ margin:0 0 24px; font-size:.82rem; color:#8A9496; line-height:1.55; max-width:560px; }
.sa-fila-usuario{ display:grid; grid-template-columns:1.6fr 1fr 1.6fr; gap:12px; align-items:center; padding:15px 20px; border-bottom:1px solid #22292C; transition:background .15s ease; }
.sa-fila-usuario:last-child{ border-bottom:none; }
.sa-fila-usuario:hover{ background:#1B2226; }
.sa-avatar{ width:30px; height:30px; border-radius:50%; background:#2A3835; color:#8FD9C9; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:.78rem; flex:0 0 auto; }
.sa-accion.peligro{ border-color:#5A3530; color:#C57A6F; }
.sa-accion.peligro:hover{ background:rgba(197,122,111,.1); color:#E09288; }

/* Modal (nuevo usuario / cambiar o resetear contraseña) */
.sa-modal-back{ position:fixed; inset:0; background:rgba(10,13,15,.6); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); z-index:50; }
.sa-modal-back[hidden]{ display:none; }
.sa-modal{ width:380px; max-width:calc(100vw - 32px); background:#1B2226; border:1px solid #2B3438; border-radius:16px; padding:26px; box-shadow:0 20px 50px -14px rgba(0,0,0,.6); }
.sa-modal h2{ margin:0 0 6px; font-family:'Fraunces',serif; font-weight:500; font-size:1.2rem; color:#F4F2EC; }
.sa-modal-sub{ margin:0 0 20px; font-size:.78rem; color:#8A9496; line-height:1.5; }
.sa-modal label{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A9496; margin-bottom:7px; }
.sa-modal input{ width:100%; box-sizing:border-box; padding:11px 13px; border-radius:9px; background:#161B1E; border:1px solid #2B3438; color:#E9E6DF; font-family:'Manrope',sans-serif; font-size:.86rem; margin-bottom:14px; }
.sa-modal-hint{ margin:-8px 0 14px; font-size:.73rem; color:#5C6A6C; line-height:1.5; }
.sa-modal-botones{ display:flex; gap:10px; margin-top:8px; }
.sa-modal-botones button{ flex:1; padding:11px; border-radius:9px; font-weight:700; font-family:'Manrope',sans-serif; font-size:.82rem; cursor:pointer; }
.sa-modal-cancelar{ border:1px solid #2B3438; background:none; color:#8A9496; }
.sa-modal-cancelar:hover{ color:#E9E6DF; }
.sa-modal-confirmar{ border:none; background:#E9E6DF; color:#13181B; }
.sa-modal-confirmar:hover{ background:#F4F2EC; }
.sa-modal-confirmar:disabled{ opacity:.6; cursor:default; }
.sa-modal .sa-error{ margin-bottom:14px; }

/* Alta de administracion */
.sa-volver{ display:flex; align-items:center; gap:6px; background:none; border:none; color:#8A9496; font-size:.78rem; cursor:pointer; font-family:'Manrope',sans-serif; }
.sa-volver:hover{ color:#E9E6DF; }
.sa-alta-main{ max-width:620px; width:100%; box-sizing:border-box; margin:0 auto; padding:34px 20px 60px; }
.sa-alta-main > p{ margin:0 0 28px; font-size:.84rem; color:#8A9496; line-height:1.55; max-width:480px; }
.sa-row-2{ display:flex; gap:14px; }
.sa-row-2 > div{ flex:1; }
.sa-divider{ height:1px; background:#22292C; margin:20px 0 14px; }
.sa-key-row{ display:flex; gap:8px; }
.sa-key-row input{ flex:1; font-family:'JetBrains Mono',monospace; font-size:.82rem; }
.sa-btn-validar{ padding:0 16px; border-radius:9px; border:1px solid #2B3438; background:none; color:#8A9496; font-size:.78rem; font-weight:700; font-family:'Manrope',sans-serif; cursor:pointer; white-space:nowrap; }
.sa-btn-validar:hover{ border-color:#4F8E86; color:#8FD9C9; }
.sa-btn-validar:disabled{ opacity:.5; cursor:default; }
.sa-key-hint{ margin:9px 0 0; font-size:.74rem; color:#5C6A6C; line-height:1.5; }
.sa-key-hint code{ font-family:'JetBrains Mono',monospace; color:#8A9496; font-style:normal; }
.sa-validacion{ display:flex; align-items:flex-start; gap:12px; padding:15px 17px; border-radius:11px; margin-top:16px; }
.sa-validacion.ok{ background:rgba(143,217,201,.06); border:1px solid #2F4A43; }
.sa-validacion.error{ background:rgba(197,122,111,.08); border:1px solid #5A3530; }
.sa-validacion p{ margin:0; font-size:.8rem; color:#C9D4D2; line-height:1.55; }
.sa-validacion.error p{ color:#E09288; }
.sa-validacion b{ color:#F4F2EC; }