/* ==========================================================
   CEZ clásica moderna — prueba de paleta CEZ Next
   Solo piel moderna. La piel retro queda intacta.
   Objetivo: trasladar la atmósfera cromática de CEZ Next
   conservando estructura, contenidos y color propio de zona.
   ========================================================== */

/* Base clara de Next: gris frío, panel blanco y líneas azul-gris. */
html:not(.skin-retro):not(.theme-dark){
  --bg:#edf1f5;
  --fg:#111820;
  --pr-page-bg:#edf1f5;
  --pr-surface:#f8fafc;
  --pr-surface-2:#ffffff;
  --pr-border:#cbd5df;
  --bar-tint:rgba(248,250,252,.92);
  --bar-shadow:0 10px 28px rgba(17,24,32,.08);
  --bar-shadow-sm:0 7px 20px rgba(17,24,32,.07);
  --tt-bg:#f8fafc;
  --tt-bg-2:#ffffff;
  --tt-border:#cbd5df;
  --tt-shadow:none;
  --tt-shadow-sm:none;
  --sysbar-bg:#f8fafc;
  --sysbar-shadow:0 6px 16px rgba(17,24,32,.06);
  --chip-bg:#ffffff;
  --chip-border:#cbd5df;
  --chip-shadow:0 6px 16px rgba(17,24,32,.06);
  --chip-bg-hover:#f8fafc;
  --chip-shadow-hover:0 8px 20px rgba(17,24,32,.09);
  --text-1:#111820;
  --text-2:#405064;
  --text-3:#607286;
  --heading:#111820;
  --link:#236fc9;
  --link-muted:#087ba8;
  --surface-1:#f8fafc;
  --surface-2:#ffffff;
  --surface-3:#ffffff;
  --border-1:#cbd5df;
  --border-2:#cbd5df;
  --selected-bg:#ffffff;
  --selected-border:#b7c3cf;
  --focus-ring:rgba(35,111,201,.38);
  --focus-ring-soft:rgba(39,169,220,.28);
  --panel-bg-soft:#f8fafc;
  --panel-bg:#f8fafc;
  --panel-bg-strong:#ffffff;
  --panel-border:#cbd5df;
  --panel-border-strong:#b7c3cf;
  --panel-shadow-sm:0 3px 10px rgba(17,24,32,.05);
  --panel-shadow:0 6px 16px rgba(17,24,32,.065);
  --panel-shadow-lg:0 9px 22px rgba(17,24,32,.08);
  --panel-shadow-xl:0 12px 28px rgba(17,24,32,.095);
  --panel-thumb-bg:#eef2f6;
  --panel-muted-bg:#edf1f5;
  --tooltip-bg:#111820;
  --tooltip-fg:#eef3f8;
}

/* Base oscura de Next: carbón azulado y separación por líneas, no por brillo. */
html.theme-dark:not(.skin-retro){
  --bg:#070a0d;
  --fg:#eef3f8;
  --pr-page-bg:#070a0d;
  --pr-surface:#0d1218;
  --pr-surface-2:#111923;
  --pr-border:#22303e;
  --bar-tint:rgba(13,18,24,.94);
  --bar-shadow:0 10px 28px rgba(0,0,0,.24);
  --bar-shadow-sm:0 7px 20px rgba(0,0,0,.20);
  --tt-bg:#0d1218;
  --tt-bg-2:#111923;
  --tt-border:#22303e;
  --tt-shadow:none;
  --tt-shadow-sm:none;
  --sysbar-bg:#0d1218;
  --sysbar-shadow:0 6px 16px rgba(0,0,0,.20);
  --chip-bg:#111923;
  --chip-border:#22303e;
  --chip-shadow:0 6px 16px rgba(0,0,0,.18);
  --chip-bg-hover:#16212c;
  --chip-shadow-hover:0 8px 20px rgba(0,0,0,.24);
  --text-1:#eef3f8;
  --text-2:#b9c6d3;
  --text-3:#8da0b4;
  --heading:#eef3f8;
  --text-invert:#07101b;
  --link:#66a5ff;
  --link-muted:#27a9dc;
  --surface-1:#0d1218;
  --surface-2:#111923;
  --surface-3:#111923;
  --border-1:#22303e;
  --border-2:#22303e;
  --row-hover:color-mix(in srgb,var(--color1) 8%,#111923);
  --selected-bg:#111923;
  --selected-border:#314355;
  --focus-ring:rgba(102,165,255,.44);
  --focus-ring-soft:rgba(39,169,220,.30);
  --overlay-1:rgba(0,0,0,.58);
  --tooltip-bg:#030609;
  --tooltip-fg:#eef3f8;
  --panel-bg-soft:#0d1218;
  --panel-bg:#0d1218;
  --panel-bg-strong:#111923;
  --panel-border:#22303e;
  --panel-border-strong:#314355;
  --panel-shadow-sm:0 3px 10px rgba(0,0,0,.18);
  --panel-shadow:0 6px 16px rgba(0,0,0,.22);
  --panel-shadow-lg:0 9px 22px rgba(0,0,0,.26);
  --panel-shadow-xl:0 12px 28px rgba(0,0,0,.30);
  --panel-thumb-bg:#111923;
  --panel-muted-bg:#0a1016;
  --card-dark-bg-1:#070a0d;
  --card-dark-bg-2:#0d1218;
  --card-dark-bg-3:#111923;
  --card-dark-border:#22303e;
  --card-dark-border-hover:#314355;
  --card-dark-shadow:0 12px 28px rgba(0,0,0,.28);
  --card-dark-shadow-hover:0 16px 34px rgba(0,0,0,.34);
  --card-dark-glow:rgba(39,169,220,.10);
  --card-dark-glow-2:rgba(255,255,255,.025);
  --card-dark-sheen:rgba(255,255,255,.05);
}

/* El fondo general adopta la superficie Next sin tocar la geometría CEZ. */
html:not(.skin-retro) body{background-color:var(--pr-page-bg);color:var(--fg);}

/* ==========================================================
   Tabletit — lenguaje visual de CEZ Next
   Plano, editorial, con línea fría y acento de la zona actual.
   ========================================================== */
html:not(.skin-retro) :is(.tabletit,.tabletitpeq){
  position:relative;
  isolation:auto;
  overflow:visible;
  display:flex;
  align-items:center;
  gap:0;
  min-height:0;
  margin:0;
  padding:12px 0 8px;
  border:0;
  border-top:1px solid var(--panel-border-strong);
  border-radius:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:var(--text-1);
  font:800 11px/1.25 "Orbitron","Exo",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:none;
}
html:not(.skin-retro) .tabletitpeq{font-size:10.5px;padding-top:10px;padding-bottom:7px;}
html:not(.skin-retro) :is(.tabletit,.tabletitpeq)::before{
  content:"";
  position:static;
  inset:auto;
  z-index:auto;
  display:inline-block;
  flex:0 0 18px;
  width:18px;
  height:2px;
  margin:0 9px 2px 0;
  background:var(--color1,#27a9dc);
  opacity:1;
  -webkit-mask-image:none;
  mask-image:none;
}
html:not(.skin-retro) :is(.tabletit,.tabletitpeq)::after{display:none;content:none;background:none;}
html:not(.skin-retro) :is(.tabletit,.tabletitpeq):hover{
  transform:none;
  border-color:var(--panel-border-strong);
  box-shadow:none;
}
html:not(.skin-retro) :is(.tabletit,.tabletitpeq)>*{position:relative;z-index:auto;}
html:not(.skin-retro) .tabletitlabel{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
}
html:not(.skin-retro) .tabletitlabel::before{display:none;content:none;}

/* Portada: elimina la excepción que volvía a comprimir los títulos. */
html:not(.skin-retro) :is(.tabletit--trending,.tabletit--nuevas,.tabletit--index2){
  gap:0;
  padding:12px 0 8px;
  font-size:11px;
}

/* La ventana inferior vuelve a tener su propio borde superior: el tabletit ya no es una tapa de tarjeta. */
html:not(.skin-retro) :is(.tabletit,.tabletitpeq) + :is(.cventanas,.cuerpoventanas,.cuerpoventanas--grid,.cventanas-m20,.cventanas-m30,.rzstats,.fpanel){
  border-top:1px solid var(--panel-border)!important;
  border-top-left-radius:0!important;
  border-top-right-radius:0!important;
}

/* Menos aspecto de cristal: las superficies conservan el volumen de CEZ, pero con la calma de Next. */
html:not(.skin-retro) :is(.cventanas,.cventanas-m20,.cventanas-m30,.cuerpoventanas,.fpanel,.divsepnovedades,.trend-card,.nv-card){
  border-color:var(--panel-border);
}
html.theme-dark:not(.skin-retro) :is(.cventanas,.cventanas-m20,.cventanas-m30,.cuerpoventanas,.fpanel){
  background-color:var(--panel-bg);
}

/* En zonas concretas, igual que en Next, el color histórico sigue mandando como acento. */
html:not(.skin-retro) body:not(.default-theme) :is(.tabletit,.tabletitpeq)::before{background:var(--color1);}

@media (max-width:700px) and (orientation:portrait){
  html:not(.skin-retro) :is(.tabletit,.tabletitpeq){padding-top:10px;padding-bottom:7px;font-size:10px;letter-spacing:.07em;}
  html:not(.skin-retro) :is(.tabletit,.tabletitpeq)::before{flex-basis:15px;width:15px;margin-right:7px;}
}