/* ciberidia2027.lequar.es · la imagen del cuaderno de venta:
   Helvetica Neue fina, blanco / gris / negro y el azul de IDiA para la segunda
   mitad de cada titular. Los colores son los del propio PowerPoint. */
:root {
  --tinta: #1d1d1f;
  --gris: #6e6e73;
  --gris2: #86868b;
  --nube: #f5f5f7;
  --linea: #d2d2d7;
  --azul: #1f4f9c;
  --azul-c: #4f7fc0;   /* el azul sobre fondo negro */
  --azul-p: #c9d6ee;
  --negro: #000;
  --fondo: #fff;
  --texto: var(--tinta);
  --texto2: var(--gris);
  --acento: var(--azul);
  --borde: var(--linea);
  --tarjeta: #fff;
  --letra: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --ancho: 1180px;
  --margen: clamp(16px, 5vw, 64px);
  --cab: 56px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 8px); overflow-x: clip; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 300 17px/1.55 var(--letra); letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.con-barra { padding-bottom: 64px; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 500; }
img, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-weight: 300; margin: 0; letter-spacing: -0.015em; }
p { margin: 0 0 0.9em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.azul { color: var(--acento); }
.multi { white-space: pre-line; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.cargando { padding: 30vh var(--margen); text-align: center; color: var(--gris); }

/* ── Marca «CiberIDiA 2027» ───────────────────────────────────────────── */
.marca { display: inline-flex; align-items: baseline; gap: 0.08em; font-weight: 200; letter-spacing: -0.02em; white-space: nowrap; color: var(--texto); }
.marca .idia { height: 0.72em; width: auto; align-self: baseline; transform: translateY(0.02em); margin: 0 0.03em 0 0.02em; }
.marca span:last-child { margin-left: 0.22em; }
.idia .idia-o { stroke: var(--azul); }
.idia .idia-c { stroke: var(--azul-c); }
.idia .idia-p { fill: var(--azul-c); }
.tema-oscuro .idia .idia-o, .tema-azul .idia .idia-o { stroke: var(--azul-c); }
.tema-azul .idia .idia-o { stroke: #fff; }
.tema-azul .idia .idia-c, .tema-azul .idia .idia-p { stroke: var(--azul-p); fill: var(--azul-p); }
.tema-azul .idia .idia-c { fill: none; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cab { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.cab-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); height: var(--cab); display: flex; align-items: center; gap: 20px; }
.cab-marca { font-size: 21px; color: var(--tinta); text-decoration: none !important; flex: none; }
/* Volver a idia.es: pequeño y gris, separado de la marca por una línea fina. */
.cab-volver { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-right: -4px; padding: 6px 16px 6px 0; border-right: 1px solid rgba(0, 0, 0, 0.12); font-size: 13px; letter-spacing: .01em; color: var(--gris); text-decoration: none !important; transition: color .2s; }
.cab-volver span:first-child { transition: transform .2s; }
.cab-volver:hover, .cab-volver:focus-visible { color: var(--azul); }
.cab-volver:hover span:first-child { transform: translateX(-3px); }
.pie-volver { color: inherit; }
.pie-volver:hover { color: var(--azul); }
.menu { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { font-size: 13px; font-weight: 400; color: var(--tinta); padding: 6px 10px; border-radius: 999px; white-space: nowrap; text-decoration: none; }
.menu a:hover { background: var(--nube); }
.menu .menu-gestion { background: var(--azul); color: #fff; }
.menu .menu-gestion:hover { background: #173f80; }
.cab-boton { flex: none; width: 36px; height: 36px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--gris); }
.cab-boton:hover { background: var(--nube); color: var(--tinta); }
.cab-boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Candado abierto (ya dentro): en azul; resaltado mientras se está en la gestión. */
a.cab-candado { color: var(--azul); text-decoration: none !important; }
a.cab-candado.activo { background: var(--nube); color: var(--azul); box-shadow: inset 0 0 0 1px rgba(31, 79, 156, 0.18); }
.cab-menu { display: none; margin-left: auto; }
@media (max-width: 900px) {
  .cab-menu { display: grid; }
  .menu { position: absolute; top: var(--cab); left: 0; right: 0; flex-direction: column; background: #fff; border-bottom: 1px solid var(--linea); padding: 8px var(--margen) 16px; display: none; max-height: calc(100vh - var(--cab)); overflow-y: auto; }
  .menu.abierto { display: flex; }
  .menu a { font-size: 17px; padding: 10px 0; border-radius: 0; border-bottom: 1px solid var(--nube); }
  .menu .menu-gestion { background: none; color: var(--azul); }
}

/* ── Secciones ────────────────────────────────────────────────────────── */
.sec { position: relative; padding: clamp(64px, 10vw, 128px) 0; background: var(--fondo); color: var(--texto); }
.tema-gris { --fondo: var(--nube); }
.tema-oscuro { --fondo: var(--negro); --texto: var(--nube); --texto2: var(--gris2); --acento: var(--azul-c); --borde: #2c2c2e; --tarjeta: #1c1c1e; color-scheme: dark; }
.tema-azul { --fondo: var(--azul); --texto: #fff; --texto2: var(--azul-p); --acento: var(--azul-p); --borde: rgba(255, 255, 255, 0.25); --tarjeta: rgba(255, 255, 255, 0.08); color-scheme: dark; }
.con-fondo { background-color: var(--fondo); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.9)), var(--foto); background-size: cover; background-position: center; }
.tema-azul.con-fondo { background-image: linear-gradient(180deg, rgba(31, 79, 156, 0.86), rgba(31, 79, 156, 0.97)), var(--foto); }
.tema-claro.con-fondo, .tema-gris.con-fondo { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.96)), var(--foto); }
.kicker { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto2); margin-bottom: 18px; }
.sec-t { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; max-width: 20em; }
.sec-t .azul { color: var(--acento); }
.sec-sub { font-size: clamp(17px, 1.7vw, 21px); color: var(--texto2); margin: 18px 0 0; max-width: 46em; }
.sec-cab { margin-bottom: clamp(36px, 5vw, 64px); }
.bloques { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); }
.bloque, .sec-cab { min-width: 0; }

.disp-grande { min-height: 70vh; display: flex; align-items: center; }
.disp-grande .envoltura { width: 100%; }
.disp-grande .sec-t { font-size: clamp(40px, 7.4vw, 92px); line-height: 1.02; max-width: 14em; }

.disp-portada { padding-top: clamp(40px, 6vw, 72px); min-height: calc(100vh - var(--cab)); }
.portada-logos { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(40px, 7vw, 88px); }
.portada-idia .idia { height: 34px; width: auto; }
.portada-caja { height: 34px; width: auto; }
.marca-grande { font-size: clamp(34px, 10.5vw, 136px); line-height: 1; margin: 4px 0 clamp(20px, 3vw, 32px); }
.disp-portada .sec-t { font-size: clamp(32px, 5vw, 60px); max-width: 16em; }
.disp-portada .sec-sub { color: var(--azul); }

/* ── Bloques ──────────────────────────────────────────────────────────── */
.bloque-t { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 24px; }
.etiqueta { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento); margin-bottom: 8px; }
.pie, .texto .pie { font-size: 13px; color: var(--texto2); }
.texto { font-size: clamp(17px, 1.5vw, 19px); max-width: 46em; }
.texto.col-2 { max-width: none; column-count: 2; column-gap: 56px; }
.texto.col-2 p { break-inside: avoid; }
.texto .lema { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; }
@media (max-width: 760px) { .texto.col-2 { column-count: 1; } }

.destacado { margin: 0; padding: 0 0 0 24px; border-left: 2px solid var(--acento); max-width: 40em; }
.destacado-t { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.35; }
.destacado cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; color: var(--texto2); }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px 40px; }
.cifra { border-top: 1px solid var(--borde); padding-top: 18px; }
.cifra-v { font-size: clamp(40px, 5vw, 60px); font-weight: 200; line-height: 1; color: var(--acento); letter-spacing: -0.03em; margin-bottom: 12px; }
.cifra-t { font-size: 16px; font-weight: 400; }
.cifra-x { font-size: 14px; color: var(--texto2); margin-top: 4px; }
.cifras.grandes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cifras.grandes .cifra { border: 0; padding: 0; }
.cifras.grandes .cifra-v { font-size: clamp(72px, 12vw, 150px); }
.tema-oscuro .cifras.grandes .cifra-v { color: var(--texto); }
.tema-oscuro .cifras.grandes .cifra:nth-child(2) .cifra-v { color: var(--acento); }
.cifras.perfiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cifras.perfiles .cifra-v { font-size: clamp(28px, 3vw, 36px); color: var(--texto); }
.cifras.perfiles .cifra:nth-child(-n+3) .cifra-v { color: var(--acento); }
.cifras.perfiles .cifra-t { color: var(--texto2); font-weight: 300; font-size: 14px; }
/* Cifras en tarjetas: cada dato en su panel, el número rotundo y los textos
   que lo acompañan a un tamaño y un contraste que se leen sin esfuerzo. */
.cifras.fichas { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.cifras.fichas .cifra { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: 22px; padding: clamp(24px, 3vw, 36px);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--acento) 16%, transparent), transparent 62%), var(--tarjeta); }
.cifras.fichas .cifra::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--acento), transparent 75%); }
.cifras.fichas .cifra-v { font-size: clamp(46px, 5.2vw, 66px); font-weight: 300; color: var(--texto); margin-bottom: 18px; white-space: nowrap; }
.cifras.fichas .cifra-t { font-size: clamp(17px, 1.5vw, 19px); font-weight: 500; line-height: 1.3; color: var(--texto); }
.cifras.fichas .cifra-x { font-size: 16px; font-weight: 400; line-height: 1.5; color: color-mix(in srgb, var(--texto) 74%, transparent); margin-top: 8px; }
.cifras.fichas.grandes { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.cifras.fichas.grandes .cifra { padding: clamp(28px, 4vw, 48px); }
.cifras.fichas.grandes .cifra-v { font-size: clamp(60px, 8.4vw, 112px); font-weight: 200; margin-bottom: 22px; }
.cifras.fichas.grandes .cifra-t { font-size: clamp(19px, 2vw, 24px); }
.cifras.fichas.grandes .cifra-x { font-size: 17px; max-width: 34ch; }
.cifras.fichas .cifra:first-child .cifra-v { color: var(--texto); }
.cifras.fichas .cifra:nth-child(2) .cifra-v { color: var(--acento); }
/* Dos bloques de fichas seguidos se leen como un solo panel. */
.bloques > .b-cifras:has(.cifras.fichas) + .b-cifras:has(.cifras.fichas) { margin-top: calc(16px - clamp(40px, 5vw, 64px)); }

.tarjetas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tarjeta { background: var(--tarjeta); border-radius: 18px; padding: 28px; border: 1px solid var(--borde); }
.tema-claro .tarjeta { background: var(--nube); border-color: transparent; }
.tarjeta h4 { font-size: 24px; margin-bottom: 12px; }
.tarjeta p { color: var(--texto2); font-size: 15px; margin: 0; }
.tema-gris .tarjeta h4, .tema-claro .tarjeta h4 { color: var(--azul); }

.puntos { display: grid; gap: 28px 48px; }
.puntos.col-1 { grid-template-columns: 1fr; max-width: 46em; }
.puntos.col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.puntos.col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.puntos.col-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .puntos.col-3, .puntos.col-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .puntos.col-2, .puntos.col-3, .puntos.col-5 { grid-template-columns: 1fr; } }
.punto { display: flex; gap: 18px; align-items: flex-start; }
.punto-n { font-size: 40px; font-weight: 200; line-height: 1; color: var(--acento); min-width: 1.1ch; }
.puntos.col-5 .punto { flex-direction: column; gap: 10px; }
.puntos.col-5 .punto-n { font-size: 56px; }
.punto-t { font-size: 18px; font-weight: 400; }
.puntos:not(.numerada) .punto-t { color: var(--acento); }
.punto-x { font-size: 15px; color: var(--texto2); margin-top: 4px; }

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--borde); }
.tabla thead th { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto2); border-bottom-color: var(--texto2); }
.tabla tbody th { font-weight: 400; white-space: nowrap; color: var(--acento); }
.tabla-b .tabla td:last-child { color: var(--texto2); }
.tabla-b .pie { margin-top: 12px; }
.matriz .tabla td { text-align: center; color: var(--acento) !important; white-space: nowrap; font-size: 14px; }
.matriz .tabla tbody th { white-space: normal; color: var(--texto); min-width: 14em; }
.matriz .tabla thead th:not(:first-child) { text-align: center; }
.matriz .tabla thead th:nth-child(2), .matriz .tabla thead th:nth-child(6) { color: var(--azul); }

.niveles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .niveles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .niveles { grid-template-columns: 1fr; } }
.nivel-c { background: var(--nube); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; }
.nivel-c .etiqueta { color: var(--gris); }
.nivel-n { font-size: 22px; margin-bottom: 6px; }
.nivel-p { margin-bottom: 12px; }
.nivel-pv { font-size: clamp(34px, 3.4vw, 44px); font-weight: 200; letter-spacing: -0.03em; }
.nivel-pn { font-size: 12px; color: var(--gris); margin-left: 6px; }
.nivel-c p { font-size: 14px; color: var(--gris); margin: 0; }
.nivel-c.dest { background: var(--azul); color: #fff; }
.nivel-c.dest .etiqueta, .nivel-c.dest .nivel-pn, .nivel-c.dest p { color: var(--azul-p); }
.nivel-c:nth-child(n+5) { grid-column: span 1; }
.niveles > .nivel-c.dest:nth-child(5) { grid-column: span 2; }
@media (max-width: 520px) { .niveles > .nivel-c.dest:nth-child(5) { grid-column: auto; } }

.nivel-d { background: #fff; border-radius: 22px; padding: clamp(24px, 4vw, 48px); }
.tema-oscuro .nivel-d { background: var(--tarjeta); }
.nivel-d-cab { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.nivel-d-cab h3 { font-size: clamp(24px, 3vw, 34px); max-width: 18em; }
.nivel-d-precio { text-align: right; }
.nivel-d-precio .nivel-pv { color: var(--azul); font-size: clamp(44px, 5vw, 64px); display: block; line-height: 1; }
.nivel-d-texto { color: var(--gris); max-width: 52em; }
.nivel-d-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 40px; margin-top: 24px; }
.nivel-d-lista h4 { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azul); margin-bottom: 10px; }
.lista-t { list-style: none; margin: 0; padding: 0; }
.lista-t li { font-size: 15px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.lista-t li:last-child { border-bottom: 0; }
.niveles + * { margin-top: 0; }
.b-nivel + .b-nivel { margin-top: -32px; }

/* Huecos para logotipos de cada nivel: los adjudicados, con filo de champán. */
.huecos { --oro: #b08d57; --oro-c: #ecdcbc; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--linea); }
.huecos-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.huecos-t { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azul); }
.huecos-e { font-size: 12px; letter-spacing: 0.04em; color: var(--gris2); }
.huecos.completo .huecos-e { color: var(--oro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; }
.huecos.completo .huecos-e::before { content: "✓"; display: inline-block; margin-right: 6px; }
.huecos-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(142px, calc(50% - 6px)), 1fr)); gap: 12px; }
.huecos.uno .huecos-l { grid-template-columns: minmax(0, 300px); }
.hlogo { position: relative; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px 20px; border-radius: 14px; border: 1px dashed var(--linea); background: var(--nube); text-align: center; }
.huecos.uno .hlogo { min-height: 120px; }
.hlogo-libre { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris2); }
.hlogo img { max-height: 40px; max-width: 82%; width: auto; object-fit: contain; }
.huecos.uno .hlogo img { max-height: 56px; }
.hlogo-n { font-size: 17px; font-weight: 400; color: var(--tinta); }
.hlogo.lleno { border: 1px solid transparent;
  background: radial-gradient(120% 90% at 50% 0%, #fffdf8, #fff 60%) padding-box,
    linear-gradient(135deg, var(--oro-c), var(--oro) 38%, #f6ecd6 62%, #a67f45) border-box;
  box-shadow: 0 14px 28px -20px rgba(122, 92, 44, 0.55), 0 1px 2px rgba(122, 92, 44, 0.08); }
.hlogo-ok { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, #d9bf8c, var(--oro)); box-shadow: 0 1px 2px rgba(122, 92, 44, 0.35); }
.hlogo-ok::after { content: ""; position: absolute; left: 5.5px; top: 3.5px; width: 3.5px; height: 6.5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.hlogo .campo-archivo { justify-content: center; }
@media (max-width: 520px) { .hlogo { min-height: 68px; padding: 12px 14px; } .huecos-l { gap: 10px; } }
.huecos-vacio { margin-top: 24px; }

.logos-grupos { display: grid; gap: 28px; }
.logos-g { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; border-top: 1px solid var(--borde); padding-top: 18px; }
.logos-g > .etiqueta { margin: 0; }
@media (max-width: 600px) { .logos-g { grid-template-columns: 1fr; } }
.logos { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; }
@media (max-width: 420px) { .logos { column-gap: 22px; } }
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--texto); }
.logo img { max-height: 44px; max-width: 160px; width: auto; object-fit: contain; }
.logo-n { font-size: 19px; font-weight: 400; letter-spacing: -0.01em; }
.b-logos .pie, .patro .pie { margin-top: 18px; }

.carta { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: end; }
.carta-t { font-size: 18px; max-width: 40em; }
.carta-firma { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
/* Retrato en círculo, abierto hasta los hombros: a 128 px la cabeza mide como en el antiguo de 84 px. */
.carta-foto { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--linea), 0 10px 24px -16px rgba(0, 0, 0, 0.35); }
.carta-n { font-size: 18px; font-weight: 400; }
.carta-c { font-size: 14px; color: var(--texto2); }
@media (max-width: 860px) { .carta { grid-template-columns: 1fr; gap: 28px; } }

.citas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 36px 56px; }
.cita { margin: 0; }
.cita blockquote { margin: 0 0 10px; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.4; }
.cita blockquote::before { content: "«"; }
.cita blockquote::after { content: "»"; }
.editando .cita blockquote::before, .editando .cita blockquote::after { content: none; }
.cita figcaption { font-size: 13px; color: var(--acento); }

.imagen { margin: 0; }
.imagen img { border-radius: 18px; width: 100%; max-width: 820px; }
.imagen figcaption, .video figcaption { font-size: 13px; color: var(--texto2); margin-top: 10px; }
.video { margin: 0; }
.video video { width: 100%; max-width: 960px; border-radius: 18px; background: #000; aspect-ratio: 16 / 9; }
.hueco { border: 1px dashed var(--borde); border-radius: 18px; padding: 48px; text-align: center; color: var(--texto2); }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px 32px; margin: 0; }
.dato { border-top: 1px solid var(--borde); padding-top: 12px; }
.dato dt { font-size: 12px; color: var(--texto2); margin-bottom: 4px; }
.dato dd { margin: 0; font-size: 15px; font-weight: 400; }
.sec:not(.disp-portada) .datos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.hitos { display: grid; }
.hito { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--borde); }
.hito-f { color: var(--acento); font-size: 16px; }
.hito-t { font-size: 17px; }
.hito-x { font-size: 14px; color: var(--texto2); margin-top: 4px; }
.hito.pasado { opacity: 0.45; }
.hito.proximo .hito-t { font-weight: 500; }
.hito.proximo .hito-f::after { content: " · próximo"; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 600px) { .hito { grid-template-columns: 1fr; gap: 4px; } }

.cuenta { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; }
.cuenta-c { display: flex; flex-direction: column; }
.cuenta-v { font-size: clamp(40px, 5vw, 64px); font-weight: 200; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cuenta-c:first-child .cuenta-v { color: var(--azul); }
.cuenta-e { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto2); margin-top: 6px; }
.cuenta-t { font-size: 15px; color: var(--texto2); padding-bottom: 4px; }

.botones { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 22px; background: var(--azul); color: #fff; font-size: 15px; font-weight: 400; cursor: pointer; text-decoration: none !important; }
.btn:hover { background: #173f80; }
.btn.sec { background: transparent; color: var(--acento); box-shadow: inset 0 0 0 1px currentColor; }
.btn.sec:hover { background: rgba(31, 79, 156, 0.06); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.contacto-t { font-size: clamp(19px, 2vw, 24px); }
.contacto-e { display: inline-block; font-size: clamp(34px, 5vw, 60px); font-weight: 200; color: #fff; letter-spacing: -0.02em; margin: 8px 0 28px; }
.contacto-l { font-size: 19px; color: var(--azul-p); }
.tema-azul .sec-t { color: #fff; }

.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.doc { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; background: #fff; border-radius: 16px; padding: 16px 20px; }
.tema-oscuro .doc { background: var(--tarjeta); }
.doc-i { position: relative; width: 44px; height: 52px; color: var(--azul); }
.doc-i svg { width: 44px; height: 52px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.doc-ext { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; }
.doc-t { font-size: 17px; font-weight: 400; }
.doc-x { font-size: 14px; color: var(--gris); }
.doc-m { font-size: 12px; color: var(--gris2); margin-top: 2px; }
@media (max-width: 600px) { .doc { grid-template-columns: 40px 1fr; } .doc-b { grid-column: 1 / -1; justify-self: start; } }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie-web { background: var(--nube); color: var(--gris); font-size: 13px; padding: 36px 0; }
.pie-in { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pie-marca { font-size: 20px; }
.pie-lema { color: var(--azul); }
.pie-der { display: flex; gap: 18px; align-items: center; }
.enlace { background: none; border: 0; padding: 0; color: var(--azul); cursor: pointer; font-size: inherit; }
.enlace:hover { text-decoration: underline; }

/* ── Gestión ──────────────────────────────────────────────────────────── */
.gestion { padding: clamp(40px, 6vw, 72px) 0 96px; background: var(--nube); min-height: 80vh; }
.gestion .sec-t { margin-bottom: 28px; }
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 28px; border-bottom: 1px solid var(--linea); }
.pestanas a { padding: 10px 14px; color: var(--gris); font-size: 15px; font-weight: 400; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.pestanas a.activa { color: var(--tinta); border-bottom-color: var(--azul); }
.pestanas a:hover { color: var(--tinta); }
.ayuda { color: var(--gris); font-size: 15px; max-width: 52em; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { background: #fff; border-radius: 18px; padding: 20px 22px; }
.kpi-v { font-size: clamp(28px, 3vw, 38px); font-weight: 200; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi.azul .kpi-v { color: var(--azul); }
.kpi-t { font-size: 14px; font-weight: 400; margin-top: 4px; }
.kpi-x { font-size: 13px; color: var(--gris); }
.kpis.pequenos .kpi { padding: 14px 18px; }
.kpis.pequenos .kpi-v { font-size: 26px; }
.g-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 420px) { .g-dos { grid-template-columns: 1fr; } }
.panel { background: #fff; border-radius: 18px; padding: 22px 24px; }
.panel h3 { font-size: 19px; margin-bottom: 16px; }
.barra-n { margin-bottom: 14px; }
.barra-n-t { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 6px; }
.barra-n-t span:last-child { color: var(--gris); }
.barra-n-b { height: 8px; background: var(--nube); border-radius: 999px; overflow: hidden; display: flex; }
.barra-n-b .v { background: var(--azul); }
.barra-n-b .c { background: var(--azul-p); }
.cuentas td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuentas th { color: var(--tinta) !important; white-space: normal !important; font-weight: 300 !important; }
.cuentas .total th, .cuentas .total td { font-weight: 500 !important; }
.cuentas tr.total:first-of-type th { border-top: 1px solid var(--tinta); }
.g-lista { list-style: none; margin: 0 0 12px; padding: 0; font-size: 15px; }
.g-lista li { padding: 8px 0; border-bottom: 1px solid var(--nube); }
.g-lista b { color: var(--azul); font-weight: 400; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
.chip.activa { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.g-tabla { background: #fff; border-radius: 14px; font-size: 14px; }
.g-tabla th, .g-tabla td { padding: 10px 12px; }
.g-tabla thead th { position: sticky; top: 0; background: #fff; }
.g-tabla tbody th { color: inherit; }
.g-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-tabla .cen { text-align: center; }
.g-tabla .nw { white-space: nowrap; }
.g-tabla tfoot th, .g-tabla tfoot td { font-weight: 500; border-bottom: 0; }
.g-tabla.editando td { padding: 6px 6px; }
.g-tabla input[type="text"], .g-tabla input[type="number"], .g-tabla input[type="date"], .g-tabla textarea, .g-tabla select {
  width: 100%; min-width: 6rem; border: 1px solid transparent; background: var(--nube); border-radius: 8px; padding: 6px 8px; font-size: 14px; }
.g-tabla textarea { min-width: 12rem; resize: vertical; overflow: hidden; line-height: 1.4; }
.g-tabla input:focus, .g-tabla textarea:focus, .g-tabla select:focus { background: #fff; border-color: var(--azul); outline: none; }
.g-tabla input.num { text-align: right; min-width: 6.5rem; }
.fila-vendida td, .fila-vendida th { background: rgba(31, 79, 156, 0.06); }
.fila-apagada { opacity: 0.5; }
.estado { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--nube); white-space: nowrap; }
.e-reservada, .e-50-cobrado, .e-publico { background: var(--azul-p); color: var(--azul); }
.e-cobrada, .e-pagado { background: var(--azul); color: #fff; }
.e-en-conversaci-n, .e-comprometido { background: #fff1d6; color: #8a5300; }
.e-descartada { text-decoration: line-through; }
.e-confirmado, .e-50-pagado { background: var(--azul-p); color: var(--azul); }
.e-pagado-total { background: var(--azul); color: #fff; }
.e-contactado { background: #fff1d6; color: #8a5300; }
.e-descartado { text-decoration: line-through; }
.g-tabla td.fuerte { font-weight: 500; }
.panel.por-persona { margin-bottom: 20px; }
.g-tabla .nivel-fijo { display: inline-block; padding: 6px 8px; white-space: nowrap; }
select.chip { appearance: auto; color: var(--tinta); }
.archivo-n { display: block; font-size: 12px; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-g { gap: 8px; }
.doc-g { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.doc-ed { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 16px; align-items: center; background: #fff; border-radius: 16px; padding: 14px 18px; }
.notas { max-width: 52em; }
.gestion .btn { margin-bottom: 16px; }

/* ── Edición ──────────────────────────────────────────────────────────── */
.ed { outline: 1px dashed transparent; outline-offset: 3px; border-radius: 3px; cursor: text; min-width: 1ch; transition: outline-color 0.15s; }
.editando .ed:hover { outline-color: rgba(79, 127, 192, 0.6); }
.ed:focus { outline: 2px solid var(--azul-c); background: rgba(79, 127, 192, 0.06); }
.ed:empty::before { content: attr(data-ph); color: var(--gris2); opacity: 0.7; font-style: italic; pointer-events: none; }
.editando .bloque { position: relative; border: 1px dashed rgba(134, 134, 139, 0.45); border-radius: 14px; padding: 36px 16px 16px; }
.bloque-ed { position: absolute; top: 6px; right: 8px; left: 12px; display: flex; justify-content: flex-end; }
.ctrl { display: inline-flex; gap: 2px; align-items: center; background: var(--tinta); color: #fff; border-radius: 999px; padding: 2px 4px; font-size: 11px; z-index: 5; }
.ctrl-et { padding: 0 8px; letter-spacing: 0.04em; opacity: 0.8; }
.ctrl button { width: 24px; height: 24px; border: 0; background: transparent; color: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ctrl button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
.ctrl button:disabled { opacity: 0.3; cursor: default; }
.ctrl button.peligro:hover { background: #b42318; }
.ctrl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.item-ed { position: relative; }
.item-ed > .ctrl { position: absolute; top: -12px; right: 0; opacity: 0; transition: opacity 0.15s; }
.item-ed:hover > .ctrl, .item-ed:focus-within > .ctrl { opacity: 1; }
@media (hover: none) { .item-ed > .ctrl { opacity: 1; position: static; margin-top: 6px; } }
.lista-t li.item-ed > .ctrl { top: 4px; }
.anadir { border: 1px dashed var(--borde); background: transparent; color: var(--acento); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; justify-self: start; align-self: start; }
.anadir:hover { border-style: solid; }
.anadir-sel { justify-self: start; border: 1px dashed var(--borde); background: transparent; color: var(--acento); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.opciones { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--texto2); margin: 10px 0; }
.opcion { font-size: 13px; color: var(--texto2); display: inline-flex; gap: 6px; align-items: center; margin: 0 12px 10px 0; }
.opcion select, .sec-ed select, .sec-ed input { font-size: 12px; border-radius: 6px; border: 1px solid var(--linea); padding: 2px 6px; background: #fff; color: var(--tinta); }
.sec-ed { position: sticky; top: calc(var(--cab) + 6px); z-index: 20; max-width: var(--ancho); margin: -40px auto 28px; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12px; background: rgba(29, 29, 31, 0.92); color: #fff; border-radius: 14px; width: calc(100% - 2 * var(--margen)); }
.sec-ed label, .sec-ed > span { display: inline-flex; gap: 6px; align-items: center; }
.sec-ed-n { font-weight: 500; }
.sec-ed .ctrl { background: transparent; margin-left: auto; }
.sec-anadir { margin-top: 40px; }
.campo-archivo { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.campo-archivo-n { color: var(--texto2); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini { font-size: 12px; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); color: var(--acento); padding: 3px 10px; cursor: pointer; }
.sec-ed .mini { background: #fff; color: var(--azul); }
.mini.peligro { color: #b42318; }
.nota-ed { font-size: 13px; color: var(--texto2); font-style: italic; }
.tabla .ctrl-col { width: 1%; white-space: nowrap; border-bottom-color: transparent; }
.tabla .ctrl-col .ctrl { position: static; opacity: 1; }
.editando .tabla td.ed, .editando .tabla th.ed { min-width: 4em; }
.hito-f-ed { font-size: 14px; border: 1px solid var(--borde); border-radius: 8px; padding: 4px 8px; background: var(--fondo); color: var(--texto); align-self: start; }

.herr-rico { position: fixed; z-index: 80; display: flex; flex-wrap: wrap; max-width: calc(100vw - 16px); gap: 2px; background: var(--tinta); border-radius: 10px; padding: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.herr-rico button { border: 0; background: transparent; color: #fff; padding: 5px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.herr-rico button:hover { background: rgba(255, 255, 255, 0.15); }
.herr-rico .azul { color: var(--azul-c); }

/* Barra de edición, abajo */
.barra { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; background: rgba(29, 29, 31, 0.94); color: #fff; border-radius: 999px; padding: 6px 8px 6px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); font-size: 14px; max-width: calc(100vw - 24px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.interruptor { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; }
.interruptor input { appearance: none; -webkit-appearance: none; width: 36px; height: 22px; border-radius: 999px; background: #48484a; position: relative; cursor: pointer; margin: 0; transition: background 0.2s; }
.interruptor input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.interruptor input:checked { background: var(--azul-c); }
.interruptor input:checked::after { transform: translateX(14px); }
.b-estado { color: #a1a1a6; font-size: 13px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.b-estado.bien { color: #8fd3a0; }
.b-estado.mal { color: #ffb4a8; white-space: normal; max-width: 40ch; line-height: 1.25; }
.b-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.2); margin: 0 4px; }
.b-btn { border: 0; background: transparent; color: #fff; padding: 7px 12px; border-radius: 999px; cursor: pointer; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
.b-btn:hover { background: rgba(255, 255, 255, 0.14); }
@media (max-width: 640px) { .barra { border-radius: 18px; flex-wrap: wrap; justify-content: center; padding: 8px; } .b-sep { display: none; } .b-estado { max-width: 100%; } }

.aviso { pointer-events: auto; display: flex; gap: 14px; align-items: center; background: var(--tinta); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); max-width: calc(100vw - 32px); }

/* Diálogos */
.dlg { border: 0; border-radius: 22px; padding: 28px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); color: var(--tinta); }
.dlg-ancho { width: min(720px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); }
.dlg h2 { font-size: 28px; margin-bottom: 8px; }
.dlg p { color: var(--gris); font-size: 15px; }
.dlg label { display: block; font-size: 13px; color: var(--gris); margin: 14px 0 6px; }
.dlg input[type="password"], .dlg input[type="email"], .dlg input.codigo { width: 100%; font-size: 17px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; }
.dlg input[readonly] { background: #f5f6f8; color: var(--gris); }
.dlg input.codigo { font-size: 24px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.dlg .enlace-boton { background: none; border: 0; padding: 0; margin-top: 8px; font: inherit; font-size: 13px; color: var(--azul); text-decoration: underline; cursor: pointer; }
.dlg input[type="password"]:focus, .dlg input[type="email"]:focus, .dlg input.codigo:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(31, 79, 156, 0.15); }
.dlg-error { color: #b42318 !important; min-height: 1.4em; margin: 8px 0 0; font-size: 14px; }
.dlg-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.historial { list-style: none; margin: 16px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.historial li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--nube); font-size: 15px; }
.historial .btn { padding: 6px 14px; font-size: 13px; }

/* ── Comunicación & RRSS ──────────────────────────────────────────────── */
.com-h { font-size: 26px; margin: 40px 0 8px; }
.com-enlace input { width: 100%; max-width: 32rem; font: inherit; font-size: 17px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--nube); }
.com-enlace input:focus { background: #fff; border-color: var(--azul); outline: none; }
.com-enlace .pie { margin: 10px 0 0; }
.com-cartas { display: grid; gap: 12px; margin-top: 12px; }
.com-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 420px) { .com-rejilla { grid-template-columns: 1fr; } }
.com-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.com-cab h3 { margin-bottom: 0; }
.com-cab select { flex: none; border: 1px solid transparent; border-radius: 8px; background: var(--nube); padding: 5px 8px; font: inherit; font-size: 14px; }
.com-carta h3 { margin-bottom: 10px; }
.com-campo { display: flex; gap: 12px; align-items: baseline; font-size: 15px; padding: 7px 0; border-bottom: 1px solid var(--nube); }
.com-et { flex: none; width: 4.5em; color: var(--gris2); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.com-asunto { font-weight: 400; }
.com-texto { white-space: pre-wrap; font-size: 15px; line-height: 1.55; margin: 14px 0; overflow-wrap: anywhere; }
.com-area { display: block; width: 100%; min-height: 8rem; margin: 14px 0 6px; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.55; border: 1px solid transparent; border-radius: 10px; background: var(--nube); resize: vertical; overflow: hidden; }
.com-area:focus { background: #fff; border-color: var(--azul); outline: none; }
.com-n { display: block; font-size: 12px; color: var(--gris2); }
.com-n.mal { color: #b42318; }
.com-acciones { margin: 12px 0 0; }
a.chip { display: inline-flex; align-items: center; color: inherit; text-decoration: none !important; }
.com-prev { display: block; margin: 12px 0 8px; border-radius: 12px; overflow: hidden; background: var(--nube); }
.com-prev img { width: 100%; height: 220px; object-fit: contain; }
.com-prev.vacia { height: 120px; display: grid; place-items: center; color: var(--gris2); font-size: 14px; }
.com-img { margin: 0; }
.com-img-t { font-weight: 400; margin-bottom: 2px; }
.com-img .pie { font-size: 14px; }

/* ── Edición: arrastrar, ocultar, insertar, paneles ───────────────────── */
.asa { display: inline-grid; place-items: center; width: 22px; height: 24px; cursor: grab; border-radius: 6px; flex: none; }
.asa:active { cursor: grabbing; }
.asa svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.arrastrando { opacity: 0.35; }
.suelta-antes { box-shadow: 0 -3px 0 var(--azul-c); }
.suelta-despues { box-shadow: 0 3px 0 var(--azul-c); }
.suelta-antes.suelta-h { box-shadow: -3px 0 0 var(--azul-c); }
.suelta-despues.suelta-h { box-shadow: 3px 0 0 var(--azul-c); }
tr.suelta-antes, tr.suelta-despues { box-shadow: none; }
tr.suelta-antes > * { box-shadow: inset 0 3px 0 var(--azul-c); }
tr.suelta-despues > * { box-shadow: inset 0 -3px 0 var(--azul-c); }
.suelta-dentro { outline: 2px dashed var(--azul-c); outline-offset: 4px; }
.ctrl button.activo { background: rgba(255, 255, 255, 0.28); }

/* Lo oculto se ve apagado al editar; sin editar (y en la web pública) no está. */
.sec.oculta > .envoltura { opacity: 0.4; }
.bloque.oculto > :not(.bloque-ed):not(.insertar) { opacity: 0.35; }
.sec-ed-oculta, .bloque-oculto { background: #8a5300; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 11px; white-space: nowrap; }
.bloque-ed { gap: 8px; align-items: center; }

/* El + entre bloques: aparece al pasar por encima del hueco. */
.editando .bloques { gap: 44px; }
.editando .b-nivel + .b-nivel { margin-top: 0; }
.insertar { position: absolute; left: 0; right: 0; top: -34px; height: 24px; display: grid; place-items: center; opacity: 0; transition: opacity 0.15s; z-index: 4; }
.insertar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--azul-c); }
.bloque:hover > .insertar, .insertar:focus-within { opacity: 1; }
@media (hover: none) { .insertar { opacity: 1; } }
.insertar button { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--azul); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.insertar button:hover { transform: scale(1.15); }
.insertar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.menu-b { position: absolute; z-index: 85; background: #fff; color: var(--tinta); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.06); padding: 10px; color-scheme: light; font-size: 15px; }
.menu-b input { width: 100%; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; font-size: 16px; margin-bottom: 8px; background: #fff; color: var(--tinta); }
.menu-b input:focus { border-color: var(--azul); outline: none; }
.menu-b-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 4px; max-height: min(50vh, 420px); overflow-y: auto; }
.menu-b-op { text-align: left; border: 0; background: transparent; color: inherit; border-radius: 10px; padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; align-content: start; }
.menu-b-op:hover, .menu-b-op:focus-visible { background: var(--nube); }
.menu-b-op b { font-size: 14px; font-weight: 500; }
.menu-b-op span { font-size: 12px; color: var(--gris); line-height: 1.3; }
.menu-b-op.pegar { grid-column: 1 / -1; background: rgba(31, 79, 156, 0.08); }
.menu-b .pie { margin: 8px; }

.texto h3, .carta-t h3, .notas h3, .destacado-t h3 { font-size: 1.2em; font-weight: 500; margin: 1.3em 0 0.4em; }
.texto h3:first-child, .carta-t h3:first-child, .notas h3:first-child { margin-top: 0; }
.herr-url { border: 0; border-radius: 7px; padding: 5px 10px; font-size: 14px; width: min(18rem, 50vw); background: #fff; color: var(--tinta); }
.tabla-cols th { border-bottom: 0; padding: 0 0 2px; }
.tabla-cols th { min-width: 100px; }
.tabla-cols .ctrl { position: static; opacity: 1; padding: 2px; }
.tabla-cols .ctrl button { width: 21px; height: 21px; }
.destino { font-size: 12px; border-radius: 6px; border: 1px solid var(--linea); padding: 2px 4px; background: #fff; color: var(--tinta); max-width: 8rem; }

.avisos { position: fixed; z-index: 90; top: calc(var(--cab) + 12px); left: 50%; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; margin: 0; }
.aviso-b { border: 0; background: transparent; color: #9cc0ff; font-weight: 500; cursor: pointer; padding: 0; font-size: 14px; white-space: nowrap; }
.aviso-b:hover { text-decoration: underline; }

.b-ico { width: 32px; height: 32px; border: 0; background: transparent; color: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.b-ico:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.b-ico:disabled { opacity: 0.3; cursor: default; }
.b-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b-btn.activo { background: rgba(255, 255, 255, 0.22); }
/* En el móvil la barra es una sola fila, de lado a lado; si no cabe, se desliza. */
@media (max-width: 640px) {
  .barra { left: 8px; right: 8px; transform: none; max-width: none; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; border-radius: 16px; padding: 6px 8px; gap: 2px; }
  .barra::-webkit-scrollbar { display: none; }
  .barra > * { flex: none; }
  .b-estado { max-width: 8.5em; font-size: 12px; padding: 0 4px; }
  .b-estado.mal { max-width: 70vw; }
  .b-btn { padding: 7px 9px; }
  .interruptor span { display: none; }
}

/* Paneles laterales: las secciones (izquierda) y la ficha de una fila (derecha). */
.lateral { position: fixed; z-index: 60; top: var(--cab); bottom: 0; width: min(420px, 100vw); background: #fff; color: var(--tinta); box-shadow: 0 0 40px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; color-scheme: light; font-size: 15px; }
body.con-barra .lateral { padding-bottom: 72px; }
.ficha { right: 0; }
.estructura { left: 0; width: min(340px, 100vw); }
.lat-cab { display: flex; align-items: flex-start; gap: 2px; padding: 16px 10px 12px 20px; border-bottom: 1px solid var(--nube); }
.lat-cab h2 { font-size: 22px; line-height: 1.2; flex: 1; overflow-wrap: anywhere; }
.lat-cab .cab-boton:disabled { opacity: 0.3; cursor: default; }
.ficha-tit { flex: 1; min-width: 0; }
.ficha-tit .kicker { margin-bottom: 4px; }
.ficha-cuerpo { flex: 1; overflow-y: auto; padding: 16px 20px; display: grid; gap: 14px; align-content: start; }
.ficha-campo { display: grid; gap: 5px; min-width: 0; }
.ficha-campo.en-linea { grid-template-columns: 1fr auto; align-items: center; }
.ficha-et { font-size: 12px; color: var(--gris); letter-spacing: 0.04em; }
.ficha-campo input:not([type="checkbox"]), .ficha-campo textarea, .ficha-campo select { width: 100%; border: 1px solid var(--linea); background: #fff; border-radius: 10px; padding: 9px 11px; font-size: 16px; }
.ficha-campo input:focus, .ficha-campo textarea:focus, .ficha-campo select:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(31, 79, 156, 0.15); }
.ficha-campo textarea { resize: vertical; overflow: hidden; line-height: 1.45; min-height: 4.6em; }
.ficha-campo input[type="checkbox"] { width: 20px; height: 20px; }
.ficha-campo .nivel-fijo { padding: 9px 0; font-size: 16px; }
.ficha-pie { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--nube); }
.ficha-pie .btn { margin-left: auto; }
.estructura > .pie { padding: 10px 20px 0; margin: 0; }
.est-lista { list-style: none; margin: 8px 0; padding: 0 8px; overflow-y: auto; flex: 1; }
.est-it { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 2px; border-radius: 10px; padding: 1px 4px; color: var(--gris); }
.est-it:hover, .est-it:focus-within { background: var(--nube); }
.est-it.oculta .est-t { opacity: 0.45; }
.est-t { text-align: left; border: 0; background: none; cursor: pointer; padding: 6px 4px; display: grid; min-width: 0; color: var(--tinta); }
.est-nombre { font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-m { font-size: 11px; color: var(--gris2); }
.est-it .ctrl { position: static; background: transparent; color: var(--gris); opacity: 0; padding: 0; }
.est-it:hover .ctrl, .est-it:focus-within .ctrl { opacity: 1; }
@media (hover: none) { .est-it .ctrl { opacity: 1; } }
.est-it .ctrl button { color: var(--gris); }
.est-it .ctrl button:hover:not(:disabled) { background: var(--linea); color: var(--tinta); }
.est-it .ctrl button.peligro:hover { background: #b42318; color: #fff; }
.est-it .ctrl button.activo { background: var(--linea); }
.estructura > .anadir { margin: 4px 20px 14px; }
@media (min-width: 1100px) {
  body.con-estructura #app, body.con-estructura .pie-web { margin-left: 340px; }
  body.con-ficha .gestion { padding-right: 420px; }
}

/* ── Gestión: herramientas de las tablas, ficha, tablero ──────────────── */
.pest-n { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 500; background: var(--azul); color: #fff; border-radius: 999px; padding: 0 7px; line-height: 18px; vertical-align: 1px; }
.g-herr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.g-herr-sep { flex: 1; }
.g-cuenta { font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.buscar { position: relative; display: inline-flex; align-items: center; }
.buscar-i { position: absolute; left: 11px; display: grid; color: var(--gris2); pointer-events: none; }
.buscar-i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.buscar input { border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: 7px 14px 7px 34px; font-size: 14px; width: min(16rem, 62vw); }
.buscar input:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(31, 79, 156, 0.15); }
.vistas { display: inline-flex; }
.vistas .chip:first-child { border-radius: 999px 0 0 999px; border-right: 0; }
.vistas .chip:last-child { border-radius: 0 999px 999px 0; }
.th-orden { all: unset; cursor: pointer; white-space: nowrap; }
.th-orden:hover { color: var(--tinta); }
.th-orden:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 3px; }
.th-flecha { color: var(--azul); }
.g-tabla .ctrl-col:first-child { padding-right: 0; }
.abrir { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 8px; color: var(--gris2); cursor: pointer; display: grid; place-items: center; padding: 0; }
.abrir:hover { background: var(--nube); color: var(--azul); }
.abrir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.g-tabla tr.pulsable { cursor: pointer; }
.g-tabla tr.pulsable:hover > * { background: rgba(31, 79, 156, 0.045); }
.g-tabla tr.fila-abierta > *, .tab-t.fila-abierta { background: rgba(31, 79, 156, 0.12); }
.vacio { color: var(--gris); text-align: center !important; padding: 28px !important; font-size: 15px; }
p.vacio { background: #fff; border-radius: 14px; margin: 0; }
.fila-vencida td.fecha, .fila-vencida input[type="date"] { color: #b42318; }
.chip.alerta { border-color: #b42318; color: #b42318; }
.chip.alerta.activa { background: #b42318; color: #fff; }
.rapido { display: block; width: 100%; max-width: 44rem; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 16px; font-size: 16px; background: #fff; margin-bottom: 14px; }
.rapido:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(31, 79, 156, 0.15); }

.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; overflow-x: auto; padding: 4px 4px 10px; align-items: start; }
.tab-col { background: rgba(0, 0, 0, 0.04); border-radius: 14px; padding: 10px; min-height: 120px; }
.tab-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.tab-n { font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-tarjetas { display: grid; gap: 6px; max-height: 68vh; overflow-y: auto; }
.tab-t { background: #fff; border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; font-size: 13px; cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); }
.tab-t:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.tab-t b { font-size: 14px; font-weight: 500; }
.tab-t span { color: var(--gris); }
.tab-x { font-size: 12px; }
.tab-vacia { font-size: 12px; color: var(--gris2); text-align: center; margin: 14px 0; }

.zona-subir { display: grid; gap: 2px; width: 100%; text-align: center; border: 1.5px dashed var(--linea); background: #fff; border-radius: 14px; padding: 18px; cursor: pointer; margin-bottom: 14px; color: var(--tinta); }
.zona-subir:hover { border-color: var(--azul); }
.zona-subir b { font-weight: 500; color: var(--azul); }
.zona-subir span { font-size: 13px; color: var(--gris); }
.bib { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 42vh; overflow-y: auto; margin-top: 12px; padding: 2px; }
.bib-it { border: 1px solid var(--nube); background: #fff; color: inherit; border-radius: 12px; padding: 8px; cursor: pointer; display: grid; gap: 4px; text-align: left; min-width: 0; }
.bib-it:hover, .bib-it:focus-visible { border-color: var(--azul); }
.bib-it img { width: 100%; height: 76px; object-fit: contain; background: var(--nube); border-radius: 8px; }
.bib-ico { position: relative; height: 76px; display: grid; place-items: center; color: var(--azul); background: var(--nube); border-radius: 8px; }
.bib-ico svg { width: 36px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.bib-ico .doc-ext { bottom: 24px; }
.bib-n { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-m { font-size: 11px; color: var(--gris2); }
.bib .pie { grid-column: 1 / -1; }
.dlg .buscar { display: flex; margin: 0; }
.dlg .buscar input { width: 100%; }
.dlg h3 { font-size: 19px; margin: 0 0 8px; }
.imp-area { display: block; width: 100%; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow: auto; margin: 12px 0 8px; }
.imp-area:focus { border-color: var(--azul); outline: none; }
#detalle-historial .historial li { grid-template-columns: 1fr auto; }

@media print { .lateral, .insertar, .avisos, .menu-b { display: none !important; } }

/* Botones sobre fondo azul (la sección de CiberIDiA Arena): en blanco, para que se vean. */
.tema-azul .btn { background: #fff; color: var(--azul); }
.tema-azul .btn:hover { background: var(--azul-p); }
.tema-azul .btn.sec { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.tema-azul .btn.sec:hover { background: rgba(255, 255, 255, 0.1); }
.tema-azul .tarjeta h4 { color: #fff; }
.tema-azul .tabla tbody th, .tema-azul .hito-f { color: var(--azul-p); }
.g-tabla tr.parte-arena > td:first-child { box-shadow: inset 3px 0 0 var(--azul-c); }
/* Logos sobre fondo azul u oscuro: en su placa blanca, que los de tinta oscura se vean. */
.tema-azul .logo img, .tema-oscuro .logo img { background: #fff; padding: 10px 16px; border-radius: 8px; box-sizing: content-box; }
.tema-azul .logos-g { border-top-color: rgba(255,255,255,.18); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .cab, .barra, .pie-web .enlace, .sec-ed, .ctrl, .anadir, .anadir-sel { display: none !important; }
  .sec { padding: 40px 0; break-inside: avoid-page; }
}