/* ==========================================================
   ASKAKOR CODEX - Tema EPICO
   Roca real + lava cayendo + brasas + placas medievales
   ========================================================== */

/* ======================== TEMAS / VARIABLES ======================== */
:root,
:root[data-theme="lava"]{
  --bg-deepest: #050201;
  --bg-deep:    #0a0604;
  --bg:         #14080a;
  --bg-soft:    #1d0c0e;
  --bg-panel:   rgba(8,4,3,0.88);
  --ink:        #f0d8b8;
  --ink-soft:   #c8a888;
  --ink-faded:  #806050;
  --ember:      #ff3818;
  --ember-glow: #ff6028;
  --ember-deep: #b81810;
  --gold:       #ffaa30;
  --gold-bright:#ffd060;
  --gold-deep:  #884418;
  --accent:     #ff6028;
  --rule:       #4a1808;
  --green:      #80e890;
  --green-glow: rgba(128,232,144,.4);
  --red:        #ff8060;
  --crack-color: 255, 96, 40;
  --lava-flow:   255, 80, 30;
  --metal-base:  #2a1410;
  --metal-rim:   #5a2818;
  --metal-shine: #8a4828;
  --shield-fill: #6a1818;
  --shield-rim:  #ffaa30;

  --glow-strong: 0 0 16px rgba(var(--crack-color),.6), 0 0 32px rgba(var(--crack-color),.3);
  --glow-soft:   0 0 8px rgba(var(--crack-color),.3);
  --glow-text:   0 0 12px rgba(255,160,60,.4);
  --shadow:      0 4px 20px rgba(0,0,0,.6);
}
:root[data-theme="arcano"]{
  --bg-deepest: #02040a;
  --bg-deep:    #050912;
  --bg:         #0a1024;
  --bg-soft:    #0e1632;
  --bg-panel:   rgba(4,8,18,0.88);
  --ink:        #d8e0f0;
  --ink-soft:   #98a8c8;
  --ink-faded:  #5060a0;
  --ember:      #4080ff;
  --ember-glow: #60a8ff;
  --ember-deep: #2050c0;
  --gold:       #b070ff;
  --gold-bright:#d090ff;
  --gold-deep:  #503080;
  --accent:     #60a8ff;
  --rule:       #1a2050;
  --green:      #80e8c0;
  --green-glow: rgba(128,232,192,.4);
  --red:        #ff80a0;
  --crack-color: 96, 168, 255;
  --lava-flow:   80, 140, 255;
  --metal-base:  #0e1a3a;
  --metal-rim:   #1e3060;
  --metal-shine: #4878c0;
  --shield-fill: #1a2858;
  --shield-rim:  #b070ff;

  --glow-strong: 0 0 16px rgba(var(--crack-color),.6), 0 0 32px rgba(var(--crack-color),.3);
  --glow-soft:   0 0 8px rgba(var(--crack-color),.3);
  --glow-text:   0 0 12px rgba(176,112,255,.5);
  --shadow:      0 4px 20px rgba(0,0,0,.6);
}
:root[data-theme="forja"]{
  --bg-deepest: #050402;
  --bg-deep:    #0a0805;
  --bg:         #14100a;
  --bg-soft:    #1c1812;
  --bg-panel:   rgba(8,6,4,0.88);
  --ink:        #e8d8b0;
  --ink-soft:   #b89868;
  --ink-faded:  #604c30;
  --ember:      #d87030;
  --ember-glow: #e89040;
  --ember-deep: #803818;
  --gold:       #d8a040;
  --gold-bright:#e8c060;
  --gold-deep:  #6a4818;
  --accent:     #d87030;
  --rule:       #382818;
  --green:      #a0c878;
  --green-glow: rgba(160,200,120,.35);
  --red:        #d87060;
  --crack-color: 216, 112, 48;
  --lava-flow:   200, 100, 40;
  --metal-base:  #2a1c10;
  --metal-rim:   #4a3018;
  --metal-shine: #8a6028;
  --shield-fill: #4a2818;
  --shield-rim:  #d8a040;

  --glow-strong: 0 0 14px rgba(var(--crack-color),.5), 0 0 28px rgba(var(--crack-color),.25);
  --glow-soft:   0 0 6px rgba(var(--crack-color),.25);
  --glow-text:   0 0 10px rgba(216,160,64,.4);
  --shadow:      0 4px 18px rgba(0,0,0,.55);
}

/* ============= TEMA DIVINO (blanco/dorado celestial) ============= */
:root[data-theme="divino"]{
  --bg-deepest: #f5efe0;
  --bg-deep:    #e8dec8;
  --bg:         #d8c8a0;
  --bg-soft:    #f0e8d0;
  --bg-panel:   rgba(248,242,230,0.92);
  --ink:        #4a3818;
  --ink-soft:   #6a5028;
  --ink-faded:  #8a7048;
  --ember:      #ffd060;
  --ember-glow: #ffe890;
  --ember-deep: #c89030;
  --gold:       #ffb840;
  --gold-bright:#ffe080;
  --gold-deep:  #b88030;
  --accent:     #ffd060;
  --rule:       #d8c0a0;
  --green:      #80c080;
  --green-glow: rgba(128,192,128,.4);
  --red:        #d88060;
  --crack-color: 255, 200, 100;
  --lava-flow:   255, 220, 140;
  --metal-base:  #f0e0c0;
  --metal-rim:   #d8c098;
  --metal-shine: #ffefb0;
  --shield-fill: #e8d8b0;
  --shield-rim:  #ffd060;

  --glow-strong: 0 0 24px rgba(255,224,128,.7), 0 0 48px rgba(255,200,100,.4);
  --glow-soft:   0 0 12px rgba(255,224,128,.45);
  --glow-text:   0 0 16px rgba(255,232,160,.6);
  --shadow:      0 4px 20px rgba(160,120,40,.3);
}

/* ============= TEMA ENERGIA (verde radiactivo / Cherenkov) ============= */
:root[data-theme="energia"]{
  --bg-deepest: #020503;
  --bg-deep:    #050a05;
  --bg:         #0a1808;
  --bg-soft:    #0e2010;
  --bg-panel:   rgba(4,12,4,0.88);
  --ink:        #e0ffe0;
  --ink-soft:   #a0e0a0;
  --ink-faded:  #608060;
  --ember:      #50ff60;
  --ember-glow: #80ff80;
  --ember-deep: #18a020;
  --gold:       #c0ff50;
  --gold-bright:#e0ff80;
  --gold-deep:  #608018;
  --accent:     #50ff60;
  --rule:       #1a3818;
  --green:      #80ff80;
  --green-glow: rgba(128,255,128,.5);
  --red:        #80ffa0;
  --crack-color: 96, 255, 128;
  --lava-flow:   80, 240, 100;
  --metal-base:  #0e2014;
  --metal-rim:   #1e3a20;
  --metal-shine: #408848;
  --shield-fill: #1a3018;
  --shield-rim:  #50ff60;

  --glow-strong: 0 0 18px rgba(96,255,128,.7), 0 0 36px rgba(96,255,128,.4);
  --glow-soft:   0 0 10px rgba(96,255,128,.4);
  --glow-text:   0 0 14px rgba(120,255,140,.5);
  --shadow:      0 4px 20px rgba(0,40,0,.6);
}

/* ============= TEMA ABISAL (purpura profundo, mistico) ============= */
:root[data-theme="abisal"]{
  --bg-deepest: #08020a;
  --bg-deep:    #0a040e;
  --bg:         #150818;
  --bg-soft:    #1d0a22;
  --bg-panel:   rgba(8,3,12,0.9);
  --ink:        #e8d0f0;
  --ink-soft:   #b888d0;
  --ink-faded:  #6840a0;
  --ember:      #b040ff;
  --ember-glow: #d070ff;
  --ember-deep: #5810a0;
  --gold:       #e060ff;
  --gold-bright:#ff80ff;
  --gold-deep:  #6020a0;
  --accent:     #c060ff;
  --rule:       #2a1048;
  --green:      #a070ff;
  --green-glow: rgba(160,112,255,.4);
  --red:        #ff60c0;
  --crack-color: 200, 80, 255;
  --lava-flow:   180, 60, 240;
  --metal-base:  #1e0a30;
  --metal-rim:   #3818548;
  --metal-shine: #6028a0;
  --shield-fill: #3a1058;
  --shield-rim:  #c060ff;

  --glow-strong: 0 0 18px rgba(200,80,255,.7), 0 0 40px rgba(200,80,255,.4);
  --glow-soft:   0 0 10px rgba(200,80,255,.4);
  --glow-text:   0 0 14px rgba(220,120,255,.5);
  --shadow:      0 4px 22px rgba(40,0,80,.7);
}

/* ============= TEMA VACIO (negro absoluto, casi sin imagen) ============= */
:root[data-theme="vacio"]{
  --bg-deepest: #000000;
  --bg-deep:    #020202;
  --bg:         #050505;
  --bg-soft:    #0a0a0a;
  --bg-panel:   rgba(0,0,0,0.96);
  --ink:        #d0d0d0;
  --ink-soft:   #909090;
  --ink-faded:  #505050;
  --ember:      #707070;
  --ember-glow: #a0a0a0;
  --ember-deep: #303030;
  --gold:       #b0b0b0;
  --gold-bright:#e0e0e0;
  --gold-deep:  #404040;
  --accent:     #808080;
  --rule:       #1a1a1a;
  --green:      #909090;
  --green-glow: rgba(144,144,144,.3);
  --red:        #a07070;
  --crack-color: 100, 100, 100;
  --lava-flow:   80, 80, 80;
  --metal-base:  #0a0a0a;
  --metal-rim:   #1a1a1a;
  --metal-shine: #505050;
  --shield-fill: #0a0a0a;
  --shield-rim:  #808080;

  --glow-strong: 0 0 8px rgba(120,120,120,.3);
  --glow-soft:   0 0 4px rgba(120,120,120,.2);
  --glow-text:   0 0 6px rgba(160,160,160,.3);
  --shadow:      0 2px 12px rgba(0,0,0,.9);
}


/* ======================== RESET ======================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--ink);
  overflow:hidden;
  font-size:16px;
  line-height:1.55;
  background: #000;
  position:relative;
}

/* ============= FONDO: ROTACION DE DIAPOSITIVAS ============= */
/* La roca base se mantiene como fallback en NEGRO PURO.
   Encima rotan las imagenes COMPLETAS (sin recorte) con bordes negros. */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  /* Fondo NEGRO PURO debajo de todo (fallback si una imagen no carga) */
  background-color: #000;
  /* La roca como fallback si no hay imagenes en el slideshow */
  background-image: url("/static/rock-base.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Capa de slideshow: contiene imagenes superpuestas con fade */
.bg-slideshow{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Fondo negro detras de cada slide para los bordes "letterbox" */
  background-color: #000;
}
.bg-slide{
  position: absolute;
  inset: 0;
  /* 100% 100% = ESTIRA la imagen para llenar TODA la pantalla.
     Si la pantalla es mucho mas ancha que alta, deformara un poco
     pero un ~10-25% horizontal apenas se nota visualmente (no son
     fotografias de personas, son escenas con elementos volumetricos).
     CERO franjas, nunca, en ninguna pantalla. */
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  transform-origin: center center;
}
.bg-slide.active{
  opacity: 1;
}

/* ============================================================
   EFECTO KEN BURNS - movimiento cinematografico
   Cada slide activo tiene una animacion diferente.
   Las animaciones duran 16s (mas que los 12s de visibilidad)
   para que SIEMPRE haya movimiento mientras esta visible.
   ============================================================ */

/* Modos Ken Burns - mas sutiles porque ahora la imagen es 'contain'
   Ya se ve completa - solo le damos vida con movimiento ligero */

/* Modo 1: ZOOM IN sutil */
.bg-slide.kb-zoom-in.active{
  animation: kbZoomIn 16s ease-in-out forwards;
}
@keyframes kbZoomIn {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.06); }
}

/* Modo 2: ZOOM OUT sutil */
.bg-slide.kb-zoom-out.active{
  animation: kbZoomOut 16s ease-in-out forwards;
}
@keyframes kbZoomOut {
  0%   { transform: scale(1.06); }
  100% { transform: scale(1.0); }
}

/* Modo 3: PAN ARRIBA */
.bg-slide.kb-pan-up.active{
  animation: kbPanUp 16s ease-in-out forwards;
}
@keyframes kbPanUp {
  0%   { transform: scale(1.04) translateY(2%); }
  100% { transform: scale(1.04) translateY(-2%); }
}

/* Modo 4: PAN ABAJO */
.bg-slide.kb-pan-down.active{
  animation: kbPanDown 16s ease-in-out forwards;
}
@keyframes kbPanDown {
  0%   { transform: scale(1.04) translateY(-2%); }
  100% { transform: scale(1.04) translateY(2%); }
}

/* Modo 5: PAN DIAGONAL */
.bg-slide.kb-pan-diagonal.active{
  animation: kbPanDiagonal 16s ease-in-out forwards;
}
@keyframes kbPanDiagonal {
  0%   { transform: scale(1.04) translate(-1.5%, 1.5%); }
  100% { transform: scale(1.04) translate(1.5%, -1.5%); }
}

/* Modo 6: ZOOM con leve giro */
.bg-slide.kb-zoom-rotate.active{
  animation: kbZoomRotate 16s ease-in-out forwards;
}
@keyframes kbZoomRotate {
  0%   { transform: scale(1.0) rotate(-0.3deg); }
  100% { transform: scale(1.05) rotate(0.3deg); }
}

/* Tinte SUTIL por tema sobre las imagenes - sin oscurecer demasiado.
   Las imagenes son protagonistas. Los temas afectan la UI principalmente. */
:root[data-theme="lava"] body::before,
:root[data-theme="lava"] .bg-slide{
  filter: brightness(0.85) contrast(1.05) saturate(1.15);
}
:root[data-theme="arcano"] body::before,
:root[data-theme="arcano"] .bg-slide{
  filter: brightness(0.85) contrast(1.05) hue-rotate(150deg) saturate(0.95);
}
:root[data-theme="forja"] body::before,
:root[data-theme="forja"] .bg-slide{
  filter: brightness(0.85) contrast(1.05) sepia(0.25) saturate(0.9);
}
/* DIVINO: leve resplandor calido */
:root[data-theme="divino"] body::before,
:root[data-theme="divino"] .bg-slide{
  filter: brightness(1.05) contrast(0.95) sepia(0.15) saturate(0.95);
}
/* ENERGIA: verde sutil */
:root[data-theme="energia"] body::before,
:root[data-theme="energia"] .bg-slide{
  filter: brightness(0.85) contrast(1.1) hue-rotate(60deg) saturate(1.1);
}
/* ABISAL: violeta sutil */
:root[data-theme="abisal"] body::before,
:root[data-theme="abisal"] .bg-slide{
  filter: brightness(0.80) contrast(1.05) hue-rotate(240deg) saturate(1.05);
}
/* VACIO: NEGATIVO suavizado, tonos grises.
   Las luces se invierten pero los blancos quedan en gris medio,
   no en blanco puro. Mas elegante y menos agresivo. */
:root[data-theme="vacio"] body::before,
:root[data-theme="vacio"] .bg-slide{
  filter: invert(1) saturate(0) brightness(0.55) contrast(0.75);
}

/* Vineta global encima del fondo para mejorar legibilidad */
.bg-vignette{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Vineta para mejorar legibilidad sobre la imagen completa */
  background: radial-gradient(ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0.55) 100%);
}



/* Cambio entre temas: hue rotate animado */
:root.theme-changing body::before,
:root.theme-changing body::after{
  transition: filter 0.8s ease;
}

/* ============= LAVA CAYENDO (gotas que descienden) ============= */
.lava-drops{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.lava-drop{
  position:absolute;
  width:3px;
  border-radius:50%;
  background: linear-gradient(180deg,
    rgba(var(--lava-flow), 0) 0%,
    rgba(var(--lava-flow), 0.4) 30%,
    rgba(255, 200, 100, 0.9) 70%,
    rgba(255, 230, 150, 1) 100%);
  box-shadow:
    0 0 8px rgba(var(--lava-flow), 0.9),
    0 0 16px rgba(var(--lava-flow), 0.5);
  filter: blur(0.3px);
  animation: drop-fall linear infinite;
}
@keyframes drop-fall{
  0% { transform: translateY(-100px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}

/* ============= BRASAS QUE SUBEN ============= */
.embers{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.ember{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  background: rgba(255, 200, 100, 1);
  box-shadow:
    0 0 6px rgba(var(--lava-flow), 0.9),
    0 0 12px rgba(var(--lava-flow), 0.5);
  animation: ember-rise linear infinite;
}
@keyframes ember-rise{
  0% { transform: translate(0, 100vh) scale(0.8); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(15px, 50vh) scale(1.1); }
  85% { opacity: 0.6; }
  100% { transform: translate(-15px, -10vh) scale(0.5); opacity: 0; }
}

/* ============================ LAYOUT ============================ */
.app{
  display:grid;
  grid-template-columns: 300px 1fr 420px;
  grid-template-rows: 64px 1fr 28px;
  height:100vh;
  position:relative;
  z-index:2;
}

/* ====================== TOP BAR (HIERRO) ====================== */
.topbar{
  grid-column: 1 / -1;
  display:flex;align-items:center;
  padding:0 24px;
  position:relative;
  z-index:3;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.92) 0%,
      var(--metal-base) 100%);
  border-bottom: 3px solid var(--metal-rim);
  box-shadow:
    inset 0 -1px 0 rgba(var(--crack-color), 0.3),
    0 4px 24px rgba(0,0,0,0.7),
    0 0 30px rgba(var(--crack-color), 0.2);
}
.topbar::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--metal-shine), transparent);
  opacity: 0.6;
}
.topbar::after{
  content:'';
  position:absolute;
  bottom:-3px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent 5%, rgba(var(--crack-color), 0.9) 50%, transparent 95%);
  filter: drop-shadow(0 0 6px rgba(var(--crack-color), 1));
  animation: line-pulse 3s ease-in-out infinite;
}
@keyframes line-pulse{
  0%,100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.brand{
  font-family:'IM Fell English SC', serif;
  font-size:22px;letter-spacing:.12em;
  color:var(--gold-bright);
  display:flex;align-items:center;gap:14px;
  text-shadow: var(--glow-text);
}
.brand-mark{
  width:36px;height:36px;
  border:2px solid var(--metal-rim);
  border-radius:50%;
  display:grid;place-items:center;
  font-family:'IM Fell English SC', serif;
  color:var(--gold-bright);
  position:relative;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(var(--crack-color),0.5) 0%,
      var(--metal-base) 60%,
      var(--bg-deep) 100%);
  box-shadow:
    0 0 12px rgba(var(--crack-color),0.6),
    inset 0 0 8px rgba(var(--crack-color),0.3),
    inset 0 -2px 4px rgba(0,0,0,0.5);
  animation: ember-breath 3s ease-in-out infinite;
}
.brand-mark::before{
  content:'';position:absolute;inset:3px;
  border:1px solid var(--ember);
  border-radius:50%;opacity:.5;
}
.brand-mark span{font-size:14px;line-height:1;margin-top:1px;font-weight:600}
@keyframes ember-breath{
  0%,100% { box-shadow: 0 0 12px rgba(var(--crack-color),0.6), inset 0 0 8px rgba(var(--crack-color),0.3), inset 0 -2px 4px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 0 24px rgba(var(--crack-color),0.9), inset 0 0 14px rgba(var(--crack-color),0.5), inset 0 -2px 4px rgba(0,0,0,0.5); }
}

/* ============== BOTONES PLACAS DE HIERRO ============== */
.modes, .vault-tabs{
  display:flex;
  gap:0;
  margin-left:24px;
  border-radius:3px;
  background: var(--metal-base);
  border: 1px solid var(--metal-rim);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 2px 8px rgba(0,0,0,0.5);
  overflow: hidden;
  position: relative;
}
.modes::before, .vault-tabs::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

.mode, .vault-tab{
  padding:9px 18px;
  font-family:'IM Fell English SC', serif;
  font-size:13px;letter-spacing:.1em;
  color:var(--ink-faded);
  cursor:pointer;
  border-right:1px solid rgba(0,0,0,0.5);
  border-left:1px solid rgba(255,255,255,0.04);
  transition:all .25s;
  user-select:none;
  position:relative;
  background: transparent;
}
.mode:first-child, .vault-tab:first-child{border-left:none}
.mode:last-child, .vault-tab:last-child{border-right:none}

.mode:hover, .vault-tab:hover{
  color:var(--ink);
  background:
    radial-gradient(ellipse at center, rgba(var(--crack-color),0.15) 0%, transparent 70%);
  text-shadow: 0 0 8px rgba(var(--crack-color), 0.5);
}

.mode.active, .vault-tab.active{
  color:var(--gold-bright);
  background:
    linear-gradient(180deg,
      rgba(var(--crack-color), 0.4) 0%,
      var(--ember-deep) 50%,
      rgba(0,0,0,0.4) 100%);
  text-shadow:
    0 0 10px rgba(var(--crack-color), 1),
    0 0 4px rgba(255, 220, 120, 0.6);
  box-shadow:
    inset 0 0 16px rgba(var(--crack-color), 0.4),
    inset 0 -2px 0 rgba(var(--crack-color), 0.8);
}
.vault-tab{padding:9px 14px;display:flex;align-items:center;gap:6px;font-size:12px}
.vault-icon{font-size:14px}
.vault-selector{margin-left:14px}

/* ============== BUSCADOR ============== */
.search{
  margin-left:auto;
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;
  width:280px;
  border-radius:3px;
  background: var(--metal-base);
  border: 1px solid var(--metal-rim);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.5);
  transition: all .2s;
}
.search:focus-within{
  border-color: var(--ember);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 16px rgba(var(--crack-color), 0.5);
}
.search input{
  background:transparent;border:none;outline:none;
  color:var(--ink);font-family:inherit;font-size:15px;flex:1;
}
.search input::placeholder{color:var(--ink-faded);font-style:italic}
.search-icon{color:var(--ember-glow);font-size:14px;text-shadow:var(--glow-soft)}

/* ============== TOP ACTIONS ============== */
.top-actions{display:flex;gap:6px;margin-left:14px}
.icon-btn{
  width:38px;height:38px;
  display:grid;place-items:center;
  background: var(--metal-base);
  border: 1px solid var(--metal-rim);
  color:var(--ink);
  cursor:pointer;
  transition:all .2s;
  border-radius:3px;
  font-size:15px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 4px rgba(0,0,0,0.5);
}
.icon-btn:hover{
  border-color:var(--ember);color:var(--ember-glow);
  background:
    radial-gradient(ellipse at center, rgba(var(--crack-color),0.2) 0%, var(--metal-base) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 12px rgba(var(--crack-color), 0.5);
}

/* ============== ESCUDOS DE TEMA ============== */
.theme-switch{
  display:flex;
  gap:8px;
  margin-left:14px;
  align-items:center;
}
.theme-shield{
  width:42px; height:46px;
  cursor:pointer;
  position:relative;
  transition: transform .3s ease, filter .3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
.theme-shield svg{width:100%; height:100%; display:block}
.theme-shield:hover{
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8)) drop-shadow(0 0 8px rgba(255,200,100,0.5));
}
.theme-shield.active{
  transform: translateY(-3px) scale(1.1);
  filter:
    drop-shadow(0 0 8px rgba(255,200,100,0.8))
    drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  animation: shield-pulse 2s ease-in-out infinite;
}
@keyframes shield-pulse{
  0%,100%{
    filter:
      drop-shadow(0 0 8px rgba(255,200,100,0.7))
      drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  }
  50%{
    filter:
      drop-shadow(0 0 16px rgba(255,220,140,1))
      drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  }
}

/* ====================== SIDEBAR ====================== */
.sidebar{
  background: var(--bg-panel);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y:auto;
  padding:20px 0;
  position:relative;
  z-index:3;
  border-right: 1px solid var(--metal-rim);
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.04),
    4px 0 20px rgba(0,0,0,0.5);
}
.sidebar::after{
  content:'';
  position:absolute;
  top:0; right:-1px; width:1px; height:100%;
  background: linear-gradient(180deg, transparent 5%, rgba(var(--crack-color),0.7) 50%, transparent 95%);
  filter: drop-shadow(0 0 6px rgba(var(--crack-color), 0.9));
  animation: line-pulse 4s ease-in-out infinite;
}
.sidebar-section{
  padding: 0 20px 8px;
  font-family:'IM Fell English SC', serif;
  font-size:11px;letter-spacing:.2em;
  color:var(--gold);
  text-transform:uppercase;
  margin-top:18px;
  text-shadow: 0 0 8px rgba(var(--crack-color), 0.4);
}
.sidebar-section:first-child{margin-top:0}

.tree{list-style:none;padding:0 12px}
.tree-item{
  padding:6px 10px;
  cursor:pointer;
  font-size:15px;
  color:var(--ink-soft);
  border-radius:3px;
  transition:all .15s;
  display:flex;align-items:center;gap:6px;
  position:relative;
  user-select:none;
}
.tree-item:hover{
  background:
    linear-gradient(90deg,
      rgba(var(--crack-color), 0.18) 0%,
      rgba(var(--crack-color), 0.04) 50%,
      transparent 100%);
  color:var(--ink);
  text-shadow: 0 0 6px rgba(var(--crack-color), 0.4);
}
.tree-item.active{
  background:
    linear-gradient(90deg,
      var(--ember-deep) 0%,
      rgba(var(--crack-color), 0.2) 50%,
      transparent 100%);
  color:var(--gold-bright);
  font-weight:500;
  box-shadow:
    inset 4px 0 0 var(--ember),
    inset 0 0 16px rgba(var(--crack-color),0.3);
  text-shadow: var(--glow-text);
}
.tree-item.empty{font-style:italic;color:var(--ink-faded);opacity:.55}
.tree-toggle{
  width:14px;text-align:center;
  font-size:11px;color:var(--ember-glow);
  transition:transform .15s;flex-shrink:0;
}
.tree-toggle.expanded{transform:rotate(90deg)}
.tree-icon{
  width:14px;text-align:center;
  font-size:13px;color:var(--gold);flex-shrink:0;
}
.tree-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.tree-children{
  list-style:none;padding-left:14px;
  border-left:1px dotted rgba(var(--crack-color),0.3);
  margin-left:5px;
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
}
.tree-children.expanded{max-height:9999px}

/* ====================== MAIN ====================== */
.main{
  overflow-y:auto;
  padding:48px 64px 80px;
  position:relative;
  z-index:2;
}
.welcome{text-align:center;padding:60px 20px}
.welcome-title{
  font-family:'IM Fell English SC', serif;
  font-size:54px;font-weight:400;
  color:var(--gold-bright);
  letter-spacing:.04em;margin-bottom:16px;
  text-shadow:
    0 0 24px rgba(var(--crack-color),.7),
    0 0 8px rgba(255,200,120,.5),
    0 4px 12px rgba(0,0,0,0.8);
  position: relative;
}
.welcome-sub{
  font-style:italic;font-size:18px;color:var(--ink-soft);margin-bottom:32px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}
.welcome-stats{
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:40px;
  font-family:'IM Fell English SC', serif;
  font-size:13px;letter-spacing:.15em;color:var(--ink-soft);
}
.welcome-stats .stat{
  padding:18px 28px;
  background:
    linear-gradient(180deg,
      var(--metal-base) 0%,
      rgba(0,0,0,0.85) 100%);
  border: 1px solid var(--metal-rim);
  position:relative;
  overflow:hidden;
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 4px rgba(0,0,0,0.7),
    0 0 20px rgba(var(--crack-color), 0.2),
    0 4px 16px rgba(0,0,0,0.6);
}
.welcome-stats .stat::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
  filter: drop-shadow(0 0 4px rgba(var(--crack-color), 0.8));
  opacity: 0.7;
}
.welcome-stats .num{
  display:block;font-size:32px;color:var(--gold-bright);
  font-family:'Cormorant Garamond', serif;font-weight:600;margin-bottom:4px;
  text-shadow:
    0 0 16px rgba(var(--crack-color), 0.9),
    0 0 6px rgba(255,200,120, 0.6);
}

.breadcrumb{
  font-family:'IM Fell English SC', serif;
  font-size:11px;letter-spacing:.2em;color:var(--ink-soft);margin-bottom:24px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.breadcrumb span{color:var(--ember-glow);margin:0 8px;text-shadow:var(--glow-soft)}
.breadcrumb a{color:inherit;text-decoration:none;cursor:pointer}
.breadcrumb a:hover{color:var(--gold-bright)}

.article-title{
  font-family:'IM Fell English SC', serif;
  font-size:48px;font-weight:400;
  color:var(--gold-bright);
  line-height:1.1;margin-bottom:8px;letter-spacing:.02em;
  text-shadow:
    0 0 24px rgba(var(--crack-color),.6),
    0 0 8px rgba(255,200,120,.4),
    0 3px 8px rgba(0,0,0,0.8);
}
.article-subtitle{
  font-style:italic;font-size:18px;color:var(--ink-soft);
  margin-bottom:24px;font-weight:400;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.article-actions{margin-bottom:32px;display:flex;gap:8px}
.article-action{
  padding:7px 16px;
  background: var(--metal-base);
  border: 1px solid var(--metal-rim);
  color:var(--ink-soft);
  font-family:'IM Fell English SC', serif;
  font-size:11px;letter-spacing:.15em;cursor:pointer;
  transition:all .2s;
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 4px rgba(0,0,0,0.5);
}
.article-action:hover{
  border-color:var(--ember);color:var(--ember-glow);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 12px rgba(var(--crack-color), 0.4);
}
.article-action.active{
  background:
    linear-gradient(180deg,
      rgba(var(--crack-color), 0.3) 0%,
      var(--ember-deep) 100%);
  color:var(--gold-bright);border-color:var(--ember);
  text-shadow:var(--glow-text);
}

.ornament{
  text-align:center;color:var(--ember);font-size:18px;
  margin:24px 0;letter-spacing:1em;opacity:.85;
  text-shadow: var(--glow-soft);
}

.article{
  font-size:17px;line-height:1.65;color:var(--ink);
  background: rgba(0,0,0,0.5);
  padding: 32px 40px;
  border-radius: 3px;
  border: 1px solid var(--metal-rim);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 24px rgba(0,0,0,0.5);
}
.article p{margin-bottom:18px}
.article h1{
  font-family:'IM Fell English SC', serif;
  font-size:36px;color:var(--gold-bright);
  margin: 28px 0 14px;letter-spacing:.02em;
  text-shadow:var(--glow-text);
}
.article h2{
  font-family:'IM Fell English SC', serif;
  font-size:24px;color:var(--ember-glow);
  margin: 36px 0 16px;padding-bottom:8px;
  border-bottom: 1px solid var(--rule);letter-spacing:.05em;
  text-shadow: var(--glow-text);
  position:relative;
}
.article h2::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background: linear-gradient(90deg, var(--ember), transparent);
  filter: drop-shadow(0 0 3px rgba(var(--crack-color),.8));
}
.article h3{
  font-family:'IM Fell English SC', serif;
  font-size:18px;color:var(--gold);
  margin: 24px 0 10px;letter-spacing:.05em;
}
.article ul, .article ol{margin:12px 0 18px 28px}
.article li{margin-bottom:6px}
.article strong{font-weight:600;color:var(--gold-bright)}
.article em{font-style:italic;color:var(--ink-soft)}
.article code{
  font-family:'JetBrains Mono', monospace;
  background:rgba(var(--crack-color),.12);
  color:var(--ember-glow);
  padding:1px 6px;font-size:14px;border-radius:2px;
  border:1px solid rgba(var(--crack-color),.2);
}
.article blockquote{
  margin:24px 36px;padding:18px 28px;
  border-left:3px solid var(--ember);
  font-style:italic;font-size:18px;color:var(--ink-soft);
  background: linear-gradient(90deg, rgba(var(--crack-color),.08), transparent);
  position:relative;
  box-shadow: -3px 0 8px rgba(var(--crack-color),.2);
}
.article blockquote::before{
  content:'"';position:absolute;top:-8px;left:8px;
  color:var(--ember-glow);font-size:32px;font-family:Georgia,serif;
  text-shadow:var(--glow-soft);
}
.article hr{border:none;text-align:center;margin:32px 0}
.article hr::after{
  content:'* * *';color:var(--ember);letter-spacing:.5em;
  text-shadow:var(--glow-soft);
}
.wikilink{
  color:var(--ember-glow);
  text-decoration:none;
  border-bottom:1px dotted var(--ember);
  cursor:pointer;font-weight:500;
  transition: all .2s;
}
.wikilink:hover{
  background:rgba(var(--crack-color),.12);
  border-bottom-style:solid;
  color:var(--gold-bright);
  text-shadow: var(--glow-soft);
}
.wikilink.broken{
  color:var(--ink-faded);
  border-bottom-style:dashed;
}

.empty-note{
  padding:48px;text-align:center;
  border:2px dashed var(--rule);
  color:var(--ink-faded);font-style:italic;font-size:18px;
  background:rgba(0,0,0,.5);
}

.note-editor{
  width:100%;min-height:400px;
  background:rgba(0,0,0,.6);
  border:1px solid var(--metal-rim);
  padding:24px;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;line-height:1.7;color:var(--ink);
  resize:vertical;outline:none;
  border-radius:3px;
}
.note-editor:focus{
  border-color:var(--ember);
  box-shadow: 0 0 12px rgba(var(--crack-color), 0.4);
}
.editor-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;font-size:13px;color:var(--ink-faded);
}

.search-results{padding:24px 0}
.search-result{
  padding:14px 18px;margin-bottom:8px;
  border:1px solid var(--metal-rim);
  background:rgba(0,0,0,.5);
  cursor:pointer;transition:all .2s;
  border-radius:3px;
}
.search-result:hover{
  border-color:var(--ember);
  background:rgba(var(--crack-color),.08);
  box-shadow:0 0 14px rgba(var(--crack-color), 0.3);
}
.search-result-title{
  font-family:'IM Fell English SC', serif;
  font-size:16px;color:var(--gold-bright);
  letter-spacing:.05em;margin-bottom:4px;
}
.search-result-path{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;color:var(--ink-faded);margin-bottom:6px;
}
.search-result-snippet{font-size:14px;color:var(--ink-soft)}

/* ====================== AI PANEL ====================== */
.ai-panel{
  background: var(--bg-panel);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color:var(--ink);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  border-left: 1px solid var(--metal-rim);
  z-index:3;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.04),
    -4px 0 20px rgba(0,0,0,0.5);
}
.ai-panel::before{
  content:'';position:absolute;top:0;left:-1px;width:1px;height:100%;
  background: linear-gradient(180deg, transparent 5%, rgba(var(--crack-color),0.7) 50%, transparent 95%);
  filter: drop-shadow(0 0 6px rgba(var(--crack-color), 0.9));
  animation: line-pulse 4.5s ease-in-out infinite;
}

.ai-header{
  padding:18px 22px;
  border-bottom: 1px solid var(--rule);
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  background: linear-gradient(180deg, var(--metal-base) 0%, transparent 100%);
}
.ai-orb{
  width:46px;height:46px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%,
      var(--gold-bright) 0%,
      var(--ember-glow) 25%,
      var(--ember) 55%,
      var(--ember-deep) 100%);
  box-shadow:
    0 0 28px rgba(var(--crack-color),.85),
    0 0 56px rgba(var(--crack-color),.4),
    inset 0 -8px 12px rgba(0,0,0,.5);
  position:relative;flex-shrink:0;
  animation: orb-pulse 2.5s ease-in-out infinite;
}
.ai-orb::after{
  content:'';position:absolute;top:9px;left:13px;
  width:14px;height:8px;background:rgba(255,255,255,.7);
  border-radius:50%;filter:blur(2px);
}
.ai-orb.thinking{ animation: orb-thinking 0.9s ease-in-out infinite }
@keyframes orb-pulse{
  0%,100%{
    box-shadow: 0 0 28px rgba(var(--crack-color),.85),
                0 0 56px rgba(var(--crack-color),.4),
                inset 0 -8px 12px rgba(0,0,0,.5);
    transform:scale(1);
  }
  50%{
    box-shadow: 0 0 40px rgba(var(--crack-color),1),
                0 0 80px rgba(var(--crack-color),.6),
                inset 0 -8px 12px rgba(0,0,0,.5);
    transform:scale(1.05);
  }
}
@keyframes orb-thinking{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.2)}
}

.ai-title{
  font-family:'IM Fell English SC', serif;
  font-size:16px;letter-spacing:.15em;color:var(--gold-bright);
  text-shadow:var(--glow-text);
}
.ai-status{font-size:12px;color:var(--ink-faded);font-style:italic;margin-top:2px}
.ai-status .dot{
  display:inline-block;width:6px;height:6px;background:var(--green);
  border-radius:50%;margin-right:6px;
  box-shadow:0 0 8px var(--green-glow);
  animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse{0%,100%{opacity:.7}50%{opacity:1}}
.ai-status.error .dot{background:var(--red);box-shadow:0 0 8px var(--red)}
.ai-status.warning .dot{background:var(--gold-bright);box-shadow:0 0 8px var(--gold-bright)}

.chat{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:18px}
.msg{font-size:15px;line-height:1.5}
.msg.user{
  align-self:flex-end;max-width:85%;
  background: linear-gradient(135deg, rgba(var(--crack-color),.18), rgba(var(--crack-color),.06));
  border:1px solid rgba(var(--crack-color),.4);
  padding:10px 14px;border-radius:3px;color:var(--ink);
  white-space:pre-wrap;
  box-shadow: 0 0 8px rgba(var(--crack-color), 0.2);
}
.msg.ai{
  color:var(--ink);
  font-family:'Cormorant Garamond', serif;white-space:pre-wrap;
}
.msg.ai .ai-label{
  font-family:'IM Fell English SC', serif;
  font-size:10px;letter-spacing:.2em;color:var(--ember-glow);
  margin-bottom:6px;display:block;
  text-shadow:var(--glow-soft);
}
.msg.system{
  font-size:12px;color:var(--ink-faded);font-style:italic;
  text-align:center;padding:6px 0;
}

.draft-card{
  border:1px solid var(--ember);
  background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.5));
  margin:8px 0;border-radius:3px;overflow:hidden;
  box-shadow:
    0 0 18px rgba(var(--crack-color), 0.4),
    inset 0 0 24px rgba(var(--crack-color),.08);
  position:relative;
}
.draft-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
  filter: drop-shadow(0 0 4px rgba(var(--crack-color),.9));
  animation: scan-line-h 3s ease-in-out infinite;
}
@keyframes scan-line-h{
  0%,100%{opacity:.4;transform:translateX(-30%)}
  50%{opacity:1;transform:translateX(30%)}
}
.draft-card.accepted{border-color:var(--green);box-shadow:0 0 16px var(--green-glow);opacity:.7}
.draft-card.rejected{border-color:var(--red);opacity:.45}

.draft-header{
  background:
    linear-gradient(180deg,
      var(--ember-deep) 0%,
      rgba(0,0,0,.7) 100%);
  padding:10px 14px;
  font-family:'IM Fell English SC', serif;
  font-size:11px;letter-spacing:.15em;color:var(--gold-bright);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;
  text-shadow: var(--glow-text);
  border-bottom: 1px solid rgba(var(--crack-color),.4);
}
.draft-header .summary{flex:1}
.draft-path{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;color:rgba(240,216,184,.7);
  letter-spacing:0;text-transform:none;
}
.draft-body{
  padding:8px 0;font-size:13px;color:var(--ink-soft);
  max-height:340px;overflow-y:auto;
  background: rgba(0,0,0,.4);
}
.diff-line{
  padding:3px 14px;display:block;
  font-family:'JetBrains Mono', monospace;font-size:12px;
  white-space:pre-wrap;word-break:break-word;line-height:1.5;
}
.diff-add{
  background:rgba(128,232,144,.12);
  border-left:2px solid var(--green);color:#c8eccd;
}
.diff-add::before{content:'+ ';color:var(--green);font-weight:bold}
.diff-del{
  background:rgba(255,128,96,.10);
  border-left:2px solid var(--red);color:#eccdcd;
  text-decoration:line-through;opacity:.7;
}
.diff-del::before{content:'- ';color:var(--red);font-weight:bold;text-decoration:none;display:inline-block}
.diff-ctx{color:rgba(184,168,136,.6);padding-left:18px}
.diff-hunk{
  color:var(--ember-glow);background:rgba(var(--crack-color),.1);
  font-style:italic;padding-left:14px;
}
.draft-actions{
  display:flex;gap:0;border-top:1px solid rgba(var(--crack-color),.4);
  background:rgba(0,0,0,.5);
}
.draft-btn{
  flex:1;padding:10px 0;
  background:transparent;border:none;
  border-right:1px solid rgba(var(--crack-color),.2);
  color:var(--ink);
  font-family:'IM Fell English SC', serif;
  font-size:11px;letter-spacing:.15em;cursor:pointer;
  transition:all .2s;
}
.draft-btn:last-child{border-right:none}
.draft-btn:disabled{opacity:.3;cursor:not-allowed}
.draft-btn.accept:hover:not(:disabled){
  background:rgba(128,232,144,.18);color:var(--green);
}
.draft-btn.edit:hover:not(:disabled){
  background:rgba(var(--crack-color),.18);color:var(--gold-bright);
}
.draft-btn.reject:hover:not(:disabled){
  background:rgba(255,128,96,.18);color:var(--red);
}

.links-detected{
  margin-top:8px;padding:8px 12px;
  background:rgba(var(--crack-color),.08);
  border:1px dashed rgba(var(--crack-color),.4);
  font-size:13px;color:var(--ink-faded);
}
.links-detected strong{
  color:var(--gold-bright);font-family:'IM Fell English SC', serif;
  font-size:11px;letter-spacing:.1em;display:block;margin-bottom:4px;
}
.link-tag{
  display:inline-block;
  background:rgba(var(--crack-color),.3);
  color:var(--gold-bright);
  padding:2px 8px;margin:2px 4px 2px 0;
  border-radius:2px;font-size:12px;
  font-family:'JetBrains Mono', monospace;
  border:1px solid rgba(var(--crack-color),.4);
}

.composer{
  border-top:1px solid var(--rule);
  padding:14px 18px;background:rgba(0,0,0,.5);
  flex-shrink:0;position:relative;
}
.composer::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:1px;
  background: linear-gradient(90deg, transparent, var(--ember), transparent);
  filter: drop-shadow(0 0 3px rgba(var(--crack-color),.7));
}
.composer-input{
  width:100%;background:rgba(0,0,0,.5);
  border:1px solid var(--metal-rim);color:var(--ink);
  padding:10px 12px;
  font-family:'Cormorant Garamond', serif;
  font-size:15px;outline:none;resize:none;
  min-height:60px;border-radius:3px;
  transition: all .2s;
}
.composer-input:focus{
  border-color:var(--ember);
  box-shadow: 0 0 10px rgba(var(--crack-color), 0.4);
}
.composer-input::placeholder{color:var(--ink-faded);font-style:italic}
.composer-actions{
  display:flex;justify-content:space-between;align-items:center;margin-top:8px;
}
.model-pill{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;color:var(--ink-faded);
  padding:3px 8px;border:1px solid var(--rule);border-radius:2px;
}
.send-btn{
  background:
    linear-gradient(180deg,
      rgba(var(--crack-color), 0.4) 0%,
      var(--ember-deep) 100%);
  color:var(--gold-bright);
  border:1px solid var(--ember);
  padding:8px 22px;
  font-family:'IM Fell English SC', serif;
  font-size:11px;letter-spacing:.2em;cursor:pointer;
  transition:all .2s;
  text-shadow: var(--glow-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 12px rgba(var(--crack-color), 0.4);
  border-radius:3px;
}
.send-btn:hover:not(:disabled){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 22px rgba(var(--crack-color), 0.7);
}
.send-btn:disabled{opacity:.5;cursor:not-allowed}

/* ============= STATUS BAR ============= */
.statusbar{
  grid-column: 1 / -1;
  background: linear-gradient(180deg, var(--metal-base) 0%, var(--bg-deepest) 100%);
  color: var(--ink-faded);
  font-family:'JetBrains Mono', monospace;font-size:11px;
  display:flex;align-items:center;padding: 0 20px;gap:20px;
  border-top:1px solid var(--metal-rim);
  position:relative;
  z-index:3;
}
.statusbar::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background: linear-gradient(90deg, transparent 5%, rgba(var(--crack-color), 0.8) 50%, transparent 95%);
  filter: drop-shadow(0 0 4px rgba(var(--crack-color),.9));
  animation: line-pulse 5s ease-in-out infinite;
}
.status-item{display:flex;align-items:center;gap:6px}
.status-item.ok{color:var(--green)}
.status-item.warning{color:var(--gold-bright)}
.status-item.error{color:var(--red)}
.status-item .led{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 5px currentColor;
}
.status-spacer{flex:1}

/* ============= MODAL ============= */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;z-index:1000;
}
.modal{
  background:var(--bg);
  border:1px solid var(--ember);
  width:520px;max-width:90vw;
  box-shadow:
    0 0 30px rgba(var(--crack-color), 0.5),
    0 30px 80px rgba(0,0,0,.8);
  position:relative;
  border-radius:3px;
}
.modal::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
  background: linear-gradient(90deg, transparent, var(--ember-glow), transparent);
  filter: drop-shadow(0 0 4px rgba(var(--crack-color),.9));
}
.modal-header{
  background:var(--metal-base);color:var(--gold-bright);
  padding:14px 20px;
  font-family:'IM Fell English SC', serif;letter-spacing:.15em;
  border-bottom:1px solid var(--metal-rim);
  text-shadow:var(--glow-text);
}
.modal-body{padding:20px;font-size:14px;line-height:1.6;color:var(--ink)}
.modal-body table{width:100%;border-collapse:collapse;margin-top:10px}
.modal-body td{padding:6px 8px;border-bottom:1px solid var(--rule)}
.modal-body td:first-child{
  font-family:'IM Fell English SC', serif;color:var(--ember-glow);
  font-size:12px;letter-spacing:.1em;
}
.modal-close{
  display:block;margin:16px 20px;
  padding:8px 16px;
  background:linear-gradient(180deg, var(--ember-deep), rgba(0,0,0,.6));
  color:var(--gold-bright);
  border:1px solid var(--ember);cursor:pointer;
  font-family:'IM Fell English SC', serif;letter-spacing:.15em;
  border-radius:3px;
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.4)}
::-webkit-scrollbar-thumb{
  background:rgba(var(--crack-color),.3);
  border-radius:0;
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(var(--crack-color),.5);
  box-shadow: inset 0 0 6px rgba(var(--crack-color),.6);
}

/* Toast */
.toast{
  position:fixed;bottom:48px;right:20px;
  padding:12px 18px;
  background:var(--metal-base);color:var(--gold-bright);
  border:1px solid var(--ember);
  font-family:'IM Fell English SC', serif;letter-spacing:.1em;
  font-size:13px;z-index:500;
  box-shadow:
    0 0 18px rgba(var(--crack-color), 0.5),
    0 8px 24px rgba(0,0,0,.7);
  text-shadow: var(--glow-text);
  animation: toast-in .3s ease-out, toast-out .3s ease-in 2.7s forwards;
  border-radius:3px;
}
@keyframes toast-in{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toast-out{to{transform:translateX(120%);opacity:0}}
.toast.error{color:#ffb3b3;border-color:var(--red)}
.toast.success{color:#b3ffc8;border-color:var(--green)}

/* RESPONSIVE */
@media (max-width: 900px){
  .app{grid-template-columns: 1fr;grid-template-rows: 60px auto 1fr 28px}
  .sidebar{grid-row: 2;max-height: 180px;border-right:none;border-bottom:1px solid var(--metal-rim)}
  .sidebar::after{display:none}
  .main{grid-row: 3;padding: 24px 18px}
  .ai-panel{display:none}
  .topbar{padding: 0 12px;gap: 8px}
  .modes, .vault-selector, .theme-switch{display:none}
  .search{width:auto;flex:1;margin-left:auto}
  .article-title{font-size:32px}
  .welcome-title{font-size:36px}
  .welcome-stats{gap:12px}
  .welcome-stats .stat{padding:12px 16px}
}


/* ============= TEMAS: TINTAR LA ROCA SEGUN TEMA ============= */
:root[data-theme="lava"] body::before{ filter: none; }
:root[data-theme="arcano"] body::before{
  filter: hue-rotate(190deg) saturate(0.85);
}
:root[data-theme="forja"] body::before{
  filter: sepia(0.35) hue-rotate(-15deg) saturate(0.8) brightness(0.9);
}

/* Transicion suave al cambiar tema */
body::before, body::after{
  transition: filter 0.7s ease;
}

/* ============= ANIMACION DE RESPIRACION DEL FUEGO ============= */
@keyframes cracks-breathe{
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ============================================================
   ESTILOS PARA EL SISTEMA DE CANON (.docx hermano)
   Anadir al FINAL del styles.css existente.
   ============================================================ */

/* Badge "CANON" al lado del titulo */
.canon-badge{
  display: inline-block;
  margin-left: 16px;
  padding: 3px 10px;
  font-family: 'IM Fell English SC', serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  vertical-align: middle;
  color: var(--gold-bright);
  background: linear-gradient(180deg, var(--metal-base), rgba(0,0,0,0.7));
  border: 1px solid var(--gold);
  border-radius: 2px;
  text-shadow: var(--glow-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 8px rgba(var(--crack-color), 0.3);
}

/* Aviso de archivo canon */
.canon-notice{
  margin: 0 0 24px 0;
  padding: 12px 18px;
  background: linear-gradient(90deg,
    rgba(var(--crack-color), 0.12),
    rgba(var(--crack-color), 0.04));
  border: 1px dashed rgba(var(--crack-color), 0.5);
  border-left: 3px solid var(--ember);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  border-radius: 2px;
}
.canon-notice strong{
  color: var(--gold-bright);
  font-style: normal;
  font-family: 'IM Fell English SC', serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 0 4px;
}

/* Boton "Publicar al canon" - destacado */
.article-action.canon-publish{
  background: linear-gradient(180deg,
    rgba(var(--crack-color), 0.4) 0%,
    var(--ember-deep) 100%);
  color: var(--gold-bright);
  border-color: var(--ember);
  text-shadow: var(--glow-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 12px rgba(var(--crack-color), 0.4);
  font-weight: 500;
}
.article-action.canon-publish:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 22px rgba(var(--crack-color), 0.7);
  transform: translateY(-1px);
}

/* ============================================================
   MENU CONTEXTUAL (click derecho en arbol)
   ============================================================ */
.codex-ctx-menu{
  position: absolute;
  z-index: 9999;
  min-width: 180px;
  padding: 6px 0;
  background: linear-gradient(180deg, var(--metal-base), rgba(0,0,0,0.92));
  border: 1px solid var(--gold);
  border-radius: 3px;
  box-shadow:
    0 4px 18px rgba(0,0,0,0.7),
    0 0 14px rgba(var(--crack-color), 0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: 'IM Fell English', serif;
  font-size: 14px;
  color: var(--ink-soft);
}
.codex-ctx-menu .ctx-item{
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.codex-ctx-menu .ctx-item:hover{
  background: linear-gradient(90deg,
    rgba(var(--crack-color), 0.18),
    rgba(var(--crack-color), 0.04));
  color: var(--gold-bright);
  text-shadow: var(--glow-text);
}
.codex-ctx-menu .ctx-item.ctx-danger{
  color: #d97560;
}
.codex-ctx-menu .ctx-item.ctx-danger:hover{
  background: linear-gradient(90deg,
    rgba(217, 117, 96, 0.25),
    rgba(217, 117, 96, 0.05));
  color: #ff8060;
}
.codex-ctx-menu .ctx-sep{
  height: 1px;
  margin: 4px 8px;
  background: rgba(var(--crack-color), 0.3);
}

/* Boton de apagar PC en cabecera (opcional, si lo anades al index.html) */
.btn-shutdown-pc{
  background: linear-gradient(180deg, rgba(180, 40, 40, 0.7), rgba(80, 10, 10, 0.9));
  border: 1px solid #d97560;
  color: #ffa080;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 2px;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
}
.btn-shutdown-pc:hover{
  background: linear-gradient(180deg, rgba(220, 50, 50, 0.8), rgba(100, 15, 15, 0.95));
  box-shadow: 0 0 12px rgba(217, 117, 96, 0.5);
}

/* ============================================================
   TREE EXPLORER - Toolbar, drag&drop, seleccion multiple
   ============================================================ */

/* Toolbar arriba del arbol */
.tree-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(var(--crack-color), 0.25);
  background: linear-gradient(180deg, rgba(0,0,0,0.4), transparent);
}
.tb-btn{
  background: linear-gradient(180deg, var(--metal-base), rgba(0,0,0,0.5));
  border: 1px solid rgba(var(--crack-color), 0.4);
  color: var(--ink-soft);
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}
.tb-btn:hover:not(:disabled){
  border-color: var(--gold);
  color: var(--gold-bright);
  text-shadow: var(--glow-text);
  box-shadow: 0 0 6px rgba(var(--crack-color), 0.4);
}
.tb-btn:disabled{
  opacity: 0.3;
  cursor: not-allowed;
}
.tb-btn.tb-danger:hover:not(:disabled){
  border-color: #d97560;
  color: #ff8060;
}
.tb-sep{
  display: inline-block;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: rgba(var(--crack-color), 0.3);
}
.tb-info{
  margin-left: auto;
  font-style: italic;
  font-size: 11px;
  color: var(--gold);
  padding: 2px 8px;
}

/* Item seleccionado */
.tree-item.selected{
  background: linear-gradient(90deg,
    rgba(var(--crack-color), 0.25),
    rgba(var(--crack-color), 0.08));
  border-left: 2px solid var(--ember);
  padding-left: 4px;
}
.tree-item.selected .tree-name{
  color: var(--gold-bright);
  text-shadow: var(--glow-text);
}

/* Item siendo arrastrado */
.tree-item.dragging{
  opacity: 0.5;
}

/* Carpeta destino (drop target) */
.tree-item.drop-target,
ul.drop-target{
  background: linear-gradient(90deg,
    rgba(var(--crack-color), 0.4),
    rgba(var(--crack-color), 0.15));
  outline: 1px dashed var(--ember);
  outline-offset: -2px;
}
ul.tree-children.drop-target{
  min-height: 8px;
}

/* Cursor para drag */
.tree-item[draggable="true"]{
  cursor: grab;
}
.tree-item[draggable="true"]:active{
  cursor: grabbing;
}

/* ============================================================
   MODAL OVERLAY (reemplazo de prompt() del navegador)
   ============================================================ */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.2s ease;
}
@keyframes modalFadeIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-card{
  background: linear-gradient(180deg,
    rgba(40, 20, 10, 0.95),
    rgba(15, 8, 4, 0.98));
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 28px 32px;
  min-width: 420px;
  max-width: 580px;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(var(--crack-color), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: modalSlideIn 0.25s ease;
}
@keyframes modalSlideIn{
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-title{
  margin: 0 0 12px 0;
  font-family: 'IM Fell English SC', serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  text-shadow: var(--glow-text);
}
.modal-help{
  margin: 0 0 18px 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  white-space: pre-line;
  line-height: 1.5;
}
.modal-input{
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(var(--crack-color), 0.5);
  color: var(--ink);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  border-radius: 2px;
  outline: none;
  margin-bottom: 20px;
}
.modal-input:focus{
  border-color: var(--ember);
  box-shadow: 0 0 12px rgba(var(--crack-color), 0.4);
}
.modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal-btn{
  background: linear-gradient(180deg, var(--metal-base), rgba(0, 0, 0, 0.7));
  border: 1px solid rgba(var(--crack-color), 0.5);
  color: var(--ink-soft);
  padding: 8px 20px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}
.modal-btn:hover{
  border-color: var(--gold);
  color: var(--gold-bright);
  text-shadow: var(--glow-text);
}
.modal-btn.modal-ok{
  background: linear-gradient(180deg,
    rgba(var(--crack-color), 0.4),
    var(--ember-deep));
  color: var(--gold-bright);
  border-color: var(--ember);
}
.modal-btn.modal-danger{
  background: linear-gradient(180deg, rgba(180, 40, 40, 0.6), rgba(80, 10, 10, 0.85));
  border-color: #d97560;
  color: #ff8060;
}

/* ============================================================
   IMAGENES EN MARKDOWN (modo lectura)
   ============================================================ */
.md-image,
.article img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 3px;
  border: 1px solid rgba(217, 117, 96, 0.4);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  background: rgba(0, 0, 0, 0.3);
}

/* ============================================================
   SELECTOR DE PLANTILLAS
   ============================================================ */
.modal-template-picker{
  min-width: 600px;
  max-width: 720px;
}
.template-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0 22px 0;
}
.template-card{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.65));
  border: 1px solid rgba(var(--crack-color), 0.4);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.template-card:hover{
  border-color: var(--ember);
  background: linear-gradient(180deg,
    rgba(var(--crack-color), 0.18),
    rgba(0,0,0,0.55));
  box-shadow: 0 0 14px rgba(var(--crack-color), 0.3);
  transform: translateY(-1px);
}
.template-icon{
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IM Fell English SC', serif;
  font-size: 22px;
  color: var(--gold-bright);
  background: linear-gradient(180deg, var(--metal-base), rgba(0,0,0,0.7));
  border: 1px solid var(--gold);
  border-radius: 50%;
  text-shadow: var(--glow-text);
}
.template-info{
  flex: 1;
  min-width: 0;
}
.template-name{
  font-family: 'IM Fell English SC', serif;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.template-desc{
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 4px;
}
.template-folder{
  font-size: 11px;
  color: rgba(var(--crack-color), 0.7);
  font-family: monospace;
}

/* Boton de plantilla en toolbar */
.tb-btn.tb-template{
  background: linear-gradient(180deg,
    rgba(var(--crack-color), 0.3),
    rgba(80, 30, 10, 0.7));
  border-color: var(--ember);
  color: var(--gold-bright);
}
.tb-btn.tb-template:hover:not(:disabled){
  background: linear-gradient(180deg,
    rgba(var(--crack-color), 0.5),
    rgba(120, 40, 15, 0.9));
}

/* ============================================================
   AUTOCOMPLETADO DE WIKILINKS
   ============================================================ */
.wikilink-autocomplete{
  position: absolute;
  z-index: 9999;
  min-width: 280px;
  max-width: 420px;
  max-height: 320px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--metal-base), rgba(0,0,0,0.95));
  border: 1px solid var(--gold);
  border-radius: 3px;
  box-shadow:
    0 6px 22px rgba(0,0,0,0.8),
    0 0 14px rgba(var(--crack-color), 0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);
  font-size: 13px;
  font-family: 'IM Fell English', serif;
}
.wikilink-autocomplete .wac-item{
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid rgba(var(--crack-color), 0.15);
  transition: background 0.1s;
}
.wikilink-autocomplete .wac-item:last-child{
  border-bottom: 0;
}
.wikilink-autocomplete .wac-item:hover,
.wikilink-autocomplete .wac-item.selected{
  background: linear-gradient(90deg,
    rgba(var(--crack-color), 0.2),
    rgba(var(--crack-color), 0.05));
  color: var(--gold-bright);
}
.wikilink-autocomplete .wac-name{
  color: var(--gold-bright);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.wikilink-autocomplete .wac-folder{
  color: rgba(var(--ink-soft), 0.7);
  font-size: 11px;
  font-family: monospace;
  font-style: italic;
}

/* ============================================================
   MODAL DE PUBLICAR (web estatica)
   ============================================================ */
.modal-publish,
.modal-publish-result{
  min-width: 580px;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
}
.publish-section{
  margin-bottom: 18px;
}
.publish-label{
  display: block;
  font-family: 'IM Fell English SC', serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--gold-bright);
  margin-bottom: 6px;
}
.publish-help{
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 8px;
}
.publish-help code{
  background: rgba(0,0,0,0.5);
  padding: 1px 5px;
  border-radius: 2px;
  font-family: monospace;
  color: var(--gold);
  font-size: 11px;
}

/* ============================================================
   TOOLBAR DE SELECCION Y MODAL DE ENLACES
   ============================================================ */
.selection-toolbar {
  position: absolute;
  background: var(--bg-panel);
  border: 1px solid var(--metal-rim);
  border-radius: 4px;
  padding: 4px;
  display: flex;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  transform: translateX(-50%);
  transition: opacity 0.2s ease;
}
.selection-toolbar button {
  background: var(--metal-base);
  border: 1px solid var(--metal-rim);
  color: var(--ink-soft);
  padding: 6px 12px;
  font-family: 'IM Fell English SC', serif;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s;
}
.selection-toolbar button:hover {
  border-color: var(--ember);
  color: var(--gold-bright);
  background: rgba(var(--crack-color), 0.1);
  box-shadow: 0 0 8px rgba(var(--crack-color), 0.3);
}

#link-suggestion-buttons button {
  background: var(--metal-base);
  border: 1px solid var(--metal-rim);
  color: var(--ink);
  padding: 10px 15px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
  text-align: left;
  transition: all 0.2s;
}
#link-suggestion-buttons button:hover {
  background: rgba(var(--crack-color), 0.1);
  border-color: var(--ember);
  color: var(--gold-bright);
}
.publish-folders-list{
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(var(--crack-color), 0.3);
  border-radius: 3px;
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.publish-folder{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s;
  font-size: 14px;
}
.publish-folder:hover{
  background: rgba(var(--crack-color), 0.08);
}
.publish-folder.checked{
  background: rgba(var(--crack-color), 0.12);
  border-left: 3px solid var(--ember);
  padding-left: 9px;
}
.publish-folder input[type="checkbox"]{
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--ember);
}
.publish-folder-name{
  flex: 1;
  font-family: 'IM Fell English SC', serif;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.publish-folder.checked .publish-folder-name{
  color: var(--gold-bright);
}
.publish-folder-count{
  font-size: 11px;
  color: rgba(var(--ink-soft), 0.6);
  font-style: italic;
  font-family: monospace;
}

.publish-result-box{
  background: rgba(0,0,0,0.4);
  border: 1px dashed rgba(var(--crack-color), 0.4);
  padding: 12px 16px;
  border-radius: 3px;
  margin: 14px 0;
  word-break: break-all;
}
.publish-result-box code{
  display: block;
  margin-top: 4px;
  color: var(--gold-bright);
  font-family: monospace;
  font-size: 12px;
}

.modal-subtitle{
  font-family: 'IM Fell English SC', serif;
  font-size: 16px;
  color: var(--gold-bright);
  margin: 18px 0 8px;
  letter-spacing: 0.06em;
}
.publish-steps{
  margin: 10px 0 10px 22px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
}
.publish-steps li{
  margin-bottom: 6px;
}
.publish-steps a{
  color: var(--gold-bright);
  text-decoration: underline;
}
.publish-steps strong{
  color: var(--gold-bright);
}
.publish-steps code{
  background: rgba(0,0,0,0.5);
  padding: 1px 5px;
  border-radius: 2px;
  font-family: monospace;
  color: var(--gold);
  font-size: 11px;
}

/* ============================================================
   PLANTILLAS AGRUPADAS (selector ampliado a 30)
   ============================================================ */
.modal-template-picker{
  min-width: 720px !important;
  max-width: 880px !important;
  max-height: 90vh;
  overflow-y: auto;
}
.template-search-bar{
  margin: 14px 0 18px 0;
}
.template-search{
  width: 100%;
  font-size: 13px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
}
.template-groups-container{
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 6px;
}
.template-group{
  margin-bottom: 22px;
}
.template-group-title{
  font-family: 'IM Fell English SC', serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--gold-bright);
  padding: 6px 0 4px 0;
  margin: 0 0 8px 0;
  border-bottom: 1px solid rgba(var(--crack-color), 0.4);
  text-transform: uppercase;
}
.template-group-count{
  font-size: 11px;
  font-family: monospace;
  color: rgba(var(--ink-soft), 0.6);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}
/* Cards mas compactas para que entren mas */
.template-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  margin: 0 !important;
}
.template-card{
  padding: 10px 12px !important;
  gap: 10px !important;
}
.template-icon{
  width: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
}
.template-name{
  font-size: 13px !important;
  margin-bottom: 2px !important;
}
.template-desc{
  font-size: 11px !important;
  margin-bottom: 2px !important;
}
.template-folder{
  font-size: 10px !important;
}
/* ============================================================
   MODO LORE (IA DESACTIVADA)
   ============================================================ */
.ai-disabled-hidden {
    display: none !important;
}
.ai-disabled-full-width {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}