/* ═══════════════════════════════════════════
   DESIGN SYSTEM — macOS 26 / iOS 26 Liquid Glass
   ═══════════════════════════════════════════ */

/* ─── Tokens ─── */
:root {
  --c-accent:    hsl(211,100%,50%);
  --c-accent2:   hsl(264,80%,62%);
  --c-success:   hsl(142,71%,45%);
  --c-warning:   hsl(36,100%,50%);
  --c-danger:    hsl(4,86%,58%);
  --c-gold:      hsl(43,96%,56%);
  --font:        'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sidebar-w:   272px;
  --sidebar-sm:  68px;
  --topbar-h:    60px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:9999px;
  --spring:      cubic-bezier(0.34,1.56,0.64,1);
  --smooth:      cubic-bezier(0.4,0,0.2,1);

  /* Dark (default) */
  --c-bg:     hsl(220,28%,7%);
  --c-text:   hsl(220,15%,94%);
  --c-text1:  hsl(220,15%,94%);
  --c-text2:  hsl(220,10%,62%);
  --c-text3:  hsl(220,8%,40%);
  --g-bg:     rgba(20,22,36,0.72);
  --g-border: rgba(255,255,255,0.10);
  --g-light:  rgba(255,255,255,0.07);
  --g-hover:  rgba(255,255,255,0.11);
  --card-bg:  rgba(255,255,255,0.07);
  --card-sheen: rgba(255,255,255,0.14);
}

body.light {
  --c-bg:     hsl(220,24%,96%);
  --c-text:   hsl(220,30%,12%);
  --c-text1:  hsl(220,30%,12%);
  --c-text2:  hsl(220,15%,40%);
  --c-text3:  hsl(220,12%,60%);
  --g-bg:     rgba(240,242,252,0.78);
  --g-border: rgba(0,0,0,0.12);
  --g-light:  rgba(255,255,255,0.55);
  --g-hover:  rgba(255,255,255,0.72);
  --card-bg:  rgba(255,255,255,0.65);
  --card-sheen: rgba(255,255,255,0.88);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--font);
  font-size:14px;
  color:var(--c-text);
  background:var(--c-bg);
  overflow:hidden;
  height:100vh;
  width:100vw;
  transition:color 0.3s ease,background 0.3s ease;
}

/* ─── Background ─── */
.bg-canvas {
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.bg-mesh {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, hsla(220,70%,16%,0.6) 0%,transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 85%, hsla(265,60%,14%,0.5) 0%,transparent 60%),
    radial-gradient(ellipse 70% 50% at 65% 5%,  hsla(210,80%,12%,0.4) 0%,transparent 60%),
    linear-gradient(155deg, hsl(220,28%,6%) 0%, hsl(240,25%,8%) 50%, hsl(215,28%,5%) 100%);
  background-size:300% 300%;
  animation:bg-shift 22s ease infinite;
}
body.light .bg-mesh {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, hsla(215,80%,88%,0.7) 0%,transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 85%, hsla(265,50%,90%,0.6) 0%,transparent 60%),
    radial-gradient(ellipse 70% 50% at 65% 5%,  hsla(200,70%,90%,0.5) 0%,transparent 60%),
    linear-gradient(155deg, hsl(220,30%,96%) 0%, hsl(230,25%,94%) 50%, hsl(215,28%,97%) 100%);
}
.amb-orb {
  position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;
  animation:orb-float 14s ease-in-out infinite;
}
.orb1{width:600px;height:600px;top:-120px;left:-80px;background:radial-gradient(circle,hsla(215,100%,50%,0.18),transparent 70%);animation-delay:0s;}
.orb2{width:450px;height:450px;bottom:-90px;right:10%;background:radial-gradient(circle,hsla(265,70%,55%,0.15),transparent 70%);animation-delay:-5s;}
.orb3{width:350px;height:350px;top:35%;right:-40px;background:radial-gradient(circle,hsla(43,100%,55%,0.12),transparent 70%);animation-delay:-10s;}
.orb4{width:300px;height:300px;top:8%;left:38%;background:radial-gradient(circle,hsla(180,80%,50%,0.10),transparent 70%);animation-delay:-15s;}

@keyframes bg-shift {
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
@keyframes orb-float {
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-25px) scale(1.07);}
  66%{transform:translate(-18px,18px) scale(0.94);}
}

canvas#ptx {
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.45;
}

/* ─── Layout ─── */
.layout {
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr 308px;
  grid-template-rows:var(--topbar-h) 1fr;
  height:100vh;
  position:relative;z-index:2;
  transition:grid-template-columns 0.35s var(--smooth);
}
.layout.sb-collapsed { grid-template-columns:var(--sidebar-sm) 1fr 308px; }
.layout.rp-hidden    { grid-template-columns:var(--sidebar-w) 1fr 0; }
.layout.sb-collapsed.rp-hidden { grid-template-columns:var(--sidebar-sm) 1fr 0; }

/* ─── Glass mixin ─── */
.glass {
  background:var(--g-bg);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--g-border);
}

/* ─── TOPBAR ─── */
#topbar {
  grid-column:1/-1;grid-row:1;
  display:flex;align-items:center;gap:12px;padding:0 20px;
  border-bottom:1px solid var(--g-border);
  box-shadow:0 1px 0 rgba(255,255,255,0.05),0 4px 20px rgba(0,0,0,0.15);
  background:rgba(15,16,28,0.68);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  z-index:100;
  transition:background 0.4s ease,box-shadow 0.4s ease;
}
body.light #topbar {
  background:rgba(245,247,255,0.82);
  box-shadow:0 1px 0 rgba(255,255,255,0.8),0 4px 20px rgba(0,0,0,0.07);
}
#topbar.scrolled {
  background:rgba(8,9,18,0.82) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.08),0 6px 28px rgba(0,0,0,0.25) !important;
}
.logo-wrap { display:flex;align-items:center;gap:10px;flex-shrink:0; }
.logo-svg  { width:34px;height:34px;flex-shrink:0; }
.logo-text .t1 { font-size:0.8rem;font-weight:700;line-height:1.2; }
.logo-text .t2 { font-size:10px;font-weight:400;color:var(--c-text3);letter-spacing:.02em; }
.vdiv { width:1px;height:22px;background:rgba(128,128,128,0.22);flex-shrink:0; }

/* ─── Topbar quick-access tool buttons ─── */
.tb-tools {
  display:flex;align-items:center;gap:5px;flex-shrink:0;
}
.tb-tool-btn {
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:20px;border:none;cursor:pointer;
  font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;
  background:rgba(128,128,128,0.10);
  color:var(--c-text1);
  border:1px solid rgba(128,128,128,0.15);
  transition:all 0.18s ease;
  position:relative;overflow:hidden;
}
.tb-tool-btn svg { flex-shrink:0;opacity:.75;transition:opacity 0.18s; }
.tb-tool-btn:hover {
  background:rgba(10,132,255,0.12);
  color:var(--c-accent);
  border-color:rgba(10,132,255,0.30);
  box-shadow:0 2px 10px rgba(10,132,255,0.18);
  transform:translateY(-1px);
}
.tb-tool-btn:hover svg { opacity:1; }
.tb-tool-btn:active { transform:translateY(0);box-shadow:none; }
.tb-tool-btn.active {
  background:rgba(10,132,255,0.18);
  color:var(--c-accent);
  border-color:rgba(10,132,255,0.40);
  box-shadow:0 0 0 2px rgba(10,132,255,0.20);
}
/* Per-tool accent colors on hover */
#tbq4:hover { background:rgba(52,199,89,0.12);color:#34c759;border-color:rgba(52,199,89,0.30);box-shadow:0 2px 10px rgba(52,199,89,0.18); }
#tbq-info:hover { background:rgba(79,142,247,0.12);color:#4f8ef7;border-color:rgba(79,142,247,0.30);box-shadow:0 2px 10px rgba(79,142,247,0.18); }

.search-wrap { flex:1;max-width:360px;position:relative; }
.search-wrap input {
  width:100%;
  background:rgba(128,128,128,0.10);
  border:1px solid rgba(128,128,128,0.16);
  border-radius:var(--r-full);
  padding:7px 14px 7px 36px;
  font-size:12.5px;font-family:var(--font);
  color:var(--c-text);outline:none;
  backdrop-filter:blur(8px);
  transition:all 0.22s ease;
}
.search-wrap input::placeholder { color:var(--c-text3); }
.search-wrap input:focus {
  border-color:rgba(10,132,255,0.5);
  box-shadow:0 0 0 3px rgba(10,132,255,0.14);
  background:rgba(128,128,128,0.16);
}
.search-icon { position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--c-text3);pointer-events:none; }

.tb-actions { display:flex;align-items:center;gap:7px;margin-left:auto; }
.tb-btn {
  width:34px;height:34px;border-radius:9px;
  border:1px solid rgba(128,128,128,0.16);
  background:rgba(128,128,128,0.08);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--c-text2);
  transition:all 0.2s ease;position:relative;
}
.tb-btn:hover { background:rgba(10,132,255,0.14);border-color:rgba(10,132,255,0.28);color:var(--c-accent); }
.notif-dot {
  position:absolute;top:-3px;right:-3px;
  width:16px;height:16px;border-radius:8px;
  background:#ff3b30;color:#fff;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(255,59,48,0.45);
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100%{box-shadow:0 2px 6px rgba(255,59,48,0.45);}
  50%{box-shadow:0 2px 14px rgba(255,59,48,0.70);}
}
.tb-avatar {
  width:34px;height:34px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(10,132,255,0.5);
  box-shadow:0 2px 10px rgba(10,132,255,0.25);
  cursor:pointer;flex-shrink:0;
  transition:transform 0.2s ease;
}
.tb-avatar:hover { transform:scale(1.09); }
.tb-avatar img { width:100%;height:100%;object-fit:cover; }

/* ─── SIDEBAR ─── */
#sidebar {
  grid-column:1;grid-row:2;
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(12,13,24,0.80);
  border-right:1px solid var(--g-border);
  backdrop-filter:blur(40px) saturate(200%);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  transition:width 0.35s var(--smooth);
  width:var(--sidebar-w);
}
body.light #sidebar {
  background:rgba(232,236,252,0.82);
  border-right-color:rgba(255,255,255,0.65);
}
.layout.sb-collapsed #sidebar { width:var(--sidebar-sm); }

.sb-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 8px;flex-shrink:0;
}
.sb-section-lbl {
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-text3);white-space:nowrap;overflow:hidden;
  opacity:1;transition:opacity 0.2s ease;
}
.sb-collapsed .sb-section-lbl { opacity:0;pointer-events:none; }

.sb-toggle {
  width:28px;height:28px;border-radius:8px;
  border:1px solid rgba(128,128,128,0.18);
  background:rgba(128,128,128,0.07);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--c-text2);
  transition:all 0.2s ease;flex-shrink:0;
}
.sb-toggle:hover { background:rgba(10,132,255,0.14);color:var(--c-accent); }

.sb-nav { flex:1;overflow-y:auto;overflow-x:hidden;padding:0 8px;scrollbar-width:none; }
.sb-nav::-webkit-scrollbar { display:none; }

.sb-sec { margin-bottom:6px; }
.sb-sec-title {
  font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-text3);
  padding:10px 8px 3px;white-space:nowrap;overflow:hidden;
  transition:opacity 0.2s ease,max-height 0.3s ease;max-height:40px;
}
.layout.sb-collapsed .sb-sec-title { opacity:0;max-height:0;pointer-events:none;padding-top:0;padding-bottom:0; }

.nav-item {
  display:flex;align-items:center;gap:10px;
  padding:9px 9px;border-radius:11px;cursor:pointer;
  color:var(--c-text2);font-size:13px;font-weight:500;
  white-space:nowrap;
  transition:all 0.2s var(--smooth);
  position:relative;overflow:hidden;
  border:1px solid transparent;
  user-select:none;
}
.nav-item::before {
  content:'';position:absolute;inset:0;border-radius:11px;
  background:rgba(128,128,128,0.07);opacity:0;transition:opacity 0.18s ease;
}
.nav-item:hover { color:var(--c-text);transform:translateX(2px); }
.nav-item:hover::before { opacity:1; }
.nav-item.active {
  color:var(--c-accent);
  background:rgba(10,132,255,0.13);
  border-color:rgba(10,132,255,0.22);
}
.nav-item.active::before { opacity:0; }
.nav-icon { width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.nav-lbl  { flex:1;overflow:hidden;transition:opacity 0.2s ease,max-width 0.3s ease;max-width:180px; }
.layout.sb-collapsed .nav-lbl  { opacity:0;max-width:0;pointer-events:none; }
.nav-bdg {
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--c-danger);color:#fff;font-size:9.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:opacity 0.2s ease;
}
.layout.sb-collapsed .nav-bdg { opacity:0;pointer-events:none; }

.sb-footer {
  padding:10px 8px;border-top:1px solid rgba(128,128,128,0.10);flex-shrink:0;
}
.sb-user {
  display:flex;align-items:center;gap:9px;padding:9px;border-radius:11px;
  cursor:pointer;transition:background 0.2s ease;
}
.sb-user:hover { background:rgba(128,128,128,0.07); }
.sb-user img {
  width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(10,132,255,0.35);flex-shrink:0;
}
.sb-user-info { overflow:hidden;transition:opacity 0.2s ease; }
.layout.sb-collapsed .sb-user-info { opacity:0;pointer-events:none; }
.sb-uname { font-size:12.5px;font-weight:600;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sb-urole { font-size:10px;color:var(--c-text3);white-space:nowrap; }
.sb-logout {
  display:flex;align-items:center;gap:8px;padding:8px 9px;
  border-radius:10px;cursor:pointer;color:var(--c-danger);
  font-size:12.5px;font-weight:500;transition:background 0.2s ease;
  white-space:nowrap;margin-top:4px;
}
.sb-logout:hover { background:rgba(255,59,48,0.10); }
.layout.sb-collapsed .sb-logout span { opacity:0;max-width:0;overflow:hidden; }

/* ─── MAIN ─── */
#main {
  grid-column:2;grid-row:2;
  overflow-y:auto;overflow-x:auto;padding:22px;
  padding-bottom:65px; /* Espacio inferior para evitar que el footer fijo solape el contenido */
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.13) transparent;
}
#main::-webkit-scrollbar { width:4px; }
#main::-webkit-scrollbar-track { background:transparent; }
#main::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.14);border-radius:99px; }

/* ─── INFO Y SEGURIDAD RESPONSIVE ─── */
.info-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
  align-items: start;
}
.info-cards-grid > div {
  align-self: start;
}
.info-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.info-tool-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--c-text2);
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.info-tool-item:hover {
  background: rgba(79, 142, 247, 0.08);
}
@media (max-width: 640px) {
  .info-cards-grid { grid-template-columns: 1fr; }
  .info-sub-grid { grid-template-columns: 1fr; }
}


/* ─── RIGHT PANEL ─── */
#rpanel {
  grid-column:3;grid-row:2;
  overflow-y:auto;overflow-x:hidden;padding:20px 14px;
  border-left:1px solid var(--g-border);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.09) transparent;
  transition:width 0.3s ease;
}
#rpanel::-webkit-scrollbar { width:3px; }
#rpanel::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.10);border-radius:99px; }
.layout.rp-hidden #rpanel { display:none; }

/* ─── Headings ─── */
.page-title {
  font-size:1.65rem;font-weight:800;letter-spacing:-0.03em;
  background:linear-gradient(135deg,#0a84ff,#5e5ce6 40%,#30d158 80%,#0a84ff);
  background-size:300% 300%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gtxt 7s ease infinite;
  line-height:1.2;
}
@keyframes gtxt { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.page-sub { font-size:12.5px;color:var(--c-text2);margin-top:3px; }
.live-time { font-size:11px;color:var(--c-text3);margin-top:3px; }

/* ─── Stats row ─── */
.stats-row { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0; }
.stat-card {
  background:var(--card-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--g-border);border-radius:10px;
  padding:10px 12px;position:relative;overflow:hidden;
  transition:transform 0.25s ease,box-shadow 0.25s ease;
  box-shadow:0 4px 18px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.14);
  display: grid;
  grid-template-areas:
    "icon val chg"
    "icon lbl chg";
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
}
.stat-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,0.09) 0%,transparent 100%);
  border-radius:10px 10px 0 0;pointer-events:none;
}
.stat-card:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.stat-icon {
  grid-area: icon;
  width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:0;
}
.stat-icon svg { width:13px;height:13px; }
.stat-val { grid-area: val; font-size:1.3rem;font-weight:800;letter-spacing:-0.04em;color:var(--c-text); line-height:1; }
.stat-lbl { grid-area: lbl; font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text3);margin-top:0; }
.stat-chg {
  grid-area: chg; align-self: start;
  display:inline-flex;align-items:center;gap:3px;
  font-size:9.5px;font-weight:700;padding:2px 6px;
  border-radius:var(--r-full);margin-top:0;
}
.up   { background:rgba(48,209,88,0.14);color:#30d158; }
.down { background:rgba(255,59,48,0.14);color:#ff3b30; }

/* ─── Section title ─── */
.sec-title {
  font-size:1rem;font-weight:700;color:var(--c-text);
  display:flex;align-items:center;gap:7px;margin-bottom:14px;
  letter-spacing:-0.01em;
}

/* ─── Cards grid ─── */
.cards-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px; }

.tool-card {
  background:var(--card-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--g-border);border-radius:12px;
  padding:12px 14px;
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform 0.3s var(--spring),box-shadow 0.3s ease,background 0.3s ease;
  box-shadow:0 4px 18px rgba(0,0,0,0.10),inset 0 1px 0 rgba(255,255,255,0.12);
  transform-style:preserve-3d;
  display: grid;
  grid-template-areas:
    "icon title"
    "desc desc"
    "btn btn";
  grid-template-columns: auto 1fr;
  align-items: center;
  row-gap: 8px; column-gap: 10px;
}
.tool-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:44%;
  background:linear-gradient(180deg,rgba(255,255,255,0.13) 0%,transparent 100%);
  border-radius:12px 12px 0 0;pointer-events:none;z-index:0;
}
.tool-card > * { position:relative;z-index:1; }

.tool-card:hover {
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 12px 35px rgba(0,0,0,0.18),0 5px 15px rgba(10,132,255,0.08),inset 0 1px 0 rgba(255,255,255,0.30);
  background:var(--g-hover);
}
.tool-card:active { transform:translateY(-1px) scale(0.995);transition:all 0.09s ease; }

.card-icon {
  grid-area: icon;
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.28s var(--spring);
}
.card-icon svg { width:14px;height:14px; }
.tool-card:hover .card-icon { transform:scale(1.12) rotate(6deg); }
.card-title { grid-area: title; font-size:0.85rem;font-weight:700;color:var(--c-text);letter-spacing:-0.01em; margin-bottom:0; }
.card-desc  { grid-area: desc; font-size:10px;color:var(--c-text2);line-height:1.4;margin-top:2px; }

/* ─── Primary button ─── */
.btn-primary {
  grid-area: btn;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-full);
  background:var(--c-accent);color:#fff;
  font-family:var(--font);font-size:10.5px;font-weight:600;
  border:none;cursor:pointer;width:100%;
  position:relative;overflow:hidden;
  transition:all 0.25s var(--spring);user-select:none;
  box-shadow:0 4px 10px rgba(10,132,255,0.25),inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary::before {
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.20) 0%,transparent 100%);
  border-radius:var(--r-full) var(--r-full) 0 0;pointer-events:none;
}
.btn-primary:hover { transform:translateY(-2px) scale(1.02);filter:brightness(1.08); }
.btn-primary:active { transform:scale(0.97);transition:all 0.08s ease; }

/* ─── Ripple ─── */
.ripple {
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,0.28);
  transform:scale(0);pointer-events:none;
  animation:rippleOut 0.55s ease-out forwards;
}
@keyframes rippleOut { to{transform:scale(4);opacity:0;} }

/* ─── Reflect blob ─── */
.reflect-blob {
  position:absolute;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0.18) 0%,transparent 70%);
  pointer-events:none;transform:translate(-50%,-50%);
  z-index:2;opacity:0;mix-blend-mode:overlay;
  transition:opacity 0.3s ease;
}
.tool-card:hover .reflect-blob,
.stat-card:hover .reflect-blob { opacity:1; }

/* ─── Status dots ─── */
.dot {
  width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;
  animation:dotPulse 2.2s ease-in-out infinite;
}
.dot.green  { background:#30d158; }
.dot.orange { background:#ff9f0a; }
.dot.red    { background:#ff3b30; }
@keyframes dotPulse {
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.7;transform:scale(1.2);}
}

/* ─── Activity feed ─── */
.act-item {
  display:flex;align-items:center;gap:11px;padding:9px;
  border-radius:12px;transition:background 0.18s ease;margin-bottom:8px;
}
.act-item:hover { background:rgba(255,255,255,0.04); }
.act-ico {
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.act-title { font-size:12.5px;font-weight:600;color:var(--c-text); }
.act-sub   { font-size:10.5px;color:var(--c-text3);margin-top:1px; }

/* ─── Right panel ─── */
.rp-sec { margin-bottom:18px; }
.rp-sec-title {
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--c-text3);margin-bottom:9px;
}
.user-card-glass {
  text-align:center;padding:24px 18px;
  background:var(--card-bg);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--g-border);border-radius:22px;
  box-shadow:0 4px 22px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.14);
  position:relative;overflow:hidden;
}
.user-card-glass::before {
  content:'';position:absolute;top:0;left:0;right:0;height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,0.10) 0%,transparent 100%);
  border-radius:22px 22px 0 0;pointer-events:none;
}
.ua-wrap { position:relative;display:inline-block;margin-bottom:14px; }
.ua-wrap img {
  width:84px;height:84px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(10,132,255,0.45);
  box-shadow:0 6px 24px rgba(10,132,255,0.22);
}
.ua-ring {
  position:absolute;inset:-5px;border-radius:50%;
  border:2px solid transparent;
  background:conic-gradient(#0a84ff,#5e5ce6,#30d158,#0a84ff) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;mask-composite:exclude;
  animation:spin 4s linear infinite;
}
.ua-online {
  position:absolute;bottom:3px;right:3px;
  width:13px;height:13px;background:#30d158;border-radius:50%;
  border:2px solid rgba(20,20,35,0.8);
}
@keyframes spin { to{transform:rotate(360deg);} }
.u-name { font-size:0.92rem;font-weight:700;color:var(--c-text);position:relative; }
.u-role { font-size:10px;color:var(--c-text3);text-transform:uppercase;letter-spacing:.07em;margin-top:2px;position:relative; }
.u-info { text-align:left;margin-top:16px;display:flex;flex-direction:column;gap:7px;position:relative; }
.u-info-row { display:flex;gap:7px;font-size:11px;color:var(--c-text2); }
.u-info-row .lbl { font-weight:600;color:var(--c-text3);min-width:56px;flex-shrink:0; }
.qa-row { display:flex;gap:7px;margin-top:14px;position:relative; }
.qa-btn {
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 5px;border-radius:12px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  cursor:pointer;color:var(--c-text2);font-size:10px;font-weight:600;
  transition:all 0.2s ease;
}
.qa-btn:hover { transform:translateY(-2px); }
.qa-btn.g:hover { background:rgba(48,209,88,0.14);border-color:rgba(48,209,88,0.24);color:#30d158; }
.qa-btn.b:hover { background:rgba(10,132,255,0.14);border-color:rgba(10,132,255,0.24);color:#0a84ff; }
.qa-btn.o:hover { background:rgba(255,159,10,0.14);border-color:rgba(255,159,10,0.24);color:#ff9f0a; }

/* ─── Status grid ─── */
.sys-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.sys-item {
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:11px;
  display:flex;flex-direction:column;gap:5px;
  transition:all 0.18s ease;cursor:default;
}
.sys-item:hover { background:rgba(255,255,255,0.09);transform:translateY(-1px); }
.sys-item-hd { display:flex;align-items:center;gap:5px; }
.sys-lbl { font-size:10px;font-weight:600;color:var(--c-text3); }
.sys-val { font-size:12.5px;font-weight:600;color:var(--c-text); }

/* ─── Status rings ─── */
.rings-row { display:flex;justify-content:space-around;margin-top:18px;gap:6px; }
.ring-item { text-align:center; }
.ring-item svg { display:block;margin:0 auto; }
.ring-item .rl { font-size:10px;font-weight:600;color:var(--c-text3);margin-top:3px; }

/* ─── Calendar ─── */
.cal-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.cal-mon { font-size:12.5px;font-weight:700;color:var(--c-text); }
.cal-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:6px; }
.cal-dh { font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--c-text3);text-align:center;padding-bottom:4px; }
.cal-d {
  aspect-ratio:1;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;cursor:pointer;transition:all 0.16s ease;color:var(--c-text2);
}
.cal-d:hover { background:rgba(10,132,255,0.14);color:var(--c-accent); }
.cal-d.today { background:var(--c-accent);color:#fff;font-weight:700;box-shadow:0 3px 9px rgba(10,132,255,0.35); }
.cal-d.other { color:var(--c-text3); }
.cal-d.evt   { position:relative; }
.cal-d.evt::after {
  content:'';position:absolute;bottom:2px;width:4px;height:4px;
  border-radius:50%;background:var(--c-accent);
}

/* ─── Demo btn ─── */
.demo-btn {
  width:100%;padding:9px;border-radius:var(--r-full);
  background:rgba(128,128,128,0.10);border:1px solid rgba(128,128,128,0.18);
  color:var(--c-text2);font-family:var(--font);font-size:12px;font-weight:500;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all 0.2s ease;backdrop-filter:blur(8px);
}
.demo-btn:hover { background:rgba(10,132,255,0.12);border-color:rgba(10,132,255,0.25);color:var(--c-accent); }

/* ─── Toast ─── */
#toast-box {
  position:fixed;bottom:22px;right:22px;z-index:9999;
  display:flex;flex-direction:column;gap:9px;pointer-events:none;
}
.toast {
  min-width:292px;max-width:360px;
  background:rgba(18,19,32,0.85);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border:1px solid rgba(255,255,255,0.12);border-radius:17px;
  padding:13px 16px;display:flex;align-items:flex-start;gap:11px;
  box-shadow:0 8px 36px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.09);
  pointer-events:all;color:#fff;
  animation:toastIn 0.38s var(--spring) forwards;
}
body.light .toast {
  background:rgba(255,255,255,0.90);color:hsl(220,30%,12%);
  border-color:rgba(0,0,0,0.07);
}
@keyframes toastIn {
  from{opacity:0;transform:translateX(100%) scale(0.90);}
  to{opacity:1;transform:translateX(0) scale(1);}
}
@keyframes toastOut {
  to{opacity:0;transform:translateX(110%) scale(0.88);}
}
.toast.out { animation:toastOut 0.28s ease forwards; }
.toast-ico { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.toast-ico.s{background:rgba(48,209,88,0.18);color:#30d158;}
.toast-ico.i{background:rgba(10,132,255,0.18);color:#0a84ff;}
.toast-ico.w{background:rgba(255,159,10,0.18);color:#ff9f0a;}
.toast-ico.e{background:rgba(255,59,48,0.18);color:#ff3b30;}
.toast-body { flex:1;min-width:0; }
.toast-t { font-size:12.5px;font-weight:700;margin-bottom:1px; }
.toast-m { font-size:11px;color:rgba(255,255,255,0.60);line-height:1.45; }
body.light .toast-m { color:hsl(220,12%,48%); }
.toast-x { background:none;border:none;color:rgba(255,255,255,0.35);cursor:pointer;padding:2px;flex-shrink:0;transition:color 0.18s; }
.toast-x:hover { color:rgba(255,255,255,0.80); }

/* ─── Animations ─── */
@keyframes fadeUp {
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}
.a-stagger > * {
  opacity:0;animation:fadeUp 0.52s var(--spring) forwards;
}
.a-stagger > *:nth-child(1){animation-delay:.04s}
.a-stagger > *:nth-child(2){animation-delay:.09s}
.a-stagger > *:nth-child(3){animation-delay:.14s}
.a-stagger > *:nth-child(4){animation-delay:.19s}
.a-stagger > *:nth-child(5){animation-delay:.24s}
.a-stagger > *:nth-child(6){animation-delay:.29s}
.a-stagger > *:nth-child(7){animation-delay:.34s}
.a-stagger > *:nth-child(8){animation-delay:.39s}

/* ─── Sidebar overlay (mobile) ─── */
#sb-overlay {
  display:none;position:fixed;inset:var(--topbar-h) 0 0 0;
  background:rgba(0,0,0,0.50);backdrop-filter:blur(4px);z-index:190;opacity:0;
  transition:opacity 0.3s ease;
}
#sb-overlay.vis { opacity:1;display:block; }

/* ════ Responsive ════ */
@media(max-width:1600px){
  /* Remove right panel column but PRESERVE sidebar collapsed state */
  .layout                        { grid-template-columns:var(--sidebar-w)  1fr 0 !important; }
  .layout.sb-collapsed           { grid-template-columns:var(--sidebar-sm) 1fr 0 !important; }
  #rpanel {
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:none !important;
  }
  .stats-row { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:1100px){
  /* Keep topbar tools visible on tablet as icon-only pills to save width */
  .tb-tool-btn span { display:none; }
  .tb-tool-btn { padding:6px 9px; }
  /* Exceptions: always show label for the active topbar buttons */
  #tbq4 span, #tbq-juridico span, #tbq-info span { display:inline !important; }
  #tbq4, #tbq-juridico, #tbq-info { padding:5px 12px !important; }
  .vdiv { display:none; }
  #topbar { padding:0 14px; gap:8px; }
}
@media(max-width:900px){
  .layout,
  .layout.sb-collapsed { grid-template-columns:0 1fr 0 !important; position:relative !important; z-index:2 !important; }
  .layout #rpanel { display:none !important; }
  #sb-overlay { position:fixed !important; inset:var(--topbar-h) 0 0 0 !important; z-index:190 !important; }
  #sidebar,
  .layout.sb-collapsed #sidebar,
  #layout.sb-collapsed #sidebar {
    position:fixed !important;left:0 !important;top:var(--topbar-h) !important;bottom:0 !important;
    width:var(--sidebar-w) !important;
    transform:translateX(-105%);transition:transform 0.35s var(--smooth);z-index:200 !important;
    box-shadow: 6px 0 30px rgba(0,0,0,0.55);
  }
  #sidebar.mob-open,
  .layout.sb-collapsed #sidebar.mob-open,
  #layout.sb-collapsed #sidebar.mob-open { transform:translateX(0) !important; }
  /* Force full expanded width and visibility inside mobile drawer even if .sb-collapsed was set on desktop */
  .sb-collapsed .sb-section-lbl,
  .layout.sb-collapsed .sb-section-lbl,
  #sidebar .sb-section-lbl { opacity:1 !important; pointer-events:auto !important; }
  .sb-collapsed .sb-sec-title,
  .layout.sb-collapsed .sb-sec-title,
  #sidebar .sb-sec-title { opacity:1 !important; max-height:40px !important; pointer-events:auto !important; padding:10px 8px 3px !important; }
  .sb-collapsed .nav-lbl,
  .layout.sb-collapsed .nav-lbl,
  #sidebar .nav-lbl { opacity:1 !important; max-width:180px !important; pointer-events:auto !important; }
  .sb-collapsed .nav-bdg,
  .layout.sb-collapsed .nav-bdg,
  #sidebar .nav-bdg { opacity:1 !important; pointer-events:auto !important; }
  .sb-collapsed .sb-user-info,
  .layout.sb-collapsed .sb-user-info,
  #sidebar .sb-user-info { opacity:1 !important; pointer-events:auto !important; }
  .sb-collapsed .sb-logout span,
  .layout.sb-collapsed .sb-logout span,
  #sidebar .sb-logout span { opacity:1 !important; max-width:150px !important; }
  #sb-toggle { display:none !important; }
  #main { grid-column:1/-1; padding:16px; overflow-x:hidden; overflow-y:auto; }
  .mob-btn { display:flex !important; }
  /* Ensure 2-column views wrap on tablet/mobile */
  #view-penal > div:nth-child(2) { grid-template-columns:1fr !important; }
}
.mob-btn { display:none; }
@media(max-width:768px){
  :root { --topbar-h: 104px; }
  #topbar {
    flex-wrap:wrap;
    padding:6px 12px 0;
    height:auto;
    min-height:var(--topbar-h);
  }
  /* Display quick-access tools as a smooth horizontal strip right below row 1 */
  .tb-tools {
    display:flex !important;
    width:100%;
    order:10;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:6px 0 6px;
    margin-top:4px;
    border-top:1px solid var(--g-border);
    gap:6px;
    scrollbar-width:none;
  }
  .tb-tools::-webkit-scrollbar { display:none; }
  .tb-tool-btn {
    flex:0 0 auto;
    padding:5px 11px;
    font-size:11px;
  }
  .tb-tool-btn span { display:inline !important; }
  .logo-text .t2 { display:none !important; }
  .tb-actions button[title="Configuración"],
  .tb-actions button[title="Ayuda"] { display:none !important; }
  .search-wrap { max-width:160px; }
}
@media(max-width:600px){
  .stats-row { grid-template-columns:1fr 1fr; }
  .cards-grid { grid-template-columns:1fr; }
  #main { padding:12px; }
  .page-title { font-size:1.35rem; }
  .logo-text .t1 { font-size:0.75rem; }
  .search-wrap { max-width:130px; }
  /* Make forms and inner boxes responsive on small mobile screens */
  .view-section { padding-bottom: 40px; }
  .view-section > div[style*="grid-template-columns"] { grid-template-columns:1fr !important; }
}
@media(max-width:480px){
  :root { --topbar-h: 98px; }
  .logo-text { display:none !important; }
  .search-wrap { max-width:120px; }
  #topbar { padding:6px 10px 0; gap:6px; }
  .tb-actions { gap:4px; }
}

/* ══════════════════════════════════════════
   SPA VIEWS & FORMS
══════════════════════════════════════════ */
.view-section {
  display:none;
  animation:fadeView 0.3s cubic-bezier(0.34,1.1,0.64,1) forwards;
}
.view-section.active {
  display:block;
}
@keyframes fadeView {
  0% { opacity:0; transform:translateY(8px); }
  100% { opacity:1; transform:translateY(0); }
}

.g-input {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--c-text1);
  border-radius: 8px;
  transition: all 0.2s var(--smooth);
}
body.light .g-input {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.15);
  color: var(--c-text1);
}
.g-input:focus {
  border-color: var(--c-accent) !important;
  background: rgba(255,255,255,0.08) !important;
  box-shadow: 0 0 0 3px rgba(79,142,247,0.25);
  outline: none;
}
body.light .g-input:focus {
  background: #ffffff !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px rgba(79,142,247,0.2);
}
.g-input::placeholder {
  color: var(--c-text3);
}


/* ════════ A21 TEMPLATE CSS ════════ */
/* Estilos generales de la página y del panel de control */
    body {
        background: #f0f0f0;
        font-family: 'Calibri', sans-serif;
        align-items: center;
    }

    /* FIX: Reducir espacio entre el título y el contenido */
    .content-area {
        padding-top: 5px !important;
    }

    .control-panel {
        background: #fdfdfd;
        padding: 5px 10px;
        margin-bottom: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        max-width: 21cm;
        margin: 0 auto 10px auto;
    }

    .control-panel h2 {
        text-align: center;
        margin-bottom: 5px;
        color: #333;
        font-size: 1rem;
    }

    .control-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 5px 10px;
        align-items: end;
    }

    .control-group {
        display: flex;
        flex-direction: column;
    }

    .control-group label {
        margin-bottom: 2px;
        font-weight: bold;
        font-size: 10px;
        color: #555;
    }

    .form-control {
        font-size: 12px;
        padding: 4px 6px;
        border-radius: 4px;
        border: 1px solid #ccc;
        height: 28px;
    }

    .button-container {
        display: flex;
        justify-content: center;
        margin-top: 5px;
        gap: 5px;
    }
    
    .button-container .btn {
        font-size: 11px;
        padding: 4px 8px;
    }

    .btn-primary { background-color: #007bff; }
    .btn-info { background-color: #17a2b8; }
    .btn-success { background-color: #28a745; }

    /* ESTILOS MEJORADOS PARA MÚLTIPLES CONTENEDORES A4 */
    .a4-container {
        width: 21cm;
        min-height: 29.7cm;
        background: white;
        padding: 1.5cm;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        position: relative;
        margin: 0 auto 20px auto;
        box-sizing: border-box;
        overflow: hidden;
    }

    .a4-container::before {
        content: "";
        position: absolute;
        top: 1cm;
        left: 1cm;
        right: 1cm;
        bottom: 1cm;
        border: 3.5px solid #0F2C52;
        pointer-events: none;
    }

    /* Clase para saltos de página - CRÍTICO PARA PDF */
    .page-break-before {
        page-break-before: always;
    }

    .page-break-after {
        page-break-after: always;
    }

    .editable {
        border: 1px dashed #ccc;
        padding: 2px;
        min-height: 20px;
        margin: 2px 0;
    }

    .editable:focus {
        outline: 2px solid #4a90e2;
        background: #f8fdff;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 10px;
    }

    td {
        vertical-align: top;
        padding: 4px;
    }

    .datos-table {
        width: 100%;
        border-collapse: collapse;
        margin: 10px 0;
        vertical-align: middle;
        font-size: 10.5pt;
    }
    
    .grid-table, .grid-table td, .grid-table th {
         border: 1px solid #000;
    }

    .datos-table td {
        padding: 2px 2px;
        vertical-align: middle;
    }
    
    .datos-label {
        font-weight: bold;
        width: 30%;
        white-space: nowrap;
    }
    
    .datos-value {
        text-align: justify;
        width: 100%;
    }
    
    .datos-value.editable {
        align-items: center;
    }

    .contenido {
        font-size: 10.5pt;
        margin: 10px 0;
        line-height: 1.15;
        text-align: justify;
    }

    .linea-firma {
        border-top: 1px solid #000;
        margin-top: 40px;
        padding-top: 0px;
    }

    .checkbox-x {
        width: 18px;
        height: 18px;
        border: 1px solid #000;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        font-weight: bold;
        line-height: 18px;
        cursor: pointer;
        margin-right: 5px;
        font-size: 14px;
    }

    .checkbox-x.checked::before {
        content: 'X';
    }

    .section-header {
        font-weight: bold;
        background-color: #eee;
        padding: 4px 8px;
        margin-top: 10px;
        margin-bottom: 5px;
        font-size: 11pt;
        border: 1px solid #ccc;
    }

    .check-table td {
        font-size: 10.5pt;
        padding: 4px 0px;
        border: none;
    }
    
    .grid-table .check-table td {
         border: none;
    }

    .imagen-escudo {
        position: absolute;
        top: 0.5cm;
        left: 0.5cm;
        width: 30%;
        height: 50px;
    }
    .imagen-escudo-UDAVIT {
        position: absolute;
        top: 0.5cm;
        right: 0.5cm;
        width: 9%;
        height: 35px;
    }

   .toolbar {
        position: fixed;
        top: 10px;
        right: 10px;
        background: #fff;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        z-index: 1000;    
    }

    .toolbar button {
        background: #4a90e2;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 3px;
        cursor: pointer;
        font-size: 16px;
        margin-left: 10px;
    }

    .toolbar button:hover {
        background: #357abd;
    }

    /* Estilo para el iframe */
    #formato-iframe {
        width: 100%;
        height: 80vh;
        min-height: 600px;
        border: none;
        margin-top: 20px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        border-radius: 6px;
    }
    
    /* Prevent overflow from A21 wide content */
    #view-a21 .container-fluid {
        padding: 0;
        max-width: 100%;
        overflow-x: auto;
    }
    
    #view-a21 #iframe-container {
        max-width: 100%;
        overflow-x: auto;
    }

    /* --- ESTILOS DE IMPRESIÓN MEJORADOS PARA MÚLTIPLES PÁGINAS --- */
    @media print {
        body * { 
            visibility: hidden; 
            margin: 0 !important;
            padding: 0 !important;
        }
        
        #content-to-print, 
        #content-to-print * { 
            visibility: visible; 
        }

        #content-to-print {
            position: absolute;
            left: 0;
            top: 0;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        .a4-container {
            box-shadow: none !important;
            border: none !important;
            margin: 0 !important;
            padding: 1.5cm !important;
            width: 21cm !important;
            height: 29.7cm !important;
            page-break-after: always;
            position: relative;
        }
        
        .a4-container:last-child {
            page-break-after: auto;
        }

        .page-break-before {
            page-break-before: always !important;
        }

        .page-break-after {
            page-break-after: always !important;
        }

        table, tr, .section-header {
            page-break-inside: avoid !important;
        }
        
        [style*="white-space: nowrap"],
        [style*="white-space:nowrap"] {
            white-space: normal !important;
        }
        
        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        .imagen-escudo { top: 0.75cm; left: 1cm; }
        .imagen-escudo-UDAVIT { top: 0.5cm; right: 0.5cm; width: 8%; height: 30px; }
        
        .editable { border: none !important; padding: 2px 0 !important; }
        .section-header { background-color: #eee !important; }
        .grid-table, .grid-table td, .grid-table th { border: 1px solid #000 !important; }
        .checkbox-x { border: 1px solid #000 !important; }
        .checkbox-x.checked::before { content: 'X' !important; color: #000 !important; }
        .editable.print-border { border: 1px solid #000 !important; }
        
        .control-panel, .toolbar, .button-container {
            display: none !important;
        }
    }

    /* ESTILOS PARA NOTIFICACIÓN TOAST */
    #toast-notification {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        padding: 16px;
        position: fixed;
        z-index: 10000;
        left: 50%;
        top: 30px;
        font-size: 14px;
        box-shadow: 0px 4px 6px rgba(0,0,0,0.3);
        opacity: 0;
        transition: opacity 0.5s, top 0.5s;
    }

    #toast-notification.show {
        visibility: visible;
        opacity: 1;
        top: 50px;
    }

    /* --- ESTILOS TABLA DESTINATARIOS A21 --- */
    .a21-dest-table-wrapper {
        max-height: 220px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        margin-top: 8px;
    }
    .a21-dest-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
        margin-bottom: 0;
    }
    .a21-dest-table thead th {
        background: linear-gradient(135deg, #1e3a5f, #3b7dd8);
        color: #fff;
        padding: 5px 7px;
        white-space: nowrap;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .a21-dest-table tbody tr {
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.15s;
    }
    .a21-dest-table tbody tr:hover {
        background: #f0f6ff;
    }
    .a21-dest-table tbody tr.dest-activo {
        background: #d4edda !important;
        border-left: 3px solid #28a745;
    }
    .a21-dest-table tbody td {
        padding: 4px 7px;
        vertical-align: middle;
    }
    .btn-sel-dest {
        font-size: 10px;
        padding: 2px 8px;
        white-space: nowrap;
        border-radius: 4px;
    }
    .reniec-upload-cell {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .reniec-upload-cell input[type=file] {
        font-size: 10px;
        max-width: 120px;
    }
    .btn-extraer-reniec {
        font-size: 10px;
        padding: 2px 7px;
        background-color: #6f42c1;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;
    }
    .btn-extraer-reniec:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    /* --- PASO 1 ESTILO --- */
    .paso1-bar {
        background-color: #e3f2fd;
        border-radius: 6px;
        padding: 6px 10px;
        display: flex;
        align-items: flex-end;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }
    .paso1-bar label {
        font-size: 10px;
        font-weight: bold;
        margin-bottom: 2px;
        display: block;
        color: #333;
    }
    .paso1-bar .form-control {
        height: 28px;
        font-size: 11px;
        padding: 2px 6px;
    }

#view-a21 .control-panel {
    max-width: 100% !important;
    overflow-x: auto;
    box-sizing: border-box;
}
#view-a21 #iframe-container {
    overflow-x: auto;
    max-width: 100%;
}
#formato-iframe {
    max-width: 100%;
}

/* ─── A21 View: tight + centered layout ─── */
#main:has(#view-a21.active) {
    padding: 8px 12px;
}
#view-a21.active .container-fluid {
    padding: 0;
    margin: 0 auto;
    max-width: 900px;
}
#view-a21.active .control-panel {
    margin-bottom: 6px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#view-a21.active #iframe-container {
    margin-top: 0;
    display: flex;
    justify-content: center;
}
#view-a21.active #formato-iframe {
    margin-top: 0;
    width: 860px;
    flex-shrink: 0;
}

/* Performance blur override */
body.no-blur #sidebar,
body.no-blur .glass,
body.no-blur #topbar,
body.no-blur .modal-box {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ══════════════════════════════════════════
   SETTINGS MODAL (LIQUID GLASS)
══════════════════════════════════════════ */
.modal-overlay {
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:99999;opacity:0;pointer-events:none;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.modal-overlay.vis {
  opacity:1;pointer-events:auto;
}
.modal-box {
  width:90%;max-width:540px;
  background:rgba(18,20,38,0.88);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.2);
  display:flex;flex-direction:column;
  max-height:85vh;overflow:hidden;
  transform:scale(0.92) translateY(15px);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
body.light .modal-box {
  background:rgba(255,255,255,0.92);
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 24px 60px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.8);
}
.modal-overlay.vis .modal-box {
  transform:scale(1) translateY(0);
}
.modal-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--g-border);
  background:rgba(255,255,255,0.03);
}
body.light .modal-header {
  background:rgba(0,0,0,0.035);
}
.modal-title-wrap {
  display:flex;align-items:center;gap:12px;
}
.modal-icon {
  width:36px;height:36px;border-radius:10px;
  background:rgba(10,132,255,0.15);color:var(--c-accent);
  display:flex;align-items:center;justify-content:center;
}
.modal-title {
  font-size:16px;font-weight:700;color:var(--c-text1);margin:0;
}
.modal-close {
  width:32px;height:32px;border-radius:8px;
  background:transparent;border:none;color:var(--c-text3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.2s ease;
}
.modal-close:hover {
  background:rgba(255,69,58,0.15);color:#ff453a;
}
.modal-body {
  padding:20px 22px;overflow-y:auto;flex:1;
  display:flex;flex-direction:column;gap:22px;
}

/* ─── SPECIAL MODAL THEME CLASSES ─── */
.inst-verify-header {
  background: linear-gradient(135deg, rgba(79,142,247,0.22), rgba(94,92,230,0.18));
  border-bottom: 1px solid rgba(79,142,247,0.25);
  padding: 26px 26px 20px;
  position: relative;
}
body.light .inst-verify-header {
  background: linear-gradient(135deg, rgba(79,142,247,0.18), rgba(94,92,230,0.14));
  border-bottom: 1px solid rgba(79,142,247,0.3);
}
.inst-verify-header h3 {
  font-size: 1.2rem; font-weight: 800; color: var(--c-text1); margin-bottom: 6px;
}
.inst-verify-header p {
  font-size: 12.5px; color: var(--c-text2); line-height: 1.55;
}
.inst-verify-header p strong, .req-highlight {
  color: var(--c-text1); font-weight: 700;
}
body.light .req-highlight {
  color: #1e3a5f; font-weight: 700;
}
.inst-verify-tool-name {
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  background:rgba(79,142,247,0.12);border:1px solid rgba(79,142,247,0.3);
  border-radius:20px;font-size:13px;font-weight:700;color:#4f8ef7;margin-bottom:20px;
}
body.light .inst-verify-tool-name {
  background:rgba(79,142,247,0.14);border-color:rgba(79,142,247,0.38);color:#2663eb;
}
.inst-verify-req-box {
  text-align:left;background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px 18px;margin-bottom:20px;
}
body.light .inst-verify-req-box {
  background:rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.08);
}
.btn-secondary-modal {
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);
  border-radius:12px;color:var(--c-text1);font-family:inherit;font-size:13.5px;
  font-weight:600;text-decoration:none;transition:all 0.15s;
}
body.light .btn-secondary-modal {
  background:rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.18);color:var(--c-text1);
}
body.light .btn-secondary-modal:hover {
  background:rgba(0,0,0,0.12);
}
.admin-modal-header {
  background: linear-gradient(90deg, rgba(94,92,230,0.15), rgba(10,132,255,0.1));
  border-bottom: 1px solid rgba(94,92,230,0.25);
}
body.light .admin-modal-header {
  background: linear-gradient(90deg, rgba(94,92,230,0.12), rgba(10,132,255,0.08));
  border-bottom: 1px solid rgba(94,92,230,0.2);
}
.admin-tabs-bar {
  display:flex;border-bottom:1px solid var(--g-border);background:rgba(0,0,0,0.15);padding:0 18px;overflow-x:auto;gap:0;
}
body.light .admin-tabs-bar {
  background:rgba(0,0,0,0.03);
}
.admin-client-form-box {
  background:rgba(94,92,230,0.08);border:1px solid rgba(94,92,230,0.25);padding:16px;border-radius:14px;margin-bottom:6px;
}
body.light .admin-client-form-box {
  background:rgba(94,92,230,0.06);border-color:rgba(94,92,230,0.2);
}
.admin-auth-pin-input {
  width:100%;padding:13px 44px 13px 18px;font-size:15px;text-align:center;letter-spacing:3px;
  font-weight:700;border-radius:14px;background:rgba(0,0,0,0.3);border:1px solid rgba(94,92,230,0.5);color:var(--c-text1);
}
body.light .admin-auth-pin-input {
  background:rgba(255,255,255,0.85);border:1px solid rgba(94,92,230,0.4);color:var(--c-text1);
}
.photo-details-box {
  background:rgba(255,255,255,0.04);border:1px solid var(--g-border);border-radius:14px;
  padding:12px 14px;font-size:12px;color:var(--c-text2);margin-bottom:18px;text-align:left;
  display:flex;flex-direction:column;gap:8px;
}
body.light .photo-details-box {
  background:rgba(0,0,0,0.025);
}
.cfg-section {
  display:flex;flex-direction:column;gap:10px;
}
.cfg-sec-title {
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--c-accent);margin:0;display:flex;align-items:center;gap:6px;
}
.cfg-row {
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  transition:background 0.2s ease;
}
body.light .cfg-row {
  background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06);
}
.cfg-row:hover {
  background:rgba(255,255,255,0.06);
}
body.light .cfg-row:hover {
  background:rgba(0,0,0,0.04);
}
.cfg-info {
  display:flex;flex-direction:column;gap:2px;
}
.cfg-label {
  font-size:12.5px;font-weight:600;color:var(--c-text1);
}
.cfg-desc {
  font-size:11px;color:var(--c-text3);line-height:1.3;
}
.cfg-select {
  background:rgba(0,0,0,0.25);border:1px solid var(--g-border);
  color:var(--c-text1);font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:8px;outline:none;cursor:pointer;
}
body.light .cfg-select {
  background:rgba(255,255,255,0.8);
}
input.cfg-select {
  cursor:text;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
input.cfg-select:focus {
  border-color:var(--c-accent);
  box-shadow:0 0 0 2px rgba(10,132,255,0.25);
}
.cfg-profile-card {
  display:flex;align-items:center;gap:12px;
  padding:12px;border-radius:12px;
  background:linear-gradient(135deg, rgba(10,132,255,0.12), rgba(94,92,230,0.08));
  border:1px solid rgba(10,132,255,0.2);
}
.cfg-profile-card img {
  width:42px;height:42px;border-radius:12px;object-fit:cover;
}
.cfg-pname {
  font-size:13.5px;font-weight:700;color:var(--c-text1);
}
.cfg-prole {
  font-size:11px;color:var(--c-text2);margin-top:1px;
}
.cfg-pstatus {
  font-size:11px;color:#34c759;font-weight:600;margin-top:3px;display:flex;align-items:center;gap:6px;
}
.status-dot {
  width:7px;height:7px;border-radius:50%;background:#34c759;
  box-shadow:0 0 8px #34c759;
}
.modal-footer {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  border-top:1px solid var(--g-border);
  background:rgba(0,0,0,0.15);
}
body.light .modal-footer {
  background:rgba(0,0,0,0.03);
}
.footer-actions {
  display:flex;align-items:center;gap:10px;
}
.btn-reset {
  background:transparent;border:none;color:var(--c-text3);
  font-size:12px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:8px;transition:all 0.2s ease;
}
.btn-reset:hover {
  background:rgba(255,69,58,0.12);color:#ff453a;
}
.btn-cancel {
  background:rgba(255,255,255,0.08);border:1px solid var(--g-border);
  color:var(--c-text2);font-size:12px;font-weight:600;
  padding:7px 15px;border-radius:8px;cursor:pointer;transition:all 0.2s ease;
}
body.light .btn-cancel {
  background:rgba(0,0,0,0.06);
}
.btn-cancel:hover {
  background:rgba(255,255,255,0.15);color:var(--c-text1);
}
.btn-save {
  background:var(--c-accent);border:none;color:#fff;
  font-size:12px;font-weight:600;padding:7px 16px;border-radius:8px;
  cursor:pointer;display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 14px rgba(10,132,255,0.35);transition:all 0.2s ease;
}
.btn-save:hover {
  background:#2692ff;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(10,132,255,0.45);
}

/* Toggle Switch */
.switch {
  position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;
}
.switch input { opacity:0;width:0;height:0; }
.slider {
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background-color:rgba(128,128,128,0.3);
  transition:.3s cubic-bezier(0.16,1,0.3,1);
}
.slider:before {
  position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;
  background-color:#fff;transition:.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow:0 2px 5px rgba(0,0,0,0.3);
}
input:checked + .slider { background-color:var(--c-accent); }
input:checked + .slider:before { transform:translateX(16px); }
.slider.round { border-radius:24px; }
.slider.round:before { border-radius:50%; }

/* ─── DEDICATED COMPACT SETTINGS MODAL ─── */
#settings-modal {
  max-width: 530px;
  max-height: 94vh;
}
#settings-modal .modal-header {
  padding: 13px 18px;
}
#settings-modal .modal-body {
  padding: 12px 18px;
  gap: 12px;
}
#settings-modal .modal-footer {
  padding: 10px 18px;
}
#settings-modal .cfg-section {
  gap: 6px;
}
#settings-modal .cfg-sec-title {
  font-size: 10.5px;
  margin-bottom: 2px;
}
#settings-modal .cfg-row {
  padding: 6px 10px;
  gap: 12px;
}
#settings-modal .cfg-label {
  font-size: 12px;
}
#settings-modal .cfg-desc {
  font-size: 10.5px;
  line-height: 1.25;
}
#settings-modal .cfg-select {
  padding: 4px 8px;
  font-size: 11.5px;
}
#settings-modal .cfg-profile-card {
  padding: 8px 10px;
}
#settings-modal .cfg-profile-card img {
  width: 36px; height: 36px; border-radius: 8px;
}
#settings-modal .cfg-pname {
  font-size: 12.5px;
}
#settings-modal .cfg-prole {
  font-size: 10.5px;
}
.cfg-input-group {
  display:flex;flex-direction:column;gap:3px;
  padding:6px 9px;border-radius:8px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
}
body.light .cfg-input-group {
  background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.06);
}

/* ══════════════════════════════════════════
   ADMIN PANEL STYLES
══════════════════════════════════════════ */
.admin-tab:hover {
  color:var(--c-text1) !important;
}
.admin-tab.active {
  color:var(--c-accent) !important;
  border-bottom-color:var(--c-accent) !important;
}
.admin-client-card {
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-radius:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  transition:all 0.2s ease;gap:10px;
  margin-bottom:6px;
}
body.light .admin-client-card {
  background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.08);
}
.admin-client-card:hover {
  background:rgba(255,255,255,0.06);
  border-color:rgba(10,132,255,0.3);
}
body.light .admin-client-card:hover {
  background:rgba(0,0,0,0.05);
}
.ac-info-wrap {
  display:flex;align-items:center;gap:10px;
}
.ac-info-wrap img, .ac-avatar-trigger {
  width:30px;height:30px;border-radius:8px;object-fit:cover;flex-shrink:0;
  cursor:pointer;border:1px solid rgba(255,255,255,0.15);
  transition:transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.ac-info-wrap img:hover, .ac-avatar-trigger:hover {
  transform:scale(1.18);
  box-shadow:0 4px 14px rgba(10,132,255,0.45);
  border-color:var(--c-accent);
}
.ac-details {
  display:flex;flex-direction:column;gap:2px;
}
.ac-cname {
  font-size:13.5px;font-weight:700;color:var(--c-text1);
}
.ac-crole {
  font-size:11px;color:var(--c-text2);
}
.ac-cloc {
  font-size:10.5px;color:var(--c-text3);
}
.ac-status-badge {
  display:inline-block;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap;margin-top:4px;
}
.ac-actions {
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;
}

/* ══════════════════════════════════════════
   ADVANCED DIRECTORY VIEW STYLES
══════════════════════════════════════════ */
.adv-pill {
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  color:var(--c-text2);padding:6px 14px;border-radius:24px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;gap:6px;
}
body.light .adv-pill {
  background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.08);
}
.adv-pill:hover {
  background:rgba(255,255,255,0.1);color:var(--c-text1);
}
.adv-pill.active {
  background:var(--c-accent);border-color:var(--c-accent);color:#fff !important;
  box-shadow:0 2px 10px rgba(10,132,255,0.35);
}
.adv-pill-badge {
  background:rgba(0,0,0,0.25);padding:1px 7px;border-radius:12px;font-size:10px;font-weight:700;
}
.adv-v-toggle.active {
  background:rgba(10,132,255,0.2) !important;
  color:#0a84ff !important;
}

/* Table High-Density Layout */
.adv-table-wrap {
  width:100%;overflow-x:auto;border-radius:16px;
  border:1px solid var(--g-border);background:rgba(0,0,0,0.18);
}
body.light .adv-table-wrap {
  background:rgba(255,255,255,0.8);
}
.adv-table {
  width:100%;border-collapse:collapse;text-align:left;font-size:13px;
}
.adv-table th {
  background:rgba(255,255,255,0.05);color:var(--c-text3);font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  padding:12px 16px;border-bottom:1px solid var(--g-border);position:sticky;top:0;z-index:2;
}
body.light .adv-table th {
  background:rgba(0,0,0,0.04);
}
.adv-table td {
  padding:6px 12px;border-bottom:1px solid rgba(255,255,255,0.04);
  vertical-align:middle;color:var(--c-text1);font-size:12px;
}
.adv-table td .ac-photo-trigger {
  width:26px;height:26px;border-radius:6px;border:1px solid rgba(255,255,255,0.2);
}
body.light .adv-table td {
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.adv-table tr:hover {
  background:rgba(255,255,255,0.06);
}
body.light .adv-table tr:hover {
  background:rgba(0,0,0,0.03);
}

/* Grid Layout */
.adv-grid {
  display:grid;grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));gap:14px;
}

/* ══ Herramientas Bloqueadas — Verificación Institucional ══════════════════ */
/* Icono de candado en botones de topbar */
.tool-lock-icon {
  opacity:.55;
  color: currentColor;
  margin-left: 2px;
  transition: opacity 0.18s, transform 0.18s;
}
.tb-tool-locked:hover .tool-lock-icon {
  opacity:.85;
  transform: scale(1.15) rotate(-8deg);
}

/* Botón topbar bloqueado: aspecto levemente diferenciado */
.tb-tool-locked {
  border-style: dashed !important;
  border-color: rgba(79, 142, 247, 0.25) !important;
}
.tb-tool-locked:hover {
  background: rgba(79, 142, 247, 0.12) !important;
  color: #4f8ef7 !important;
  border-color: rgba(79, 142, 247, 0.40) !important;
  box-shadow: 0 2px 12px rgba(79, 142, 247, 0.22) !important;
}

/* Icono de candado en sidebar nav */
.nav-lock-icon {
  margin-left: auto;
  opacity: .45;
  color: currentColor;
  flex-shrink: 0;
  transition: opacity 0.18s, transform 0.18s;
}
.nav-item-locked:hover .nav-lock-icon {
  opacity: .85;
  transform: scale(1.15) rotate(-8deg);
}

/* Nav item bloqueado */
.nav-item-locked {
  border-color: rgba(79, 142, 247, 0.18) !important;
  border-style: dashed !important;
}
.nav-item-locked:hover {
  color: #4f8ef7 !important;
  background: rgba(79, 142, 247, 0.08) !important;
  border-color: rgba(79, 142, 247, 0.28) !important;
}




/* ══════════════════════════════════════════════════════
   CALCULADORAS JURÍDICAS — Soft Premium (Neumorphic)
   ══════════════════════════════════════════════════════ */

/* ── Utilidades ── */
.hidden { display: none !important; }
.disabled-visuals { opacity: 0.45; pointer-events: none; filter: grayscale(0.3); }

/* ── Contenedor principal (Ultra Compacto & Premium) ── */
.jur-calc-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 12px;
  max-width: 900px;
  width: 100%;
}

.jur-panel { display: flex; flex-direction: column; gap: 8px; }
.jur-panel.hidden { display: none !important; }

/* ── Barra de tabs (Sleek Segmented Controller) ── */
.jur-tab-bar {
  display: inline-flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
  margin-bottom: 4px;
}
body.light .jur-tab-bar {
  background: rgba(15, 44, 82, 0.05);
  border: 1px solid rgba(15, 44, 82, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.jur-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--c-text2);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  height: 32px;
}
.jur-tab:hover {
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.06);
}
body.light .jur-tab:hover {
  background: rgba(0, 0, 0, 0.04);
}
.jur-tab.active {
  background: linear-gradient(135deg, var(--c-accent), #0056b3);
  color: #fff;
  box-shadow: 0 3px 10px rgba(10, 132, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ── Info toggle (Compact Elegant Glass Banner) ── */
.jur-info-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9px;
  border: 1px solid rgba(10, 132, 255, 0.22);
  background: rgba(10, 132, 255, 0.06);
  color: var(--c-accent);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.jur-info-btn:hover, .jur-info-btn.active {
  background: rgba(10, 132, 255, 0.14);
  border-color: var(--c-accent);
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.15);
}
.jur-info-body {
  margin-top: 6px;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--g-border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--c-text2);
  line-height: 1.45;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.03);
  animation: jur-fadein 0.2s var(--smooth);
}

/* ── Tarjeta de paso (Ultra-Compact Premium Glassmorphic Card) ── */
.jur-section {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--g-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s var(--smooth), box-shadow 0.2s var(--smooth);
}
body.light .jur-section {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 44, 82, 0.1);
  box-shadow: 0 4px 14px rgba(15, 44, 82, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.jur-section:hover {
  border-color: rgba(10, 132, 255, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.light .jur-section:hover {
  border-color: rgba(10, 132, 255, 0.35);
  box-shadow: 0 6px 18px rgba(15, 44, 82, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Cabecera del paso (Compacta & Fina) */
.jur-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--g-border);
  background: rgba(0, 0, 0, 0.06);
}
body.light .jur-step-header {
  background: rgba(15, 44, 82, 0.03);
}
.jur-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--c-accent), #0056b3);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(10, 132, 255, 0.3);
}
.jur-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Cuerpo del paso (Reducción dramática de altura) */
.jur-step-body {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jur-sub-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-text2);
  margin: 2px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Layout de formulario (Compacto) ── */
.jur-main { display: flex; flex-direction: column; gap: 8px; }
.jur-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jur-form-group { display: flex; flex-direction: column; gap: 4px; }
.jur-form-group label {
  font-size: 11.5px;
  color: var(--c-text2);
  font-weight: 600;
  padding-left: 2px;
}

/* ── Inputs Refinados & Compactos (Elegantes, tactiles, 34px de altura) ── */
.jur-section input.g-input, 
.jur-section select.g-input {
  border-radius: 7px !important;
  padding: 5px 10px !important;
  height: 33px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
  transition: all 0.2s ease !important;
}
body.light .jur-section input.g-input, 
body.light .jur-section select.g-input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.jur-section input.g-input:focus, 
.jur-section select.g-input:focus {
  background: rgba(0, 0, 0, 0.14) !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.22), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
body.light .jur-section input.g-input:focus, 
body.light .jur-section select.g-input:focus {
  background: #ffffff !important;
}

/* ── Display de valores (mini cards compactas) ── */
.jur-pena-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.jur-pena-card {
  background: rgba(10, 132, 255, 0.05);
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 9px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.02);
}
.jur-pena-card label {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text2);
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.jur-display-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-accent);
}

/* ── Botón primario de cálculo (Compacto, Tactil, Premium) ── */
.jur-calc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 7px 18px;
  height: 35px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--c-accent), #0056b3);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 3px 10px rgba(10, 132, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.jur-calc-btn:hover {
  background: linear-gradient(135deg, #2b93ff, #0066cc);
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.jur-calc-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(10, 132, 255, 0.25);
}

/* ── Botón secundario compacto (Opciones Avanzadas) ── */
.jur-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 14px;
  height: 31px;
  border-radius: 7px;
  border: 1px solid var(--g-border);
  background: var(--card-bg);
  color: var(--c-text);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.jur-secondary-btn:hover {
  background: var(--g-hover);
  border-color: rgba(10, 132, 255, 0.35);
  color: var(--c-accent);
}
.jur-secondary-btn.active {
  background: rgba(10, 132, 255, 0.08);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* ── Botones seleccionables compactos ── */
.jur-btn-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.jur-selectable {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid var(--g-border);
  background: var(--card-bg);
  color: var(--c-text2);
  font-size: 12.5px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}
.jur-selectable::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--c-text3);
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: transparent;
}
.jur-selectable:hover {
  background: var(--g-hover);
  color: var(--c-text);
  border-color: rgba(10, 132, 255, 0.25);
}
.jur-selectable.selected {
  background: rgba(10, 132, 255, 0.08);
  color: var(--c-text);
  border-color: var(--c-accent);
}
.jur-selectable.selected::before {
  border-color: var(--c-accent);
  border-width: 4px;
}

/* ── Resultado de módulo (Compacto) ── */
.jur-result {
  margin-top: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.1), rgba(10, 132, 255, 0.03));
  border: 1px solid rgba(10, 132, 255, 0.28);
  border-radius: 10px;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.45;
  box-shadow: inset 0 1px 4px rgba(255,255,255,0.1);
  animation: jur-fadein 0.25s var(--smooth);
}
.jur-result h4 {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.jur-result p { margin: 3px 0; }
.jur-result strong { color: var(--c-accent); }

/* ── Submodule (colapsable) ── */
.jur-submodule {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  animation: jur-fadein 0.2s var(--smooth);
}
body.light .jur-submodule {
  background: rgba(15, 44, 82, 0.025);
  border: 1px solid rgba(15, 44, 82, 0.06);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* ── Tablas compactas ── */
.jur-table, .rep-result-table, .rep-ref-table, .widmark-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 6px;
  font-size: 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--g-border);
}
.jur-table th, .rep-ref-table th, .widmark-table th {
  padding: 7px 10px;
  background: rgba(10, 132, 255, 0.12);
  color: var(--c-accent);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(10, 132, 255, 0.2);
  text-align: center;
}
.widmark-table th { background: rgba(255, 69, 58, 0.12); color: hsl(4,86%,58%); border-bottom-color: rgba(255, 69, 58, 0.2); }

.jur-table td, .rep-result-table td, .rep-ref-table td, .widmark-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--g-border);
  border-right: 1px solid var(--g-border);
  text-align: center;
  color: var(--c-text);
}
.jur-table td:last-child, .rep-result-table td:last-child, .rep-ref-table td:last-child, .widmark-table td:last-child {
  border-right: none;
}
.jur-table tr:last-child td, .rep-result-table tr:last-child td, .rep-ref-table tr:last-child td, .widmark-table tr:last-child td {
  border-bottom: none;
}
.jur-table tbody tr:hover { background: rgba(10, 132, 255, 0.05); }

/* Resaltado dinámico en tablas de resultados y períodos clínicos Widmark */
.jur-table tr.jur-table-highlight,
.widmark-table tr.jur-table-highlight,
tr.jur-table-highlight {
  background: rgba(255, 69, 58, 0.18) !important;
  border-left: 4px solid #ff453a !important;
  box-shadow: inset 0 0 12px rgba(255, 69, 58, 0.25);
  transition: all 0.3s ease;
}
tr.jur-table-highlight td {
  color: #ff453a !important;
  font-weight: 800 !important;
  border-color: rgba(255, 69, 58, 0.3) !important;
}

@keyframes jur-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .jur-form-row { grid-template-columns: 1fr; gap: 8px; }
  .jur-tab-bar { flex-wrap: wrap; width: 100%; }
  .jur-pena-display { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   STICKY NOTES BOARD (Pizarra de Notas & Recordatorios)
   ══════════════════════════════════════════════════════ */
.sticky-board-wrap {
  margin-top: 24px;
  padding-bottom: 40px;
}

/* Cabecera del tablero */
.sticky-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 1px solid var(--g-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.25);
}

.sticky-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sticky-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff9f0a, #ffd60a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1500;
  box-shadow: 0 4px 12px rgba(255,159,10,0.3);
  flex-shrink: 0;
}

.sticky-header-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--c-text);
  margin: 0;
  line-height: 1.2;
}

.sticky-header-sub {
  font-size: 12.5px;
  color: var(--c-text2);
  margin: 2px 0 0;
}

.sticky-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Selector de colores / Píldoras */
.sticky-color-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.04);
  padding: 6px 10px;
  border-radius: 20px;
  border: 1px solid var(--g-border);
}

body:not(.light) .sticky-color-picker {
  background: rgba(255,255,255,0.05);
}

.s-color-pill {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}

.s-color-pill:hover {
  transform: scale(1.25);
}

.s-color-pill.active {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px var(--c-text), 0 2px 8px rgba(0,0,0,0.3);
}

.s-color-pill.yellow   { background: #ffd43b; }
.s-color-pill.pink     { background: #ff87bd; }
.s-color-pill.cyan     { background: #22b8cf; }
.s-color-pill.mint     { background: #40c057; }
.s-color-pill.lavender { background: #845ef7; }
.s-color-pill.peach    { background: #ff922b; }

/* Botón Crear Nota */
.sticky-btn-create {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, var(--c-accent), hsl(211,100%,38%));
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(10,132,255,0.3);
  transition: all 0.2s var(--smooth);
}

.sticky-btn-create:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10,132,255,0.45);
}

.sticky-btn-create:active {
  transform: translateY(0);
}

/* Grid del tablero */
.sticky-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px 22px;
  align-items: start;
}

/* Tarjeta de Nota Adhesiva */
.sticky-note {
  position: relative;
  border-radius: 16px;
  padding: 22px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, z-index 0s;
  box-shadow: 0 10px 22px -6px rgba(0,0,0,0.12), 0 4px 8px -4px rgba(0,0,0,0.08);
  cursor: grab;
  user-select: none;
  animation: sticky-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sticky-note:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.025);
  box-shadow: 0 18px 36px -8px rgba(0,0,0,0.2), 0 8px 16px -6px rgba(0,0,0,0.12);
  z-index: 50;
}

.sticky-note:active {
  cursor: grabbing;
}

/* Cinta adhesiva (Tape Strip superior) */
.sticky-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--tape-rot, -1deg));
  width: 90px;
  height: 22px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
}

body:not(.light) .sticky-tape {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Temas de color de la nota (Light & Dark) */
.sticky-note.yellow {
  background: linear-gradient(145deg, #fffbc8, #fff099);
  border: 1px solid #ffe066;
  color: #3b3005;
}
.sticky-note.pink {
  background: linear-gradient(145deg, #fff0f6, #ffd6e7);
  border: 1px solid #fcc2d7;
  color: #50102b;
}
.sticky-note.cyan {
  background: linear-gradient(145deg, #e3fafc, #bfeef5);
  border: 1px solid #99e9f2;
  color: #0b4b51;
}
.sticky-note.mint {
  background: linear-gradient(145deg, #ebfbee, #cbf5d1);
  border: 1px solid #b2f2bb;
  color: #10441d;
}
.sticky-note.lavender {
  background: linear-gradient(145deg, #f3f0ff, #e2d6ff);
  border: 1px solid #d0bfff;
  color: #341d68;
}
.sticky-note.peach {
  background: linear-gradient(145deg, #fff4e6, #ffe0b2);
  border: 1px solid #ffd8a8;
  color: #592504;
}

/* Colores en Modo Oscuro (Glassmorphic Neón) */
body:not(.light) .sticky-note.yellow {
  background: linear-gradient(145deg, rgba(255,212,59,0.18), rgba(255,192,0,0.12));
  border-color: rgba(255,212,59,0.35);
  color: #ffec99;
}
body:not(.light) .sticky-note.pink {
  background: linear-gradient(145deg, rgba(255,135,189,0.18), rgba(240,62,130,0.12));
  border-color: rgba(255,135,189,0.35);
  color: #ffdeeb;
}
body:not(.light) .sticky-note.cyan {
  background: linear-gradient(145deg, rgba(34,184,207,0.18), rgba(12,133,153,0.12));
  border-color: rgba(34,184,207,0.35);
  color: #c5f6fa;
}
body:not(.light) .sticky-note.mint {
  background: linear-gradient(145deg, rgba(64,192,87,0.18), rgba(43,138,62,0.12));
  border-color: rgba(64,192,87,0.35);
  color: #d3f9d8;
}
body:not(.light) .sticky-note.lavender {
  background: linear-gradient(145deg, rgba(132,94,247,0.18), rgba(103,65,217,0.12));
  border-color: rgba(132,94,247,0.35);
  color: #e5dbff;
}
body:not(.light) .sticky-note.peach {
  background: linear-gradient(145deg, rgba(255,146,43,0.18), rgba(217,119,6,0.12));
  border-color: rgba(255,146,43,0.35);
  color: #ffe8cc;
}

/* Barra superior interna de la nota */
.sticky-note-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

.sticky-note-handle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: grab;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.sticky-note-handle:hover { opacity: 1; }

.sticky-note-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sticky-dot-color {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s;
  padding: 0;
}
.sticky-dot-color:hover {
  opacity: 1;
  transform: scale(1.2);
}

.sticky-btn-delete {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.2s;
  padding: 2px 5px;
  border-radius: 6px;
  line-height: 1;
}
.sticky-btn-delete:hover {
  opacity: 1;
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

/* Inputs de la nota */
.sticky-title-input {
  background: transparent;
  border: none;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  color: inherit;
  width: 100%;
  padding: 0;
  outline: none;
  user-select: text;
}
.sticky-title-input::placeholder {
  color: inherit;
  opacity: 0.5;
}

.sticky-body-textarea {
  background: transparent;
  border: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  width: 100%;
  min-height: 110px;
  resize: none;
  padding: 0;
  outline: none;
  line-height: 1.5;
  user-select: text;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sticky-body-textarea::placeholder {
  color: inherit;
  opacity: 0.5;
}

@keyframes sticky-pop {
  0% { opacity: 0; transform: scale(0.8) translateY(10px) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(var(--rot, 0deg)); }
}

@media (max-width: 600px) {
  .sticky-notes-grid { grid-template-columns: 1fr; }
  .sticky-board-header { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GEO UTM GEOVISOR — ESTILOS DE TEMA & ALTO CONTRASTE (CLARO / OSCURO)
   ═══════════════════════════════════════════════════════════════════════════ */
.geo-utm-layout {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 12px;
}

.geo-utm-inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 1350px) {
  .geo-utm-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .geo-utm-inner-grid {
    grid-template-columns: 1fr;
  }
}

.geo-utm-card {
  background: var(--c-card-bg, rgba(18, 26, 47, 0.65));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--c-border, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

.geo-utm-section-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text, #ffffff);
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.geo-utm-label {
  font-size: 11.5px;
  color: var(--c-text-sub, #94a3b8);
  font-weight: 600;
  display: block;
  margin-bottom: 3px;
}

.geo-utm-input,
.geo-utm-select {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  transition: all 0.2s ease;
}

.geo-utm-input:focus,
.geo-utm-select:focus {
  border-color: var(--c-accent, #0a84ff);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25);
  background: rgba(0, 0, 0, 0.5);
}

.geo-utm-results {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(48, 209, 88, 0.4);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.geo-utm-res-lbl {
  color: #94a3b8;
  font-size: 12px;
}

.geo-utm-res-val {
  font-family: monospace;
  font-weight: 700;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 12px;
}

.geo-utm-res-zone {
  color: #ffffff;
  font-weight: 700;
}

/* ── MODO CLARO (body.light) CONTRASTE Y LEGIBILIDAD ── */
body.light .geo-utm-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(203, 213, 225, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.light .geo-utm-section-title {
  color: #0f172a;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light .geo-utm-label {
  color: #334155;
}

body.light .geo-utm-input,
body.light .geo-utm-select {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.light .geo-utm-input:focus,
body.light .geo-utm-select:focus {
  background: #ffffff;
  border-color: #0a84ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
}

body.light .geo-utm-results {
  background: #f0fdf4;
  border: 1px solid #86efac;
}

body.light .geo-utm-res-lbl {
  color: #1e293b;
}

body.light .geo-utm-res-val {
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
}

body.light .geo-utm-res-zone {
  color: #15803d;
}

/* Ajustes de mapa Leaflet en modo claro */
#map-geovisor {
  height: 410px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
}

body.light .leaflet-control-layers,
body.light .leaflet-control-zoom {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

body.light .leaflet-control-layers label {
  color: #0f172a !important;
  font-weight: 500;
}

body.light #geo-utm-gmaps-btn {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

/* Chips interactivos de Departamentos */
.dept-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--c-text);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  user-select: none;
}

.dept-chip:hover {
  background: rgba(10, 132, 255, 0.25);
  border-color: #0a84ff;
  color: #ffffff;
  transform: translateY(-1px);
}

body.light .dept-chip {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

body.light .dept-chip:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
}

/* Botones de Proveedor de Mapa (Google Satélite, Google Callejero, Google Terreno, OpenStreetMap, Google Embed) */
.geo-map-provider-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--c-text);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.geo-map-provider-btn:hover {
  background: rgba(10, 132, 255, 0.2);
  border-color: #0a84ff;
  color: #0a84ff;
}

.geo-map-provider-btn.active {
  background: #0a84ff;
  border-color: #0a84ff;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.35);
}

body.light .geo-map-provider-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

body.light .geo-map-provider-btn:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
}

body.light .geo-map-provider-btn.active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}