/* ============================================================
   TarjasPanel — Tema premium (glassmorphism estilo Apple)
   dark / light · iconos SVG de línea · superficies esmeriladas
   ============================================================ */
:root, [data-theme="dark"]{
  --bg0:#070b16; --bg1:#0e1628; --bg2:#141d33;
  /* Halo que acompaña al acento activo (lo sobreescribe cada paleta) */
  --halo:rgba(120,150,200,.24);
  --bg-grad:
    radial-gradient(900px 540px at 8% -6%, var(--halo) 0%, transparent 60%),
    radial-gradient(1000px 620px at 108% 0%, rgba(99,102,241,.20) 0%, transparent 58%),
    radial-gradient(760px 620px at 88% 108%, rgba(56,189,248,.12) 0%, transparent 60%),
    linear-gradient(165deg,#0c1324 0%, #090e1c 48%, #070a14 100%);
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.085);
  --glass-brd:rgba(255,255,255,.10);
  --glass-brd-2:rgba(255,255,255,.16);
  --text:#f3f6fc; --text2:#b4c0d4; --text3:#7c8aa3;
  --accent:#9db4d6; --accent2:#6f86ad; --accent-ink:#ffffff;
  --av-ink:#fff;
  --accent-grad:linear-gradient(135deg,#7f93b5,#4a5a78);
  --accent-bg:rgba(120,145,183,.20);
  --ring:rgba(120,145,183,.38);
  --ok:#34d399; --ok-bg:rgba(52,211,153,.14);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.14);
  --danger:#fb7185; --danger-bg:rgba(251,113,133,.14);
  --info:#7ca9fb; --info-bg:rgba(124,169,251,.14);
  --shadow:0 24px 60px -14px rgba(0,0,0,.65);
  --shadow-sm:0 12px 32px -10px rgba(0,0,0,.55);
  --glass-hi:rgba(255,255,255,.10);
  --ring:rgba(247,167,74,.35);
  --topbar-bg:rgba(9,14,28,.30);
}
[data-theme="light"]{
  --bg0:#e4e8f0; --bg1:#eef1f7; --bg2:#ffffff;
  --halo:rgba(120,145,183,.20);
  --bg-grad:
    radial-gradient(900px 520px at 6% -8%, var(--halo) 0%, transparent 58%),
    radial-gradient(1000px 600px at 110% 0%, rgba(99,110,150,.12) 0%, transparent 56%),
    linear-gradient(165deg,#e7ebf3 0%, #dde3ee 55%, #d3dbe8 100%);
  /* Tarjetas blancas nítidas que resaltan sobre el lienzo gris-azulado */
  --glass:rgba(255,255,255,.90);
  --glass-2:rgba(255,255,255,.98);
  --glass-brd:rgba(28,40,66,.10);
  --glass-brd-2:rgba(28,40,66,.16);
  --text:#121a2e; --text2:#46536e; --text3:#71809a;
  --accent:#c2690e; --accent2:#f28c28; --accent-ink:#2a1a06;
  --accent-grad:linear-gradient(135deg,#f9b65f,#f28c28);
  --ok:#059669; --ok-bg:rgba(5,150,105,.12);
  --warn:#b45309; --warn-bg:rgba(217,119,6,.12);
  --danger:#e11d48; --danger-bg:rgba(225,29,72,.10);
  --info:#2563eb; --info-bg:rgba(37,99,235,.10);
  --shadow:0 20px 44px -14px rgba(30,44,80,.22);
  --shadow-sm:0 6px 20px -6px rgba(30,44,80,.16);
  --glass-hi:rgba(255,255,255,.9);
  --ring:rgba(242,140,40,.30);
  --topbar-bg:rgba(231,235,243,.55);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:"Inter",-apple-system,"SF Pro Display","Segoe UI",sans-serif;
     -webkit-font-smoothing:antialiased;letter-spacing:-.01em;
     background:var(--bg-grad) var(--bg0) fixed;color:var(--text);
     display:flex;height:100vh;overflow:hidden;position:relative;}
/* Grano sutil para quitar la planitud del degradado (acabado premium) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.side, .main{position:relative;z-index:1;}
svg{width:1em;height:1em;display:block;}
.ico svg{width:19px;height:19px;}
/* Icono en línea con texto (mismo renglón, centrado verticalmente) */
.ico-inline{display:inline-flex;align-items:center;vertical-align:-3px;}
.ico-inline svg{width:15px;height:15px;}

/* ---------- Sidebar (glass) ---------- */
.side{width:252px;flex-shrink:0;display:flex;flex-direction:column;
      height:100vh;padding:14px;}
.side-inner{background:var(--glass);backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--glass-brd);border-radius:22px;flex:1;display:flex;
  flex-direction:column;box-shadow:var(--shadow-sm);overflow:hidden;}
.brand{padding:20px 20px 16px;display:flex;align-items:center;gap:12px;
       border-bottom:1px solid var(--glass-brd);position:relative;
       background:linear-gradient(170deg, var(--glass-2) 0%, transparent 85%);}
.brand::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--glass-hi), transparent);pointer-events:none;}
/* Marca con logo personalizado solo: ocupa toda el área del header */
.brand.brand-logo{justify-content:center;padding:16px 18px;}
.brand.brand-logo img{width:100%;max-height:90px;height:auto;
   object-fit:contain;display:block;}
/* Logo junto al nombre/subtítulo (convivencia logo + texto).
   Contenedor compacto que asienta el logo a su proporción; fondo claro suave
   para que logos con cualquier fondo (PNG transparente o JPG) se vean limpios. */
.brand .brand-logo-wrap{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
   height:42px;padding:5px 8px;border-radius:11px;
   background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);}
.brand .brand-logo-wrap img{height:100%;width:auto;max-width:96px;object-fit:contain;display:block;}
.brand .logo{width:40px;height:40px;border-radius:12px;background:var(--accent-grad);
   display:flex;align-items:center;justify-content:center;color:var(--accent-ink);
   font-weight:800;font-size:15px;position:relative;
   box-shadow:0 8px 20px -5px var(--accent2), inset 0 1px 0 rgba(255,255,255,.35);}
.brand .logo::after{content:"";position:absolute;inset:0;border-radius:inherit;
   background:linear-gradient(160deg, rgba(255,255,255,.28), transparent 55%);pointer-events:none;}
.brand .t{font-weight:700;font-size:15px;}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--text3);}
.nav{padding:12px 10px;flex:1;overflow-y:auto;}
.nav .sec{font-size:10px;color:var(--text3);text-transform:uppercase;
          letter-spacing:1.4px;padding:14px 12px 7px;font-weight:600;}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--text2);
       text-decoration:none;font-size:13.5px;font-weight:500;border-radius:12px;
       margin-bottom:2px;transition:all .15s;}
.nav a .ico{color:var(--text3);display:flex;}
.nav a{position:relative;}
.nav a:hover:not(.on){background:var(--glass-2);color:var(--text);}
.nav a.on{background:var(--accent-bg);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--glass-brd-2);}
.nav a.on .ico{color:var(--accent2);}
/* Indicador de píldora a la izquierda del ítem activo */
.nav a.on::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:0 999px 999px 0;
  background:var(--accent-grad);box-shadow:0 0 12px -1px var(--accent2);}
.uwrap{padding:10px;border-top:1px solid var(--glass-brd);}
.user{display:flex;align-items:center;gap:11px;padding:9px;border-radius:13px;}
.user .av{width:38px;height:38px;border-radius:50%;background:var(--accent-grad);
   color:var(--av-ink);display:flex;align-items:center;justify-content:center;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px -4px var(--accent2);
   font-weight:700;flex-shrink:0;}
.user b{font-size:13px;}
.user .role{font-size:11px;color:var(--text3);}

/* ---------- Main ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;
      height:100vh;overflow-y:auto;}
.topbar{padding:18px 30px 16px;display:flex;justify-content:space-between;
        align-items:center;position:sticky;top:0;z-index:20;}
/* Solo blur, sin color de fondo: al tope (fondo liso) es invisible; al hacer
   scroll difumina el contenido que pasa por detrás. El desvanecido inferior
   evita un corte duro del blur. Sin banda ni caja. */
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-24px;z-index:-1;
        pointer-events:none;
        -webkit-backdrop-filter:blur(16px);
        backdrop-filter:blur(16px);
        -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
        mask-image:linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);}
.topbar h1{font-size:21px;font-weight:700;letter-spacing:-.02em;}
.topbar h1 small{display:block;font-size:12.5px;color:var(--text3);font-weight:400;
                 margin-top:3px;letter-spacing:0;}
/* Encabezado de página con icono de acento */
.pagehead{display:flex;align-items:center;gap:14px;}
.pagehead .ph-ico{width:42px;height:42px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-bg);color:var(--accent2);border:1px solid var(--glass-brd-2);}
.pagehead .ph-ico svg{width:21px;height:21px;}
.actions{display:flex;align-items:center;gap:10px;}
.content{padding:28px 30px 34px;}

/* ---------- Botones ---------- */
.btn{background:var(--accent-grad);color:var(--accent-ink);padding:11px 17px;
     border-radius:12px;font-size:13.5px;font-weight:600;border:none;cursor:pointer;
     display:inline-flex;align-items:center;gap:8px;text-decoration:none;
     box-shadow:0 8px 20px -8px var(--accent2);transition:transform .12s;}
.btn:hover{transform:translateY(-1px);}
.btn .ico svg{width:16px;height:16px;}
.btn.glass{background:var(--glass-2);color:var(--text);border:1px solid var(--glass-brd-2);
           box-shadow:none;backdrop-filter:blur(10px);}
.btn.danger{background:var(--danger-bg);color:var(--danger);
            border:1px solid var(--danger);box-shadow:none;}
.btn.sm{padding:8px 13px;font-size:12.5px;}
.iconbtn{width:40px;height:40px;border-radius:12px;background:var(--glass);
  border:1px solid var(--glass-brd);color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);}
.iconbtn:hover{color:var(--text);background:var(--glass-2);}
.iconbtn svg{width:18px;height:18px;}

/* ---------- Glass cards / paneles ---------- */
.panel{position:relative;
  background:
    linear-gradient(170deg, var(--glass-2) 0%, var(--glass) 42%),
    var(--glass);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-brd);border-radius:20px;
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  overflow:hidden;}
/* Borde superior iluminado: línea de luz reflejada, da sensación de vidrio */
.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg, transparent, var(--glass-hi), transparent);
  pointer-events:none;}
.panel .ph{padding:16px 22px;border-bottom:1px solid var(--glass-brd);
  font-weight:600;font-size:14.5px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;}
/* Título del panel: mayúsculas pequeñas con tracking, para distinguirlo
   claramente del contenido. Solo el primer elemento (el título), no la
   info/acciones a la derecha. */
.panel .ph > :first-child{font-size:11.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--text2);}
.panel .pb{padding:20px 22px;}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.kpi{background:
    linear-gradient(170deg, var(--glass-2) 0%, var(--glass) 46%),
    var(--glass);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-brd);border-radius:18px;padding:18px 20px;
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  position:relative;overflow:hidden;transition:transform .15s, box-shadow .15s;}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg, transparent, var(--glass-hi), transparent);pointer-events:none;z-index:2;}
/* Halo de acento en la esquina: da vida y profundidad al KPI */
.kpi::after{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle, var(--halo) 0%, transparent 70%);opacity:.9;pointer-events:none;}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi);}
.kpi .ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;margin-bottom:13px;border:1px solid var(--glass-brd);position:relative;z-index:1;}
.kpi .ic svg{width:20px;height:20px;}
.kpi .n{font-size:27px;font-weight:800;letter-spacing:-.03em;position:relative;z-index:1;}
.kpi .l{font-size:12px;color:var(--text3);margin-top:3px;position:relative;z-index:1;}

/* ---------- Tablas ---------- */
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;padding:13px 20px;font-size:10.5px;color:var(--text3);
  text-transform:uppercase;letter-spacing:.6px;font-weight:600;
  border-bottom:1px solid var(--glass-brd);}
tbody td{padding:14px 20px;border-bottom:1px solid var(--glass-brd);font-size:13.5px;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--glass);}

/* ---------- Badges / chips ---------- */
.badge{padding:4px 11px;border-radius:999px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;}
.badge .dotb{width:6px;height:6px;border-radius:50%;background:currentColor;}
.b-ok{background:var(--ok-bg);color:var(--ok);}
.b-warn{background:var(--warn-bg);color:var(--warn);}
.b-danger{background:var(--danger-bg);color:var(--danger);}
.b-info{background:var(--info-bg);color:var(--info);}
.b-muted{background:var(--glass-2);color:var(--text3);}
.chip{padding:4px 11px;border-radius:999px;font-size:11px;font-weight:600;
  white-space:nowrap;}
.chip.owner{background:rgba(168,85,247,.16);color:#c084fc;}
.chip.admin{background:var(--danger-bg);color:var(--danger);}
.chip.rw, .chip.oper{background:var(--info-bg);color:var(--info);}
.chip.ro, .chip.consulta{background:var(--ok-bg);color:var(--ok);}

/* ---------- Utilidades ---------- */
.muted{color:var(--text3);}
.row{display:flex;gap:16px;}
.col{flex:1;min-width:0;}
.mt{margin-top:18px;}
.listrow{display:flex;justify-content:space-between;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--glass-brd);font-size:13.5px;}
.listrow:last-child{border-bottom:none;}
.toggle{width:42px;height:24px;background:var(--accent-grad);border-radius:999px;
  position:relative;display:inline-block;cursor:pointer;box-shadow:0 4px 10px -4px var(--accent2);}
.toggle:after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;
  background:#fff;border-radius:50%;}
.toggle.off{background:var(--glass-2);border:1px solid var(--glass-brd-2);box-shadow:none;}
.toggle.off:after{left:3px;right:auto;background:var(--text3);}
/* Toggle real estilizado (checkbox): el input oculto controla el estado */
.switch{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .sl{position:absolute;inset:0;background:var(--glass-2);border:1px solid var(--glass-brd-2);
  border-radius:999px;transition:.2s;}
.switch .sl:before{content:"";position:absolute;left:3px;top:2px;width:18px;height:18px;
  background:var(--text3);border-radius:50%;transition:.2s;}
.switch input:checked + .sl{background:var(--accent-grad);border-color:transparent;}
.switch input:checked + .sl:before{transform:translateX(18px);background:#fff;}
.switch.locked{opacity:.45;pointer-events:none;}
.progress{height:10px;background:var(--glass-2);border-radius:999px;overflow:hidden;
  border:1px solid var(--glass-brd);}
.progress > i{display:block;height:100%;background:var(--accent-grad);border-radius:999px;}
select,input{font-family:inherit;}

/* ---------- Paletas de acento (customizables por usuario) ----------
   Solo cambian el color de acento; combinan con dark y light porque los
   fondos/superficies no dependen del acento. */
/* Grafito acero — gris con matiz azulado (DEFAULT). Sobrio y premium pero con
   vida: en dark luce luminoso y frío; en light se profundiza para tener punch. */
[data-accent="grafito"]{
  --accent:#9db4d6;--accent2:#6f86ad;--accent-ink:#ffffff;
  --accent-grad:linear-gradient(135deg,#7f93b5,#4a5a78);
  --accent-bg:rgba(120,145,183,.20);--ring:rgba(120,145,183,.38);
  --halo:rgba(120,150,200,.24);}
/* Ámbar dorado — cálido y sofisticado (gradiente ámbar → dorado) */
[data-accent="naranja"]{
  --accent:#f0b64d;--accent2:#e0922b;--accent-ink:#1c1304;
  --accent-grad:linear-gradient(135deg,#f6c96a,#d9831f);
  --accent-bg:rgba(224,146,43,.15);--ring:rgba(224,146,43,.32);
  --halo:rgba(224,146,43,.20);}
/* Índigo — profundo tipo Linear (índigo → azul real) */
[data-accent="azul"]{
  --accent:#7c93ff;--accent2:#5468e8;--accent-ink:#0b0e24;
  --accent-grad:linear-gradient(135deg,#8ea2ff,#4f5fe0);
  --accent-bg:rgba(84,104,232,.16);--ring:rgba(84,104,232,.34);
  --halo:rgba(99,120,240,.22);}
/* Teal jade — verde azulado elegante, menos saturado */
[data-accent="esmeralda"]{
  --accent:#4cc6b0;--accent2:#17a594;--accent-ink:#03140f;
  --accent-grad:linear-gradient(135deg,#5fd4bd,#0f9183);
  --accent-bg:rgba(23,165,148,.15);--ring:rgba(23,165,148,.32);
  --halo:rgba(23,165,148,.20);}
/* Violeta real — profundo (violeta → púrpura, no lavanda claro) */
[data-accent="violeta"]{
  --accent:#a68bf5;--accent2:#7c5ce0;--accent-ink:#150a2b;
  --accent-grad:linear-gradient(135deg,#b49cf7,#6d49d6);
  --accent-bg:rgba(124,92,224,.16);--ring:rgba(124,92,224,.34);
  --halo:rgba(140,110,235,.22);}
/* Carmesí — rosa oscuro refinado (coral → carmesí) */
[data-accent="rosa"]{
  --accent:#f27a92;--accent2:#e0455f;--accent-ink:#2a0810;
  --accent-grad:linear-gradient(135deg,#f58aa0,#d63252);
  --accent-bg:rgba(224,69,95,.15);--ring:rgba(224,69,95,.32);
  --halo:rgba(224,69,95,.20);}
/* En light, el texto del acento se oscurece un poco para contraste */
[data-theme="light"][data-accent="grafito"]{
  --accent:#44536f;--accent2:#3a4a66;
  --accent-grad:linear-gradient(135deg,#5a6c8c,#36465f);
  --accent-bg:rgba(58,74,102,.14);--ring:rgba(58,74,102,.30);
  --halo:rgba(58,74,102,.14);}
[data-theme="light"][data-accent="naranja"]{--accent:#b06f12;}
[data-theme="light"][data-accent="azul"]{--accent:#4453c9;}
[data-theme="light"][data-accent="esmeralda"]{--accent:#0c7d70;}
[data-theme="light"][data-accent="violeta"]{--accent:#6341c4;}
[data-theme="light"][data-accent="rosa"]{--accent:#c23050;}

/* ---------- Badge "Pronto" para menús de fases futuras ---------- */
.nav a .soon{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;padding:2px 7px;border-radius:7px;
  background:var(--glass-2);color:var(--text3);border:1px solid var(--glass-brd);}
.nav a.on .soon{color:var(--accent2);}

/* ---- Avisos flash (status/error) ---- */
.flash{display:block;margin:0 0 16px;padding:11px 15px;border-radius:12px;
  font-size:13px;line-height:1.5;border:1px solid transparent;}
.flash-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok);}
.flash-err{background:var(--danger-bg);color:var(--danger);border-color:var(--danger);}