:root {
  --azul-900: #173b7a;
  --azul-700: #2456b3;
  --azul-100: #eaf1ff;
  --azul-050: #f4f7fc;
  --gris-900: #17233b;
  --gris-700: #4f5f78;
  --gris-500: #75839a;
  --gris-300: #cbd5e5;
  --gris-200: #dde5f0;
  --blanco: #ffffff;
  --verde: #18734c;
  --verde-suave: #e8f6ef;
  --ambar: #8c5b00;
  --ambar-suave: #fff4dc;
  --rojo: #a32d35;
  --rojo-suave: #fff0f1;
  --sombra: 0 10px 30px rgba(25, 52, 96, 0.09);
  --radio: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--gris-900);
  background: var(--azul-050);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--azul-700); }
a:hover { color: var(--azul-900); }
button, input, select, textarea { font: inherit; }
button, a, select, input, textarea { outline-offset: 3px; }
img, video { max-width: 100%; }

.encabezado {
  position: sticky;
  z-index: 20;
  top: 0;
  color: var(--blanco);
  background: linear-gradient(110deg, var(--azul-900), var(--azul-700));
  box-shadow: 0 5px 20px rgba(18, 46, 99, 0.18);
}

.encabezado-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 0;
}

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--blanco);
  font-size: 1.08rem;
  font-weight: 750;
  text-decoration: none;
}

.marca-icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 10px;
  background: rgba(255,255,255,.13);
  font-weight: 800;
}

.navegacion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.navegacion a {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--blanco);
  text-decoration: none;
}

.navegacion a:hover,
.navegacion a[aria-current="page"] { background: rgba(255,255,255,.16); }

.barra-demo {
  border-bottom: 1px solid var(--gris-300);
  background: var(--blanco);
}

.barra-demo-interior {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 12px 0;
}

.demo-titulo { margin: 0; font-weight: 750; }
.demo-nota { margin: 2px 0 0; color: var(--gris-700); font-size: .88rem; }
.texto-secundario { color: var(--gris-700); }
.seccion-separada { margin-top: 18px; }
.seccion-separada-amplia { margin-top: 22px; }
.demo-controles { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }

.campo { display: grid; gap: 5px; }
.campo label { font-size: .86rem; font-weight: 700; }

input, select, textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--gris-300);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--gris-900);
  background: var(--blanco);
}

textarea { min-height: 115px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--azul-700); box-shadow: 0 0 0 3px rgba(36,86,179,.13); }

.contenedor {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 30px 0 52px;
}

.miga { margin: 0 0 14px; color: var(--gris-700); font-size: .9rem; }
.eyebrow { margin: 0 0 5px; color: var(--azul-700); font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.22; }
h1 { margin: 0; font-size: clamp(1.85rem, 4vw, 2.65rem); }
h2 { font-size: 1.4rem; }
.introduccion { max-width: 760px; margin: 9px 0 0; color: var(--gris-700); }

.buscador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 24px 0 14px;
}

.buscador input { min-height: 50px; font-size: 1rem; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid var(--gris-300);
  border-radius: 9px;
  padding: 9px 14px;
  color: var(--gris-900);
  background: var(--blanco);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
}

.boton:hover { border-color: var(--azul-700); color: var(--azul-700); }
.boton-primario { border-color: var(--azul-700); color: var(--blanco); background: var(--azul-700); }
.boton-primario:hover { border-color: var(--azul-900); color: var(--blanco); background: var(--azul-900); }
.boton-peligro { border-color: #e7b8bc; color: var(--rojo); background: var(--rojo-suave); }
.boton-enlace { border: 0; padding: 0; color: var(--azul-700); background: transparent; }
.boton-enlace:hover { text-decoration: underline; }

.rejilla-principal {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 22px;
  margin-top: 22px;
}

.panel, .tarjeta-articulo {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra);
}

.panel { padding: 18px; }
.panel h2, .panel h3 { margin-top: 0; }

.filtros { position: sticky; top: 148px; align-self: start; }
.filtros-grupo + .filtros-grupo { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--gris-200); }
.filtros-titulo { margin: 0 0 8px; font-weight: 800; }
.filtro-opcion { display: flex; gap: 8px; align-items: flex-start; margin: 7px 0; }
.filtro-opcion input { width: auto; min-height: auto; margin-top: 5px; }

.resultado-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.resultado-cabecera h2 { margin: 0; }
.conteo { color: var(--gris-700); }
.rejilla-articulos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.tarjeta-articulo { display: flex; flex-direction: column; padding: 18px; }
.tarjeta-articulo h3 { margin: 9px 0 6px; }
.tarjeta-articulo p { margin: 0 0 14px; color: var(--gris-700); }
.tarjeta-articulo .acciones { margin-top: auto; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--azul-700);
  background: var(--azul-100);
  font-size: .78rem;
  font-weight: 750;
}

.estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; }
.estado::before { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-500); content: ""; }
.estado-publicado::before { background: var(--verde); }
.estado-revision::before { background: #d58a00; }
.estado-retirado::before { background: var(--rojo); }

.vacio, .alerta {
  margin: 18px 0;
  border: 1px solid var(--gris-300);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--gris-700);
  background: var(--blanco);
}
.alerta-info { border-color: #b8cbed; background: var(--azul-100); }
.alerta-exito { border-color: #a9d9c2; color: var(--verde); background: var(--verde-suave); }
.alerta-advertencia { border-color: #ecd096; color: var(--ambar); background: var(--ambar-suave); }
.alerta-error { border-color: #e6b5b9; color: var(--rojo); background: var(--rojo-suave); }

.articulo-disposicion { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: 20px; margin-top: 18px; }
.articulo-contenido { padding: 24px; }
.articulo-contenido ol { padding-left: 24px; }
.articulo-contenido li { margin-bottom: 12px; }
.articulo-lateral { align-self: start; }
.recurso {
  overflow: hidden;
  margin: 20px 0;
  border: 1px solid var(--gris-200);
  border-radius: 12px;
  background: var(--azul-050);
}
.recurso img { display: block; width: 100%; height: auto; }
.recurso figcaption { padding: 10px 13px; color: var(--gris-700); font-size: .88rem; }
.lista-enlaces { padding-left: 19px; }
.lista-enlaces li { margin-bottom: 8px; }

.gestion-cabecera { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.tabla-contenedor { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--gris-200); text-align: left; vertical-align: middle; }
th { color: var(--gris-700); font-size: .85rem; }
.tabla-acciones { display: flex; flex-wrap: wrap; gap: 7px; }

.editor { display: none; margin-top: 20px; }
.editor.visible { display: block; }
.formulario-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.campo-ancho { grid-column: 1 / -1; }
.acciones-formulario { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.revision-detalle { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap: 18px; margin-top: 18px; }
.revision-panel { display: none; }
.revision-panel.visible { display: block; }

.pasos-demo { counter-reset: paso; list-style: none; padding: 0; }
.pasos-demo li { position: relative; min-height: 42px; margin: 12px 0; padding-left: 48px; }
.pasos-demo li::before {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--blanco);
  background: var(--azul-700);
  counter-increment: paso;
  content: counter(paso);
  font-weight: 800;
}

.mapa-sitio { width: 100%; overflow-x: auto; }
.mapa-sitio img { display: block; min-width: 680px; width: 100%; }

.pie {
  border-top: 1px solid var(--gris-300);
  color: var(--gris-700);
  background: var(--blanco);
}
.pie-interior { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0; }
.pie p { margin: 0; }

.solo-lectura { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 850px) {
  .encabezado-interior { align-items: flex-start; flex-direction: column; }
  .navegacion { width: 100%; }
  .rejilla-principal, .articulo-disposicion, .revision-detalle { grid-template-columns: 1fr; }
  .filtros { position: static; }
}

@media (max-width: 620px) {
  .encabezado { position: static; }
  .contenedor, .encabezado-interior, .barra-demo-interior, .pie-interior { width: min(100% - 22px, 1180px); }
  .demo-controles, .demo-controles .campo { width: 100%; }
  .buscador, .rejilla-articulos, .formulario-rejilla { grid-template-columns: 1fr; }
  .campo-ancho { grid-column: auto; }
  .boton { min-height: 46px; }
  th, td { min-width: 135px; }
}

/* Multimedia */
.kb-media video,.kb-media iframe{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:0;background:#111827}.kb-media img{display:block;max-width:100%;height:auto;margin:auto}.media-fila{border:1px solid #cad4e7;border-radius:8px;padding:16px;margin:16px 0;min-width:0}.media-fila label{display:block;margin:10px 0}.media-fila input,.media-fila select{display:block;width:100%;max-width:100%;box-sizing:border-box;padding:9px}.media-fallo{padding:12px;background:#fff4d9;overflow-wrap:anywhere}.kb-media figcaption{margin-top:8px}.kb-media [hidden]{display:none!important}

.filtros-editoriales {display:flex;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;padding:1rem} .filtros-editoriales .campo:first-child{flex:2;min-width:220px}.filtros-editoriales .campo{flex:1;min-width:160px}.filtros-editoriales p{width:100%;margin:0}.panel ol li{margin-bottom:1rem;overflow-wrap:anywhere}

/* Acceso a la versión conectada */
.cargando main,.cargando .barra-demo,.cargando .encabezado,.cargando .pie{display:none}
.aviso-carga{display:none;padding:3rem;text-align:center}.cargando .aviso-carga{display:block}
.acceso-panel{max-width:480px;margin:40px auto}.acceso-panel form{display:grid;gap:18px}.acceso-panel input{width:100%;box-sizing:border-box}.acceso-panel .campo{display:grid;gap:6px}
.demo-controles{align-items:center;flex-wrap:wrap}.demo-controles span{max-width:440px;overflow-wrap:anywhere}
button:disabled{opacity:.65;cursor:wait}[hidden]{display:none!important}