/* ============================================================ STARGATE — STUDIO v4.0 "SOVEREIGN" ------------------------------------------------------------ · 5 plantillas premium (data-template en ) · 9 tipografías conmutables (--font / --font-head) · Panel de edición, barra de formato flotante y puerta de acceso Se carga DESPUÉS de css/style.css. ============================================================ */ /* ============================================================ 1. TIPOGRAFÍA CONMUTABLE ============================================================ */ :root{ --font-head:var(--font); --edit-scale:1; } .slide h1,.slide h2,.slide h3,.slide .wordmark, .slide .kicker,.slide .subline,.slide .year, .kpi .num,.mod b,.timeline .tl b,.ov-item .t{ font-family:var(--font-head); } /* La escala del editor se multiplica sobre la escala A- / A+ */ body[data-text="sm"]{--t:calc(.90 * var(--edit-scale,1))} body[data-text="md"]{--t:calc(1 * var(--edit-scale,1))} body[data-text="lg"]{--t:calc(1.12 * var(--edit-scale,1))} body[data-text="xl"]{--t:calc(1.26 * var(--edit-scale,1))} /* Acento personalizado del usuario */ body.accent-custom{ --accent:var(--accent-user,#00D2FF); --accent-rgb:var(--accent-user-rgb,0,210,255); } /* ============================================================ 2. PLANTILLAS PREMIUM v5 "ATELIER" ------------------------------------------------------------ Cada plantilla define DOS paletas completas: · [data-theme="night"] → profundidad, luz volumétrica · [data-theme="day"] → pigmento impreso, sin fosforescencia Regla de oro del modo día: los acentos son tintas densas (luminancia baja, saturación media) que pasan contraste AA sobre papel; los halos de neón se apagan por completo. ============================================================ */ /* ------------------------------------------------------------ 00 · REGLAS TRANSVERSALES DEL MODO DÍA Apagan el neón heredado del tema nocturno en TODAS las plantillas. ------------------------------------------------------------ */ body[data-theme="day"] .slide .kicker::before{box-shadow:none} body[data-theme="day"] .slide h2 em{text-shadow:none} body[data-theme="day"] .slide.cover .wordmark{filter:none} body[data-theme="day"] .slide.cover .year{box-shadow:none} body[data-theme="day"] .kpi .num{text-shadow:none} body[data-theme="day"] .bullets li i, body[data-theme="day"] .mod i{filter:none} body[data-theme="day"] .timeline .tl::before{box-shadow:none} body[data-theme="day"] .bar-fill, body[data-theme="day"] .bar-fill.alert, body[data-theme="day"] .bar-fill.amber{box-shadow:none} body[data-theme="day"] #progress-bar{box-shadow:none} body[data-theme="day"] .deck-head .brand i{animation:none;filter:none} body[data-theme="day"] #deck::after{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.05)} /* En papel, el barrido especular se vuelve un velo mate */ body[data-theme="day"] #deck::before{opacity:.5} /* Superficies: en día el "cristal" es papel tintado, no vidrio negro */ body[data-theme="day"] .g-card, body[data-theme="day"] .mod{box-shadow:0 6px 18px rgba(15,23,42,.07)} /* ------------------------------------------------------------ 01 · OBSIDIANA — azul acero de sala de mando ------------------------------------------------------------ */ body[data-template="obsidian"][data-theme="night"]{ --accent-rgb:56,189,248; --accent2-rgb:29,78,216; --page-rgb:7,11,22; --text-rgb:226,235,247; --page:#070B16; --deck-a:rgba(20,31,56,.96); --deck-b:rgba(7,11,22,.99); --deck-c:rgba(11,19,40,.98); --panel-a:rgba(12,19,36,.95); --panel-b:rgba(7,11,22,.98); --chrome:rgba(20,31,56,.68); --accent:#38BDF8; --accent-2:#1D4ED8; --accent-ink:#04111F; --crimson:#F2555F; --amber:#FBBF24; --emerald:#34D399; --text:#E2EBF7; --text-soft:rgba(226,235,247,.85); --text-dim:rgba(226,235,247,.62); --text-faint:rgba(226,235,247,.43); --glass:rgba(226,235,247,.06); --glass-2:rgba(226,235,247,.11); --line:rgba(226,235,247,.12); --line-soft:rgba(226,235,247,.06); --stroke:rgba(56,189,248,.26); --h2-a:#FFFFFF; --h2-b:#8FB6DE; --mark-a:#FFFFFF; --mark-b:#4FA8F5; --glow-1:rgba(29,78,216,.32); --glow-2:rgba(56,189,248,.10); --glow-3:rgba(56,189,248,.16); --grid-line:rgba(56,189,248,.10); --grid-op:.32; --shadow-deck:0 34px 100px rgba(0,0,0,.78),0 0 110px rgba(29,78,216,.22); --radius:22px; } body[data-template="obsidian"][data-theme="day"]{ --accent-rgb:29,78,216; --accent2-rgb:14,116,144; --page-rgb:242,245,250; --text-rgb:15,23,42; --page:#F2F5FA; --deck-a:rgba(255,255,255,.99); --deck-b:rgba(238,242,249,.99); --deck-c:rgba(247,250,254,.99); --panel-a:rgba(255,255,255,.97); --panel-b:rgba(240,244,250,.99); --chrome:rgba(255,255,255,.88); --accent:#1D4ED8; --accent-2:#0E7490; --accent-ink:#FFFFFF; --crimson:#B4232F; --amber:#8A6206; --emerald:#0F6B4F; --text:#0F172A; --text-soft:rgba(15,23,42,.80); --text-dim:rgba(15,23,42,.60); --text-faint:rgba(15,23,42,.44); --glass:rgba(29,78,216,.045); --glass-2:rgba(29,78,216,.085); --line:rgba(15,23,42,.14); --line-soft:rgba(15,23,42,.07); --stroke:rgba(29,78,216,.24); --h2-a:#0F172A; --h2-b:#1D4ED8; --mark-a:#0F172A; --mark-b:#1D4ED8; --glow-1:rgba(29,78,216,.10); --glow-2:rgba(14,116,144,.05); --glow-3:rgba(29,78,216,.06); --grid-line:rgba(15,23,42,.07); --grid-op:.45; --shadow-deck:0 24px 64px rgba(15,23,42,.14),0 2px 10px rgba(15,23,42,.06); --sheen:linear-gradient(115deg,rgba(255,255,255,.5),transparent 42%,transparent 66%,rgba(29,78,216,.03)); --radius:22px; } /* ------------------------------------------------------------ 02 · PLATINO EDITORIAL — informe señorial, serif y oro ------------------------------------------------------------ */ body[data-template="platinum"][data-theme="day"]{ --accent-rgb:18,48,79; --accent2-rgb:168,129,60; --page-rgb:246,243,236; --text-rgb:26,32,42; --page:#F6F3EC; --deck-a:rgba(255,254,250,.99); --deck-b:rgba(243,239,230,.99); --deck-c:rgba(251,249,243,.99); --panel-a:rgba(255,254,250,.98); --panel-b:rgba(244,240,231,.99); --chrome:rgba(255,254,250,.90); --accent:#12304F; --accent-2:#A8813C; --accent-ink:#FFFDF7; --crimson:#8E1F25; --amber:#8A6A22; --emerald:#2A6355; --text:#1A202A; --text-soft:rgba(26,32,42,.82); --text-dim:rgba(26,32,42,.60); --text-faint:rgba(26,32,42,.42); --glass:rgba(18,48,79,.04); --glass-2:rgba(18,48,79,.08); --line:rgba(18,48,79,.15); --line-soft:rgba(18,48,79,.07); --stroke:rgba(168,129,60,.38); --h2-a:#12304F; --h2-b:#3E5C7E; --mark-a:#12304F; --mark-b:#A8813C; --glow-1:rgba(168,129,60,.10); --glow-2:rgba(18,48,79,.04); --glow-3:rgba(168,129,60,.06); --grid-line:rgba(18,48,79,.06); --grid-op:.4; --shadow-deck:0 24px 62px rgba(45,38,22,.16),0 2px 8px rgba(45,38,22,.06); --sheen:linear-gradient(115deg,rgba(255,255,255,.45),transparent 44%,transparent 68%,rgba(168,129,60,.04)); --radius:6px; } body[data-template="platinum"][data-theme="night"]{ --accent-rgb:200,162,80; --accent2-rgb:143,166,196; --page-rgb:20,22,28; --text-rgb:240,236,226; --page:#14161C; --deck-a:rgba(38,40,48,.96); --deck-b:rgba(20,22,28,.99); --deck-c:rgba(28,30,38,.98); --panel-a:rgba(28,30,38,.95); --panel-b:rgba(20,22,28,.98); --chrome:rgba(38,40,48,.70); --accent:#C8A250; --accent-2:#8FA6C4; --accent-ink:#171410; --crimson:#D4636A; --amber:#C8A250; --emerald:#67B39C; --text:#F0ECE2; --text-soft:rgba(240,236,226,.83); --text-dim:rgba(240,236,226,.60); --text-faint:rgba(240,236,226,.42); --glass:rgba(240,236,226,.055); --glass-2:rgba(240,236,226,.10); --line:rgba(240,236,226,.13); --line-soft:rgba(240,236,226,.06); --stroke:rgba(200,162,80,.30); --h2-a:#FFFDF7; --h2-b:#C8A250; --mark-a:#FFFDF7; --mark-b:#C8A250; --glow-1:rgba(200,162,80,.18); --glow-2:rgba(143,166,196,.07); --glow-3:rgba(200,162,80,.10); --grid-line:rgba(200,162,80,.08); --grid-op:.28; --shadow-deck:0 34px 92px rgba(0,0,0,.74),0 0 80px rgba(200,162,80,.12); --radius:6px; } body[data-template="platinum"] .slide h2{letter-spacing:-.012em} body[data-template="platinum"] .slide .kicker{letter-spacing:.34em;font-weight:700} body[data-template="platinum"] .slide .kicker::before{width:3.2em;height:1px} body[data-template="platinum"] .kpi{ background:linear-gradient(150deg,rgba(var(--accent2-rgb),.14),var(--glass)); border-radius:4px;border-left:3px solid var(--accent-2); } body[data-template="platinum"] .mod, body[data-template="platinum"] .g-card{border-radius:4px} body[data-template="platinum"] .tag{border-radius:2px;letter-spacing:.14em} body[data-template="platinum"] #deck{border-width:2px} body[data-template="platinum"] .quote{border-left-width:2px;font-style:italic} /* ------------------------------------------------------------ 03 · CARMESÍ COMANDO — mando, urgencia, geometría dura ------------------------------------------------------------ */ body[data-template="crimson"][data-theme="night"]{ --accent-rgb:242,85,95; --accent2-rgb:224,138,82; --page-rgb:12,7,9; --text-rgb:244,236,235; --page:#0C0709; --deck-a:rgba(36,19,22,.96); --deck-b:rgba(12,7,9,.99); --deck-c:rgba(26,13,16,.98); --panel-a:rgba(26,14,16,.95); --panel-b:rgba(12,7,9,.98); --chrome:rgba(36,19,22,.70); --accent:#F2555F; --accent-2:#E08A52; --accent-ink:#1B0608; --crimson:#F2555F; --amber:#E3A44F; --emerald:#4FC79C; --text:#F4ECEB; --text-soft:rgba(244,236,235,.83); --text-dim:rgba(244,236,235,.60); --text-faint:rgba(244,236,235,.42); --glass:rgba(244,236,235,.06); --glass-2:rgba(244,236,235,.11); --line:rgba(244,236,235,.12); --line-soft:rgba(244,236,235,.06); --stroke:rgba(242,85,95,.28); --h2-a:#FFFFFF; --h2-b:#E2A0A4; --mark-a:#FFFFFF; --mark-b:#F2555F; --glow-1:rgba(242,85,95,.24); --glow-2:rgba(224,138,82,.08); --glow-3:rgba(242,85,95,.14); --grid-line:rgba(242,85,95,.09); --grid-op:.3; --shadow-deck:0 34px 100px rgba(0,0,0,.82),0 0 100px rgba(242,85,95,.18); --radius:3px; } body[data-template="crimson"][data-theme="day"]{ --accent-rgb:163,19,42; --accent2-rgb:138,90,32; --page-rgb:250,246,244; --text-rgb:28,20,20; --page:#FAF6F4; --deck-a:rgba(255,253,252,.99); --deck-b:rgba(246,240,237,.99); --deck-c:rgba(252,248,246,.99); --panel-a:rgba(255,253,252,.98); --panel-b:rgba(247,241,238,.99); --chrome:rgba(255,253,252,.90); --accent:#A3132A; --accent-2:#8A5A20; --accent-ink:#FFFFFF; --crimson:#A3132A; --amber:#8A5A20; --emerald:#1F6B54; --text:#1C1414; --text-soft:rgba(28,20,20,.82); --text-dim:rgba(28,20,20,.60); --text-faint:rgba(28,20,20,.42); --glass:rgba(163,19,42,.04); --glass-2:rgba(163,19,42,.08); --line:rgba(28,20,20,.14); --line-soft:rgba(28,20,20,.07); --stroke:rgba(163,19,42,.24); --h2-a:#1C1414; --h2-b:#A3132A; --mark-a:#1C1414; --mark-b:#A3132A; --glow-1:rgba(163,19,42,.09); --glow-2:rgba(138,90,32,.04); --glow-3:rgba(163,19,42,.05); --grid-line:rgba(28,20,20,.06); --grid-op:.4; --shadow-deck:0 24px 62px rgba(40,20,20,.15),0 2px 8px rgba(40,20,20,.06); --sheen:linear-gradient(115deg,rgba(255,255,255,.45),transparent 42%,transparent 66%,rgba(163,19,42,.03)); --radius:3px; } body[data-template="crimson"] .slide .kicker{letter-spacing:.4em} body[data-template="crimson"] .slide h2{text-transform:uppercase;letter-spacing:-.008em} body[data-template="crimson"] .kpi, body[data-template="crimson"] .mod, body[data-template="crimson"] .g-card, body[data-template="crimson"] .tag{border-radius:2px} body[data-template="crimson"] .kpi{border-top:3px solid var(--accent)} body[data-template="crimson"] .tag{text-transform:uppercase} /* ------------------------------------------------------------ 04 · AURORA — vanguardia iridiscente ------------------------------------------------------------ */ body[data-template="aurora"][data-theme="night"]{ --accent-rgb:167,139,250; --accent2-rgb:56,189,248; --page-rgb:11,8,32; --text-rgb:237,233,254; --page:#0B0820; --deck-a:rgba(38,24,80,.95); --deck-b:rgba(11,8,32,.99); --deck-c:rgba(24,14,56,.98); --panel-a:rgba(26,16,58,.95); --panel-b:rgba(11,8,32,.98); --chrome:rgba(38,24,80,.68); --accent:#A78BFA; --accent-2:#38BDF8; --accent-ink:#120A24; --crimson:#F87A8C; --amber:#FBBF24; --emerald:#34D399; --text:#EDE9FE; --text-soft:rgba(237,233,254,.84); --text-dim:rgba(237,233,254,.61); --text-faint:rgba(237,233,254,.43); --glass:rgba(237,233,254,.06); --glass-2:rgba(237,233,254,.11); --line:rgba(237,233,254,.13); --line-soft:rgba(237,233,254,.07); --stroke:rgba(167,139,250,.30); --h2-a:#FFFFFF; --h2-b:#A78BFA; --mark-a:#FFFFFF; --mark-b:#38BDF8; --glow-1:rgba(139,92,246,.30); --glow-2:rgba(56,189,248,.11); --glow-3:rgba(168,85,247,.18); --grid-line:rgba(167,139,250,.11); --grid-op:.3; --shadow-deck:0 34px 100px rgba(0,0,0,.78),0 0 110px rgba(139,92,246,.22); --sheen:linear-gradient(115deg,rgba(255,255,255,.07),transparent 38%,transparent 62%,rgba(56,189,248,.06)); --radius:24px; } body[data-template="aurora"][data-theme="day"]{ --accent-rgb:91,55,183; --accent2-rgb:14,116,144; --page-rgb:245,243,251; --text-rgb:26,22,44; --page:#F5F3FB; --deck-a:rgba(255,255,255,.99); --deck-b:rgba(242,239,250,.99); --deck-c:rgba(249,247,253,.99); --panel-a:rgba(255,255,255,.97); --panel-b:rgba(243,240,250,.99); --chrome:rgba(255,255,255,.89); --accent:#5B37B7; --accent-2:#0E7490; --accent-ink:#FFFFFF; --crimson:#B02E45; --amber:#87600A; --emerald:#0F6B54; --text:#1A162C; --text-soft:rgba(26,22,44,.80); --text-dim:rgba(26,22,44,.60); --text-faint:rgba(26,22,44,.42); --glass:rgba(91,55,183,.045); --glass-2:rgba(91,55,183,.085); --line:rgba(26,22,44,.13); --line-soft:rgba(26,22,44,.07); --stroke:rgba(91,55,183,.22); --h2-a:#1A162C; --h2-b:#5B37B7; --mark-a:#1A162C; --mark-b:#5B37B7; --glow-1:rgba(91,55,183,.10); --glow-2:rgba(14,116,144,.05); --glow-3:rgba(91,55,183,.06); --grid-line:rgba(26,22,44,.06); --grid-op:.42; --shadow-deck:0 24px 64px rgba(30,22,60,.14),0 2px 8px rgba(30,22,60,.06); --sheen:linear-gradient(115deg,rgba(255,255,255,.5),transparent 42%,transparent 66%,rgba(91,55,183,.03)); --radius:24px; } body[data-template="aurora"][data-theme="night"] .slide h2{ background:linear-gradient(120deg,#FFFFFF 10%,#A78BFA 48%,#38BDF8 90%); -webkit-background-clip:text;background-clip:text; } body[data-template="aurora"][data-theme="day"] .slide h2{ background:linear-gradient(120deg,#1A162C 8%,#5B37B7 55%,#0E7490 95%); -webkit-background-clip:text;background-clip:text; } body[data-template="aurora"] .kpi{ background:linear-gradient(150deg,rgba(var(--accent-rgb),.16),rgba(var(--accent2-rgb),.07)); } /* ------------------------------------------------------------ 05 · SIERRA — territorio, raíz y arena ------------------------------------------------------------ */ body[data-template="sierra"][data-theme="night"]{ --accent-rgb:74,222,159; --accent2-rgb:217,184,114; --page-rgb:8,19,15; --text-rgb:231,240,234; --page:#08130F; --deck-a:rgba(17,42,33,.96); --deck-b:rgba(8,19,15,.99); --deck-c:rgba(12,30,24,.98); --panel-a:rgba(14,34,27,.95); --panel-b:rgba(8,19,15,.98); --chrome:rgba(17,42,33,.70); --accent:#4ADE9F; --accent-2:#D9B872; --accent-ink:#05170F; --crimson:#E3736A; --amber:#D9B872; --emerald:#4ADE9F; --text:#E7F0EA; --text-soft:rgba(231,240,234,.84); --text-dim:rgba(231,240,234,.61); --text-faint:rgba(231,240,234,.43); --glass:rgba(231,240,234,.06); --glass-2:rgba(231,240,234,.11); --line:rgba(231,240,234,.13); --line-soft:rgba(231,240,234,.07); --stroke:rgba(74,222,159,.26); --h2-a:#FFFFFF; --h2-b:#93DCBE; --mark-a:#FFFFFF; --mark-b:#D9B872; --glow-1:rgba(74,222,159,.20); --glow-2:rgba(217,184,114,.08); --glow-3:rgba(74,222,159,.13); --grid-line:rgba(74,222,159,.10); --grid-op:.3; --shadow-deck:0 34px 96px rgba(0,0,0,.76),0 0 92px rgba(74,222,159,.15); --radius:16px; } body[data-template="sierra"][data-theme="day"]{ --accent-rgb:20,107,82; --accent2-rgb:150,112,44; --page-rgb:244,242,234; --text-rgb:24,32,28; --page:#F4F2EA; --deck-a:rgba(255,254,250,.99); --deck-b:rgba(241,238,229,.99); --deck-c:rgba(250,248,242,.99); --panel-a:rgba(255,254,250,.98); --panel-b:rgba(242,239,230,.99); --chrome:rgba(255,254,250,.90); --accent:#146B52; --accent-2:#96702C; --accent-ink:#FFFFFF; --crimson:#9E3025; --amber:#8A6413; --emerald:#146B52; --text:#18201C; --text-soft:rgba(24,32,28,.82); --text-dim:rgba(24,32,28,.60); --text-faint:rgba(24,32,28,.42); --glass:rgba(20,107,82,.045); --glass-2:rgba(20,107,82,.085); --line:rgba(24,32,28,.14); --line-soft:rgba(24,32,28,.07); --stroke:rgba(20,107,82,.24); --h2-a:#18201C; --h2-b:#146B52; --mark-a:#18201C; --mark-b:#96702C; --glow-1:rgba(20,107,82,.09); --glow-2:rgba(150,112,44,.05); --glow-3:rgba(20,107,82,.05); --grid-line:rgba(24,32,28,.06); --grid-op:.4; --shadow-deck:0 24px 62px rgba(30,38,28,.15),0 2px 8px rgba(30,38,28,.06); --sheen:linear-gradient(115deg,rgba(255,255,255,.45),transparent 42%,transparent 66%,rgba(20,107,82,.03)); --radius:16px; } body[data-template="sierra"] .slide .lede{line-height:1.56} body[data-template="sierra"] .kpi{ background:linear-gradient(150deg,rgba(var(--accent-rgb),.14),rgba(var(--accent2-rgb),.07)); } body[data-template="sierra"] .slide .kicker::before{width:2.8em} /* ============================================================ 3. IMÁGENES EN LA LÁMINA ============================================================ */ .slide{position:absolute} .slide .slide-bg{ position:absolute;inset:0;z-index:0;pointer-events:none; background-position:center;background-size:cover;background-repeat:no-repeat; } .slide .slide-bg::after{ content:'';position:absolute;inset:0; background:linear-gradient(175deg, rgba(var(--page-rgb),calc(var(--bg-dim,.62) * .78)), rgba(var(--page-rgb),var(--bg-dim,.62))); } .slide .slide-inner{position:relative;z-index:1} .slide-img{ display:block;max-width:100%;border-radius:14px; border:1px solid var(--line); box-shadow:0 18px 44px rgba(0,0,0,.35); margin:calc(var(--u) * .5) 0; } .slide-img.round{border-radius:50%;width:38%;aspect-ratio:1;object-fit:cover} .slide-img.wide{width:100%;aspect-ratio:16/9;object-fit:cover} .slide-img.left{float:none;width:52%} /* ============================================================ 4. MODO EDICIÓN — LÁMINA VIVA ============================================================ */ body.edit-mode #deck{ box-shadow:0 0 0 2px var(--accent),var(--shadow-deck); } body.edit-mode .slide.is-active .slide-inner, body.edit-mode .slide.is-active .slide-inner *{ animation:none!important; } body.edit-mode .slide-inner[contenteditable="true"]{ outline:none;cursor:text; border-radius:10px; transition:box-shadow .25s ease; } body.edit-mode .slide-inner[contenteditable="true"]:focus-within{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.45),0 0 34px rgba(var(--accent-rgb),.14); } body.edit-mode .slide-inner [contenteditable="true"]::selection, body.edit-mode .slide-inner ::selection{background:rgba(var(--accent-rgb),.32)} .edit-badge{ position:fixed;top:10px;left:50%;transform:translateX(-50%); z-index:78;display:none;align-items:center;gap:.6em; padding:.5em 1.15em;border-radius:999px; background:linear-gradient(120deg,var(--accent-2),var(--accent)); color:var(--accent-ink);font-weight:900;font-size:10.5px; letter-spacing:.22em;text-transform:uppercase; box-shadow:0 10px 30px rgba(var(--accent-rgb),.42); } body.edit-mode .edit-badge{display:flex;animation:badgePulse 2.6s ease-in-out infinite} @keyframes badgePulse{0%,100%{box-shadow:0 10px 30px rgba(var(--accent-rgb),.35)}50%{box-shadow:0 10px 42px rgba(var(--accent-rgb),.6)}} /* ============================================================ 5. BARRA DE FORMATO FLOTANTE ============================================================ */ #format-bar{ position:fixed;z-index:82;display:none; align-items:center;gap:4px;flex-wrap:wrap; max-width:min(560px,94vw); padding:6px 8px;border-radius:14px; background:linear-gradient(170deg,var(--panel-a),var(--panel-b)); border:1px solid var(--stroke); box-shadow:0 22px 54px rgba(0,0,0,.55); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } #format-bar.is-open{display:flex;animation:fadeIn .18s ease both} #format-bar button{ min-width:30px;height:30px;padding:0 7px;cursor:pointer; border-radius:8px;border:1px solid transparent; background:var(--glass);color:var(--text-soft); font-family:var(--font);font-size:12px;font-weight:800; display:inline-flex;align-items:center;justify-content:center;gap:.3em; transition:background .15s ease,color .15s ease,transform .15s ease; } #format-bar button:hover{background:rgba(var(--accent-rgb),.2);color:var(--text);transform:translateY(-1px)} #format-bar button.is-on{background:linear-gradient(140deg,var(--accent-2),var(--accent));color:var(--accent-ink)} #format-bar select{ height:30px;max-width:132px;cursor:pointer; background:var(--glass);border:1px solid var(--line);border-radius:8px; color:var(--text);font-family:var(--font);font-size:11.5px;padding:0 .4em; } #format-bar .fb-sep{width:1px;height:20px;background:var(--line);margin:0 2px} #format-bar .fb-color{ width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.5); cursor:pointer;padding:0;min-width:0; } #format-bar input[type="color"]{ width:30px;height:30px;padding:0;border:1px solid var(--line); border-radius:8px;background:var(--glass);cursor:pointer; } /* ============================================================ 6. PANEL LATERAL DEL STUDIO ============================================================ */ #studio{ position:fixed;top:0;right:0;bottom:0;z-index:80; width:min(400px,94vw); transform:translateX(102%); transition:transform .45s cubic-bezier(.16,1,.3,1); display:flex;flex-direction:column; background:linear-gradient(180deg,var(--panel-a),var(--panel-b)); border-left:1px solid var(--stroke); box-shadow:-30px 0 70px rgba(0,0,0,.5); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); } #studio.is-open{transform:translateX(0)} .st-head{ display:flex;align-items:center;gap:.6em; padding:16px 16px 12px;border-bottom:1px solid var(--line);flex:0 0 auto; } .st-head i{color:var(--accent)} .st-head h2{font-size:12px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:var(--text)} .st-head .st-slide{font-size:10px;color:var(--text-dim);letter-spacing:.14em;font-weight:700} .st-head .close{ margin-left:auto;cursor:pointer;width:32px;height:32px;border-radius:50%; border:1px solid var(--line);background:var(--glass);color:var(--text); display:grid;place-items:center;font-size:14px; } .st-head .close:hover{background:rgba(var(--crimson-rgb),.2);color:var(--crimson)} .st-tabs{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line);flex:0 0 auto;overflow-x:auto;scrollbar-width:none} .st-tabs::-webkit-scrollbar{display:none} .st-tab{ flex:1 0 auto;cursor:pointer;white-space:nowrap; padding:.6em .8em;border-radius:9px;border:1px solid transparent; background:var(--glass);color:var(--text-dim); font-family:var(--font);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.4em; transition:background .18s ease,color .18s ease; } .st-tab:hover{color:var(--text);background:rgba(var(--accent-rgb),.14)} .st-tab.is-on{background:linear-gradient(140deg,var(--accent-2),var(--accent));color:var(--accent-ink)} .st-body{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px} .st-pane{display:none;flex-direction:column;gap:14px} .st-pane.is-on{display:flex;animation:fadeIn .22s ease both} .st-block{display:flex;flex-direction:column;gap:8px} .st-label{ font-size:9.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);display:flex;align-items:center;gap:.5em; } .st-help{font-size:10.5px;color:var(--text-faint);line-height:1.5} .st-input,.st-area,.st-select{ width:100%;background:var(--glass);border:1px solid var(--line);border-radius:10px; color:var(--text);font-family:var(--font);font-size:12.5px; padding:.65em .8em;outline:none;line-height:1.45; transition:border-color .2s ease,box-shadow .2s ease; } .st-input:focus,.st-area:focus,.st-select:focus{ border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16); } .st-area{resize:vertical;min-height:76px} .st-select{cursor:pointer} .st-select option{background:var(--page);color:var(--text)} .st-btn{ cursor:pointer;font-family:var(--font);font-size:11px;font-weight:800; letter-spacing:.12em;text-transform:uppercase; padding:.75em 1.05em;border-radius:10px;border:1px solid var(--line); background:var(--glass);color:var(--text-soft); display:inline-flex;align-items:center;justify-content:center;gap:.5em; transition:transform .16s ease,background .2s ease,color .2s ease,box-shadow .2s ease; } .st-btn:hover{transform:translateY(-2px);background:rgba(var(--accent-rgb),.16);color:var(--text)} .st-btn.primary{ background:linear-gradient(130deg,var(--accent-2),var(--accent)); color:var(--accent-ink);border-color:transparent; box-shadow:0 0 24px rgba(var(--accent-rgb),.34); } .st-btn.danger:hover{background:rgba(var(--crimson-rgb),.2);color:var(--crimson)} .st-row{display:flex;gap:8px;flex-wrap:wrap} .st-row > .st-btn{flex:1 1 auto} /* --- Plantillas --- */ .tpl-grid{display:flex;flex-direction:column;gap:9px} .tpl-card{ cursor:pointer;text-align:left;font-family:var(--font); display:flex;align-items:center;gap:11px; padding:11px;border-radius:13px; border:1px solid var(--line);background:var(--glass);color:var(--text); transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease; } .tpl-card:hover{transform:translateY(-2px);border-color:var(--stroke)} .tpl-card.is-on{border-color:var(--accent);box-shadow:0 0 24px rgba(var(--accent-rgb),.26)} .tpl-chips{display:flex;flex-direction:column;gap:3px;flex:0 0 auto} .tpl-chip{width:26px;height:11px;border-radius:3px;border:1px solid rgba(255,255,255,.16)} .tpl-meta b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.04em} .tpl-meta span{display:block;font-size:10.5px;color:var(--text-dim);line-height:1.4;margin-top:2px} /* --- Tipografías --- */ .font-card{ cursor:pointer;text-align:left;width:100%; display:flex;align-items:baseline;gap:.6em; padding:.6em .8em;border-radius:10px; border:1px solid var(--line);background:var(--glass);color:var(--text); transition:background .18s ease,border-color .2s ease; } .font-card:hover{background:rgba(var(--accent-rgb),.13)} .font-card.is-on{border-color:var(--accent);background:rgba(var(--accent-rgb),.16)} .font-card b{font-size:14px;font-weight:700} .font-card span{font-size:9.5px;color:var(--text-dim);letter-spacing:.04em} /* --- Colores --- */ .color-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center} .color-dot{ width:28px;height:28px;border-radius:50%;cursor:pointer;padding:0; border:2px solid rgba(255,255,255,.35); transition:transform .16s ease,box-shadow .2s ease; } .color-dot:hover{transform:scale(1.12)} .color-dot.is-on{transform:scale(1.18);box-shadow:0 0 0 2px var(--text)} /* --- Rango --- */ .st-range{width:100%;accent-color:var(--accent);cursor:pointer} .st-range-val{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;font-weight:700} /* --- Miniatura de imagen --- */ .img-preview{ width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden; border:1px dashed var(--line);background:var(--glass); display:grid;place-items:center;color:var(--text-faint);font-size:10.5px; background-size:cover;background-position:center;text-align:center;padding:8px; } .st-file{display:none} /* --- Lista de láminas --- */ .slide-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto} .slide-item{ cursor:pointer;text-align:left;font-family:var(--font); display:flex;align-items:center;gap:.7em; padding:.6em .75em;border-radius:9px; border:1px solid var(--line);background:var(--glass);color:var(--text-soft); transition:background .18s ease,border-color .2s ease; } .slide-item:hover{background:rgba(var(--accent-rgb),.13);color:var(--text)} .slide-item.is-on{border-color:var(--accent);background:rgba(var(--accent-rgb),.17);color:var(--text)} .slide-item .n{font-size:10px;font-weight:900;color:var(--accent);letter-spacing:.12em;flex:0 0 auto} .slide-item .t{font-size:11.5px;line-height:1.3;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .slide-item .e{font-size:9px;color:var(--amber);font-weight:900;flex:0 0 auto} /* ============================================================ 6bis. PESTAÑA DE IMPORTACIÓN DOCUMENTAL ============================================================ */ .st-mini-label{ font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--text-dim);margin-top:2px; } .st-check{ display:flex;align-items:flex-start;gap:.6em; font-size:11.5px;color:var(--text-soft);line-height:1.45;cursor:pointer; padding:.35em 0; } .st-check input{margin-top:.15em;accent-color:var(--accent);cursor:pointer;flex:0 0 auto} .imp-drop{ display:flex;flex-direction:column;align-items:center;gap:6px; padding:22px 16px;border-radius:16px;cursor:pointer; border:2px dashed var(--stroke); background:linear-gradient(160deg,rgba(var(--accent-rgb),.07),var(--glass)); color:var(--text-soft);text-align:center; transition:border-color .2s ease,background .2s ease,transform .2s ease; } .imp-drop:hover,.imp-drop:focus-visible{ border-color:var(--accent);transform:translateY(-2px);outline:none; background:linear-gradient(160deg,rgba(var(--accent-rgb),.14),var(--glass-2)); } .imp-drop.is-over{ border-color:var(--accent);border-style:solid; background:linear-gradient(160deg,rgba(var(--accent-rgb),.2),var(--glass-2)); } .imp-drop > i{font-size:26px;color:var(--accent)} .imp-drop b{font-size:12.5px;font-weight:800;color:var(--text);letter-spacing:.04em} .imp-drop > span{font-size:10.5px;color:var(--text-dim)} .imp-formats{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:6px} .imp-fmt{ display:inline-flex;align-items:center;gap:.35em; padding:.32em .6em;border-radius:6px; border:1px solid var(--line);background:var(--glass); font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--text-dim); } .imp-fmt.word i{color:#2B579A} .imp-fmt.excel i{color:#1D6F42} .imp-fmt.ppt i{color:#C43E1C} .imp-fmt.txt i{color:var(--text-dim)} body[data-theme="night"] .imp-fmt.word i{color:#6C9BD8} body[data-theme="night"] .imp-fmt.excel i{color:#54B57E} body[data-theme="night"] .imp-fmt.ppt i{color:#E3785A} .imp-status{ display:none;font-size:11px;line-height:1.5; padding:.7em .85em;border-radius:10px; border:1px solid var(--line);background:var(--glass);color:var(--text-soft); } .imp-status.is-on{display:block;animation:fadeIn .2s ease both} .imp-status.is-ok{ border-color:rgba(var(--accent-rgb),.42); background:rgba(var(--accent-rgb),.11);color:var(--text); } .imp-status.is-err{ border-color:rgba(var(--crimson-rgb),.45); background:rgba(var(--crimson-rgb),.11);color:var(--crimson);font-weight:600; } .imp-current{ display:none;font-size:10.5px;line-height:1.5;color:var(--text-dim); border-left:2px solid var(--stroke);padding-left:.7em; } .imp-current.is-on{display:block} .imp-current b{color:var(--text-soft);font-weight:800} .imp-list{list-style:none;display:flex;flex-direction:column;gap:8px} .imp-list li{ display:flex;gap:.65em;align-items:flex-start; font-size:10.5px;line-height:1.5;color:var(--text-dim); } .imp-list li i{color:var(--accent);margin-top:.15em;flex:0 0 auto;font-size:12px} .imp-list li b{color:var(--text-soft);font-weight:800} /* ============================================================ 7. PUERTA DE ACCESO ============================================================ */ #gate{ position:fixed;inset:0;z-index:96;display:none; align-items:center;justify-content:center;padding:20px; background:rgba(var(--page-rgb),.9); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } #gate.is-open{display:flex;animation:fadeIn .25s ease both} .gate-card{ width:min(400px,100%); padding:26px 24px;border-radius:20px; background:linear-gradient(170deg,var(--panel-a),var(--panel-b)); border:1px solid var(--stroke); box-shadow:0 40px 90px rgba(0,0,0,.6); display:flex;flex-direction:column;gap:14px;text-align:center; } .gate-card .gate-icon{ width:56px;height:56px;margin:0 auto;border-radius:50%; display:grid;place-items:center;font-size:22px; background:linear-gradient(140deg,var(--accent-2),var(--accent));color:var(--accent-ink); box-shadow:0 0 30px rgba(var(--accent-rgb),.45); } .gate-card h2{font-size:14px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--text)} .gate-card p{font-size:11.5px;color:var(--text-dim);line-height:1.55} #gate-pass{ width:100%;text-align:center;letter-spacing:.3em;font-weight:800;font-size:16px; background:var(--glass);border:1px solid var(--line);border-radius:12px; color:var(--text);font-family:var(--font);padding:.8em;outline:none; } #gate-pass:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)} .gate-msg{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--crimson);min-height:1.2em} .gate-note{ font-size:9.5px;color:var(--text-faint);line-height:1.5; border-top:1px solid var(--line);padding-top:10px;text-align:left; } .gate-shake{animation:shake .4s ease} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}} /* ============================================================ 8. AJUSTES EN MODO EDICIÓN ============================================================ */ body.edit-mode #toolbar, body.edit-mode .oracle-trigger{opacity:.25;pointer-events:none} body.edit-mode #stage{padding-right:clamp(8px,1.6vh,18px)} @media (min-width:1100px){ body.edit-mode.studio-open #stage{padding-right:min(410px,94vw)} } @media (max-width:1099px){ #studio{width:100%} body.edit-mode.studio-open #deck-area{opacity:.28;transition:opacity .3s ease} } /* Botón del riel */ #btn-editor.is-on{ background:linear-gradient(150deg,var(--accent-2),var(--accent)); color:var(--accent-ink);border-color:transparent; box-shadow:0 0 20px rgba(var(--accent-rgb),.5); }