/* Admin polish: depth, gradients, tabs, modals, switches */
.button{background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));box-shadow:0 1px 2px rgba(10,30,70,.25),0 4px 10px -2px rgba(6,77,135,.35);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.button:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 2px 4px rgba(10,30,70,.25),0 8px 16px -4px rgba(6,77,135,.45)}
.button:active{transform:translateY(0)}
.button.secondary{background-image:none;box-shadow:0 1px 2px rgba(10,30,70,.08);color:var(--primary-color,#064d87);background-color:#f0f6ff}
.button.secondary:hover{background-color:#e2edff;box-shadow:0 4px 10px -3px rgba(10,30,70,.2)}
.button.danger{background-image:none;box-shadow:0 1px 2px rgba(150,20,40,.1)}
.button.danger:hover{background-color:#ffe3e8;filter:none}
.panel.elevated{box-shadow:0 1px 2px rgba(16,37,75,.06),0 12px 28px -12px rgba(16,37,75,.18);border-radius:20px}
.sidebar{background:linear-gradient(180deg,#fff,#f3f7fd);box-shadow:4px 0 24px -16px rgba(16,37,75,.25)}
.sidebar nav a{transition:background .15s,transform .15s,color .15s}
.sidebar nav a:hover{background:var(--primary-color,#064d87);color:#fff;transform:translateX(3px)}
.topbar{box-shadow:0 2px 14px -6px rgba(16,37,75,.35)}

.tabs{display:flex;gap:6px;padding:6px;margin-bottom:22px;background:#e8eff9;border-radius:16px;width:fit-content;max-width:100%;flex-wrap:wrap;box-shadow:inset 0 1px 3px rgba(16,37,75,.12)}
.tab{border:0;background:transparent;padding:11px 20px;border-radius:12px;font-weight:700;font-size:14px;color:var(--muted);transition:all .18s}
.tab:hover{color:var(--primary-color,#064d87);background:rgba(255,255,255,.6)}
.tab.active{background:#fff;color:var(--primary-color,#064d87);box-shadow:0 2px 8px -2px rgba(16,37,75,.3)}
.tab .count{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;background:#dbe7fb;font-size:11px}
.tab.active .count{background:var(--primary-color,#064d87);color:#fff}
.tab-panel{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.panel-head,.role-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.panel-head h2,.role-head h3{margin-bottom:4px}.panel-head p,.role-head p{margin:0}
.panel-head-only{padding-bottom:7px}
.actions.end{justify-content:flex-end}
.data-table tbody tr{transition:background .15s}.data-table tbody tr:hover{background:#f5f9ff}
.data-table .right{text-align:right}.data-table .center{text-align:center}
.user-cell{display:flex;align-items:center;gap:12px}.user-cell small{margin:0}
.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color,#064d87),#3b82f6);color:#fff;font-weight:800;box-shadow:0 3px 8px -2px rgba(6,77,135,.5)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.ok{color:#06754f;background:#e7faf1}.status.off{color:#a3233f;background:#fff0f2}
.muted-badge{background:#f2f5f9;color:var(--muted);border-color:#e1e8f2}
.role-card{padding:24px}.role-head{border-bottom:1px solid var(--line);padding-bottom:16px}
.matrix th,.matrix td{padding:12px}
.form-foot{display:flex;justify-content:flex-end;margin-top:16px}

.switch{position:relative;display:inline-block;width:42px;height:24px;margin:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.slider{position:absolute;inset:0;background:#cbd7e8;border-radius:24px;transition:background .2s;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
.slider::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
.switch input:checked+.slider{background:var(--primary-color,#064d87)}
.switch input:checked+.slider::before{transform:translateX(18px)}
.switch input:disabled+.slider{opacity:.55}
.switch input:focus-visible+.slider{outline:3px solid #527fff;outline-offset:2px}

dialog.modal{border:0;padding:0;border-radius:20px;width:min(520px,92vw);box-shadow:0 30px 70px -10px rgba(10,25,60,.5);animation:pop .2s ease}
dialog.modal::backdrop{background:rgba(12,24,52,.55);backdrop-filter:blur(3px)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
.modal-body{padding:28px}.modal-body h2{margin-bottom:18px}
.modal-body .actions{margin-top:8px}

/* ===== Topbar & sidebar polish ===== */
.topbar{background:linear-gradient(115deg,var(--primary-color,#064d87),color-mix(in srgb,var(--primary-color,#064d87) 70%,#000));border-bottom:0;color:#fff;position:sticky;top:0;z-index:30}
.topbar .brand{color:#fff}.topbar .brand-sub{color:rgba(255,255,255,.7)}
.topbar .brand-mark{background:#fff;color:var(--primary-color,#064d87);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.topbar nav>a:not(.button),.topbar .quiet{color:rgba(255,255,255,.88);padding:8px 14px;border-radius:10px;font-weight:600;transition:background .15s,color .15s}
.topbar nav>a:not(.button):hover,.topbar .quiet:hover{background:rgba(255,255,255,.16);color:#fff}
.topbar .button{background:#fff;color:var(--primary-color,#064d87);box-shadow:0 4px 12px rgba(0,0,0,.2)}

/* Dropdown Menú en el Topbar (Árbol público) */
.top-nav{display:flex;align-items:center;gap:12px;font-weight:600}
.nav-item-dropdown{position:relative}
.dropdown-trigger{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.9);padding:8px 14px;border-radius:10px;transition:background .15s,color .15s}
.dropdown-trigger:hover{background:rgba(255,255,255,.16);color:#fff}
.nav-arrow{font-size:10px;opacity:.7;transition:transform .2s ease}
.nav-item-dropdown:hover .nav-arrow{transform:rotate(180deg)}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:210px;background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;padding:8px;box-shadow:0 15px 35px -5px rgba(15,23,42,.25),0 0 0 1px rgba(15,23,42,.05);z-index:100;animation:ddFade .18s ease}
@keyframes ddFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu,
.nav-item-dropdown.is-open .dropdown-menu{display:flex;flex-direction:column;gap:3px}
.dropdown-link{display:block;padding:9px 14px;border-radius:9px;color:#1e293b!important;font-size:13.5px;font-weight:600;transition:all .15s}
.dropdown-link:hover{background:#f0f6ff;color:var(--primary-color,#064d87)!important;transform:translateX(3px)}

/* ========================================================
   SIDEBAR CORPORATIVO ENTERPRISE CON COLAPSO & TOOLTIPS
   ======================================================== */
.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1)}
.workspace.sidebar-collapsed,
#appWorkspace.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)!important}

.sidebar{
  position:sticky;
  top:80px;
  align-self:start;
  min-height:calc(100vh - 80px);
  padding:20px 14px 28px;
  background:linear-gradient(180deg,#ffffff,#f4f8fd);
  border-right:1px solid #e1e9f4;
  box-shadow:4px 0 20px -15px rgba(16,37,75,.15);
  display:flex;
  flex-direction:column;
  transition:width .28s cubic-bezier(.4,0,.2,1),padding .28s;
  overflow:visible;
  z-index:25;
}

/* Header del Sidebar con semáforo y botón de colapso */
.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 8px 14px;
  margin-bottom:8px;
  border-bottom:1px solid #ebf1f8;
}
.sidebar-brand-mini{
  display:flex;
  align-items:center;
  gap:6px;
}
.mini-dots{display:inline-flex;gap:5px}
.mini-dots .dot{width:9px;height:9px;border-radius:50%}
.mini-dots .d-red{background:#ef4444}
.mini-dots .d-yellow{background:#f59e0b}
.mini-dots .d-green{background:#10b981}

.sidebar-toggle-btn{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid #cbd7e8;
  background:#f0f6ff;
  color:var(--primary-color,#064d87);
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  line-height:1;
  transition:all .2s ease;
  box-shadow:0 2px 6px rgba(16,37,75,.08);
  position:relative;
  z-index:30;
}
.sidebar-toggle-btn .toggle-icon{
  pointer-events:none;
}
.sidebar-toggle-btn:hover{
  background:var(--primary-color,#064d87);
  color:#fff;
  transform:scale(1.1);
  box-shadow:0 4px 10px rgba(6,77,135,.3);
}
.workspace.sidebar-collapsed .sidebar-toggle-btn .toggle-icon,
.sidebar.collapsed .sidebar-toggle-btn .toggle-icon{
  transform:rotate(180deg);
  display:inline-block;
}

/* Tarjeta de usuario */
.side-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #e1e9f4;
  border-radius:14px;
  box-shadow:0 3px 8px -3px rgba(16,37,75,.08);
  margin-bottom:16px;
  transition:all .2s;
}
.side-user h2{font-size:14px;font-weight:700;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .badge{background:var(--secondary-color,#eef5ff);color:var(--primary-color,#064d87);border-color:transparent;font-size:10.5px;padding:2px 8px}

/* Navegación y Grupos Sandwich / Acordeón */
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.sidebar-group{
  border-radius:12px;
  transition:background .15s;
}
.sidebar-group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 10px;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  color:#64748b;
  cursor:pointer;
  user-select:none;
  list-style:none;
  border-radius:8px;
  transition:color .15s,background .15s;
}
.sidebar-group-title::-webkit-details-marker{display:none}
.sidebar-group-title:hover{
  color:var(--primary-color,#064d87);
  background:rgba(238,245,255,.5);
}
.sidebar-group-title .grp-arrow{
  font-size:9px;
  transition:transform .2s ease;
  color:#94a3b8;
}
.sidebar-group[open] .sidebar-group-title .grp-arrow{
  transform:rotate(180deg);
}

.sidebar-group-links{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:4px;
}

/* Enlaces del Sidebar */
.sidebar nav a{
  display:flex;
  align-items:center;
  gap:12px;
  background:transparent;
  color:#273549;
  padding:9px 12px;
  border-radius:11px;
  font-weight:600;
  font-size:13.5px;
  border-left:3px solid transparent;
  position:relative;
  transition:all .18s ease;
}
.sidebar nav a .ico{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:9px;
  background:#edf4fc;
  font-size:16px;
  flex-shrink:0;
  transition:all .18s ease;
}
.sidebar nav a:hover{
  background:var(--secondary-color,#eef5ff);
  color:var(--primary-color,#064d87);
  transform:translateX(3px);
}
.sidebar nav a:hover .ico{
  background:#dbeafe;
  transform:scale(1.05);
}
.sidebar nav a.active{
  background:linear-gradient(90deg,var(--secondary-color,#eef5ff),#ffffff);
  color:var(--primary-color,#064d87);
  border-left-color:var(--primary-color,#064d87);
  box-shadow:0 3px 10px -4px rgba(16,37,75,.15);
  font-weight:700;
}
.sidebar nav a.active .ico{
  background:var(--primary-color,#064d87);
  color:#fff;
  box-shadow:0 3px 8px -2px rgba(6,77,135,.4);
}

/* Botón de logout en sidebar */
.side-logout{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  border-radius:11px;
  font-weight:700;
}
.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid #ebf1f8}
.sidebar-quote{font-size:11.5px;margin:10px 0 0;text-align:center;color:#64748b}

/* ========================================================
   ESTADO COLAPSADO DEL SIDEBAR (MINI-ICONS + FLOATING TOOLTIPS)
   ======================================================== */
.workspace.sidebar-collapsed .sidebar,
.sidebar.collapsed{
  width:76px!important;
  max-width:76px!important;
  padding:20px 8px 28px!important;
  align-items:center;
}
.workspace.sidebar-collapsed .sidebar-header,
.sidebar.collapsed .sidebar-header{
  width:100%;
  justify-content:center;
  padding:4px 0 14px;
}
.workspace.sidebar-collapsed .sidebar-brand-mini,
.sidebar.collapsed .sidebar-brand-mini{
  display:none;
}
.workspace.sidebar-collapsed .side-user,
.sidebar.collapsed .side-user{
  width:100%;
  padding:8px 4px;
  justify-content:center;
}
.workspace.sidebar-collapsed .side-user .user-details,
.sidebar.collapsed .side-user .user-details{
  display:none;
}
.workspace.sidebar-collapsed .sidebar-group-title,
.sidebar.collapsed .sidebar-group-title{
  display:none;
}
.workspace.sidebar-collapsed .sidebar-group,
.sidebar.collapsed .sidebar-group{
  width:100%;
}
.workspace.sidebar-collapsed .sidebar-group-links,
.sidebar.collapsed .sidebar-group-links{
  align-items:center;
}
.workspace.sidebar-collapsed .sidebar nav a,
.sidebar.collapsed nav a{
  justify-content:center;
  padding:8px 0;
  width:46px;
  height:46px;
  border-radius:12px;
  border-left:0;
  margin:0 auto;
}
.workspace.sidebar-collapsed .sidebar nav a.active,
.sidebar.collapsed nav a.active{
  border-left:0;
  box-shadow:0 0 0 2px var(--primary-color,#064d87);
}
.workspace.sidebar-collapsed .sidebar nav a .nav-label,
.sidebar.collapsed nav a .nav-label{
  display:none;
}
.workspace.sidebar-collapsed .sidebar-quote,
.sidebar.collapsed .sidebar-quote{
  display:none;
}
.workspace.sidebar-collapsed .side-logout .nav-label,
.sidebar.collapsed .side-logout .nav-label{
  display:none;
}
.workspace.sidebar-collapsed .side-logout,
.sidebar.collapsed .side-logout{
  width:46px;
  height:46px;
  padding:0;
  border-radius:12px;
  margin:0 auto;
}

/* Tooltip Flotante estilo Pill Azul (como 'Case Study' en Captura 2) */
.workspace.sidebar-collapsed [data-tooltip],
.sidebar.collapsed [data-tooltip]{
  position:relative;
}
.workspace.sidebar-collapsed [data-tooltip]::after,
.sidebar.collapsed [data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:calc(100% + 14px);
  top:50%;
  transform:translateY(-50%) scale(.9);
  background:var(--primary-color,#0066ff);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:7px 16px;
  border-radius:20px;
  white-space:nowrap;
  box-shadow:0 8px 20px -4px rgba(0,102,255,.45),0 2px 6px rgba(0,0,0,.1);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:all .18s cubic-bezier(.16,1,.3,1);
  z-index:999;
}
.workspace.sidebar-collapsed [data-tooltip]::before,
.sidebar.collapsed [data-tooltip]::before{
  content:"";
  position:absolute;
  left:calc(100% + 8px);
  top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;
  border-right-color:var(--primary-color,#0066ff);
  opacity:0;
  visibility:hidden;
  transition:all .18s cubic-bezier(.16,1,.3,1);
  z-index:999;
}
.workspace.sidebar-collapsed [data-tooltip]:hover::after,
.workspace.sidebar-collapsed [data-tooltip]:hover::before,
.sidebar.collapsed [data-tooltip]:hover::after,
.sidebar.collapsed [data-tooltip]:hover::before{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) scale(1);
}

.eyebrow{color:var(--primary-color,#064d87)}
a{color:var(--primary-color,#064d87)}
.button{background-color:var(--primary-color,#064d87)}
.notice{border-left:4px solid #10b981;box-shadow:0 6px 16px -10px rgba(6,117,79,.5)}
.section-heading h1{letter-spacing:-.03em}
input,select,textarea{transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary-color,#064d87);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary-color,#064d87) 18%,transparent)}
.panel h3{margin-bottom:14px}
.table-scroll{border:1px solid var(--line);border-radius:16px}
.data-table th,.table-scroll table th{background:#f4f7fb}
.data-table tr:last-child td,.table-scroll tr:last-child td{border-bottom:0}
.stats .panel{box-shadow:0 8px 20px -12px rgba(16,37,75,.3);transition:transform .15s}.stats .panel:hover{transform:translateY(-3px)}

/* ===== Marca blanca ===== */
.wl-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.wl-main{min-width:0}
.wl-preview{position:sticky;top:106px}
.lbl{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:14px 0 22px}
.preset{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);background:#fff;border-radius:12px;font-weight:600;font-size:13px;color:var(--ink);transition:all .15s}
.preset:hover{transform:translateY(-2px);border-color:var(--primary-color,#064d87);box-shadow:0 8px 16px -8px rgba(16,37,75,.35)}
.preset-sw{display:flex;border-radius:50%;overflow:hidden;width:26px;height:26px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}.preset-sw i{flex:1}
.color-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.color-ctl{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:14px;background:#f9fbfe}
.color-ctl input[type=color]{width:56px;height:46px;padding:3px;margin:0;border-radius:10px;cursor:pointer;flex:none;background:#fff}
.color-ctl input.hex{margin:0;font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;border:0;background:transparent;box-shadow:none}
.color-field small{display:block;margin-top:6px}
.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.asset-box{display:grid;place-items:center;height:110px;margin-bottom:10px;border:2px dashed #c8d9ef;border-radius:14px;background:repeating-conic-gradient(#f3f6fb 0 25%,#fff 0 50%) 0 0/16px 16px}
.asset-box img{max-height:80px;max-width:80%}.asset-box img.fav{max-height:40px}
.asset input[type=file]{padding:9px;background:#fff}
.asset input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:8px;padding:8px 14px;background:var(--primary-color,#064d87);color:#fff;font-weight:700;cursor:pointer}
.asset .checkbox{margin-top:10px}
.form-foot.left{justify-content:flex-start}
.mock{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(16,37,75,.4);margin:12px 0}
.mock-top{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--primary-color);color:#fff;font-size:13px}
.mock-logo{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#fff;color:var(--primary-color);font-weight:800;font-size:13px}
.mock-body{display:flex;min-height:130px;background:#fff}
.mock-side{width:56px;padding:10px 8px;background:var(--secondary-color);display:flex;flex-direction:column;gap:8px}
.mock-side i{height:10px;border-radius:5px;background:rgba(0,0,0,.12)}.mock-side i.on{background:var(--primary-color)}
.mock-content{flex:1;padding:12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mock-card{width:100%;height:34px;border-radius:8px;background:var(--secondary-color)}
.mock-btn{padding:6px 14px;border-radius:8px;background:var(--primary-color);color:#fff;font-size:12px;font-weight:700}
.mock-chip{padding:3px 10px;border-radius:12px;background:var(--secondary-color);color:var(--primary-color);font-size:11px;font-weight:700}
@media(max-width:1000px){.wl-layout{grid-template-columns:1fr}.wl-preview{position:static}.color-row,.asset-grid{grid-template-columns:1fr}.sidebar{position:static;min-height:0}}

/* ===== Contadores ===== */
.stats.stats-5{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(16,37,75,.06),0 12px 28px -14px rgba(16,37,75,.25)}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--secondary-color,#eef5ff);z-index:0}
.stat>*{position:relative;z-index:1}
.stat-ico{position:absolute!important;right:16px;top:14px;font-size:22px}
.stat strong{color:var(--primary-color,#064d87)}
.stat .stat-text{font-size:17px;line-height:1.3;margin:6px 0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat small{display:block}
.metric{display:inline-block;padding:4px 12px;border-radius:20px;background:var(--secondary-color,#eef5ff);color:var(--primary-color,#064d87);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.metric.dl{background:#e7faf1;color:#06754f}
@media(max-width:1100px){.stats.stats-5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Categorías ===== */
.categories-list{display:flex;flex-direction:column;gap:14px}
.category-card{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;border-radius:18px;transition:transform .18s ease,box-shadow .18s ease}
.category-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(16,37,75,.08),0 16px 32px -12px rgba(16,37,75,.16)}
.category-info{flex:1;min-width:0}
.category-top{margin-bottom:8px}
.category-badge{font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;background:var(--secondary-color,#eef5ff);color:var(--primary-color,#064d87);border:1px solid transparent}
.category-title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink,#10243e)}
.category-desc{margin:0;color:var(--muted,#5f748d);font-size:14px;line-height:1.5}
.category-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.category-actions form{margin:0}
@media(max-width:680px){
  .category-card{flex-direction:column;align-items:flex-start;gap:16px;padding:18px 20px}
  .category-actions{width:100%;justify-content:flex-end}
}

/* Monogramas e íconos de categorías */
.category-tile .category-monogram{display:inline-grid;place-items:center;min-width:64px;height:64px;font-size:38px;line-height:1;font-family:Georgia,serif;color:var(--primary-color,#064d87);background:#fff;border-radius:16px;box-shadow:0 3px 10px rgba(16,37,75,.08);transition:transform .2s ease}
.category-tile:hover .category-monogram{transform:scale(1.1) rotate(4deg)}
.icon-quick-picker button{padding:6px 10px;font-size:16px;line-height:1;border-radius:10px}
.icon-quick-picker button:hover{transform:translateY(-1px);background:#dbeafe}


/* ===== Lector Zen & Pantalla Completa ===== */
body.reader-lock-scroll{overflow:hidden!important}
.reader-panel{position:relative}
.reader-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.reader-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reader-device-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;background:var(--secondary-color,#eef5ff);color:var(--primary-color,#064d87);border:1px solid rgba(6,77,135,.15);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.reader-btn{background:var(--primary-color,#064d87);box-shadow:0 2px 6px rgba(6,77,135,.28);display:inline-flex;align-items:center;gap:6px}
.reader-btn:hover{filter:brightness(1.1)}
.reader-container{position:relative;border-radius:18px;overflow:hidden;background:#1e293b;box-shadow:0 6px 24px rgba(16,37,75,.14);border:1px solid var(--line);transition:all .25s ease}
.reader-container .reader{display:block;border:0;width:100%;height:80vh;min-height:560px;background:#2d3748}

/* Barra superior del modo Zen / Pantalla Completa */
.reader-zen-bar{display:none;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:linear-gradient(90deg,#0f172a,#1e293b);color:#fff;border-bottom:1px solid rgba(255,255,255,.12);z-index:20}
.zen-info{display:flex;align-items:center;gap:12px;min-width:0}
.zen-icon{font-size:20px}
.zen-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw;color:#fff}
.zen-badge{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.25)}
.zen-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.zen-btn-close{background:#e11d48!important;color:#fff!important;border:0;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:700;box-shadow:0 2px 8px rgba(225,29,72,.35)}
.zen-btn-close:hover{background:#be123c!important;transform:translateY(-1px)}

/* Estados de Maximizado y Fullscreen Nativo */
.reader-container.is-maximized,
.reader-container:fullscreen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  max-width:100vw!important;
  max-height:100vh!important;
  margin:0!important;
  border-radius:0!important;
  border:0!important;
  z-index:999999!important;
  display:flex!important;
  flex-direction:column!important;
  background:#0f172a!important;
}
.reader-container.is-maximized .reader-zen-bar,
.reader-container:fullscreen .reader-zen-bar{
  display:flex!important;
}
.reader-container.is-maximized .reader,
.reader-container:fullscreen .reader{
  flex:1!important;
  height:calc(100vh - 56px)!important;
  min-height:0!important;
  border-radius:0!important;
}

@media(max-width:768px){
  .reader-header{flex-direction:column;align-items:stretch;gap:14px}
  .reader-toolbar{justify-content:space-between;width:100%}
  .reader-container .reader{height:72vh;min-height:420px}
  .zen-title{max-width:38vw;font-size:12px}
  .zen-actions .button{padding:6px 10px;font-size:11px}
}

/* ===== Modal de Derechos de Autor ===== */
.copyright-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:700;color:var(--primary-color,#064d87);background:#edf4fc;border:1px solid #d3e2f5;padding:5px 12px;border-radius:16px;cursor:pointer;text-decoration:none;transition:all .18s ease;box-shadow:0 1px 2px rgba(10,30,70,.05)}
.copyright-link:hover{background:#e1eeff;border-color:#b9d4f6;transform:translateY(-1px);box-shadow:0 3px 8px -2px rgba(10,30,70,.12);color:#033671}

dialog.modal.copyright-modal{
  width:min(660px,94vw);
  border:0;
  border-radius:24px;
  padding:0;
  background:#fff;
  box-shadow:0 25px 60px -12px rgba(15,23,42,.42),0 0 0 1px rgba(15,23,42,.08);
  overflow:hidden;
  animation:modalPop .24s cubic-bezier(.16,1,.3,1);
}
dialog.modal.copyright-modal::backdrop{
  background:rgba(15,23,42,.65);
  backdrop-filter:blur(6px);
}
@keyframes modalPop{
  from{opacity:0;transform:scale(.95) translateY(12px)}
  to{opacity:1;transform:none}
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 26px;
  background:linear-gradient(135deg,#f8fafc,#f1f5f9);
  border-bottom:1px solid #e2e8f0;
}
.modal-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}
.modal-badge-ico{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:#fff;
  font-size:20px;
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.modal-header h3{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.02em;
}
.modal-close-btn{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  border:0;
  background:#e2e8f0;
  color:#475569;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
}
.modal-close-btn:hover{
  background:#cbd5e1;
  color:#0f172a;
  transform:scale(1.08);
}
.copyright-body{
  padding:24px 26px;
  color:#334155;
  font-size:14.5px;
  line-height:1.7;
  max-height:68vh;
  overflow-y:auto;
}
.copyright-body p{
  margin:0 0 14px;
}
.copyright-body p:last-child{
  margin-bottom:0;
}
.copyright-note{
  background:#f8fafc;
  border-left:4px solid var(--primary-color,#064d87);
  padding:14px 18px;
  border-radius:0 12px 12px 0;
  margin-top:16px;
  font-size:13.5px;
  color:#475569;
  box-shadow:0 1px 3px rgba(0,0,0,.02);
}
.modal-footer{
  display:flex;
  justify-content:flex-end;
  padding:16px 26px 20px;
  border-top:1px solid #f1f5f9;
  background:#f8fafc;
}

/* ========================================================
   GESTOR DE MENÚS ESTILO WORDPRESS (TREE HIERARCHY BUILDER)
   ======================================================== */
.menu-editor-grid{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.menu-add-sidebar{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.menu-accordion{
  padding:0;
  overflow:hidden;
}
.menu-accordion-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:#f8fafc;
  cursor:pointer;
  user-select:none;
  list-style:none;
  border-bottom:1px solid #e2e8f0;
}
.menu-accordion-header::-webkit-details-marker{display:none}
.menu-accordion-header strong{font-size:14px;color:#1e293b}
.menu-accordion-header .chevron{font-size:11px;color:#64748b;transition:transform .2s}
.menu-accordion[open] .menu-accordion-header .chevron{transform:rotate(180deg)}
.menu-accordion-body{
  padding:16px 20px 20px;
}
.check-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.check-list.scroll-list{
  max-height:220px;
  overflow-y:auto;
  padding-right:6px;
}
.check-item{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:13px;
  cursor:pointer;
  font-weight:500;
  color:#334155;
}
.check-item input{
  width:auto;
  margin:0;
  cursor:pointer;
}

/* Panel de Estructura de Menú */
.menu-structure-panel{
  min-width:0;
}
.menu-items-tree{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
}
.menu-node{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.menu-item-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  background:#ffffff;
  border:1px solid #cbd5e1;
  border-radius:12px;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
  transition:all .18s ease;
}
.menu-item-card:hover{
  border-color:#94a3b8;
  box-shadow:0 4px 12px -2px rgba(15,23,42,.12);
}
.menu-item-grip{
  cursor:grab;
  color:#94a3b8;
  font-size:16px;
  user-select:none;
}
.menu-item-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.menu-item-title{
  font-size:14px;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.menu-item-url{
  font-size:11.5px;
  color:#64748b;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.menu-item-badge{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.menu-item-badge .badge{
  font-size:11px;
  padding:3px 10px;
}
.menu-item-actions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.menu-item-actions form{
  margin:0;
}
.tree-btn{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  color:#475569;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
}
.tree-btn:hover{
  background:#e2e8f0;
  color:#0f172a;
}
.tree-btn.btn-delete:hover{
  background:#fee2e2;
  color:#b91c1c;
  border-color:#fca5a5;
}

/* Sub-items (hijos indentados con conector) */
.menu-sub-items{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-left:36px;
  position:relative;
}
.menu-sub-items::before{
  content:"";
  position:absolute;
  left:18px;
  top:0;
  bottom:16px;
  width:2px;
  background:#cbd5e1;
  border-radius:2px;
}
.menu-sub-item-card{
  background:#f8fafc;
  border-style:dashed;
  position:relative;
}
.menu-sub-item-card::before{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  width:16px;
  height:2px;
  background:#cbd5e1;
}

@media(max-width:960px){
  .menu-editor-grid{
    grid-template-columns:1fr;
  }
}

/* ========================================================
   ADMINISTRACIÓN DE BANNERS DEL HERO
   ======================================================== */
.banners-admin-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:14px;
}
.banner-admin-card{
  display:flex;
  align-items:center;
  gap:20px;
  padding:16px 20px;
  border-radius:16px;
  transition:all .18s ease;
  background:#fff;
}
.banner-admin-card:hover{
  border-color:#94a3b8;
  box-shadow:0 8px 24px -6px rgba(16,37,75,.12);
}
.banner-preview-box{
  width:140px;
  height:76px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
  display:grid;
  place-items:center;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
}
.banner-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
}
.banner-thumb-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:24px;
}
.banner-admin-info{
  flex:1;
  min-width:0;
}
.banner-badges-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.banner-title{
  font-size:16px;
  font-weight:700;
  margin:0 0 2px;
  color:#0f172a;
}
.banner-admin-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

/* Gradientes preconfigurados */
.gradient-corporate{background:linear-gradient(135deg,#0242a3,#1e3a8a);color:#fff}
.gradient-modern{background:linear-gradient(135deg,#f8fafc,#e2e8f0);color:#0f172a}
.gradient-ocean{background:linear-gradient(135deg,#0369a1,#0f766e);color:#fff}
.gradient-clean{background:#ffffff;border:1px solid #e2e8f0;color:#0f172a}

/* ========================================================
   CARRUSEL DEL HERO PÚBLICO (ENTERPRISE - 4s AUTO SLIDE)
   ======================================================== */
.hero-slider-container{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  margin-bottom:38px;
  box-shadow:0 20px 45px -10px rgba(15,35,75,.15);
  background:#f8fafc;
}
.hero-slides-track{
  position:relative;
  width:100%;
  min-height:480px;
}
.hero-slide{
  display:none;
  width:100%;
  height:100%;
  padding:50px 60px;
  box-sizing:border-box;
  animation:slideFade .45s cubic-bezier(.16,1,.3,1);
}
.hero-slide.active{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:40px;
}
@keyframes slideFade{
  from{opacity:0;transform:scale(.98)}
  to{opacity:1;transform:scale(1)}
}

/* Variantes de color del Hero */
.hero-gradient-corporate{
  background:linear-gradient(120deg,#0242a3,#0b2d64 60%,#1e3a8a);
  color:#fff;
}
.hero-gradient-corporate .hero-main-title{color:#ffffff}
.hero-gradient-corporate .hero-subtitle{color:#dbeafe}
.hero-gradient-corporate .hero-badge-pill{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.3)}
.hero-gradient-corporate .hero-action-btn{background:#ffffff!important;color:#0242a3!important}
.hero-gradient-corporate .hero-secondary-link{color:#93c5fd}
.hero-gradient-corporate .hero-note{color:#bfdbfe}

.hero-gradient-modern{
  background:linear-gradient(125deg,#fcfbf8,#f5efe6 50%,#ebdcd0);
  color:#1c1917;
}
.hero-gradient-modern .hero-main-title{color:#1c1917}
.hero-gradient-modern .hero-subtitle{color:#57534e}
.hero-gradient-modern .hero-badge-pill{background:#fed7aa;color:#9a3412}
.hero-gradient-modern .hero-action-btn{background:#1c1917!important;color:#ffffff!important}
.hero-gradient-modern .hero-secondary-link{color:#78350f}
.hero-gradient-modern .hero-note{color:#78716c}

.hero-gradient-ocean{
  background:linear-gradient(120deg,#0f766e,#0e7490 60%,#0369a1);
  color:#fff;
}
.hero-gradient-ocean .hero-main-title{color:#ffffff}
.hero-gradient-ocean .hero-subtitle{color:#ccfbf1}
.hero-gradient-ocean .hero-badge-pill{background:rgba(255,255,255,.2);color:#fff}
.hero-gradient-ocean .hero-action-btn{background:#ffffff!important;color:#0f766e!important}
.hero-gradient-ocean .hero-secondary-link{color:#a5f3fc}
.hero-gradient-ocean .hero-note{color:#99f6e4}

.hero-gradient-clean{
  background:#ffffff;
  border:1px solid #e2e8f0;
  color:#0f172a;
}
.hero-gradient-clean .hero-main-title{color:#0f172a}
.hero-gradient-clean .hero-subtitle{color:#475569}
.hero-gradient-clean .hero-badge-pill{background:#e0f2fe;color:#0369a1}
.hero-gradient-clean .hero-action-btn{background:#0242a3!important;color:#ffffff!important}
.hero-gradient-clean .hero-secondary-link{color:#0242a3}

/* Textos y contenido del slide */
.hero-badge-pill{
  display:inline-block;
  padding:4px 14px;
  border-radius:20px;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:12px;
}
.hero-main-title{
  font-size:clamp(32px,3.8vw,52px);
  font-weight:800;
  line-height:1.1;
  margin:0 0 16px;
  letter-spacing:-.025em;
}
.hero-subtitle{
  font-size:16px;
  line-height:1.55;
  margin:0 0 24px;
  max-width:560px;
}
.hero-actions-bar{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.hero-action-btn{
  font-size:15px;
  padding:12px 24px;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.hero-secondary-link{
  font-weight:700;
  font-size:14px;
}

/* Escenario Visual 3D de Libros (Captura 3) */
.hero-visual-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:360px;
}
.hero-books-shelf{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:24px;
  z-index:2;
  margin-bottom:12px;
}
.hero-custom-artwork{
  max-width:100%;
  display:flex;
  justify-content:center;
}
.hero-banner-img{
  max-width:100%;
  max-height:360px;
  border-radius:16px;
  object-fit:contain;
  box-shadow:0 18px 36px -10px rgba(0,0,0,.35);
  transition:transform .3s ease;
}
.hero-banner-img:hover{
  transform:scale(1.02);
}

/* Maqueta de libros 3D Editorial */
.hero-3d-book{
  position:relative;
  width:160px;
  height:240px;
  border-radius:4px 10px 10px 4px;
  box-shadow:12px 18px 25px rgba(0,0,0,.3),inset 8px 0 0 rgba(255,255,255,.2);
  transition:transform .25s ease;
  overflow:hidden;
}
.hero-3d-book:hover{
  transform:translateY(-8px) rotate(-1deg);
}
.hero-3d-book.book-left{
  width:175px;
  height:260px;
  z-index:2;
}
.hero-3d-book.book-right{
  width:150px;
  height:225px;
  z-index:1;
  margin-left:-15px;
}
.hero-3d-book.book-primary{
  width:190px;
  height:270px;
}
.hero-3d-book img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.book-cover-front{
  width:100%;
  height:100%;
  padding:20px 16px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
}
.book-cover-front.decor-teal{background:linear-gradient(135deg,#064e3b,#047857)}
.book-cover-front.decor-amber{background:linear-gradient(135deg,#1e3a8a,#2563eb)}
.book-tag{font-size:9px;font-weight:800;letter-spacing:1.5px;opacity:.85}
.book-name{font-size:20px;line-height:1.2;font-family:Georgia,serif}
.book-author{font-size:10px;opacity:.9}
.hero-stand-shelf{
  position:absolute;
  bottom:6px;
  left:10%;
  right:10%;
  height:12px;
  background:linear-gradient(180deg,#e2e8f0,#cbd5e1);
  border-radius:4px;
  box-shadow:0 8px 16px rgba(0,0,0,.12);
  z-index:1;
}

/* Controles de Navegación del Slider */
.hero-nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);
  color:#0f172a;
  font-size:24px;
  line-height:1;
  font-weight:700;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:all .18s ease;
  z-index:10;
}
.hero-nav-arrow:hover{
  background:#ffffff;
  color:#0242a3;
  transform:translateY(-50%) scale(1.1);
}
.hero-nav-arrow.arrow-prev{left:18px}
.hero-nav-arrow.arrow-next{right:18px}

.hero-pagination-dots{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:10;
}
.hero-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  background:transparent;
  cursor:pointer;
  padding:0;
  transition:all .22s ease;
}
.hero-dot.active{
  background:#ffffff;
  width:26px;
  border-radius:10px;
  border-color:#ffffff;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

@media(max-width:900px){
  .hero-slide.active{
    grid-template-columns:1fr;
    padding:36px 24px 48px;
  }
  .hero-visual-stage{
    min-height:260px;
  }
  .hero-nav-arrow{
    width:36px;
    height:36px;
    font-size:18px;
  }
}