/* ==========================================================================
   CAUCE - TEMA "CUBIERTA"
   Cristal sobre el vacio, marco carmesi biselado y consola verde de fosforo.
   Se carga DESPUES de app.css y solo actua bajo html[data-skin="cubierta"],
   asi que el tema neumorfico original queda intacto al desactivarlo.

   No usa tipografias nuevas: reaprovecha Sora / Manrope / Spline Sans Mono
   que ya viven en fonts/ para no romper el funcionamiento sin conexion.
   ========================================================================== */

html[data-skin="cubierta"]{
  /* ---- superficies ---- */
  --canvas:#05070E;
  --surface:rgba(9,13,22,.56);
  --tint:rgba(76,224,76,.13);

  /* ---- tinta ---- */
  --ink:#EDF2EC;
  --ink-2:#B3BFBC;
  --ink-3:#8B9897;

  /* ---- acento: verde de fosforo ---- */
  --accent:#4CE04C;
  --accent-ink:#05170A;

  /* ---- semanticos del chat de Battle.net ---- */
  --good:#4CE04C;
  --warn:#F5E13C;
  --crit:#FF6060;
  --pin:#F169E0;

  /* ---- material propio del tema ---- */
  --cy:#4FD4E8;
  --lime:#9BFF3C;
  --olive:#C8E04A;
  --blue:#7BB2F0;
  --edge:rgba(232,48,58,.88);
  --edge-soft:rgba(232,48,58,.45);
  --steel:linear-gradient(180deg,#FFFFFF 0%,#F0F5FA 9%,#C4CFD8 24%,#939FAA 42%,#5C666F 62%,#333B43 80%,#171D23 92%,#0A0E12 100%);
  --glass:linear-gradient(109deg, transparent 22%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.08) 46%, rgba(255,255,255,.028) 54%, transparent 68%),
          linear-gradient(157deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.022) 32%, rgba(255,255,255,0) 58%),
          linear-gradient(180deg, rgba(7,10,17,.56) 0%, rgba(4,6,12,.70) 100%);
  --glass-lime:linear-gradient(157deg, rgba(155,255,60,.16), rgba(255,255,255,.02) 45%, transparent),
               linear-gradient(180deg, rgba(15,32,8,.62), rgba(6,12,4,.8));
  --blur:blur(17px) saturate(106%);

  /* ---- siluetas: contorno exterior de cada lamina ---- */
  --cut:polygon(0 25px, 13px 12px, 13px 0,
                calc(100% - 36px) 0, calc(100% - 21px) 14px, 100% 14px,
                100% calc(100% - 21px), calc(100% - 15px) 100%,
                21px 100%, 0 calc(100% - 15px));
  --cut-s:polygon(0 12px, 8px 4px, 8px 0,
                  calc(100% - 20px) 0, calc(100% - 12px) 8px, 100% 8px,
                  100% calc(100% - 12px), calc(100% - 9px) 100%,
                  12px 100%, 0 calc(100% - 9px));
  --cut-xs:polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);

  /* ---- marco biselado ----
     El marco de cada lamina ya no es una linea plana: es un anillo poligonal
     (::after, clip-path evenodd) que sigue los chaflanes con 5 / 4 / 2 px de
     grosor, y dentro va el cristal (::before) recortado con el poligono
     interior. Los interiores estan calculados desplazando cada arista hacia
     dentro (vertices con decimales = interseccion de los chaflanes a 45).
     --ring-* = exterior + interior recorridos en un solo polygon(): la
     costura P0->Q0 se recorre ida y vuelta, asi que no pinta. */
  /* ---- marco biselado en dos caras ----
     El marco de cada lamina ya no es una linea plana: son DOS anillos
     poligonales (::before = cara exterior iluminada, ::after = cara interior
     en sombra) que siguen los chaflanes con 5 / 4 / 2 px de grosor total.
     Los vertices interiores estan calculados desplazando cada arista hacia
     dentro (los decimales son la interseccion de los chaflanes a 45).
     Cada --ring-* recorre exterior + interior en un solo polygon(evenodd):
     la costura P0->Q0 se recorre ida y vuelta, asi que no pinta. */
  --ring-l-o:polygon(evenodd, 0px 25px, 13px 12px, 13px 0px, calc(100% - 36px) 0px, calc(100% - 21px) 14px, 100% 14px, 100% calc(100% - 21px), calc(100% - 15px) 100%, 21px 100%, 0px calc(100% - 15px), 0px 25px, 2.5px 26.04px, 15.5px 13.04px, 15.5px 2.5px, calc(100% - 36.99px) 2.5px, calc(100% - 21.99px) 16.5px, calc(100% - 2.5px) 16.5px, calc(100% - 2.5px) calc(100% - 21.8px), calc(100% - 16.29px) calc(100% - 2.5px), 21.8px calc(100% - 2.5px), 2.5px calc(100% - 16.29px), 2.5px 26.04px);
  --ring-l-i:polygon(evenodd, 2.5px 26.04px, 15.5px 13.04px, 15.5px 2.5px, calc(100% - 36.99px) 2.5px, calc(100% - 21.99px) 16.5px, calc(100% - 2.5px) 16.5px, calc(100% - 2.5px) calc(100% - 21.8px), calc(100% - 16.29px) calc(100% - 2.5px), 21.8px calc(100% - 2.5px), 2.5px calc(100% - 16.29px), 2.5px 26.04px, 5px 27.07px, 18px 14.07px, 18px 5px, calc(100% - 37.97px) 5px, calc(100% - 22.97px) 19px, calc(100% - 5px) 19px, calc(100% - 5px) calc(100% - 22.6px), calc(100% - 17.57px) calc(100% - 5px), 22.6px calc(100% - 5px), 5px calc(100% - 17.57px), 5px 27.07px);
  --ring-s-o:polygon(evenodd, 0px 12px, 8px 4px, 8px 0px, calc(100% - 20px) 0px, calc(100% - 12px) 8px, 100% 8px, 100% calc(100% - 12px), calc(100% - 9px) 100%, 12px 100%, 0px calc(100% - 9px), 0px 12px, 2px 12.83px, 10px 4.83px, 10px 2px, calc(100% - 20.83px) 2px, calc(100% - 12.83px) 10px, calc(100% - 2px) 10px, calc(100% - 2px) calc(100% - 12.67px), calc(100% - 10px) calc(100% - 2px), 12.67px calc(100% - 2px), 2px calc(100% - 10px), 2px 12.83px);
  --ring-s-i:polygon(evenodd, 2px 12.83px, 10px 4.83px, 10px 2px, calc(100% - 20.83px) 2px, calc(100% - 12.83px) 10px, calc(100% - 2px) 10px, calc(100% - 2px) calc(100% - 12.67px), calc(100% - 10px) calc(100% - 2px), 12.67px calc(100% - 2px), 2px calc(100% - 10px), 2px 12.83px, 4px 13.66px, 12px 5.66px, 12px 4px, calc(100% - 21.66px) 4px, calc(100% - 13.66px) 12px, calc(100% - 4px) 12px, calc(100% - 4px) calc(100% - 13.33px), calc(100% - 11px) calc(100% - 4px), 13.33px calc(100% - 4px), 4px calc(100% - 11px), 4px 13.66px);
  --ring-s2-o:polygon(evenodd, 0px 12px, 8px 4px, 8px 0px, calc(100% - 20px) 0px, calc(100% - 12px) 8px, 100% 8px, 100% calc(100% - 12px), calc(100% - 9px) 100%, 12px 100%, 0px calc(100% - 9px), 0px 12px, 1px 12.41px, 9px 4.41px, 9px 1px, calc(100% - 20.41px) 1px, calc(100% - 12.41px) 9px, calc(100% - 1px) 9px, calc(100% - 1px) calc(100% - 12.33px), calc(100% - 9.5px) calc(100% - 1px), 12.33px calc(100% - 1px), 1px calc(100% - 9.5px), 1px 12.41px);
  --ring-s2-i:polygon(evenodd, 1px 12.41px, 9px 4.41px, 9px 1px, calc(100% - 20.41px) 1px, calc(100% - 12.41px) 9px, calc(100% - 1px) 9px, calc(100% - 1px) calc(100% - 12.33px), calc(100% - 9.5px) calc(100% - 1px), 12.33px calc(100% - 1px), 1px calc(100% - 9.5px), 1px 12.41px, 2px 12.83px, 10px 4.83px, 10px 2px, calc(100% - 20.83px) 2px, calc(100% - 12.83px) 10px, calc(100% - 2px) 10px, calc(100% - 2px) calc(100% - 12.67px), calc(100% - 10px) calc(100% - 2px), 12.67px calc(100% - 2px), 2px calc(100% - 10px), 2px 12.83px);
  --ring-xs-o:polygon(evenodd, 0px 7px, 7px 0px, 100% 0px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0px 100%, 0px 7px, 1px 7.41px, 7.41px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 7.41px), calc(100% - 7.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px 7.41px);
  --ring-xs-i:polygon(evenodd, 1px 7.41px, 7.41px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 7.41px), calc(100% - 7.41px) calc(100% - 1px), 1px calc(100% - 1px), 1px 7.41px, 2px 7.83px, 7.83px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 7.83px), calc(100% - 7.83px) calc(100% - 2px), 2px calc(100% - 2px), 2px 7.83px);

  /* el material: filo blanco arriba/izquierda, sombra abajo/derecha, cepillado
     fino y cuerpo anodizado. La cara exterior recibe la luz desde arriba-
     izquierda; la interior, que cae hacia el cristal, la recibe al reves. */
  --bevel:
    linear-gradient(180deg, rgba(255,255,255,.78) 0, rgba(255,255,255,.22) 1px, transparent 1.8px),
    linear-gradient(0deg, rgba(0,0,0,.7) 0, rgba(0,0,0,.22) 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(255,255,255,.4) 0, transparent 1.1px),
    linear-gradient(270deg, rgba(0,0,0,.6) 0, transparent 1.1px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  --brush:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  --frame:var(--bevel),
    linear-gradient(135deg, #FFB3B7 0%, #FF6B74 8%, #E2353F 22%, #C4262F 45%, #A61D25 68%, #86151C 100%);
  --frame-in:var(--brush),
    linear-gradient(315deg, #C8282F 0%, #A01A22 30%, #7A1219 62%, #4E0B10 100%);
  --frame-lime:var(--bevel),
    linear-gradient(135deg, #F2FFD2 0%, #C8FF78 8%, #9BE844 22%, #74C42C 45%, #55A01F 68%, #3E7A16 100%);
  --frame-lime-in:var(--brush),
    linear-gradient(315deg, #74C42C 0%, #4F961C 30%, #356B12 62%, #1E430B 100%);
  --frame-crit:var(--bevel),
    linear-gradient(135deg, #FFD0D0 0%, #FF9A9A 8%, #F06363 22%, #D04444 45%, #AE3232 68%, #862424 100%);
  --frame-crit-in:var(--brush),
    linear-gradient(315deg, #C94040 0%, #A03030 30%, #762222 62%, #4A1515 100%);
  --frame-dim:var(--bevel),
    linear-gradient(135deg, #E2E7EB 0%, #B8C0C7 8%, #8C959D 22%, #6A737B 45%, #525A62 68%, #3B4249 100%);
  --frame-dim-in:var(--brush),
    linear-gradient(315deg, #6A737B 0%, #4E565E 30%, #363D44 62%, #22272C 100%);
  /* cavidad (captura): al reves, la cara exterior queda en sombra y el labio
     interior, que sube hacia el cristal, es el que recibe la luz */
  --frame-sunk:
    linear-gradient(180deg, rgba(0,0,0,.62) 0, transparent 1.6px),
    linear-gradient(0deg, rgba(255,255,255,.22) 0, transparent 1.2px),
    linear-gradient(315deg, #B0212A 0%, #8A161E 40%, #5E0D12 100%);
  --frame-sunk-in:
    linear-gradient(135deg, #7A1219 0%, #A81C25 45%, #D8343E 100%);

  /* ---- las sombras neumorficas se reescriben enteras como biseles:
          rim oscuro, filo claro arriba-izquierda, banda, sombra abajo-derecha
          y linea de oclusion interior. Un solo cambio reviste el resto de la
          app (circulos, chips, pildoras) sin tocar app.css ---- */
  --neu-raised:
    inset 0 0 0 1px rgba(16,3,5,.92),
    inset 1px 1px 0 1px rgba(255,182,187,.85),
    inset 0 0 0 3px #C4262F,
    inset -1px -1px 0 3px rgba(74,9,13,.92),
    inset 0 0 0 4px #9E1B23,
    inset 0 0 0 5px rgba(0,0,0,.55),
    inset 0 8px 14px -8px rgba(0,0,0,.55),
    0 18px 34px -20px rgba(0,0,0,.85);
  --neu-raised-sm:
    inset 0 0 0 1px rgba(16,3,5,.92),
    inset 1px 1px 0 1px rgba(255,182,187,.8),
    inset 0 0 0 2px #C4262F,
    inset -1px -1px 0 2px rgba(74,9,13,.92),
    inset 0 0 0 3px rgba(0,0,0,.5),
    0 10px 20px -14px rgba(0,0,0,.8);
  --neu-pressed:
    inset 0 0 0 1px rgba(10,30,5,.9),
    inset 0 0 0 2px rgba(155,255,60,.8),
    inset 0 3px 10px rgba(0,0,0,.6);
  --neu-sunken:
    inset 0 0 0 1px var(--edge-soft),
    inset 0 2px 0 1px rgba(0,0,0,.55),
    inset 0 -1px 0 1px rgba(255,255,255,.08),
    inset 0 3px 10px rgba(0,0,0,.75);
  --neu-sunken-soft:
    inset 0 0 0 1px var(--edge-soft),
    inset 0 1px 0 1px rgba(0,0,0,.5),
    inset 0 -1px 0 1px rgba(255,255,255,.07),
    inset 0 2px 8px rgba(0,0,0,.65);
  --neu-track:
    inset 0 0 0 1px var(--edge-soft),
    inset 0 1px 0 1px rgba(0,0,0,.6),
    inset 0 1px 6px rgba(0,0,0,.8);
  --neu-accent:
    inset 0 0 0 1px rgba(10,30,5,.9),
    inset 1px 1px 0 1px rgba(232,255,190,.9),
    inset 0 0 0 3px #7ED32A,
    inset -1px -1px 0 3px rgba(30,90,10,.9),
    inset 0 0 0 4px rgba(0,0,0,.4),
    0 0 18px -7px rgba(155,255,60,.6);

  color-scheme:dark;
}

/* ==========================================================================
   1. EL VACIO
   ========================================================================== */
html[data-skin="cubierta"] body{
  background:var(--canvas);
  color:var(--ink);
}
/* El cielo y el velo de atmósfera van DETRÁS con z-index negativo. Antes se
 * resolvía subiendo #app a z-index:2, pero eso convertía a #app en contexto de
 * apilamiento y encerraba dentro a la hoja de captura: por alto que fuera su
 * z-index, quedaba por debajo del velo (#scrim), que vive fuera de #app. */
#sky{position:fixed; inset:0; z-index:-2; pointer-events:none}
#veil{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(3,5,10,.30) 0%, rgba(3,5,10,.08) 45%, transparent 72%),
    linear-gradient(180deg, rgba(3,5,10,.5), transparent 22%, transparent 78%, rgba(3,5,10,.55));
}
html[data-skin="cubierta"] #app{position:relative; background:transparent}

/* bastidor: carrilera perfilada en el borde de la pantalla */
#rig{position:fixed; inset:0; z-index:60; pointer-events:none}
#rig i{position:absolute; display:block}
#rig .bl,#rig .br{top:0; bottom:0; width:7px}
#rig .bl{left:0} #rig .br{right:0; transform:scaleX(-1)}
#rig .bt,#rig .bb{left:7px; right:7px; height:6px}
#rig .bt{top:0} #rig .bb{bottom:0; transform:scaleY(-1)}
#rig .bl,#rig .br{
  background-image:
    radial-gradient(circle at 3.5px 130px,
      rgba(255,255,255,.95) 0 1px, #9AA5AE 1px 2px, rgba(6,9,12,.9) 2px 2.7px, transparent 2.7px),
    linear-gradient(90deg, rgba(0,0,0,.9) 0 1px, #EDF3F8 1px 1.7px, #A9B4BD 1.7px 2.8px,
      #5A646E 2.8px 4.2px, #2A323A 4.2px 5.6px, #12181D 5.6px 6.4px, rgba(0,0,0,.85) 6.4px 7px);
  background-size:7px 260px, 7px 100%;
  background-repeat:repeat-y, no-repeat;
}
#rig .bt,#rig .bb{
  background-image:
    radial-gradient(circle at 130px 3px,
      rgba(255,255,255,.95) 0 1px, #9AA5AE 1px 2px, rgba(6,9,12,.9) 2px 2.7px, transparent 2.7px),
    linear-gradient(180deg, rgba(0,0,0,.9) 0 1px, #EDF3F8 1px 1.6px, #A9B4BD 1.6px 2.5px,
      #5A646E 2.5px 3.7px, #2A323A 3.7px 4.9px, #12181D 4.9px 5.5px, rgba(0,0,0,.85) 5.5px 6px);
  background-size:260px 6px, 100% 6px;
  background-repeat:repeat-x, no-repeat;
}
#rig .g{
  width:7px; height:6px;
  background:
    /* la junta: un hilo a 45 grados, luz arriba y sombra abajo */
    linear-gradient(135deg,
      transparent 0 calc(50% - 1px),
      rgba(255,255,255,.6) calc(50% - 1px) calc(50% - .2px),
      rgba(0,0,0,.8) calc(50% - .2px) calc(50% + .7px),
      transparent calc(50% + .7px)),
    /* y debajo, el mismo perfil rectificado que las carrileras */
    linear-gradient(135deg, #E8EFF4 0%, #A9B4BD 20%, #5A646E 46%, #2A323A 72%, #12181D 92%, rgba(0,0,0,.85) 100%);
}
#rig .g1{top:0; left:0}
#rig .g2{top:0; right:0; transform:scaleX(-1)}
#rig .g3{bottom:0; left:0; transform:scaleY(-1)}
#rig .g4{bottom:0; right:0; transform:scale(-1)}

/* ==========================================================================
   2. HERRAJES  (los inyecta js/cubierta.js sobre cada lamina)
   ========================================================================== */
.brk,.clp,.leds{position:absolute; pointer-events:none; z-index:8}
.brk{
  width:150px; height:10px;
  clip-path:polygon(0 0, 84px 0, 93px 5px, 100% 5px, 100% 10px, 89px 10px, 80px 6px, 0 6px);
  background:var(--steel);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.85));
}
.brk::after{
  content:""; position:absolute; left:2px; width:78px; top:0; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.95) 40%, rgba(255,255,255,.5));
}
.brk.a{top:0; left:44px}
.brk.b{bottom:0; right:44px; transform:rotate(180deg)}
.brk.sm{width:96px; height:8px; clip-path:polygon(0 0, 52px 0, 59px 4px, 100% 4px, 100% 8px, 56px 8px, 49px 5px, 0 5px)}
.brk.sm::after{width:46px}
.brk.sm.a{top:0; left:34px}
.brk.sm.b{bottom:0; right:34px}
.clp{
  width:8px; height:36px;
  clip-path:polygon(0 0, 100% 8px, 100% calc(100% - 8px), 0 100%);
  background:linear-gradient(90deg,#FFFFFF 0%,#E2EAF1 12%,#AEB9C3 30%,#78838D 48%,#454E57 68%,#232A31 86%,#0B0F13 100%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.85));
}
.clp.c{top:56px; left:0}
.clp.d{bottom:56px; right:0; transform:scaleX(-1)}
.leds{
  top:1px; left:20px; height:13px; z-index:9;
  display:flex; align-items:center; gap:3px; padding:0 4px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 4px) 100%, 4px 100%);
  background:linear-gradient(180deg,#8B959F 0%,#4C555E 22%,#262E35 58%,#10151A 88%,#070A0D 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.85);
}
.leds b{
  width:3.6px; height:7px;
  background:linear-gradient(180deg,#CFFFB8,var(--accent) 45%,#1E7A28);
  box-shadow:0 0 6px var(--accent);
}
.leds b.x{background:linear-gradient(180deg,#2A3138,#141A1F); box-shadow:none}

/* ==========================================================================
   3. LAMINAS DE CRISTAL CON MARCO BISELADO
   Cada lamina es cristal (el propio elemento: fondo + backdrop-filter,
   recortado con la silueta) y encima dos anillos opacos de metal:
   ::before = cara exterior iluminada, ::after = cara interior en sombra.
   isolation:isolate deja los dos anillos con z-index negativo, es decir
   encima del fondo del elemento pero debajo de su contenido, SIN crear
   contextos de apilamiento nuevos en #app ni tocar elementos fixed
   (gotchas 3 y 7). Como los anillos son opacos y van por encima, el
   desenfoque del cristal solo muestrea el cielo, nunca el rojo del marco.
   ========================================================================== */
html[data-skin="cubierta"] :is(#topbar,#toast){
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  background:var(--glass); border-radius:0;
}

/* --- laminas grandes: paneles, riel, cajon y hojas (marco 5 px) --- */
html[data-skin="cubierta"] :is(.panel,#side,#drawer,#hsheet,#psheet,#asheet,#tsheet,#rsheet,#csheet,#usheet,#buscador){
  clip-path:var(--cut); --ro:var(--ring-l-o); --ri:var(--ring-l-i); --ao:6px;
}
/* --- laminas pequenas: kpi, columnas, tarjetas de area, stats (marco 4 px) --- */
html[data-skin="cubierta"] :is(.kpi,.col,.proj-card,.stat){
  clip-path:var(--cut-s); --ro:var(--ring-s-o); --ri:var(--ring-s-i); --ao:5px;
}
/* --- captura: cavidad con marco fino (2 px) que se enciende en lima al escribir --- */
html[data-skin="cubierta"] #capture{
  clip-path:var(--cut-s); --ro:var(--ring-s2-o); --ri:var(--ring-s2-i); --ao:3px;
  --fo:var(--frame-sunk); --fi:var(--frame-sunk-in);
  box-shadow:inset 0 0 0 var(--ao) rgba(0,0,0,.6), inset 0 4px 12px rgba(0,0,0,.7);
}
html[data-skin="cubierta"] #capture:focus-within{--fo:var(--frame-lime); --fi:var(--frame-lime-in); outline:none}

html[data-skin="cubierta"] :is(.panel,#side,#drawer,#hsheet,#psheet,#asheet,#tsheet,#rsheet,#csheet,#usheet,#buscador,.kpi,.col,.proj-card,.stat,#capture){
  border-radius:0; isolation:isolate;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
}
/* oclusion donde el cristal toca el marco + la sombra que el marco proyecta dentro */
html[data-skin="cubierta"] :is(.panel,#side,#drawer,#hsheet,#psheet,#asheet,#tsheet,#rsheet,#csheet,#usheet,#buscador,.kpi,.col,.proj-card,.stat){
  box-shadow:inset 0 0 0 var(--ao) rgba(0,0,0,.6), inset 0 1px 0 var(--ao) rgba(255,255,255,.05), inset 0 16px 24px -14px rgba(0,0,0,.7);
}
/* solo se posicionan las que no lo estaban ya: el cajon, las hojas y #capture
 * (fixed en movil) NO entran aqui (gotcha 3). */
html[data-skin="cubierta"] :is(.panel,#side,.kpi,.col,.proj-card,.stat){position:relative}

/* cara exterior del marco */
html[data-skin="cubierta"] :is(.panel,#side,#drawer,#hsheet,#psheet,#asheet,#tsheet,#rsheet,#csheet,#usheet,#buscador,.kpi,.col,.proj-card,.stat,#capture,
  .btn,.chipbtn,.qa,.addp,.team-add,.hmore,.cpill,#h-nuevo,#team-nuevo,#filtros-clear,.rit-b,.nav-acts button,#m-actions button,#btn-buscar,.g-tab,.bq-chip,#fab,.rv-k)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  clip-path:var(--ro);
  background:var(--fo, var(--frame));
}
/* cara interior del marco */
html[data-skin="cubierta"] :is(.panel,#side,#drawer,#hsheet,#psheet,#asheet,#tsheet,#rsheet,#csheet,#usheet,#buscador,.kpi,.col,.proj-card,.stat,#capture,
  .btn,.chipbtn,.qa,.addp,.team-add,.hmore,.cpill,#h-nuevo,#team-nuevo,#filtros-clear,.rit-b,.nav-acts button,#m-actions button,#btn-buscar,.g-tab,.bq-chip,#fab,.rv-k)::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  clip-path:var(--ri);
  background:var(--fi, var(--frame-in));
}
/* el contenido queda por encima de las dos capas; los herrajes conservan su absolute */
html[data-skin="cubierta"] :is(.panel,.col,.kpi,#side,#drawer,#hsheet,#tsheet,#rsheet,#csheet,#usheet,#buscador) > *:not(.brk):not(.clp):not(.leds){position:relative; z-index:1}

/* hueco para el herraje del canto superior */
html[data-skin="cubierta"] .panel-h{padding-top:19px}
html[data-skin="cubierta"] .col-head{padding-top:17px}
html[data-skin="cubierta"] #side{padding-top:19px}
html[data-skin="cubierta"] :is(#drawer,#hsheet,#psheet,#asheet,#tsheet,#rsheet,#csheet,#usheet,#buscador) header{padding-top:19px}
html[data-skin="cubierta"] .col > .leds{left:14px}

/* ---- cabeceras ---- */
html[data-skin="cubierta"] .panel-h h2,
html[data-skin="cubierta"] #view-title{
  font-family:Sora,sans-serif; font-weight:600; letter-spacing:.09em; color:var(--ink);
}
html[data-skin="cubierta"] .panel-h .sub,
html[data-skin="cubierta"] .navlbl,
html[data-skin="cubierta"] .kpi .l,
html[data-skin="cubierta"] .stat .l,
html[data-skin="cubierta"] .col-hint{
  font-family:"Spline Sans Mono",monospace; letter-spacing:.16em; text-transform:uppercase;
}
html[data-skin="cubierta"] .kpi .l,
html[data-skin="cubierta"] .stat .l,
html[data-skin="cubierta"] .navlbl{color:var(--cy)}
html[data-skin="cubierta"] .kpi .v,
html[data-skin="cubierta"] .stat .v,
html[data-skin="cubierta"] .cump-kpi{
  font-family:"Spline Sans Mono",monospace; font-variant-numeric:tabular-nums;
}
html[data-skin="cubierta"] .k-accent .v{color:var(--accent); text-shadow:0 0 22px rgba(76,224,76,.45)}
html[data-skin="cubierta"] .k-warn .v{color:var(--warn); text-shadow:0 0 22px rgba(245,225,60,.4)}
html[data-skin="cubierta"] .k-good .v{color:var(--cy); text-shadow:0 0 22px rgba(79,212,232,.4)}

/* ==========================================================================
   4. TODO LO QUE SE PULSA SE VE COMO ALGO QUE SE PULSA
   Contrato unico: canto carmesi + esquina cortada + realce al pasar
   + hundido al pulsar + anillo lima al enfocar con teclado.
   ========================================================================== */
html[data-skin="cubierta"] :is(
  button, [role="button"], .nav-item, .qa, .chipbtn, .btn, .cpill,
  .verlink, .addp, .team-add, .hmore, #fab, #tabbar button, .fchip, #filtros-clear
){
  cursor:pointer;
  border-radius:0;
  transition:filter .14s, background .14s, color .14s, transform .1s;
}

/* --- boton estandar: cristal con marco biselado de 2 px --- */
html[data-skin="cubierta"] :is(.btn,.chipbtn,.qa,.addp,.team-add,.hmore,.cpill,#h-nuevo,#team-nuevo,#filtros-clear,.rit-b,.nav-acts button,#m-actions button,#btn-buscar,.g-tab,.bq-chip,.rv-k){
  clip-path:var(--cut-xs); position:relative; isolation:isolate;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  --ro:var(--ring-xs-o); --ri:var(--ring-xs-i); --ao:3px;
  box-shadow:inset 0 0 0 var(--ao) rgba(0,0,0,.55), inset 0 1px 0 var(--ao) rgba(255,255,255,.06);
}
html[data-skin="cubierta"] :is(.btn,.chipbtn,.qa,.addp,.team-add,.hmore,.cpill,#h-nuevo,#team-nuevo,#filtros-clear,.rit-b,.nav-acts button,#m-actions button,#btn-buscar,.g-tab,.bq-chip){
  color:var(--olive);
  font-family:Sora,sans-serif; letter-spacing:.08em;
}
html[data-skin="cubierta"] :is(.btn,.chipbtn,.qa,.addp,.team-add,.hmore,.cpill,#filtros-clear,.rit-b,.nav-acts button,#m-actions button,#btn-buscar,.g-tab,.bq-chip):hover:not(:disabled){
  color:var(--ink); filter:brightness(1.28);
}
html[data-skin="cubierta"] :is(.btn,.chipbtn,.qa,.addp,.team-add,.hmore,.cpill,#filtros-clear,.rit-b,.nav-acts button,#m-actions button,#btn-buscar,.g-tab,.bq-chip):active:not(:disabled){
  transform:translateY(1px);
  box-shadow:inset 0 0 0 var(--ao) rgba(0,0,0,.65), inset 0 4px 10px rgba(0,0,0,.8);
}

/* --- accion principal: marco de metal lima, como el "Join" del juego --- */
html[data-skin="cubierta"] #fab{
  clip-path:var(--cut-xs); border-radius:0; isolation:isolate;
  background:var(--glass-lime);
  --ro:var(--ring-xs-o); --ri:var(--ring-xs-i); --ao:3px;
  box-shadow:inset 0 0 0 var(--ao) rgba(0,0,0,.55), inset 0 1px 0 var(--ao) rgba(255,255,255,.06);
}
html[data-skin="cubierta"] :is(.accent-el,.primario,#f-save,#hs-save,#ts-save,#f-team-create,#focus-btn,#fab,.qa.primario){
  color:var(--lime); --fo:var(--frame-lime); --fi:var(--frame-lime-in); background:var(--glass-lime);
}
html[data-skin="cubierta"] .qa.primario .c{color:var(--accent-ink)} /* tinta oscura sobre el verde: lima sobre verde no se leia */

/* --- estados: pulsado (chips del riel y de la cabecera movil) --- */
html[data-skin="cubierta"] :is(.chipbtn,#m-actions button,#btn-buscar,.g-tab,.bq-chip)[aria-pressed="true"]{
  color:var(--lime); --fo:var(--frame-lime); --fi:var(--frame-lime-in); background:var(--glass-lime);
}

/* --- destructivo y deshabilitado --- */
html[data-skin="cubierta"] :is(.btn,.rit-b,.nav-acts button):disabled{
  opacity:.72; color:var(--ink-2); --fo:var(--frame-dim); --fi:var(--frame-dim-in);
  /* el marco gris ya dice "deshabilitado"; la etiqueta se sigue leyendo (>= 4.5:1) */
}
html[data-skin="cubierta"] :is(.btn.danger,#f-del,#hs-del,#ts-del,.rit-b.danger){
  color:var(--crit); --fo:var(--frame-crit); --fi:var(--frame-crit-in);
}

/* el pie de la barra lateral pasa a dos filas */
html[data-skin="cubierta"] #side-foot{flex-wrap:wrap; gap:6px}
html[data-skin="cubierta"] #side-foot .chipbtn{flex:1 1 auto; min-width:0; padding:8px 9px; font-size:11px}
html[data-skin="cubierta"] #m-actions{gap:5px}

/* aire para la etiqueta de las acciones rapidas, que el corte no la roce */
html[data-skin="cubierta"] .qa{padding:8px 6px 11px; height:auto}

/* --- navegacion lateral --- */
html[data-skin="cubierta"] .nav-item{
  clip-path:var(--cut-xs); background:transparent; box-shadow:none;
  color:var(--ink-2); font-family:Sora,sans-serif; letter-spacing:.05em;
}
html[data-skin="cubierta"] .nav-item:hover{background:rgba(76,224,76,.07); color:var(--ink)}
html[data-skin="cubierta"] .nav-item[aria-current="true"]{
  color:var(--lime); background:linear-gradient(90deg, rgba(155,255,60,.14), transparent 82%);
  box-shadow:inset 2px 0 0 var(--lime), inset 0 0 0 1px rgba(155,255,60,.35);
}
html[data-skin="cubierta"] .nav-item .count{color:var(--accent); font-family:"Spline Sans Mono",monospace}

/* --- barra inferior movil --- */
html[data-skin="cubierta"] #tabbar{
  background:rgba(5,8,14,.9);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:0 -1px 0 var(--edge), 0 -18px 34px rgba(0,0,0,.6);
  border-radius:0;
}
html[data-skin="cubierta"] #tabbar button{color:var(--ink-3); background:transparent; box-shadow:none}
html[data-skin="cubierta"] #tabbar button[aria-current="true"]{
  color:var(--lime); background:linear-gradient(180deg, rgba(155,255,60,.13), transparent 72%);
  box-shadow:inset 0 2px 0 var(--lime);
}

/* --- pildoras de columna activas --- */
html[data-skin="cubierta"] .cpill.m-active,
html[data-skin="cubierta"] .cpill.on{
  color:var(--lime); --fo:var(--frame-lime); --fi:var(--frame-lime-in); background:var(--glass-lime);
}

/* --- chips de filtro del tablero: son <select>, sin pseudo-elementos, asi que
   el bisel va por token (rectangular) y se conserva la flecha del chip --- */
html[data-skin="cubierta"] .fchip{
  clip-path:var(--cut-xs); border-radius:0; color:var(--olive);
  font-family:Sora,sans-serif; letter-spacing:.06em;
  background-color:rgba(6,9,15,.62);
  box-shadow:var(--neu-raised-sm);
}
html[data-skin="cubierta"] .fchip:hover{color:var(--ink); filter:brightness(1.25)}
html[data-skin="cubierta"] .fchip.on{color:var(--lime); box-shadow:var(--neu-accent)}

/* --- casilla de completado --- */
html[data-skin="cubierta"] .ck{
  border-radius:0; clip-path:var(--cut-xs);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1.2px rgba(179,191,188,.4);
  color:transparent;
}
html[data-skin="cubierta"] .ck:hover{box-shadow:inset 0 0 0 1.2px rgba(155,255,60,.7)}
html[data-skin="cubierta"] .ck.on{
  color:#05170A;
  background:linear-gradient(160deg,#D8FF9A,var(--lime) 45%,#2E7A12);
  box-shadow:0 0 10px -3px var(--lime);
}

/* --- filas pulsables: realce y galon de "abrir" --- */
html[data-skin="cubierta"] :is(.today-item,.row-item,.rev-item,.team-item,.proj-item){
  position:relative; cursor:pointer; border-radius:0;
  transition:background .14s, box-shadow .14s;
}
html[data-skin="cubierta"] :is(.today-item,.row-item,.rev-item):hover{
  background:rgba(76,224,76,.07);
  box-shadow:inset 2px 0 0 var(--accent);
}
html[data-skin="cubierta"] :is(.today-item,.row-item)::after{
  content:"\203A"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  color:var(--ink-3); font-size:15px; opacity:.5; transition:.14s;
}
html[data-skin="cubierta"] :is(.today-item,.row-item):hover::after{color:var(--lime); opacity:1; right:5px}

/* --- tarjetas del tablero --- */
html[data-skin="cubierta"] .card{
  clip-path:var(--cut-xs); border-radius:0;
  background:linear-gradient(157deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 45%, transparent), rgba(10,14,22,.42);
  box-shadow:inset 0 0 0 1px rgba(179,191,188,.18), inset 0 1px 0 1px rgba(255,255,255,.1), inset 0 -1px 0 1px rgba(0,0,0,.45);
  cursor:grab;
}
html[data-skin="cubierta"] .card:hover{
  background:linear-gradient(157deg, rgba(155,255,60,.12), rgba(255,255,255,.02) 45%, transparent), rgba(12,20,14,.5);
  box-shadow:inset 0 0 0 1px rgba(76,224,76,.42), inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-skin="cubierta"] .card.dragging{cursor:grabbing; box-shadow:inset 0 0 0 1.5px var(--lime), 0 0 22px -8px var(--lime)}
html[data-skin="cubierta"] .card.done-card{opacity:.78} /* antes .45: el titulo tachado quedaba ilegible */
html[data-skin="cubierta"] .col-body.dragover{box-shadow:inset 0 0 0 1.5px rgba(155,255,60,.6)}

/* --- etiquetas --- */
html[data-skin="cubierta"] .tag{
  border-radius:0; font-family:"Spline Sans Mono",monospace;
  letter-spacing:.1em; text-transform:uppercase;
}
html[data-skin="cubierta"] .tag.p1{color:var(--crit); background:rgba(255,96,96,.1); box-shadow:inset 0 0 0 1px rgba(255,96,96,.55)}
html[data-skin="cubierta"] .tag.due.late{color:var(--crit); box-shadow:inset 0 0 0 1px rgba(255,96,96,.5)}
html[data-skin="cubierta"] .tag.due.today{color:var(--warn); box-shadow:inset 0 0 0 1px rgba(245,225,60,.5)}
html[data-skin="cubierta"] .tag.due.futuro{color:var(--ink-3); box-shadow:inset 0 0 0 1px rgba(179,191,188,.22)}

/* --- captura --- */
html[data-skin="cubierta"] #capture-input{color:var(--accent); font-family:"Spline Sans Mono",monospace}
html[data-skin="cubierta"] #capture kbd{
  border-radius:0; color:var(--ink-3);
  box-shadow:inset 0 0 0 1px rgba(179,191,188,.25); background:transparent;
}

/* --- campos de formulario --- */
html[data-skin="cubierta"] :is(.fld input,.fld select,.fld textarea,#f-con,#f-team-name,#ts-name,.pers-i,.rep-q){
  border-radius:0; clip-path:var(--cut-xs);
  background:rgba(4,7,12,.55); color:var(--ink);
  box-shadow:inset 0 0 0 1.2px rgba(79,212,232,.35), inset 0 2px 6px rgba(0,0,0,.6);
}
html[data-skin="cubierta"] :is(.fld input,.fld select,.fld textarea,.pers-i,.rep-q):focus{
  outline:none;
  box-shadow:inset 0 0 0 1.4px var(--cy), 0 0 16px -8px var(--cy);
}
html[data-skin="cubierta"] .fld label{
  color:var(--cy); font-family:"Spline Sans Mono",monospace;
  letter-spacing:.14em; text-transform:uppercase;
}

/* --- segmentos (ambito, dias de la semana) --- */
html[data-skin="cubierta"] .seg{border-radius:0; background:transparent; box-shadow:none; gap:5px}
html[data-skin="cubierta"] .seg button{
  border-radius:0; clip-path:var(--cut-xs);
  background:rgba(255,255,255,.04); color:var(--ink-3);
  box-shadow:inset 0 0 0 1.1px rgba(179,191,188,.28);
}
html[data-skin="cubierta"] .seg button[aria-checked="true"],
html[data-skin="cubierta"] .seg button[aria-pressed="true"],
html[data-skin="cubierta"] .seg button.on{
  color:var(--lime); background:rgba(155,255,60,.1);
  box-shadow:inset 0 0 0 1.3px rgba(155,255,60,.7);
}

/* ==========================================================================
   5. HABITOS
   ========================================================================== */
html[data-skin="cubierta"] .habit-row{
  border-radius:0; background:transparent;
  box-shadow:inset 0 0 0 1px rgba(179,191,188,.14);
  clip-path:var(--cut-xs);
}
html[data-skin="cubierta"] .habit-row:hover{box-shadow:inset 0 0 0 1px rgba(76,224,76,.4)}
html[data-skin="cubierta"] .hcell{
  border-radius:0; color:#98A5A4; /* un punto por encima de ink-3: 5:1 sobre la celda */
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(179,191,188,.26);
}
/* dia marcado: apagado a proposito, no quema la vista */
html[data-skin="cubierta"] .hcell.on{
  color:#8CF07C;
  background:linear-gradient(180deg, rgba(76,224,76,.17), rgba(28,107,28,.09));
  box-shadow:inset 0 0 0 1px rgba(76,224,76,.5);
}
html[data-skin="cubierta"] .hcell.miss{
  color:var(--crit); background:rgba(255,96,96,.1);
  box-shadow:inset 0 0 0 1px rgba(255,96,96,.5);
}
/* celdas que no aplican (dia no programado / bloqueado): la celda se ve
   atenuada pero el glifo no se pinta a medias, o se lee o no esta */
html[data-skin="cubierta"] .hcell.libre,
html[data-skin="cubierta"] .hcell:disabled:not(.on):not(.miss){opacity:.55; color:transparent}
html[data-skin="cubierta"] .streak{color:var(--accent); font-family:"Spline Sans Mono",monospace}
html[data-skin="cubierta"] :is(.track,.cb-t){
  border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(179,191,188,.22), inset 0 1px 5px rgba(0,0,0,.7);
  background:rgba(0,0,0,.35);
}
html[data-skin="cubierta"] .fill{
  border-radius:0;
  background:linear-gradient(180deg, rgba(216,255,154,.9), rgba(30,122,36,.75));
}
/* .cb-p es la ETIQUETA de porcentaje, no el relleno de la barra: antes llevaba
   un degradado lima detras y el texto gris quedaba ilegible */
html[data-skin="cubierta"] .cb-p{border-radius:0; background:none; color:var(--ink-2)}

/* ==========================================================================
   6. HOJAS Y CAPAS
   ========================================================================== */
html[data-skin="cubierta"] #scrim{background:rgba(2,4,8,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
html[data-skin="cubierta"] :is(#drawer,#hsheet,#psheet,#asheet,#tsheet,#rsheet,#csheet,#usheet,#buscador) header h2{
  font-family:Sora,sans-serif; letter-spacing:.1em; color:var(--ink);
}
html[data-skin="cubierta"] #toast{
  border-radius:0; color:var(--accent);
  font-family:"Spline Sans Mono",monospace;
  box-shadow:var(--neu-raised-sm);
}

/* foco de teclado, siempre visible */
html[data-skin="cubierta"] :focus-visible{outline:2px solid var(--lime); outline-offset:2px}

/* ==========================================================================
   8. AJUSTES FINOS
   ========================================================================== */
html[data-skin="cubierta"] .mono,
html[data-skin="cubierta"] #topdate .d1,
html[data-skin="cubierta"] #topdate .d2{font-family:"Spline Sans Mono",monospace}
html[data-skin="cubierta"] .brand b{font-family:Sora,sans-serif; letter-spacing:.2em}
html[data-skin="cubierta"] .brand small{color:var(--accent); letter-spacing:.24em; text-transform:uppercase}
html[data-skin="cubierta"] .logo{
  clip-path:var(--cut-xs); border-radius:0;
  background:linear-gradient(160deg, rgba(76,224,76,.16), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(76,224,76,.4), 0 0 14px -5px var(--accent);
}
html[data-skin="cubierta"] .proj-dot,
html[data-skin="cubierta"] .team-ic{
  border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 8px -1px currentColor, 0 0 0 1px rgba(0,0,0,.5);
}
html[data-skin="cubierta"] .rit-row input{
  border-radius:0; clip-path:var(--cut-xs); background:rgba(4,7,12,.55); color:var(--ink);
  box-shadow:inset 0 0 0 1.2px rgba(79,212,232,.35), inset 0 2px 6px rgba(0,0,0,.6);
}
html[data-skin="cubierta"] .rit-row input:focus{
  outline:none; box-shadow:inset 0 0 0 1.4px var(--cy), 0 0 16px -8px var(--cy);
}
html[data-skin="cubierta"] .rit-b{border-radius:0}
html[data-skin="cubierta"] .rit-row .n{color:var(--olive)}
html[data-skin="cubierta"] .ritual .n{
  border-radius:0; color:var(--olive); background:rgba(200,224,74,.07);
  box-shadow:inset 0 0 0 1px rgba(200,224,74,.38);
}
html[data-skin="cubierta"] .time{color:var(--accent); text-shadow:0 0 18px rgba(76,224,76,.5)}
html[data-skin="cubierta"] .fd-bg{stroke:rgba(179,191,188,.22); opacity:1}
html[data-skin="cubierta"] .fd-fg{stroke:var(--accent); filter:drop-shadow(0 0 7px rgba(76,224,76,.55))}
html[data-skin="cubierta"] .f-stat b{color:var(--lime)}
html[data-skin="cubierta"] .verlink{color:var(--cy); background:transparent; box-shadow:none}
html[data-skin="cubierta"] .verlink:hover{color:var(--lime)}

/* barra de desplazamiento del juego */
html[data-skin="cubierta"] ::-webkit-scrollbar{width:11px; height:11px}
html[data-skin="cubierta"] ::-webkit-scrollbar-track{background:rgba(0,0,0,.3); box-shadow:inset 0 0 0 1px var(--edge-soft)}
html[data-skin="cubierta"] ::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, #F26670 0%, #C4262F 38%, #8E151D 100%);
  box-shadow:inset 1px 1px 0 rgba(255,200,205,.6), inset -1px -1px 0 rgba(0,0,0,.65), inset 0 0 0 1px rgba(16,3,5,.9);
}

@media (min-width:1760px){
  .brk{width:190px; height:11px; clip-path:polygon(0 0, 106px 0, 116px 6px, 100% 6px, 100% 11px, 112px 11px, 102px 7px, 0 7px)}
  .brk::after{width:100px}
  .brk.a{top:0; left:52px}
  .brk.b{bottom:0; right:52px}
  .clp{width:9px; height:44px}
  .leds{height:15px}
  .leds b{width:4px; height:8px}
}

/* En móvil la hoja de captura es position:fixed y vive dentro de #topbar.
 * Un elemento con backdrop-filter se convierte en BLOQUE CONTENEDOR de sus
 * descendientes fixed, así que el cristal de la cabecera dejaba la captura
 * anclada a la cabecera (60 px de alto) y su bottom:92px la sacaba de
 * pantalla. Ahí la cabecera va sin cristal. */
@media (max-width:860px){
  html[data-skin="cubierta"] #topbar{
    -webkit-backdrop-filter:none; backdrop-filter:none; background:transparent;
  }
  /* el tracking de .09em hacía «Revisión» 16 px más ancho y lo cortaba */
  html[data-skin="cubierta"] #view-title{letter-spacing:.04em}
  /* sobre el velo, la hoja necesita cuerpo propio para leerse */
  html[data-skin="cubierta"] #capture{
    background:
      linear-gradient(157deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 42%, transparent),
      rgba(8,11,18,.96);
  }
}

@media (max-width:900px){
  #rig .bt,#rig .bb{display:none}
  #rig .bl,#rig .br{width:4px; background-image:linear-gradient(90deg,
    rgba(0,0,0,.9) 0 .8px, #E4EBF1 .8px 1.4px, #79838D 1.4px 2.4px, #262E35 2.4px 3.3px, rgba(0,0,0,.85) 3.3px 4px)}
  #rig .g{display:none}
  .brk{width:104px; height:8px; clip-path:polygon(0 0, 58px 0, 65px 4px, 100% 4px, 100% 8px, 62px 8px, 55px 5px, 0 5px)}
  .brk::after{width:52px}
  .brk.a{top:0; left:34px}
  .brk.b{bottom:0; right:34px}
  .clp{width:6px; height:28px}
  .clp.c{top:48px; left:0}
  .clp.d{bottom:48px; right:0}
}

@media (prefers-reduced-motion:reduce){
  html[data-skin="cubierta"] *{animation:none !important; transition:none !important}
}


/* ---- captura con dos destinos y hoja de proyecto ---- */
html[data-skin="cubierta"] .cap-seg{
  box-shadow:inset 0 0 0 1px var(--edge-soft); border-radius:0; clip-path:var(--cut-xs);
}
html[data-skin="cubierta"] .cap-seg button{border-radius:0; clip-path:var(--cut-xs); color:var(--ink-3)}
html[data-skin="cubierta"] .cap-seg button[aria-pressed="true"]{
  color:var(--lime); background:rgba(155,255,60,.1);
  box-shadow:inset 0 0 0 1.2px rgba(155,255,60,.6);
}
html[data-skin="cubierta"] :is(.pt-top input,.pt-sub select,.pt-sub input,.f-libre input){
  border-radius:0; clip-path:var(--cut-xs); background:rgba(4,7,12,.55); color:var(--ink);
  box-shadow:inset 0 0 0 1.2px rgba(79,212,232,.35), inset 0 2px 6px rgba(0,0,0,.6);
}
html[data-skin="cubierta"] :is(.pt-top input,.pt-sub select,.pt-sub input,.f-libre input):focus{
  outline:none; box-shadow:inset 0 0 0 1.4px var(--cy), 0 0 16px -8px var(--cy);
}
html[data-skin="cubierta"] .pt-n{color:var(--olive)}
html[data-skin="cubierta"] .tag.proy{
  background:rgba(255,255,255,.05); color:var(--ink-2);
  box-shadow:inset 0 0 0 1px rgba(179,191,188,.28);
}
html[data-skin="cubierta"] #focus.f-brk .fd-fg{stroke:var(--cy); filter:drop-shadow(0 0 7px rgba(79,212,232,.55))}
html[data-skin="cubierta"] #focus.f-brk .time{color:var(--cy); text-shadow:0 0 18px rgba(79,212,232,.5)}


/* ---- histórico de cumplimiento ---- */
html[data-skin="cubierta"] .rv-k{border-radius:0}
html[data-skin="cubierta"] .rv-k .l{color:var(--cy); font-family:"Spline Sans Mono",monospace}
html[data-skin="cubierta"] .rv-k .d.up{color:var(--lime)}
html[data-skin="cubierta"] .rv-col i{
  border-radius:0; background:linear-gradient(180deg, rgba(216,255,154,.9), rgba(30,122,36,.7));
}
html[data-skin="cubierta"] .rv-col.now i{
  box-shadow:0 0 14px -3px var(--lime);
  background:linear-gradient(180deg, var(--lime), rgba(46,122,18,.85));
}
html[data-skin="cubierta"] .rv-col.nulo i{background:rgba(179,191,188,.2)}
html[data-skin="cubierta"] .rv-col.now b{color:var(--lime)}
html[data-skin="cubierta"] .rv-row.hdr{color:var(--cy); font-family:"Spline Sans Mono",monospace}
html[data-skin="cubierta"] .rv-row.now,
html[data-skin="cubierta"] .rv-row.now .n{color:var(--lime)}


/* ---- hoja de área ---- */
html[data-skin="cubierta"] #asheet header{padding-top:19px}
html[data-skin="cubierta"] #asheet header h2{font-family:Sora,sans-serif; letter-spacing:.1em; color:var(--ink)}
html[data-skin="cubierta"] #as-name{
  border-radius:0; clip-path:var(--cut-xs); background:rgba(4,7,12,.55); color:var(--ink);
  box-shadow:inset 0 0 0 1.2px rgba(79,212,232,.35), inset 0 2px 6px rgba(0,0,0,.6);
}
html[data-skin="cubierta"] #as-name:focus{outline:none; box-shadow:inset 0 0 0 1.4px var(--cy), 0 0 16px -8px var(--cy)}
html[data-skin="cubierta"] .as-colors button{
  border-radius:0; clip-path:var(--cut-xs);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 10px -3px currentColor, 0 0 0 1px rgba(0,0,0,.5);
}
html[data-skin="cubierta"] .as-colors button::after{border-radius:0}
html[data-skin="cubierta"] .as-colors button[aria-checked="true"]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1.6px var(--lime), 0 0 14px -3px currentColor;
}
html[data-skin="cubierta"] .as-colors button[aria-checked="true"]::after{box-shadow:none}


/* ---- destino al capturar y acciones del riel ---- */
html[data-skin="cubierta"] #cap-dest{
  border-radius:0; clip-path:var(--cut-xs); color:var(--olive);
  background:rgba(4,7,12,.55);
  box-shadow:inset 0 0 0 1.2px var(--edge-soft), inset 0 2px 6px rgba(0,0,0,.6);
}
html[data-skin="cubierta"] #cap-dest:focus{
  box-shadow:inset 0 0 0 1.4px var(--lime), 0 0 16px -8px var(--lime);
}
html[data-skin="cubierta"] .nav-acts button{border-radius:0; color:var(--ink-3)}
html[data-skin="cubierta"] .nav-acts button:hover:not(:disabled){color:var(--lime)}
html[data-skin="cubierta"] :is(#as-pick,#ps-pick){
  border-radius:0; clip-path:var(--cut-xs); background:rgba(4,7,12,.55); color:var(--ink);
  box-shadow:inset 0 0 0 1.2px rgba(79,212,232,.35), inset 0 2px 6px rgba(0,0,0,.6);
}


/* ==========================================================================
   9. CONTRASTE
   Nada de texto por debajo de 4.5:1 sobre el cristal (3:1 en cifras grandes).
   Auditado el 5 sep 2026 recorriendo las cinco vistas con un script que
   calcula el contraste real de cada nodo de texto (color x opacidad heredada
   sobre el fondo efectivo).
   ========================================================================== */
/* stat destacado de Revision: app.css pone tinta oscura sobre acento, pero aqui
   el fondo es cristal -> el numero desaparecia. Marco lima y cifra lima. */
html[data-skin="cubierta"] .stat.hero{
  --fo:var(--frame-lime); --fi:var(--frame-lime-in); background:var(--glass-lime);
}
html[data-skin="cubierta"] .stat.hero .v{color:var(--lime); text-shadow:0 0 22px rgba(155,255,60,.4)}
html[data-skin="cubierta"] .stat.hero .l{color:var(--cy); opacity:1}

/* etiquetas de area: texto blanco sobre el color del area. Los colores claros
   (naranja, verde) no llegaban a 4.5:1 -> se oscurece el fondo un 26 % con una
   sombra interior y se apoya el texto con una sombra de 1 px. */
html[data-skin="cubierta"] .tag.proj{
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 100px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.18);
}

/* pildora de columna mientras se arrastra una tarjeta encima: app.css usa
   tinta oscura sobre acento; aqui el fondo es cristal */
html[data-skin="cubierta"] .cpill.dragover{color:var(--lime); --fo:var(--frame-lime); --fi:var(--frame-lime-in)}

/* guiones de "sin dato" en la tabla de cumplimiento: sin atenuar */
html[data-skin="cubierta"] .rv-row .n.vacio{opacity:1; color:var(--ink-3)}

/* titulo tachado de las tarjetas hechas */
html[data-skin="cubierta"] .card.done-card .t span{color:var(--ink-2)}

/* celdas libres del mes en la hoja de habito y leyenda apagada: antes .2 */
html[data-skin="cubierta"] .hm.libre,
html[data-skin="cubierta"] .hs-leg .lg.off{opacity:.5}