/* ============================================================
   Plataforma de Normativas de Legalización — estilos
   ============================================================ */

:root {
  --azul-900: #0f2a43;
  --azul-800: #14395c;
  --azul-700: #1b4a77;
  --azul-600: #205a91;
  --azul-100: #e3edf7;
  --azul-50: #f2f7fc;
  --gris-900: #1c2530;
  --gris-700: #45525f;
  --gris-500: #6b7885;
  --gris-300: #cdd6de;
  --gris-200: #e2e8ee;
  --gris-100: #eef2f6;
  --blanco: #ffffff;
  --verde: #1e7f4f;
  --verde-suave: #e0f2e9;
  --ambar: #9a6700;
  --ambar-suave: #fff3d6;
  --rojo: #a13333;
  --rojo-suave: #fbe4e4;
  --morado: #5b4b9e;
  --morado-suave: #ebe7f8;
  --teal: #0f6f74;
  --teal-suave: #dcf1f2;
  --sombra: 0 1px 3px rgba(15, 42, 67, .08), 0 4px 14px rgba(15, 42, 67, .06);
  --radio: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--gris-100);
  color: var(--gris-900);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- Cabecera ---------- */
.cabecera {
  background: linear-gradient(135deg, var(--azul-900), var(--azul-700));
  color: var(--blanco);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cabecera .logo {
  width: 44px; height: 44px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.cabecera h1 { font-size: 20px; font-weight: 650; letter-spacing: .2px; }
.cabecera .subtitulo { font-size: 13px; opacity: .82; margin-top: 2px; }

.cabecera .meta {
  margin-left: auto;
  text-align: right;
  font-size: 12.5px;
  opacity: .85;
}

/* ---------- Distribución general ---------- */
.contenedor {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  max-width: 1500px;
  margin: 22px auto;
  padding: 0 22px;
  align-items: start;
}

/* ---------- Panel de comunidades ---------- */
.panel-ccaa {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.panel-ccaa h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--gris-500);
  margin-bottom: 10px;
}

.lista-ccaa { list-style: none; display: flex; flex-direction: column; gap: 3px; }

.enlace-ccaa {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--gris-900);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background .15s;
}

.enlace-ccaa:hover:not(.deshabilitada) { background: var(--azul-50); }
.enlace-ccaa.activa { background: var(--azul-100); color: var(--azul-800); font-weight: 600; }
.enlace-ccaa.deshabilitada { color: var(--gris-500); cursor: not-allowed; }

.lista-ccaa .contador {
  margin-left: auto;
  background: var(--azul-700);
  color: var(--blanco);
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 20px;
  padding: 1px 8px;
}

.lista-ccaa .pendiente {
  margin-left: auto;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gris-500);
  background: var(--gris-100);
  border-radius: 20px;
  padding: 2px 7px;
}

/* ---------- Zona principal ---------- */
.principal { min-width: 0; }

.titulo-ccaa {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.titulo-ccaa h2 { font-size: 24px; color: var(--azul-900); }
.titulo-ccaa .organismo { font-size: 13px; color: var(--gris-500); }

/* ---------- Barra de filtros ---------- */
.filtros {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  margin: 14px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filtros .fila {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.buscador {
  flex: 1 1 260px;
  position: relative;
}

.buscador input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  background: var(--blanco);
}

.buscador input:focus { outline: 2px solid var(--azul-600); outline-offset: -1px; }

.buscador .icono {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--gris-500);
  font-size: 15px;
  pointer-events: none;
}

.filtros select {
  padding: 8px 10px;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  background: var(--blanco);
  color: var(--gris-900);
  cursor: pointer;
}

.filtros .limpiar {
  border: none;
  background: none;
  color: var(--azul-700);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px;
}

.chips { display: flex; gap: 7px; flex-wrap: wrap; }

.chip {
  border: 1px solid var(--gris-300);
  background: var(--blanco);
  color: var(--gris-700);
  font: inherit;
  font-size: 12.5px;
  padding: 4px 11px;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}

.chip:hover { border-color: var(--azul-600); color: var(--azul-700); }
.chip.activo { background: var(--azul-700); border-color: var(--azul-700); color: var(--blanco); }

.resumen-resultados {
  font-size: 13px;
  color: var(--gris-500);
  margin-bottom: 12px;
}

/* ---------- Tarjetas de normativa ---------- */
.lista-normas { display: flex; flex-direction: column; gap: 14px; }

.norma {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
  border-left: 4px solid var(--azul-600);
}

.norma .fila-superior {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.insignia {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: 5px;
}

.insignia.ley          { background: var(--rojo-suave);   color: var(--rojo); }
.insignia.real-decreto { background: var(--rojo-suave);   color: var(--rojo); }
.insignia.decreto      { background: var(--morado-suave); color: var(--morado); }
.insignia.decreto-ley  { background: var(--morado-suave); color: var(--morado); }
.insignia.orden        { background: var(--ambar-suave);  color: var(--ambar); }
.insignia.resolucion   { background: var(--azul-100);     color: var(--azul-700); }
.insignia.manual       { background: var(--verde-suave);  color: var(--verde); }
.insignia.instrucción,
.insignia.instruccion  { background: var(--teal-suave);   color: var(--teal); }
.insignia.ordenanza    { background: var(--ambar-suave);  color: var(--ambar); }

.insignia-ambito {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--gris-300);
  color: var(--gris-700);
}

.insignia-ambito.estatal { border-color: var(--rojo); color: var(--rojo); }

.insignia-auto {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--ambar-suave);
  color: var(--ambar);
  border: 1px dashed var(--ambar);
  text-decoration: none;
}

.norma .fecha-pub {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--gris-500);
  white-space: nowrap;
}

.norma h3 {
  font-size: 16.5px;
  color: var(--azul-900);
  line-height: 1.35;
  margin-bottom: 6px;
}

.norma .publicacion {
  font-size: 12.5px;
  color: var(--gris-500);
  margin-bottom: 8px;
}

.norma .descripcion { font-size: 14px; color: var(--gris-700); margin-bottom: 10px; }

.norma .titulo-completo {
  font-size: 12.5px;
  color: var(--gris-500);
  font-style: italic;
  margin-bottom: 10px;
  display: none;
}

.norma.expandida .titulo-completo { display: block; }

.norma .fila-inferior {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.etiqueta {
  font-size: 11.5px;
  background: var(--gris-100);
  color: var(--gris-700);
  padding: 3px 9px;
  border-radius: 20px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-decoration: none;
}

.etiqueta:hover { background: var(--azul-100); color: var(--azul-800); }

.norma .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: filter .15s;
}

.boton:hover { filter: brightness(1.1); }
.boton.primario { background: var(--azul-700); color: var(--blanco); }
.boton.secundario { background: var(--blanco); color: var(--azul-700); border: 1px solid var(--azul-600); }
.boton.terciario { background: none; color: var(--gris-500); border: none; font-weight: 500; padding: 7px 6px; }
.boton.terciario:hover { color: var(--azul-700); }

/* ---------- Enlaces útiles ---------- */
.seccion-enlaces { margin-top: 28px; }

.seccion-enlaces h3 {
  font-size: 16px;
  color: var(--azul-900);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rejilla-enlaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.tarjeta-enlace {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  border-top: 3px solid var(--teal);
  transition: transform .12s;
  display: block;
}

.tarjeta-enlace:hover { transform: translateY(-2px); }
.tarjeta-enlace .nombre { font-size: 14px; font-weight: 650; color: var(--teal); margin-bottom: 4px; }
.tarjeta-enlace .desc { font-size: 12.5px; color: var(--gris-700); }
.tarjeta-enlace .url { font-size: 11px; color: var(--gris-500); margin-top: 6px; word-break: break-all; }

/* ---------- Página de novedades (vigilancia de fuentes) ---------- */
.contenedor-simple {
  max-width: 1100px;
  margin: 22px auto;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.enlace-cabecera { color: var(--blanco); text-decoration: underline; }

.bloque-novedades {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
}

.bloque-novedades h3 { color: var(--azul-900); font-size: 16.5px; margin-bottom: 10px; }

.bloque-novedades .nota { font-size: 13px; color: var(--gris-700); margin: 6px 0; }
.bloque-novedades .nota.error { color: var(--rojo); }

.aviso-cambios {
  background: var(--rojo-suave);
  border: 1px solid #e3b8b8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 10px;
}

.tabla-novedades {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla-novedades th {
  text-align: left;
  padding: 7px 10px;
  background: var(--gris-100);
  color: var(--gris-700);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.tabla-novedades td { padding: 7px 10px; border-top: 1px solid var(--gris-200); }
.tabla-novedades td a { color: var(--azul-700); text-decoration: none; }
.tabla-novedades td a:hover { text-decoration: underline; }
.tabla-novedades .fila-cambio { background: var(--ambar-suave); }

.pie-revisado {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pie-revisado .nota { font-size: 12.5px; color: var(--gris-500); }

.lista-simple {
  margin: 8px 0 4px 22px;
  font-size: 13px;
  color: var(--gris-700);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---------- Página de cuadros de legalización ---------- */
.casillas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.casilla {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--gris-300);
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 13px;
  cursor: pointer;
  background: var(--blanco);
  transition: all .15s;
}

.casilla:hover { border-color: var(--azul-600); }
.casilla.marcada, .casilla:has(input:checked) {
  background: var(--azul-100);
  border-color: var(--azul-700);
  color: var(--azul-800);
  font-weight: 600;
}

.casilla input { accent-color: var(--azul-700); }

.acciones-cuadros { display: flex; gap: 10px; flex-wrap: wrap; }

.fila-selector {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.fila-selector select {
  padding: 8px 12px;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  background: var(--blanco);
  color: var(--gris-900);
  cursor: pointer;
  min-width: 280px;
}

.bloque-novedades h4 {
  font-size: 13.5px;
  color: var(--azul-800);
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.tabla-cuadro .col-docs { white-space: nowrap; width: 160px; }
.tabla-cuadro .col-num { white-space: nowrap; width: 46px; font-weight: 600; }

.notas-cuadro {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--gris-500);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ---------- Aviso de comunidad pendiente ---------- */
.aviso-pendiente {
  background: var(--ambar-suave);
  border: 1px solid #e8d9a8;
  border-radius: var(--radio);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--gris-900);
  margin-bottom: 14px;
}

/* ---------- Estado vacío / pendiente ---------- */
.vacio {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 48px 24px;
  text-align: center;
  color: var(--gris-500);
}

.vacio .icono-grande { font-size: 40px; margin-bottom: 10px; }
.vacio h3 { color: var(--gris-700); font-size: 17px; margin-bottom: 6px; }
.vacio p { font-size: 13.5px; max-width: 480px; margin: 0 auto; }

/* ---------- Pie ---------- */
.pie {
  max-width: 1500px;
  margin: 30px auto 24px;
  padding: 0 22px;
  font-size: 12px;
  color: var(--gris-500);
  text-align: center;
}

/* ---------- Adaptación móvil ---------- */
@media (max-width: 900px) {
  .contenedor { grid-template-columns: 1fr; }
  .panel-ccaa { position: static; max-height: none; }
  .lista-ccaa { flex-direction: row; flex-wrap: wrap; }
  .lista-ccaa li { flex: 1 1 45%; }
  .norma .fecha-pub { margin-left: 0; width: 100%; }
  .norma .acciones { margin-left: 0; }
  .cabecera .meta { margin-left: 0; text-align: left; }
}