:root {
    --bg: #ffffff;
    --text: #0b1220;         /* near-black navy */
    --muted: #5b6b86;        /* cool blue-gray */
    --border: #dbeafe;       /* light blue border */
    --soft: #eff6ff;         /* very light blue background */
    --cta: #2563eb;          /* tech blue */
    --ctaDark: #1e40af;      /* hover */
    --nav: #0f172a;          /* deep navy */
    --navText: #ffffff;
    --navMuted: #bfdbfe;
  }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.nav { position: sticky; top: 0; z-index: 50; background: rgba(15,23,42,.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(219,234,254,.35); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; gap: 12px; }
.brand { display:flex; align-items:center; gap: 10px; }
.brand img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); background: var(--soft); }
.brand-title { font-weight: 700; letter-spacing: -.02em; }
.brand-sub { font-size: 12px; color: var(--navMuted); margin-top: 2px; }
.navlinks { display:none; gap: 18px; font-size: 14px; color: var(--navMuted); }
.navlinks a:hover { color: var(--navText); text-decoration: none; }
.cta { display:inline-block; background: var(--cta); color: white; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 24px rgba(37,99,235,.28); }
.cta:hover { text-decoration:none; background: var(--ctaDark); opacity: 1; }
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav-user-badge{display:inline-flex;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid rgba(191,219,254,.22);background:rgba(255,255,255,.08);color:var(--navText);font-size:14px;font-weight:700;white-space:nowrap;}
.navlinks a{white-space:nowrap;}
@media (max-width: 899px){
  .nav-actions{flex-wrap:wrap;justify-content:flex-end;}
  .nav-actions .cta-ghost[href="/costos.html"]{display:inline-flex;}
}

.cta .ico{width:16px; height:16px; margin-right:8px; vertical-align:-3px; fill:currentColor;}
.cta span{display:inline-block;}
.cta-ghost{background: transparent; box-shadow:none; border: 1px solid rgba(191,219,254,.55); color: var(--navText);}
.cta-ghost:hover{background: rgba(191,219,254,.12); text-decoration:none; border-color: rgba(191,219,254,.75);}

@media (min-width: 900px) { .navlinks { display:flex; gap: 18px; font-size: 14px; color: var(--navMuted); } }
.hero { padding: 72px 0; border-bottom: 1px solid var(--border); background: radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.35), transparent 60%), linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); color: white; }
.h1 { font-size: 44px; line-height: 1.08; letter-spacing: -.03em; margin: 0; font-weight: 800; }
.claim { font-size: 20px; font-weight: 650; margin: 14px 0 0 0; }
.lead { font-size: 18px; color: var(--muted); margin: 14px 0 0 0; line-height: 1.6; }
.btnrow { display:flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn { display:inline-block; padding: 12px 16px; border-radius: 12px; font-weight: 650; font-size: 14px; }
.btn.secondary { border: 1px solid var(--border); background: white; }
.btn.secondary:hover { background: var(--soft); text-decoration:none; }
.pillars { display:grid; gap: 14px; margin-top: 34px; }
.card { border: 1px solid var(--border); border-radius: 18px; padding: 18px; background: white; }
.card.soft { background: var(--soft); }
.card h3 { margin: 0; font-size: 14px; }
.card p { margin: 10px 0 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (min-width: 780px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.section { padding: 56px 0; }
.section.alt { background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.h2 { font-size: 26px; margin: 0; letter-spacing: -.02em; }
.sub { margin: 10px 0 0 0; color: var(--muted); }
.grid { margin-top: 26px; display:grid; gap: 14px; }
@media (min-width: 780px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid.two { grid-template-columns: repeat(2, 1fr); } }
.module-card h3 { font-size: 18px; margin: 0; }
.module-card .meta { margin-top: 10px; font-size: 13px; color: var(--muted); }
.module-card .flow { margin-top: 14px; font-size: 12px; color: #64748b; }
.badge { display:inline-block; font-size: 12px; color: #0f172a; border: 1px solid var(--border); padding: 6px 10px; border-radius: 999px; background: white; }
.footer { border-top: 1px solid var(--border); padding: 40px 0; }
.kpi { display:grid; gap: 14px; margin-top: 18px; }
@media (min-width: 780px) { .kpi { grid-template-columns: repeat(3, 1fr); } }
.list { margin: 10px 0 0 0; padding-left: 18px; color: var(--muted); }
.list li { margin: 6px 0; }
.split { display:grid; gap: 18px; margin-top: 22px; }
@media (min-width: 780px) { .split { grid-template-columns: 1fr 1fr; } }
.input, .textarea, .select { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px; font-size: 14px; outline: none; }
.textarea { min-height: 130px; resize: vertical; }
.form { border: 1px solid var(--border); border-radius: 18px; padding: 18px; background: white; }
.label { font-size: 13px; font-weight: 650; display:block; margin-bottom: 8px; }
.note { font-size: 12px; color: #64748b; margin-top: 10px; }
.imgwrap { border: 1px solid var(--border); border-radius: 18px; background: white; padding: 10px; overflow: hidden; }
.imgwrap img { width: 100%; height: auto; display: block; border-radius: 12px; }
.caption { font-size: 12px; color: #64748b; margin-top: 10px; line-height: 1.4; }


/* --- Blue Tech theme overrides --- */
.hero .lead { color: rgba(255,255,255,.82); }
.hero .claim { color: rgba(255,255,255,.92); }
.hero .btn.secondary { border-color: rgba(219,234,254,.35); background: rgba(255,255,255,.06); color: white; }
.hero .btn.secondary:hover { background: rgba(255,255,255,.12); }
.badge { border-color: rgba(219,234,254,.65); }
.card { box-shadow: 0 14px 36px rgba(30,58,138,.08); border-color: rgba(219,234,254,.9); }
.card.soft { background: var(--soft); }
a { -webkit-tap-highlight-color: transparent; }


/* --- Synergy Product page enhancements (modal + reveal) --- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Subtle hover for clickable media */
.zoomable { cursor: zoom-in; transition: transform .25s ease, box-shadow .25s ease; }
.zoomable:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.22); }

/* Image modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, .72); display: none; align-items: center; justify-content: center; padding: 22px; z-index: 9999; }
.modal-overlay.open { display: flex; }
.modal-panel { position: relative; width: min(1100px, 96vw); max-height: 90vh; border-radius: 18px; overflow: hidden; background: rgba(15, 23, 42, .92); border: 1px solid rgba(59, 130, 246, .35); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.modal-toolbar { display:flex; align-items:center; justify-content: space-between; gap: 14px; padding: 12px 14px; color: white; background: linear-gradient(135deg, rgba(30,58,138,.85), rgba(15,23,42,.85)); border-bottom: 1px solid rgba(59,130,246,.25); }
.modal-title { font-weight: 750; font-size: 14px; letter-spacing: .01em; opacity: .95; }
.modal-actions { display:flex; gap: 8px; }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(191, 219, 254, .25); background: rgba(255,255,255,.06); color: white; cursor: pointer; }
.iconbtn:hover { background: rgba(255,255,255,.12); }
.modal-body { padding: 0; overflow: auto; max-height: calc(90vh - 54px); }
.modal-body img { width: 100%; height: auto; display:block; background: white; }

/* Product hero tweaks (keep it consistent with BlueTech palette) */
.product-hero { padding: 74px 0; border-bottom: 1px solid var(--border); background: radial-gradient(1100px 600px at 15% -10%, rgba(59,130,246,.42), transparent 60%), linear-gradient(135deg, #0b1220 0%, #1e3a8a 100%); color: white; }
.product-hero .lead { color: rgba(219,234,254,.85); max-width: 760px; }
.product-hero .kpi { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 18px; }
.product-hero .pill { border: 1px solid rgba(191,219,254,.25); background: rgba(255,255,255,.06); padding: 8px 10px; border-radius: 999px; font-size: 13px; font-weight: 650; color: rgba(219,234,254,.92); }
@media (min-width: 980px) {
  .product-hero-grid { display:grid; grid-template-columns: 1.25fr .75fr; gap: 18px; align-items: start; }
}


/* Synergy Tickets UI */
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:650;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);}
.status-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);}
.status-nuevo{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.10);}
.status-analisis{border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.10);}
.status-progreso{border-color:rgba(147,197,253,.35);background:rgba(147,197,253,.10);}
.status-esperando{border-color:rgba(251,191,36,.28);background:rgba(251,191,36,.08);}
.status-resuelto{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.08);}
.status-cerrado{border-color:rgba(148,163,184,.25);background:rgba(148,163,184,.07);}
.priority-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:650;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);}
.pr-baja{border-color:rgba(148,163,184,.25);background:rgba(148,163,184,.07);}
.pr-media{border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.10);}
.pr-alta{border-color:rgba(251,191,36,.28);background:rgba(251,191,36,.08);}
.pr-critica{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.08);}
.kpi{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.kpi .kpi-card{flex:1;min-width:180px;}
.kpi .kpi-num{font-size:26px;font-weight:800;margin-top:6px;}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;}



/* Wiki (árbol) */
.tree{list-style:none;margin:0;padding:0 0 0 28px;position:relative;}
.tree.tree-level-0{padding-left:0;margin-top:12px;}
.tree .tree{margin-top:6px;}
.tree-item{position:relative;margin:0;padding:0 0 8px 0;}
.tree-item::before{content:"";position:absolute;left:-18px;top:-10px;bottom:-8px;width:2px;background:linear-gradient(180deg,rgba(148,163,184,.50),rgba(148,163,184,.22));}
.tree-item:last-child::before{bottom:30px;}
.tree-item::after{content:"";position:absolute;left:-18px;top:25px;width:18px;height:2px;background:linear-gradient(90deg,rgba(148,163,184,.50),rgba(148,163,184,.22));}
.tree.tree-level-0>.tree-item::before,.tree.tree-level-0>.tree-item::after{display:none;}
.tree-children{position:relative;margin-left:0;padding-left:0;}
.tree-children::before{content:"";position:absolute;left:-18px;top:-10px;bottom:12px;width:2px;background:linear-gradient(180deg,rgba(191,219,254,.30),rgba(148,163,184,.18));}
.tree-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));box-shadow:0 10px 24px rgba(2,6,23,.08);}
.tree-title{font-weight:700;min-width:0;}
.tree-meta{font-size:12px;color:#64748b;padding:4px 10px;border-radius:999px;background:rgba(219,234,254,.55);border:1px solid rgba(191,219,254,.9);}
.tree-toggle,.tree-spacer{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;border-radius:10px;position:relative;}
.tree-toggle{border:1px solid rgba(191,219,254,.9);background:linear-gradient(180deg,#eff6ff,#dbeafe);cursor:pointer;box-shadow:0 8px 20px rgba(30,58,138,.10);}
.tree-toggle:hover{background:linear-gradient(180deg,#dbeafe,#bfdbfe);}
.tree-toggle::before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:rgba(148,163,184,.50);transform:translateY(-50%);}
.tree-toggle-box{width:16px;height:16px;border:1.5px solid #1e3a8a;border-radius:4px;background:#fff;display:block;position:relative;box-shadow:0 1px 0 rgba(255,255,255,.75) inset;}
.tree-toggle-h,.tree-toggle-v{position:absolute;left:50%;top:50%;background:#1e3a8a;border-radius:999px;transform:translate(-50%,-50%);}
.tree-toggle-h{width:9px;height:2px;}
.tree-toggle-v{width:2px;height:9px;transition:opacity .18s ease;}
.tree-item[data-expanded="true"]>.tree-row .tree-toggle-v{opacity:0;}
.tree-spacer{background:transparent;}
.tree-joiner::before{content:"";position:absolute;left:-14px;top:50%;width:14px;height:2px;background:rgba(148,163,184,.50);transform:translateY(-50%);}
.tree-toggle-label{white-space:nowrap;}
.tree-inline-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap;}
.tree-menu{position:relative;}
.tree-menu summary{list-style:none;}
.tree-menu summary::-webkit-details-marker{display:none;}
.tree-menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;border:1px solid rgba(191,219,254,.8);background:linear-gradient(180deg,#ffffff,#eff6ff);cursor:pointer;box-shadow:0 8px 20px rgba(30,58,138,.08);}
.tree-menu-trigger::before{content:"⋮";font-size:18px;line-height:1;color:#1e3a8a;}
.tree-menu[open] .tree-menu-trigger,.tree-menu-trigger:hover{background:linear-gradient(180deg,#dbeafe,#bfdbfe);}
.tree-menu-popover{position:absolute;right:0;top:44px;min-width:210px;padding:8px;border-radius:14px;border:1px solid rgba(191,219,254,.7);background:#fff;box-shadow:0 20px 45px rgba(15,23,42,.18);z-index:30;display:flex;flex-direction:column;gap:4px;}
.tree-menu-popover a,.tree-menu-popover .tree-menu-inline-action{display:flex;align-items:center;gap:8px;padding:10px 12px;border:none;background:transparent;border-radius:10px;text-decoration:none;color:#0f172a;font:inherit;cursor:pointer;text-align:left;}
.tree-menu-popover a:hover,.tree-menu-popover .tree-menu-inline-action:hover{background:rgba(219,234,254,.7);}
.tree-menu-popover .danger{color:#b91c1c;}
@media (max-width: 780px){
  .tree{padding-left:22px;}
  .tree-item::before,.tree-children::before{left:-12px;}
  .tree-item::after{left:-12px;width:12px;}
  .tree-toggle::before,.tree-joiner::before{left:-10px;width:10px;}
  .tree-row{flex-wrap:wrap;}
  .tree-title{flex:1 1 220px;}
}

/* Módulos: miniaturas de diagramas */

.module-card{ position:relative; overflow:hidden; }
.module-thumb{ position:relative; margin:-6px -6px 14px -6px; border-radius:16px; overflow:hidden; border:1px solid rgba(219,234,254,.95); background:linear-gradient(180deg, rgba(239,246,255,.96), rgba(219,234,254,.9)); }
.module-thumb img{ width:100%; height:180px; object-fit:cover; object-position:top center; display:block; }
.module-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,23,42,.42), rgba(15,23,42,.05) 46%, transparent 70%); pointer-events:none; }
.module-thumb-badge{ position:absolute; right:12px; bottom:12px; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; font-size:12px; font-weight:700; color:white; background:rgba(30,58,138,.92); border:1px solid rgba(191,219,254,.35); box-shadow:0 10px 24px rgba(15,23,42,.28); }
.module-card:hover .module-thumb img{ transform:scale(1.02); transition:transform .25s ease; }
.imgwrap .zoomable{ width:100%; height:auto; display:block; border-radius:12px; }


/* --- Module detail layout: texto izquierda, diagrama lateral fijo --- */
.split.module-split{display:flex !important; flex-wrap:nowrap; gap:22px; align-items:flex-start;}
.module-main,.module-aside{min-width:0;}
.module-main{flex:1 1 auto;}
.module-aside{flex:0 0 250px; width:250px; margin-left:auto;}
.module-aside .imgwrap{padding:10px; position:sticky; top:92px; width:100%; max-width:250px; margin-left:auto;}
.module-aside .imgwrap img{display:block; width:100%; max-width:230px; margin:0 auto; max-height:150px; object-fit:contain; object-position:center top; background:linear-gradient(180deg,#f8fbff,#eef4ff);}
.module-aside .caption{font-size:11px; text-align:center;}
@media (max-width: 899px) {
  .split.module-split{display:block !important;}
  .module-aside{width:auto; margin:0 0 16px 0;}
  .module-aside .imgwrap{position:static; max-width:220px; margin:0 auto 10px auto;}
  .module-aside .imgwrap img{max-width:200px; max-height:130px;}
}


.tree-row{position:relative;}
.tree-item.is-folder > .tree-row{border-color:rgba(59,130,246,.16);}
.tree-kind-icon{width:22px;height:22px;display:inline-block;flex:0 0 22px;position:relative;}
.tree-kind-icon.folder-icon::before{content:"";position:absolute;left:1px;top:5px;width:20px;height:14px;border-radius:4px 4px 5px 5px;background:linear-gradient(180deg,#fde68a,#fbbf24);box-shadow:inset 0 0 0 1px rgba(146,64,14,.18),0 4px 10px rgba(146,64,14,.12);}
.tree-kind-icon.folder-icon::after{content:"";position:absolute;left:3px;top:2px;width:10px;height:6px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#fef3c7,#fcd34d);box-shadow:inset 0 0 0 1px rgba(146,64,14,.15);}
.tree-item[data-expanded="true"] > .tree-row .tree-kind-icon.folder-icon::before{transform:perspective(40px) rotateX(0deg) translateY(1px);}
.tree-item[data-expanded="true"] > .tree-row .tree-kind-icon.folder-icon::after{top:1px;}
.tree-kind-icon.video-icon::before{content:"";position:absolute;left:2px;top:3px;width:18px;height:16px;border-radius:5px;background:linear-gradient(180deg,#dbeafe,#93c5fd);box-shadow:inset 0 0 0 1px rgba(30,64,175,.18),0 4px 10px rgba(30,64,175,.10);}
.tree-kind-icon.video-icon::after{content:"";position:absolute;left:9px;top:8px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid #1d4ed8;}
.tree-drag-handle{width:12px;height:20px;display:inline-block;flex:0 0 12px;opacity:.55;background-image:radial-gradient(#64748b 1.2px, transparent 1.2px);background-size:6px 6px;background-position:0 0;cursor:grab;}
.admin-tree .tree-row[data-draggable-node="true"], .admin-tree .tree-row[draggable="true"]{cursor:grab;}
.admin-tree .tree-row[draggable="true"]:active{cursor:grabbing;}
.admin-tree .tree-item.is-dragging > .tree-row{opacity:.55;border-style:dashed;}
.admin-tree .tree-item.drop-target > .tree-row{border-color:rgba(37,99,235,.45);box-shadow:0 0 0 3px rgba(59,130,246,.14),0 10px 24px rgba(2,6,23,.08);background:linear-gradient(180deg, rgba(219,234,254,.55), rgba(239,246,255,.82));}
.admin-tree .tree-item.drop-before > .tree-row::before,.admin-tree .tree-item.drop-after > .tree-row::after{content:"";position:absolute;left:16px;right:16px;height:3px;border-radius:999px;background:#2563eb;box-shadow:0 0 0 3px rgba(59,130,246,.12);}
.admin-tree .tree-item.drop-before > .tree-row::before{top:-7px;}
.admin-tree .tree-item.drop-after > .tree-row::after{bottom:-7px;}
.tree-root-drop{margin-top:10px;padding:12px 14px;border:1px dashed rgba(59,130,246,.38);border-radius:14px;background:rgba(239,246,255,.72);color:#1d4ed8;font-weight:700;text-align:center;transition:.18s ease;}
.tree-root-drop.is-active{background:rgba(191,219,254,.88);border-color:rgba(37,99,235,.55);box-shadow:0 0 0 3px rgba(59,130,246,.12);}


/* Tree style update failed to locate original block */



/* Video tree split preview */
.videos-shell-card{padding:18px 20px 20px;}
.videos-shell-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.video-explorer{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:18px;align-items:start;}
.video-explorer-wide{grid-template-columns:minmax(360px,1.05fr) minmax(420px,1.45fr);width:100%;}
.video-explorer .tree-panel{margin-top:0;}
.embedded-tree-panel{background:transparent;border:0;box-shadow:none;padding:0;min-width:0;}
.video-preview-panel{background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid rgba(191,219,254,.9);border-radius:22px;padding:18px;box-shadow:0 18px 35px rgba(2,6,23,.07);min-height:540px;position:sticky;top:96px;align-self:start;}
.embedded-preview-panel{position:sticky;top:96px;align-self:start;}
.video-preview-empty{display:flex;align-items:center;justify-content:center;min-height:420px;border:1px dashed rgba(59,130,246,.28);border-radius:18px;background:rgba(239,246,255,.55);padding:24px;text-align:center;color:#475569;font-weight:600;}
.video-preview-title{font-size:1.35rem;font-weight:850;line-height:1.2;color:#0f172a;margin:0 0 10px;}
.video-preview-meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.video-preview-pill{font-size:12px;font-weight:700;color:#1d4ed8;background:#dbeafe;border:1px solid #bfdbfe;padding:4px 10px;border-radius:999px;}
.video-preview-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:18px;background:#0f172a;box-shadow:0 14px 30px rgba(2,6,23,.18);}
.video-preview-link{display:inline-flex;align-items:center;justify-content:center;margin-top:14px;padding:10px 14px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 10px 22px rgba(37,99,235,.22);}
.video-preview-link:hover{filter:brightness(1.03);}
.video-preview-description{margin-top:14px;color:#334155;line-height:1.65;}
.tree-row.is-preview-active{border-color:rgba(37,99,235,.45);box-shadow:0 0 0 3px rgba(59,130,246,.14),0 12px 24px rgba(37,99,235,.12);background:linear-gradient(180deg,#eff6ff,#dbeafe);}
.tree-video-link{color:inherit;text-decoration:none;font-weight:inherit;}
.tree-video-link:hover{text-decoration:none;}
@media (max-width: 980px){
  .video-explorer,.video-explorer-wide{grid-template-columns:1fr;}
  .video-preview-panel,.embedded-preview-panel{position:static;min-height:unset;}
}



/* Landing diagrams like modules */
.landing-diagramas{padding:28px 0 8px;}
.landing-diagrama-item{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,420px);gap:24px;align-items:start;margin:0 0 28px;padding:22px;border:1px solid rgba(191,219,254,.9);border-radius:22px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 18px 35px rgba(2,6,23,.07);}
.landing-diagrama-texto h3{margin:0 0 10px;font-size:1.5rem;}
.landing-diagrama-texto p{margin:0 0 12px;color:#334155;}
.landing-diagrama-media{display:flex;justify-content:flex-end;}
.landing-diagrama-thumb{width:100%;max-width:380px;max-height:260px;object-fit:contain;border-radius:18px;border:1px solid rgba(191,219,254,.95);background:#fff;box-shadow:0 14px 28px rgba(2,6,23,.10);cursor:pointer;}
.landing-diagrama-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
@media (max-width: 920px){
  .landing-diagrama-item{grid-template-columns:1fr;}
  .landing-diagrama-media{justify-content:center;order:-1;}
  .landing-diagrama-thumb{max-width:100%;}
}



/* Home modules with visible diagrams */
.home-modulos-diagramas{padding:30px 0 10px;}
.home-modulos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.home-modulo-card{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) 220px;
  gap:16px;
  align-items:start;
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(191,219,254,.88);
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 18px 35px rgba(2,6,23,.07);
}
.home-modulo-card h3{margin:0 0 8px;font-size:1.25rem;}
.home-modulo-card p{margin:0 0 12px;color:#334155;line-height:1.55;}
.home-modulo-actions{display:flex;gap:10px;flex-wrap:wrap;}
.home-modulo-thumb-wrap{display:flex;justify-content:flex-end;}
.home-modulo-thumb{
  width:100%;
  max-width:220px;
  height:150px;
  object-fit:contain;
  background:#fff;
  border:1px solid rgba(191,219,254,.95);
  border-radius:16px;
  box-shadow:0 12px 24px rgba(2,6,23,.10);
  cursor:pointer;
}
@media (max-width: 980px){
  .home-modulos-grid{grid-template-columns:1fr;}
}
@media (max-width: 720px){
  .home-modulo-card{grid-template-columns:1fr;}
  .home-modulo-thumb-wrap{justify-content:center;order:-1;}
}



/* Modulos integrados with visible diagrams */
.modules-grid .module-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:16px;
  align-items:start;
}
.modules-grid .module-card .module-body{
  min-width:0;
}
.modules-grid .module-card .module-diagram{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}
.modules-grid .module-card .module-diagram img{
  width:100%;
  max-width:150px;
  height:100px;
  object-fit:contain;
  background:#fff;
  border:1px solid rgba(191,219,254,.95);
  border-radius:14px;
  box-shadow:0 10px 20px rgba(2,6,23,.08);
  cursor:pointer;
}
.modules-grid .module-card .module-diagram .module-diagram-btn{
  display:inline-flex;
  margin-top:8px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(191,219,254,.95);
  background:#fff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
@media (max-width: 860px){
  .modules-grid .module-card{
    grid-template-columns:1fr;
  }
  .modules-grid .module-card .module-diagram{
    justify-content:center;
  }
}



/* Home integrated modules same as modules section */
.modules-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.module-link{
  color:inherit;
  text-decoration:none;
  display:block;
}
.module-link:hover{
  text-decoration:none;
}
.modules-grid .module-card{
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:16px;
  align-items:start;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(191,219,254,.88);
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 18px 35px rgba(2,6,23,.07);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.modules-grid .module-link:hover .module-card{
  transform:translateY(-2px);
  box-shadow:0 20px 38px rgba(2,6,23,.11);
  border-color:rgba(96,165,250,.65);
}
.modules-grid .module-copy h3{
  margin:0 0 10px;
  font-size:1.05rem;
}
.modules-grid .module-copy p{
  margin:0 0 10px;
  color:#475569;
  line-height:1.5;
}
.modules-grid .module-diagram{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}
.modules-grid .module-diagram img{
  width:100%;
  max-width:150px;
  height:100px;
  object-fit:contain;
  background:#fff;
  border:1px solid rgba(191,219,254,.95);
  border-radius:14px;
  box-shadow:0 10px 20px rgba(2,6,23,.08);
  cursor:pointer;
}
@media (max-width: 1100px){
  .modules-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 760px){
  .modules-grid{
    grid-template-columns:1fr;
  }
  .modules-grid .module-card{
    grid-template-columns:1fr;
  }
  .modules-grid .module-diagram{
    justify-content:center;
  }
}



/* Home modules section same as /modulos/ */
.modules-grid-home{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.modules-grid-home .module-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.modules-grid-home .module-card{
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:16px;
  align-items:start;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(191,219,254,.88);
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 18px 35px rgba(2,6,23,.07);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.modules-grid-home .module-link:hover .module-card{
  transform:translateY(-2px);
  box-shadow:0 20px 38px rgba(2,6,23,.11);
  border-color:rgba(96,165,250,.65);
}
.modules-grid-home .module-copy h3{
  margin:0 0 10px;
  font-size:1.05rem;
}
.modules-grid-home .module-copy p{
  margin:0 0 10px;
  color:#475569;
  line-height:1.5;
}
.modules-grid-home .module-diagram{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}
.modules-grid-home .module-diagram img{
  width:100%;
  max-width:150px;
  height:100px;
  object-fit:contain;
  background:#fff;
  border:1px solid rgba(191,219,254,.95);
  border-radius:14px;
  box-shadow:0 10px 20px rgba(2,6,23,.08);
  cursor:pointer;
}
@media (max-width: 1100px){
  .modules-grid-home{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 760px){
  .modules-grid-home{
    grid-template-columns:1fr;
  }
  .modules-grid-home .module-card{
    grid-template-columns:1fr;
  }
  .modules-grid-home .module-diagram{
    justify-content:center;
  }
}


/* Home: módulos integrados calcado a /modulos/ */
.modules-equal-grid{
  margin-top:26px;
}
.modules-equal-grid > .module-card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:100%;
}
.modules-equal-grid > .module-card .list{
  margin-bottom:14px;
}
.modules-equal-grid > .module-card .flow{
  margin-top:auto;
}


/* Support portal aligned with main site */
.support-shell{background:linear-gradient(180deg,#f8fbff 0%,#ffffff 42%,#f8fbff 100%);}
.support-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:26px 28px;margin-bottom:18px;border-radius:24px;background:linear-gradient(135deg,rgba(239,246,255,.98),rgba(255,255,255,.98));border:1px solid rgba(191,219,254,.95);box-shadow:0 24px 46px rgba(2,6,23,.08);}
.support-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px;}
.support-title{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.08;}
.support-subtitle{margin:10px 0 0;color:#475569;max-width:860px;font-size:16px;line-height:1.65;}
.support-hero-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.support-flash{margin-bottom:16px;}
.support-content>.h1:first-child,.support-content>.lead:first-child{display:none;}
.support-content .card{box-shadow:0 16px 32px rgba(2,6,23,.06);}
.support-panel-title{margin:0 0 8px;font-size:22px;font-weight:850;color:#0f172a;}
.support-panel-lead{margin:0;color:#475569;line-height:1.65;}
.support-empty{padding:16px;color:#64748b;}
.support-table th{font-size:13px;color:#475569;text-transform:uppercase;letter-spacing:.04em;}
.support-table td,.support-table th{padding:12px 10px;}
@media (max-width: 780px){.support-hero{padding:22px 18px;}.support-hero-actions{width:100%;}.support-hero-actions .btn{flex:1 1 160px;justify-content:center;}}


.navlinks-visible{display:none;gap:18px;font-size:14px;color:var(--navMuted);}
.navlinks-visible a.is-active{color:var(--navText);font-weight:700;text-decoration:none;}
@media (min-width: 900px){.navlinks-visible{display:flex;}}


.manual-search-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;}
.manual-search-results{display:grid;gap:12px;}
.manual-search-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border:1px solid rgba(191,219,254,.85);border-radius:16px;background:linear-gradient(180deg,#ffffff,#f8fbff);}
@media (max-width: 780px){
  .manual-search-item{flex-direction:column;align-items:flex-start;}
}

.tree-item.is-search-hit>.tree-row{border-color:rgba(59,130,246,.45);box-shadow:0 10px 24px rgba(59,130,246,.10);}
.tree-item.is-search-hit>.tree-row .tree-title{color:#0f172a;font-weight:800;}


.nav-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:44px;height:44px;border:1px solid rgba(191,219,254,.35);background:transparent;border-radius:12px;color:var(--navText);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:currentColor;border-radius:999px}
.navlinks{display:flex;align-items:center;gap:10px;flex:1;justify-content:center}
.navlinks a{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;color:var(--navMuted);font-size:14px;font-weight:650;white-space:nowrap;transition:all .2s ease}
.navlinks a .ico{width:16px;height:16px;fill:currentColor;flex:0 0 16px}
.navlinks a:hover,.navlinks a.is-active{color:var(--navText);background:rgba(191,219,254,.14);text-decoration:none}
.navlinks a.is-active{box-shadow:inset 0 0 0 1px rgba(191,219,254,.35)}
@media (max-width: 899px){
  .nav-inner{flex-wrap:wrap}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .navlinks{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;justify-content:flex-start;padding-top:8px}
  .navlinks.is-open{display:flex}
  .navlinks a{width:100%;justify-content:flex-start}
  .nav-actions{width:100%;justify-content:flex-start}
}
@media (min-width: 900px){
  .nav-toggle{display:none}
}


/* Header simple con portal cliente */
.navlinks-simple{display:flex;align-items:center;gap:18px;justify-content:center;flex:1;}
.navlinks-simple a{display:inline-flex;align-items:center;padding:10px 0;border-radius:0;color:var(--navMuted);font-size:14px;font-weight:650;white-space:nowrap;transition:color .2s ease;}
.navlinks-simple a:hover{color:var(--navText);background:transparent;text-decoration:none;}
.nav-actions-simple{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.btn-portal{padding:10px 14px;border-radius:12px;}
@media (max-width: 899px){
  .nav-inner{flex-wrap:wrap;}
  .navlinks-simple{order:3;flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;gap:14px;}
  .nav-actions-simple{margin-left:auto;}
}


.video-explorer-wide{width:100%;margin-left:0;grid-template-columns:minmax(320px,460px) minmax(0,1fr);}
.video-preview-panel{min-height:540px;}
.video-preview-frame iframe{width:100%;min-height:520px;border:0;border-radius:18px;background:#0f172a;}
.video-preview-empty{margin-top:16px;padding:42px 20px;border:1px dashed rgba(148,163,184,.45);border-radius:18px;background:linear-gradient(180deg,#f8fbff,#ffffff);color:#64748b;text-align:center;font-weight:600;}
@media (max-width: 1100px){
  .video-explorer-wide{width:100%;margin-left:0;grid-template-columns:1fr;}
  .video-preview-frame iframe{min-height:360px;}
}


/* Manual electrónico: árbol y visor más alineados con el resto del sitio */
.videos-shell-card{padding:22px 22px 24px;border:1px solid rgba(226,232,240,.95);border-radius:24px;box-shadow:0 18px 40px rgba(15,23,42,.06);background:linear-gradient(180deg,#ffffff,#f8fbff);}
.videos-shell-head{display:flex;flex-direction:column;gap:4px;}
.video-explorer-wide{display:grid;grid-template-columns:minmax(360px, 1.05fr) minmax(460px, 1.35fr);gap:22px;align-items:start;}
.embedded-tree-panel{background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid rgba(226,232,240,.95);border-radius:22px;padding:18px 18px 10px;box-shadow:0 14px 30px rgba(15,23,42,.05);max-height:72vh;overflow:auto;scrollbar-width:thin;}
.embedded-tree-panel::-webkit-scrollbar{width:10px;height:10px;}
.embedded-tree-panel::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:999px;border:2px solid transparent;background-clip:padding-box;}
.embedded-tree-panel::-webkit-scrollbar-track{background:transparent;}
.video-preview-panel{min-height:580px;}
.tree{gap:10px;}
.tree-item{padding:0 0 10px 0;}
.tree-row{gap:12px;padding:12px 14px;border:1px solid rgba(226,232,240,.92);border-radius:16px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 10px 22px rgba(15,23,42,.05);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;}
.tree-row:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(15,23,42,.08);border-color:rgba(148,163,184,.45);}
.tree-title{font-size:14px;line-height:1.35;}
.tree-meta{font-weight:700;}
.tree-kind-icon.folder-icon::before{background:linear-gradient(180deg,#fde68a,#f59e0b);}
.tree-kind-icon.folder-icon::after{background:linear-gradient(180deg,#fef3c7,#fbbf24);}
.tree-item.is-leaf > .tree-row{cursor:pointer;}
.tree-item.is-leaf > .tree-row .btn.cta{margin-left:auto;}
.tree-item.is-leaf > .tree-row .tree-title{font-weight:700;color:#0f172a;}
.tree-item.is-leaf > .tree-row:hover .tree-title{color:#1d4ed8;}
.tree-row.is-preview-active{border-color:rgba(37,99,235,.42);box-shadow:0 0 0 3px rgba(59,130,246,.13),0 14px 28px rgba(37,99,235,.11);background:linear-gradient(180deg,#eff6ff,#dbeafe);}
.video-preview-idle{min-height:420px;border:1px dashed rgba(148,163,184,.42);border-radius:18px;background:linear-gradient(180deg,#f8fbff,#ffffff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#64748b;font-weight:700;text-align:center;padding:30px;}
.video-preview-idle-icon{width:62px;height:62px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8;font-size:28px;box-shadow:0 10px 22px rgba(37,99,235,.14);}
@media (max-width: 1100px){
  .video-explorer-wide{grid-template-columns:1fr;}
  .embedded-tree-panel{max-height:none;}
  .video-preview-panel{position:static;min-height:auto;}
}



/* ===== Manual layout fix: keep tree + viewer inside container ===== */
.videos-container,
.manual-layout{
  display:grid;
  grid-template-columns: minmax(260px,320px) minmax(0,1fr);
  gap:20px;
  width:100%;
  max-width:100%;
  align-items:start;
}

.videos-arbol,
.videos-visor{
  min-width:0;
  width:100%;
}

.videos-arbol{
  overflow:auto;
}

.videos-visor{
  overflow:hidden;
}

.video-player,
.video-frame,
.video-embed{
  width:100%;
  max-width:100%;
}

.video-player iframe,
.video-frame iframe,
.video-embed iframe{
  width:100%;
  max-width:100%;
  display:block;
  border:0;
}

.videos-disponibles{
  width:100%;
  max-width:100%;
  overflow:hidden;
}

@media (max-width: 992px){
  .videos-container,
  .manual-layout{
    grid-template-columns:1fr;
  }
}


/* Sticky viewer refinement */
.videos-shell-card,
.video-explorer,
.video-explorer-wide{overflow:visible;}
.embedded-tree-panel{align-self:start;}
.video-preview-frame,
#videoPreviewFrameWrap{width:100%;max-width:100%;}
#videoPreviewFrameWrap iframe{width:100%;display:block;min-height:420px;border:0;border-radius:18px;background:#0f172a;}
@media (max-width: 1100px){
  .video-preview-panel,
  .embedded-preview-panel{position:static !important;top:auto !important;}
}

.video-preview-description{display:none !important;}
.video-preview-idle{display:none !important;}
#videoPreviewFrameWrap:empty{display:none;}
.video-preview-meta:empty,.video-preview-title:empty,.video-preview-link[hidden]{display:none !important;}



/* Manual electrónico: visor encima del árbol */
.video-explorer,
.video-explorer-wide{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  width:100% !important;
}

.video-explorer > .video-preview-panel,
.video-explorer > .embedded-preview-panel,
.video-explorer-wide > .video-preview-panel,
.video-explorer-wide > .embedded-preview-panel{
  order:1 !important;
  width:100% !important;
  max-width:100% !important;
  position:sticky !important;
  top:96px !important;
}

.video-explorer > .tree-panel,
.video-explorer > .embedded-tree-panel,
.video-explorer-wide > .tree-panel,
.video-explorer-wide > .embedded-tree-panel{
  order:2 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

.video-preview-panel{
  min-height:auto !important;
}

@media (max-width: 1100px){
  .video-explorer > .video-preview-panel,
  .video-explorer > .embedded-preview-panel,
  .video-explorer-wide > .video-preview-panel,
  .video-explorer-wide > .embedded-preview-panel{
    position:static !important;
    top:auto !important;
  }
}



/* Manual electrónico: árbol con scroll propio */
.video-explorer > .tree-panel,
.video-explorer > .embedded-tree-panel,
.video-explorer-wide > .tree-panel,
.video-explorer-wide > .embedded-tree-panel{
  max-height: calc(100vh - 240px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable both-edges;
}

.video-explorer > .tree-panel .tree-scroll,
.video-explorer > .embedded-tree-panel .tree-scroll,
.video-explorer-wide > .tree-panel .tree-scroll,
.video-explorer-wide > .embedded-tree-panel .tree-scroll{
  max-height: inherit;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 1100px){
  .video-explorer > .tree-panel,
  .video-explorer > .embedded-tree-panel,
  .video-explorer-wide > .tree-panel,
  .video-explorer-wide > .embedded-tree-panel{
    max-height: none !important;
    overflow: visible !important;
  }
}



/* Manual electrónico: evitar superposición entre visor y árbol */
.video-explorer,
.video-explorer-wide{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  align-items:stretch !important;
}

.video-explorer > .video-preview-panel,
.video-explorer > .embedded-preview-panel,
.video-explorer-wide > .video-preview-panel,
.video-explorer-wide > .embedded-preview-panel{
  position:relative !important;
  top:auto !important;
  order:1 !important;
  width:100% !important;
  max-width:100% !important;
  z-index:1 !important;
  margin:0 0 6px 0 !important;
  min-height:auto !important;
}

.video-explorer > .tree-panel,
.video-explorer > .embedded-tree-panel,
.video-explorer-wide > .tree-panel,
.video-explorer-wide > .embedded-tree-panel{
  position:relative !important;
  order:2 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  clear:both !important;
  z-index:0 !important;
  margin-top:0 !important;
  max-height:calc(100vh - 260px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}

.video-explorer > .tree-panel .tree-scroll,
.video-explorer > .embedded-tree-panel .tree-scroll,
.video-explorer-wide > .tree-panel .tree-scroll,
.video-explorer-wide > .embedded-tree-panel .tree-scroll{
  max-height:none !important;
  overflow:visible !important;
}

@media (max-width:1100px){
  .video-explorer > .tree-panel,
  .video-explorer > .embedded-tree-panel,
  .video-explorer-wide > .tree-panel,
  .video-explorer-wide > .embedded-tree-panel{
    max-height:none !important;
    overflow:visible !important;
  }
}



/* Manual electrónico: visor integrado en su frame y fijo al hacer scroll */
.video-explorer,
.video-explorer-wide{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  width:100% !important;
  max-width:100% !important;
  align-items:stretch !important;
}

.video-explorer > .video-preview-panel,
.video-explorer > .embedded-preview-panel,
.video-explorer-wide > .video-preview-panel,
.video-explorer-wide > .embedded-preview-panel{
  order:1 !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  position:sticky !important;
  top:88px !important;
  z-index:5 !important;
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  padding:16px !important;
  box-shadow:0 6px 18px rgba(15,23,42,.08) !important;
  overflow:hidden !important;
  margin:0 !important;
}

.video-explorer > .video-preview-panel *,
.video-explorer > .embedded-preview-panel *,
.video-explorer-wide > .video-preview-panel *,
.video-explorer-wide > .embedded-preview-panel *{
  box-sizing:border-box !important;
}

.video-explorer > .tree-panel,
.video-explorer > .embedded-tree-panel,
.video-explorer-wide > .tree-panel,
.video-explorer-wide > .embedded-tree-panel{
  order:2 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  max-height:calc(100vh - 340px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable both-edges !important;
}

.video-explorer > .tree-panel .tree-scroll,
.video-explorer > .embedded-tree-panel .tree-scroll,
.video-explorer-wide > .tree-panel .tree-scroll,
.video-explorer-wide > .embedded-tree-panel .tree-scroll{
  max-height:none !important;
  overflow:visible !important;
}

.video-player,
.video-frame,
.video-embed,
.video-preview-panel .ratio,
.embedded-preview-panel .ratio{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  border-radius:12px !important;
}

.video-player iframe,
.video-frame iframe,
.video-embed iframe,
.video-preview-panel iframe,
.embedded-preview-panel iframe{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16/9 !important;
  min-height:320px !important;
  border:0 !important;
  border-radius:12px !important;
  background:#000 !important;
}

@media (max-width: 1100px){
  .video-explorer > .video-preview-panel,
  .video-explorer > .embedded-preview-panel,
  .video-explorer-wide > .video-preview-panel,
  .video-explorer-wide > .embedded-preview-panel{
    position:sticky !important;
    top:72px !important;
  }

  .video-explorer > .tree-panel,
  .video-explorer > .embedded-tree-panel,
  .video-explorer-wide > .tree-panel,
  .video-explorer-wide > .embedded-tree-panel{
    max-height:none !important;
    overflow:visible !important;
  }

  .video-player iframe,
  .video-frame iframe,
  .video-embed iframe,
  .video-preview-panel iframe,
  .embedded-preview-panel iframe{
    min-height:220px !important;
  }
}



/* Fix definitivo: el video debe quedar dentro del cuadro del visor */
.video-explorer,
.video-explorer-wide{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:100% !important;
}

.video-explorer > .video-preview-panel,
.video-explorer > .embedded-preview-panel,
.video-explorer-wide > .video-preview-panel,
.video-explorer-wide > .embedded-preview-panel{
  order:1 !important;
  position:sticky !important;
  top:88px !important;
  z-index:20 !important;
  width:100% !important;
  max-width:100% !important;
  min-height:auto !important;
  margin:0 !important;
  padding:18px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  display:block !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
  border:1px solid rgba(191,219,254,.9) !important;
  border-radius:22px !important;
  box-shadow:0 18px 35px rgba(2,6,23,.07) !important;
}

#videoPreviewContent{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

#videoPreviewFrameWrap{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin-top:12px !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:18px !important;
  background:#0f172a !important;
  box-sizing:border-box !important;
}

#videoPreviewFrameWrap iframe,
iframe.video-preview-frame{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-height:320px !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  border:0 !important;
  margin:0 !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  border-radius:18px !important;
  background:#0f172a !important;
  box-sizing:border-box !important;
}

.video-explorer > .tree-panel,
.video-explorer > .embedded-tree-panel,
.video-explorer-wide > .tree-panel,
.video-explorer-wide > .embedded-tree-panel{
  order:2 !important;
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding-top:0 !important;
  box-sizing:border-box !important;
  max-height:calc(100vh - 340px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

@media (max-width:1100px){
  .video-explorer > .video-preview-panel,
  .video-explorer > .embedded-preview-panel,
  .video-explorer-wide > .video-preview-panel,
  .video-explorer-wide > .embedded-preview-panel{
    top:72px !important;
  }
  .video-explorer > .tree-panel,
  .video-explorer > .embedded-tree-panel,
  .video-explorer-wide > .tree-panel,
  .video-explorer-wide > .embedded-tree-panel{
    max-height:none !important;
    overflow:visible !important;
  }
}



/* Fix final manual: visor integrado dentro del cuadro y árbol sin superposición */
.video-explorer,
.video-explorer-wide{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  width:100% !important;
  max-width:100% !important;
  align-items:stretch !important;
}

.video-explorer > .video-preview-panel,
.video-explorer > .embedded-preview-panel,
.video-explorer-wide > .video-preview-panel,
.video-explorer-wide > .embedded-preview-panel{
  order:1 !important;
  position:relative !important;
  top:auto !important;
  z-index:1 !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  min-height:auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.video-preview-sticky{
  position:sticky !important;
  top:88px !important;
  z-index:5 !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:18px !important;
  box-sizing:border-box !important;
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
  border:1px solid rgba(191,219,254,.9) !important;
  border-radius:22px !important;
  box-shadow:0 18px 35px rgba(2,6,23,.07) !important;
  overflow:hidden !important;
}

#videoPreviewContent{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

#videoPreviewFrameWrap{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin-top:12px !important;
  overflow:hidden !important;
  border-radius:18px !important;
  background:#0f172a !important;
  box-sizing:border-box !important;
}

#videoPreviewFrameWrap iframe,
iframe.video-preview-frame,
.video-preview-frame{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16/9 !important;
  min-height:320px !important;
  height:auto !important;
  margin:0 !important;
  position:static !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  border:0 !important;
  border-radius:18px !important;
  background:#0f172a !important;
  box-sizing:border-box !important;
}

.video-preview-empty,
.video-preview-idle,
.video-preview-description{
  display:none !important;
}

.video-explorer > .tree-panel,
.video-explorer > .embedded-tree-panel,
.video-explorer-wide > .tree-panel,
.video-explorer-wide > .embedded-tree-panel{
  order:2 !important;
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding-top:0 !important;
  box-sizing:border-box !important;
  max-height:calc(100vh - 360px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable both-edges !important;
}

@media (max-width:1100px){
  .video-preview-sticky{
    top:72px !important;
  }
  .video-explorer > .tree-panel,
  .video-explorer > .embedded-tree-panel,
  .video-explorer-wide > .tree-panel,
  .video-explorer-wide > .embedded-tree-panel{
    max-height:none !important;
    overflow:visible !important;
  }
  #videoPreviewFrameWrap iframe,
  iframe.video-preview-frame,
  .video-preview-frame{
    min-height:220px !important;
  }
}



/* Modo capacitación manual */
.tree-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#eef2ff;color:#4338ca;margin-left:8px}
.tree-chip.seen{background:#f1f5f9;color:#64748b}
.tree-chip.seen.is-on{background:#dcfce7;color:#166534}
.tree-chip.favorite{background:#fff7ed;color:#c2410c}
.tree-chip.favorite.is-on{background:#fef3c7;color:#92400e}
.tree-chip.duration{background:#eff6ff;color:#1d4ed8}
#videoFavoriteToggle.is-active{background:#fef3c7;color:#92400e;border-color:#fcd34d}
.video-preview-pill.is-on{background:#dcfce7;color:#166534}
.video-preview-meta{display:flex;flex-wrap:wrap;gap:8px}
#videoPreviewDescription{margin-top:10px;margin-bottom:0}
.manual-search-item .tree-chip{margin-left:0}
.tree-panel{padding-right:6px}
.tree-panel::-webkit-scrollbar{width:10px}
.tree-panel::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}


/* Manual sin visor inline: solo árbol + buscador */
.video-explorer,
.video-explorer-wide{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}
.manual-bottom-grid{
  display:grid !important;
  grid-template-columns:2fr 1fr !important;
  gap:20px !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
}
.manual-bottom-grid > .tree-panel,
.manual-bottom-grid > .embedded-tree-panel{
  grid-column:1 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  max-height:calc(100vh - 180px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
.manual-bottom-grid > .search-card{
  grid-column:2 !important;
  width:100% !important;
  max-width:100% !important;
  position:sticky !important;
  top:88px !important;
  align-self:start !important;
}
.manual-bottom-grid > .search-card .manual-search-results{
  max-height:calc(100vh - 260px) !important;
  overflow:auto !important;
}
@media (max-width:1100px){
  .manual-bottom-grid{
    grid-template-columns:1fr !important;
  }
  .manual-bottom-grid > .tree-panel,
  .manual-bottom-grid > .embedded-tree-panel{
    max-height:none !important;
    overflow:visible !important;
  }
  .manual-bottom-grid > .search-card{
    position:relative !important;
    top:auto !important;
  }
  .manual-bottom-grid > .search-card .manual-search-results{
    max-height:none !important;
    overflow:visible !important;
  }
}


.tree-context-menu{position:fixed;left:0;top:0;min-width:220px;padding:8px;border-radius:14px;border:1px solid rgba(191,219,254,.85);background:#fff;box-shadow:0 24px 55px rgba(15,23,42,.22);z-index:99999;display:flex;flex-direction:column;gap:4px;}
.tree-context-menu[hidden]{display:none !important;}
.tree-context-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:none;background:transparent;border-radius:10px;color:#0f172a;font:inherit;cursor:pointer;text-align:left;}
.tree-context-item:hover{background:rgba(219,234,254,.7);}
.tree-context-item.danger{color:#b91c1c;}
.tree-context-sep{height:1px;margin:4px 2px;background:rgba(226,232,240,.95);}
.tree-inline-actions{position:relative;z-index:2;}
.embedded-tree-panel,.admin-tree,.video-explorer,.video-explorer-wide,.videos-shell-card{overflow:visible !important;}