/* Hermes · hoja de estilo única
   Identidad de Agarimo Comunicación: gris grafito, blanco y negro. Rubik. */

:root{
  --grafito:#3C3C3B;
  --grafito-claro:#5E5E5C;
  --tinta:#141413;
  --papel:#FFFFFF;
  --fondo:#F5F5F4;
  --fondo-2:#EBEBE9;
  --linea:#DCDCD9;
  --linea-fuerte:#B8B8B4;
  --apagado:#6F6F6D;
  --radio:3px;
  --sombra:0 1px 2px rgba(20,20,19,.06);
  --ancho-lateral:232px;
}

/* El «hidden» del navegador es «display:none» a secas, y CUALQUIER clase con su
   propio «display» —.boton, .multiselect-opcion, .barra-seleccion— le gana por
   especificidad. El elemento se marca como oculto en JavaScript y se sigue
   viendo, sin error en ninguna parte.
   Ha pasado tres veces en esta hoja y cada una se tapó con una regla suelta.
   Esta es la general: si algo lleva «hidden», no se ve, y punto. */
[hidden]{display:none !important}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Rubik",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;color:var(--tinta);background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--tinta);text-decoration-color:var(--linea-fuerte);text-underline-offset:2px}
a:hover{text-decoration-color:var(--grafito)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}

/* ---------- estructura ----------
   Dos navegaciones y cada una en su sitio: la barra de arriba dice adónde ir
   dentro de Hermes, y la de la izquierda dónde estás dentro de un proyecto. */
.app{display:flex;flex-direction:column;min-height:100vh}
.cuerpo-app{display:grid;grid-template-columns:var(--ancho-lateral) minmax(0,1fr);flex:1;min-height:0}

/* La barra general, arriba de todo */
/* La altura es un MÍNIMO, no una medida fija.

   Con `height` fija, el día que la barra creció —al agrupar el menú en
   desplegables— el menú saltó de línea y la segunda fila se quedó FUERA del
   fondo gris: letra blanca sobre el blanco de la página, ilegible, y solo por
   debajo de cierto ancho de ventana. La barra tiene que poder crecer con lo que
   lleva dentro. */
.barra-superior{
  background:var(--grafito);color:#fff;display:flex;align-items:center;gap:22px;
  padding:7px 20px;min-height:54px;position:sticky;top:0;z-index:20;
}
.marca{
  display:flex;align-items:baseline;gap:8px;text-decoration:none;color:#fff;
  flex:0 0 auto;white-space:nowrap;
}
.marca .nombre{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1}
.marca .sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
/* La caja de buscar, en la barra: discreta hasta que se usa */
.buscador{flex:0 1 220px;min-width:120px;display:flex}
.buscador input[type=search]{
  width:100%;padding:6px 10px;border-radius:var(--radio);font:inherit;font-size:13px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
}
.buscador input[type=search]::placeholder{color:rgba(255,255,255,.55)}
.buscador input[type=search]:focus{
  outline:none;background:#fff;color:var(--grafito);border-color:#fff;
}
.buscador input[type=search]:focus::placeholder{color:var(--apagado)}
.oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.menu-general{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.menu-general a,.menu-desplegable summary{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radio);
  color:rgba(255,255,255,.8);text-decoration:none;font-size:13.5px;white-space:nowrap;
}
.menu-general a:hover,.menu-desplegable summary:hover{background:rgba(255,255,255,.1);color:#fff}
.menu-general a.activo,.menu-desplegable summary.activo{background:#fff;color:var(--grafito);font-weight:500}
.menu-desplegable{position:relative}
.menu-desplegable summary{cursor:pointer;list-style:none}
.menu-desplegable summary::-webkit-details-marker{display:none}
.menu-desplegable summary::after{content:"▾";font-size:10px;opacity:.7}
.menu-desplegable[open] > .desplegado{
  position:absolute;top:calc(100% + 6px);left:0;min-width:190px;z-index:30;
  background:var(--grafito);border-radius:var(--radio);padding:6px;
  display:flex;flex-direction:column;gap:1px;box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.menu-desplegable .desplegado a{
  display:block;padding:7px 10px;border-radius:var(--radio);font-size:13.5px;
  color:rgba(255,255,255,.82);text-decoration:none;
}
.menu-desplegable .desplegado a:hover{background:rgba(255,255,255,.1);color:#fff}
.menu-desplegable .desplegado a.activo{background:#fff;color:var(--grafito);font-weight:500}
/* Abierto, el resumen se queda marcado, pero con los colores de la barra.
   Este es el fallo que había: más abajo hay un «details[open] > summary» con
   fondo claro pensado para los desplegables del contenido, y también alcanzaba
   al menú de arriba —fondo casi blanco y letra blanca encima, ilegible—. Se
   sobrescribe aquí, que es más específico, y no se toca el otro. */
.menu-desplegable[open] > summary{background:rgba(255,255,255,.16);color:#fff}
.menu-desplegable[open] > summary.activo{background:#fff;color:var(--grafito)}
.menu-desplegable[open] > summary::after{transform:rotate(180deg)}
.menu-desplegable summary::after{transition:transform .12s}
.menu-desplegable summary:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* La barra del proyecto, a la izquierda */
/* Se pega justo debajo de la barra. La altura de la barra la mide el navegador
   y la deja en --alto-barra, porque cuando el menú salta de línea deja de ser
   54 px y una barra lateral pegada a la altura de ayer se mete por debajo. */
.lateral{
  background:var(--fondo-2);border-right:1px solid var(--linea);
  padding:18px 0;display:flex;flex-direction:column;gap:16px;
  position:sticky;top:var(--alto-barra,54px);
  height:calc(100vh - var(--alto-barra,54px));overflow-y:auto;
}
/* El cambio rápido de proyecto, arriba del todo de la barra.
   Ocupa el ancho entero y el dominio se recorta con puntos suspensivos: los
   dominios largos hacían crecer la barra y descuadraban la pantalla entera. */
.selector-proyecto{display:flex;gap:6px;padding:0 16px 4px;align-items:center}
.selector-proyecto select{
  flex:1 1 auto;min-width:0;text-overflow:ellipsis;font-size:13px;padding:7px 10px;
}

.lateral-cabeza{padding:0 16px;display:flex;flex-direction:column;gap:2px}
.lateral-cabeza .volver{
  font-size:11.5px;color:var(--apagado);text-decoration:none;margin-bottom:4px;
}
.lateral-cabeza .volver:hover{color:var(--tinta)}
.lateral-cabeza .titulo{
  font-size:15px;font-weight:600;color:var(--tinta);text-decoration:none;
  letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere;
}
.lateral-cabeza .sub{font-size:11.5px;color:var(--apagado)}
.menu{display:flex;flex-direction:column;gap:1px;padding:0 8px}
.menu a{
  display:block;padding:6px 10px;border-radius:var(--radio);color:var(--apagado);
  text-decoration:none;font-size:13.5px;overflow-wrap:anywhere;
}
.menu a:hover{background:var(--papel);color:var(--tinta)}
.menu a.activo{background:var(--grafito);color:#fff;font-weight:500}
.menu .grupo{
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--apagado);
  padding:14px 10px 4px;font-weight:600;opacity:.75;
}
/* Los dominios, un punto menos que el resto del menú: son cadenas largas y sin
   espacios, y a 13,5 px partían en dos líneas media lista. */
.menu a.dominio{font-size:12.5px}
.lateral .pie{margin-top:auto;padding:0 16px;font-size:11.5px;color:var(--apagado)}

/* ------------------------------------------------- la barra lateral, plegable
   Plegada no deja un carril de iconos sino solo el botón: las secciones de
   Hermes son nombres, no dibujos, y un carril de iconos inventados obliga a
   aprenderse un idioma nuevo para ahorrar veinte píxeles.

   El estado viaja en una galleta y lo pinta el servidor en el <html>, así que
   la barra nunca sale abierta para cerrarse de golpe al terminar de cargar. */
.lateral-plegar{
  align-self:flex-end;margin:0 12px;flex:0 0 26px;width:26px;height:26px;padding:0;
  border:1px solid var(--linea);background:var(--papel);color:var(--apagado);
  border-radius:var(--radio);cursor:pointer;line-height:1;font-size:15px;
}
.lateral-plegar::before{content:"‹"}
.lateral-plegar:hover{color:var(--tinta);border-color:var(--linea-fuerte)}
.lateral-plegar:focus-visible{outline:2px solid var(--grafito);outline-offset:2px}
.lateral-contenido{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0}

html.lateral-plegado .cuerpo-app{grid-template-columns:46px minmax(0,1fr)}
html.lateral-plegado .lateral-contenido{display:none}
html.lateral-plegado .lateral-plegar{align-self:center;margin:0}
html.lateral-plegado .lateral-plegar::before{content:"›"}

.principal{display:flex;flex-direction:column;min-width:0}
.cabecera{
  background:var(--papel);border-bottom:1px solid var(--linea);
  padding:16px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cabecera h1{font-size:20px}
.identidad{display:flex;align-items:center;gap:12px;font-size:13.5px;color:rgba(255,255,255,.7);flex:none}
.identidad .quien{text-align:right;line-height:1.25;font-size:12px}
.identidad .quien strong{display:block;color:#fff;font-weight:500;font-size:13px}
.barra-superior .boton.secundario,.barra-superior .boton.secundario:link,.barra-superior .boton.secundario:visited{
  background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;
}
.barra-superior .boton.secundario:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
/* El contenido ocupa lo que haya. La caja de 1180 px venía de cuando esto eran
   fichas y formularios; con tablas de veinte columnas y gráficos de cartera,
   dejar medio monitor en blanco es tirar la pantalla que se ha pagado. Lo que
   sí sigue teniendo medida es lo que se lee seguido: la prosa se corta en 70
   caracteres y los campos en 520 px, porque una línea de texto de dos mil
   píxeles no la lee nadie. */
.contenido{padding:26px 30px 70px;max-width:none}

/* ---------- avisos ---------- */
.avisos{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.aviso{
  padding:11px 14px;border-radius:var(--radio);border:1px solid var(--linea);
  background:var(--papel);font-size:14px;border-left:3px solid var(--grafito);
}
.aviso.error{border-left-color:var(--tinta);background:var(--fondo-2)}

/* ---------- tarjetas ---------- */
.rejilla{display:grid;gap:14px}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 18px;box-shadow:var(--sombra)}
.tarjeta h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--apagado);margin-bottom:8px}
.tarjeta .cifra{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.tarjeta .pie{font-size:12.5px;color:var(--apagado);margin-top:6px}

/* La comparación entre periodos: la cifra del tramo con el que se compara va
   debajo de la principal y más pequeña, en el color de su línea del gráfico.
   Los dos colores son lo único que ata «esta cifra» con «esta línea»: sin eso,
   dos números en una tarjeta son solo dos números. */
.tarjeta.comparada .cifra{color:#2a78d6}
.tarjeta .cifra-comparada{
  font-size:19px;font-weight:600;line-height:1;margin-top:5px;
  font-variant-numeric:tabular-nums;color:#eb6834;
}
.muestra-serie{
  display:inline-block;width:22px;height:3px;border-radius:2px;
  vertical-align:middle;margin-right:5px;
}
/* A rayas, no solo de otro color: uno de cada doce hombres no distingue el azul
   del naranja, y la leyenda tiene que decir cuál es cuál sin el color. */
.muestra-serie.rayada{
  background-image:repeating-linear-gradient(90deg,
    transparent 0,transparent 3px,var(--papel) 3px,var(--papel) 5px);
}

.bloque{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);margin-bottom:20px}
.bloque > header{padding:14px 18px;border-bottom:1px solid var(--linea);display:flex;align-items:center;justify-content:space-between;gap:12px}
.bloque > header h2{font-size:15px}
.bloque > .cuerpo{padding:18px}

/* Un bloque que se pliega. Es un «details» y no un botón con JavaScript porque
   así funciona también con la política de contenido puesta, y porque el
   navegador ya sabe hacerlo. El «summary» imita la cabecera de un bloque para
   que no se note que por dentro es otra cosa. */
details.bloque.plegable > summary{
  padding:14px 18px;display:flex;align-items:center;gap:12px;cursor:pointer;
  list-style:none;user-select:none;
}
details.bloque.plegable > summary::-webkit-details-marker{display:none}
details.bloque.plegable > summary::after{
  content:"Mostrar";margin-left:auto;font-size:12px;color:var(--apagado);
  border:1px solid var(--linea-fuerte);border-radius:var(--radio);padding:4px 10px;
}
details.bloque.plegable[open] > summary::after{content:"Ocultar"}
details.bloque.plegable[open] > summary{border-bottom:1px solid var(--linea)}
details.bloque.plegable > summary:hover{background:var(--fondo-2)}
details.bloque.plegable > summary h2{font-size:15px}
details.bloque.plegable > summary:focus-visible{outline:2px solid var(--grafito);outline-offset:-2px}
.bloque > .cuerpo.sin-relleno{padding:0}

/* ---------- el calendario de estrategia ----------
   Seis meses por fila, como la hoja de Excel de la que sale: dos filas de seis
   es la forma en la que el equipo ya lee un año, y romperla en cuatro y cuatro
   y cuatro obliga a recontar para saber por dónde va uno.
   Se estrecha por pasos y no con «auto-fit» porque auto-fit daba cuatro
   columnas en una pantalla normal, que es justo lo que no se quiere. */
.calendario{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;
  align-items:start;margin-bottom:22px}
@media (max-width:1200px){.calendario{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.calendario{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.calendario{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.calendario{grid-template-columns:1fr}}

.calendario .mes{background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden}
.calendario .mes.ahora{box-shadow:0 0 0 2px var(--grafito)}
.calendario .mes > .cabeza{
  padding:10px 12px;border-bottom:1px solid var(--linea);display:flex;
  align-items:baseline;justify-content:space-between;gap:8px;
}
.calendario .mes > .cabeza h3{margin:0;font-size:13.5px;letter-spacing:-.01em}
.calendario .accion{padding:9px 12px;border-bottom:1px solid var(--linea);font-size:12.5px;
  line-height:1.35}
.calendario .accion:last-of-type{border-bottom:0}
.calendario .accion.fuera{opacity:.5;text-decoration:line-through}
/* Los mandos de una acción: el estado y la papelera en una fila, y mover de mes
   en la suya. Los tres seguidos cabían de ancho pero no de contenido: en una
   columna de doce, el desplegable de estado enseñaba «Per» y el de mes «Marz»,
   y un control que no deja leer su valor no sirve para decidir nada. */
.calendario .accion .mandos{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.calendario .accion .mandos select{font-size:11.5px;padding:3px 6px;flex:1 1 auto;min-width:0}
.calendario .accion .mandos .mover{flex:1 0 100%}
.calendario .accion .mandos .boton{padding:3px 8px;font-size:11.5px;line-height:1.2}
.calendario .mes > .anadir{padding:9px 12px;border-top:1px solid var(--linea)}
.calendario .mes > .anadir summary{font-size:12px;color:var(--apagado);cursor:pointer;
  list-style:none}
.calendario .mes > .anadir summary::-webkit-details-marker{display:none}
.calendario .mes > .anadir summary::before{content:"+ "}
.calendario .mes > .anadir summary:hover{color:var(--tinta)}
.calendario .mes > .anadir textarea{font-size:12.5px}

/* ---------- tablas ---------- */
.tabla-scroll{overflow-x:auto}
table.datos{width:100%;border-collapse:collapse;font-size:14px}
table.datos th,table.datos td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
table.datos thead th{
  background:var(--fondo-2);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--apagado);font-weight:600;white-space:nowrap;
}
table.datos tbody tr:last-child td{border-bottom:0}
table.datos tbody tr:hover{background:var(--fondo)}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.vacio{padding:34px 18px;text-align:center;color:var(--apagado);font-size:14px}

/* ---------- encabezados de una auditoría on-page ---------- */
.lista-encabezados{list-style:none;margin:10px 0 0;padding:0;font-size:13px;line-height:1.7}
.lista-encabezados li{border-left:2px solid var(--linea);padding-left:10px}

/* ---------- URLs de una actuación ---------- */
.urls-actuacion{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.urls-actuacion a.mono{color:var(--grafito);text-decoration:none;border-bottom:1px solid var(--linea);
  align-self:flex-start;max-width:100%;overflow-wrap:anywhere}
.urls-actuacion a.mono:hover{border-bottom-color:var(--grafito)}
.urls-actuacion a.nota{text-decoration:none}
.urls-actuacion a.nota:hover{text-decoration:underline}

/* ---------- etiquetas ---------- */
.etiqueta{
  display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:500;
  border:1px solid var(--linea-fuerte);color:var(--grafito);background:var(--papel);white-space:nowrap;
}
.etiqueta.solida{background:var(--grafito);color:#fff;border-color:var(--grafito)}
.etiqueta.tenue{color:var(--apagado);border-color:var(--linea)}
.etiqueta.rayada{background:repeating-linear-gradient(45deg,var(--fondo-2),var(--fondo-2) 4px,var(--papel) 4px,var(--papel) 8px)}

/* ---------- formularios ---------- */
.campo{margin-bottom:16px;max-width:520px}
.campo label{display:block;font-size:12.5px;font-weight:500;margin-bottom:5px;color:var(--grafito)}
.campo .ayuda{font-size:12.5px;color:var(--apagado);margin-top:5px;line-height:1.45}
/* La lista va por tipo, y la que faltaba se notaba: un input[type=url] sin
   estilo salía con el ancho por defecto del navegador —dos dedos— al lado de
   uno de texto a toda anchura. */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=url],input[type=search],input[type=tel],
input[type=file],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  font:inherit;font-size:14px;background:var(--papel);color:var(--tinta);
}
input[type=file]{padding:7px 10px;font-size:13px;color:var(--apagado);cursor:pointer}
input[type=file]::file-selector-button{
  font:inherit;font-size:13px;margin-right:10px;padding:4px 10px;cursor:pointer;
  border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  background:var(--fondo-2);color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--grafito);outline-offset:-1px;border-color:var(--grafito)}
.interruptor{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:14px}
.interruptor input{width:16px;height:16px;accent-color:var(--grafito)}
.fila-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 16px;max-width:760px}

.boton{
  display:inline-block;padding:8px 16px;border-radius:var(--radio);border:1px solid var(--grafito);
  background:var(--grafito);color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;
}
.boton:hover{background:var(--tinta);border-color:var(--tinta)}
.boton.secundario{background:var(--papel);color:var(--grafito)}
.boton.secundario:hover{background:var(--fondo-2);color:var(--tinta)}
.boton.pequeno{padding:4px 10px;font-size:12.5px}
.boton:disabled{opacity:.45;cursor:not-allowed}
.acciones{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:18px}
form.enlinea{display:inline}

/* ---------- pestañas ---------- */
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin-bottom:22px;flex-wrap:wrap}
.pestanas a{
  padding:8px 14px;font-size:14px;text-decoration:none;color:var(--apagado);
  border:1px solid transparent;border-bottom:none;border-radius:var(--radio) var(--radio) 0 0;margin-bottom:-1px;
}
.pestanas a:hover{color:var(--tinta);background:var(--fondo-2)}
.pestanas a.activa{background:var(--papel);border-color:var(--linea);color:var(--tinta);font-weight:500}

/* ---------- acceso e instalación ---------- */
.centrado{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px;background:var(--fondo)}
.panel-acceso{width:100%;max-width:420px;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:0 2px 14px rgba(20,20,19,.07)}
.panel-acceso .cabeza{background:var(--grafito);color:#fff;padding:24px 26px}
.panel-acceso .cabeza .nombre{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.panel-acceso .cabeza .sub{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px}
.panel-acceso .cuerpo{padding:24px 26px}
.panel-instalacion{width:100%;max-width:760px;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio)}
.codigo-grande{font-size:26px;letter-spacing:.35em;text-align:center;font-family:ui-monospace,monospace}
.qr{display:flex;justify-content:center;padding:14px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio)}
.secreto{
  background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--radio);
  padding:10px 12px;font-family:ui-monospace,monospace;font-size:14px;letter-spacing:.06em;word-break:break-all;text-align:center;
}
.codigos-recuperacion{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;
  font-family:ui-monospace,monospace;font-size:13.5px;
}
.codigos-recuperacion span{background:var(--fondo-2);padding:6px 8px;border-radius:var(--radio);text-align:center}

/* ---------- requisitos ---------- */
.requisitos{list-style:none;margin:0;padding:0}
.requisitos li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--linea);font-size:14px;align-items:baseline}
.requisitos li:last-child{border-bottom:0}
.marca-ok::before{content:"✓";color:var(--grafito);font-weight:700}
.marca-mal::before{content:"×";color:var(--tinta);font-weight:700;font-size:17px}
.marca-aviso::before{content:"·";color:var(--apagado);font-weight:700;font-size:20px}
.requisitos .detalle{color:var(--apagado);font-size:12.5px}

.migas{font-size:12.5px;color:var(--apagado);margin-bottom:14px}
.nota{font-size:13px;color:var(--apagado);line-height:1.5;max-width:70ch}
.separador{height:1px;background:var(--linea);margin:22px 0;border:0}

@media (max-width:900px){
  .cuerpo-app{grid-template-columns:1fr}
  .barra-superior{height:auto;flex-wrap:wrap;padding:10px 18px;gap:10px;position:static}
  .menu-general{order:3;flex-basis:100%}
  .buscador{order:2;flex:1 1 auto}
  .identidad{margin-left:auto}
  .lateral{position:static;height:auto;border-right:none;border-bottom:1px solid var(--linea)}
  .lateral-plegar{display:none}
  html.lateral-plegado .cuerpo-app{grid-template-columns:1fr}
  html.lateral-plegado .lateral-contenido{display:flex}
  .menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .menu .grupo{grid-column:1/-1;padding-top:10px}
  .contenido,.cabecera{padding-left:18px;padding-right:18px}
}

/* ---------- salud y gráficos (fase 1A) ---------- */
.salud{display:flex;align-items:center;gap:10px}
.salud .cifra-salud{
  font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;min-width:30px;text-align:right;
}
.barra{position:relative;height:7px;background:var(--fondo-2);border-radius:4px;overflow:hidden;min-width:64px;flex:1}
.barra span{position:absolute;left:0;top:0;bottom:0;background:var(--grafito);border-radius:4px}
.barra.aviso span{background:repeating-linear-gradient(45deg,var(--grafito),var(--grafito) 3px,var(--grafito-claro) 3px,var(--grafito-claro) 6px)}
.barra.critico span{background:var(--tinta)}
.barra.sin span{background:var(--linea-fuerte);width:100%!important;opacity:.4}

.delta{font-size:12px;font-variant-numeric:tabular-nums;color:var(--apagado);white-space:nowrap}
.delta.sube::before{content:"▲ ";font-size:9px}
.delta.baja::before{content:"▼ ";font-size:9px}
.delta.sube{color:var(--grafito)}
.delta.baja{color:var(--tinta)}

.grafico{width:100%;height:auto;display:block;overflow:visible}
.grafico .area{opacity:.10;stroke:none}
.grafico .linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.grafico .rejilla{stroke:var(--linea);stroke-width:1}
.grafico .punto{stroke:var(--papel);stroke-width:2}
.grafico .columna{stroke:var(--papel);stroke-width:1}
/* Las capas apiladas se separan con blanco, no con un borde de color */
.grafico .capa{stroke:var(--papel);stroke-width:2}
.grafico .cruz{stroke:var(--linea-fuerte);stroke-width:1;display:none}
.grafico .cruz.visible{display:block}
.grafico text{font-size:10px;fill:var(--apagado);font-family:inherit}
.grafico .eje{font-variant-numeric:tabular-nums}
.grafico .remate{font-size:10.5px;fill:var(--tinta)}

/* Anotaciones: una raya discontinua de arriba abajo con su número en la cabeza.
   Va por debajo de los datos —el dibujante la pinta con el marco— para que una
   marca no tape nunca la línea que pretende explicar. */
.grafico .anotacion-linea{stroke:var(--linea-fuerte);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.grafico .anotacion-marca{fill:var(--tinta);stroke:var(--papel);stroke-width:1.5}
.grafico .anotacion-numero{font-size:9px;fill:var(--papel);font-weight:600}

/* ---------- caja del gráfico: leyenda, globo y tabla ---------- */
.filtros-rango{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filtros-rango .nota{margin-left:6px}
/* Titular de un gráfico dentro de un bloque que lleva más de uno: sin él, el
   segundo dibujo parece la continuación del primero. */
.titulo-grafico{
  font-size:14px;font-weight:600;margin:0 0 10px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
}
.titulo-grafico .nota{font-weight:400}
.grafico-caja{margin:0;position:relative}
.grafico-leyenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:12.5px;color:var(--apagado)}
.grafico-leyenda span{display:inline-flex;align-items:center;gap:6px}
.grafico-leyenda i{width:11px;height:11px;border-radius:2px;display:inline-block}
.grafico-leyenda.linea i{width:14px;height:2px;border-radius:1px}
.grafico-globo{
  position:absolute;pointer-events:none;z-index:5;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:8px 10px;font-size:12.5px;min-width:132px;
}
.grafico-globo .cuando{color:var(--apagado);font-size:11.5px;margin-bottom:4px}
.grafico-globo .fila{display:flex;align-items:center;gap:7px;line-height:1.7}
.grafico-globo .fila i{width:10px;height:2px;border-radius:1px;flex:none}
.grafico-globo .fila b{font-weight:600;font-variant-numeric:tabular-nums}
.grafico-globo .fila span{color:var(--apagado)}
.grafico-tabla{margin-top:12px}
.grafico-tabla summary{font-size:12.5px;color:var(--apagado);cursor:pointer}
.grafico-tabla table{margin-top:8px}

.bloques-salud{display:flex;flex-direction:column;gap:0}
.bloque-salud{
  display:grid;grid-template-columns:150px 118px 1fr;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--linea);font-size:13.5px;
}
/* La barra tiene un ancho mínimo de 64px que se comía la columna del detalle:
   dentro de esta rejilla se deja encoger, que para eso la columna ya la mide. */
.bloque-salud .barra{min-width:0}
.bloque-salud:last-child{border-bottom:0}
.bloque-salud .peso{font-size:11px;color:var(--apagado);font-variant-numeric:tabular-nums}
.bloque-salud .detalle{color:var(--apagado);font-size:12.5px}
.bloque-salud.sin-datos{opacity:.55}

.posicion{
  display:inline-block;min-width:30px;text-align:center;font-variant-numeric:tabular-nums;
  font-weight:600;font-size:13.5px;
}
.posicion.fuera{color:var(--apagado);font-weight:400}

/* ---------- auditoría, incidencias y alertas (fase 1B) ---------- */
.contador{
  display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#fff;color:var(--grafito);
  font-size:11px;font-weight:600;text-align:center;line-height:17px;vertical-align:middle;
}
.menu a.activo .contador{background:var(--grafito);color:#fff}

.sub-menu{display:flex;gap:2px;border-bottom:1px solid var(--linea);margin-bottom:22px;flex-wrap:wrap}
.sub-menu a{
  padding:8px 14px;font-size:14px;text-decoration:none;color:var(--apagado);
  border:1px solid transparent;border-bottom:none;margin-bottom:-1px;border-radius:var(--radio) var(--radio) 0 0;
}
.sub-menu a:hover{color:var(--tinta);background:var(--fondo-2)}
.sub-menu a.activa{background:var(--papel);border-color:var(--linea);color:var(--tinta);font-weight:500}
/* Los grupos se separan con aire y una línea fina, no con un título más */
.sub-menu .grupo-menu{display:flex;gap:2px;padding-right:10px;margin-right:8px;
  border-right:1px solid var(--linea)}
.sub-menu .grupo-menu:last-child{border-right:none;padding-right:0;margin-right:0}
/* Cabeceras de tabla que ordenan */
table.datos thead a{text-decoration:none;color:inherit;white-space:nowrap}
table.datos thead a:hover{text-decoration:underline}
table.datos thead a.orden-activo{color:var(--tinta);font-weight:700}
@media (max-width:900px){
  .sub-menu .grupo-menu{border-right:none;padding-right:0;margin-right:0;flex-wrap:wrap}
}

.sev{
  display:inline-block;padding:1px 8px;border-radius:3px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;border:1px solid var(--linea-fuerte);
}
.sev.critica{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.sev.alta{background:var(--grafito);color:#fff;border-color:var(--grafito)}
.sev.media{background:var(--fondo-2);color:var(--grafito)}
.sev.baja{background:var(--papel);color:var(--apagado)}
/* «bien» no es una severidad, es su ausencia: va en hueco, sin peso, para que
   la vista se vaya sola a lo que falla. La paleta es gris grafito, blanco y
   negro, así que aquí no hay un verde que decir «correcto» por su cuenta. */
.sev.ok{background:transparent;color:var(--apagado);border-color:var(--linea)}

.item-check{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--linea);
}
.item-check:last-child{border-bottom:0}
.item-check .titulo{font-size:14.5px;font-weight:500;margin-bottom:3px}
.item-check .meta{font-size:12px;color:var(--apagado)}
.item-check .evidencia{
  font-size:12.5px;color:var(--apagado);margin-top:6px;padding-left:10px;
  border-left:2px solid var(--linea-fuerte);
}
.item-check form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.item-check select,.item-check input[type=text]{width:auto;min-width:130px;font-size:13px;padding:5px 8px}
.item-check.estado-incidencia{background:var(--fondo);margin:0 -18px;padding:12px 18px}
.item-check.estado-no_aplica{opacity:.5}

.progreso{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--fondo-2);margin:10px 0}
.progreso span{display:block;height:100%}
.progreso .correcto{background:var(--grafito)}
.progreso .incidencia{background:var(--tinta)}
.progreso .no_aplica{background:var(--linea-fuerte)}
.leyenda{display:flex;gap:16px;font-size:12.5px;color:var(--apagado);flex-wrap:wrap}
.leyenda i{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:2px;vertical-align:middle}

.diff{font-family:ui-monospace,monospace;font-size:12px;line-height:1.6}
.diff .antes{color:var(--apagado);text-decoration:line-through}
.diff .ahora{color:var(--tinta);font-weight:500}

/* ---------- informes y rentabilidad (fase 1C) ---------- */
.datos-informe{
  display:flex;flex-wrap:wrap;gap:0 26px;padding:12px 14px;margin-bottom:14px;
  background:var(--fondo-2);border-radius:var(--radio);
}
.dato-informe{display:flex;flex-direction:column;gap:2px;padding:4px 0;min-width:104px}
.dato-informe .et{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--apagado)}
.dato-informe .va{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.dato-informe .ex{font-size:11.5px;color:var(--apagado)}

.bloque > header .interruptor{font-size:12.5px;color:var(--apagado);white-space:nowrap}
.bloque > header .interruptor input{width:15px;height:15px}

details > summary{list-style:none}
/* Un resumen que es solo texto no parece que se pueda abrir: se le pone su
   triángulo y su cursor para que se vea que es un control. */
summary.desplegable{cursor:pointer;display:inline-flex;align-items:center;gap:6px}
summary.desplegable::before{content:"▸";font-size:11px;transition:transform .12s}
details[open] > summary.desplegable::before{transform:rotate(90deg)}
details[open] > summary.desplegable{background:none}
details > summary::-webkit-details-marker{display:none}
details[open] > summary{background:var(--fondo-2)}

@media (max-width:1000px){
  .rejilla[style*="320px"]{grid-template-columns:minmax(0,1fr)!important}
}

/* ---------- histórico (fase 1D) ---------- */
.cobertura td{vertical-align:middle}
.cobertura .salud{gap:8px}
.cobertura .barra{min-width:90px;max-width:150px}
.cobertura tr.en-curso{opacity:.6}
.cobertura tr.en-curso td:first-child{font-style:italic}

/* ---------- contenidos y mapa (fase 2) ---------- */
.tablero{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:0;overflow-x:auto}
.tablero .columna{padding:14px;border-right:1px solid var(--linea);min-width:190px}
.tablero .columna:last-child{border-right:0}
.tablero .columna h3{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--apagado);
  margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;
}
.contador-col{
  background:var(--fondo-2);color:var(--grafito);border-radius:9px;padding:1px 7px;
  font-size:11px;letter-spacing:0;
}
.tarjeta-contenido{
  display:block;text-decoration:none;color:inherit;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);padding:10px 11px;margin-bottom:8px;
}
.tarjeta-contenido:hover{border-color:var(--linea-fuerte);background:var(--fondo)}
.tarjeta-contenido .titulo{display:block;font-size:13.5px;font-weight:500;line-height:1.35}
.tarjeta-contenido .kw{display:block;font-size:12px;color:var(--grafito);margin-top:4px}
.tarjeta-contenido .meta{display:block;font-size:11.5px;color:var(--apagado);margin-top:6px}
.tarjeta-contenido .atrasado{color:var(--tinta);font-weight:500}
.tarjeta-contenido .sin-briefing{font-style:italic}

.boton.secundario.activo{background:var(--grafito);color:#fff;border-color:var(--grafito)}

textarea.mono,input.mono{font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.55}
.briefing-texto{
  font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;
  background:var(--fondo-2);padding:16px;border-radius:var(--radio);overflow-x:auto;
}

@media (max-width:1100px){
  .tablero{grid-template-columns:repeat(5,minmax(170px,1fr))}
}

/* ---------- rastreo (fase 3) ---------- */
.cobertura td, .datos td{vertical-align:top}
.datos th[style*="210px"]{color:var(--apagado);font-weight:500}

/* Cabeceras agrupadas: arriba de qué va cada bloque de columnas */
.datos thead tr.grupos th{
  border-bottom:0;padding-bottom:2px;color:var(--grafito);font-size:11px;
}
.datos thead tr.grupos th[colspan]{border-left:1px solid var(--linea)}
.datos thead tr.grupos + tr th{padding-top:2px}
.datos thead tr.grupos .nota{font-size:10.5px;text-transform:none;letter-spacing:0;font-weight:400}

.lista-simple{margin:6px 0 12px;padding-left:20px;font-size:13px;color:var(--apagado)}
.lista-simple li{margin-bottom:2px}

/* ---------- tablas que se ordenan ---------- */
.datos th.ordenable{cursor:pointer;user-select:none;position:relative;padding-right:18px}
.datos th.ordenable:hover{color:var(--tinta)}
.datos th.ordenable::after{
  content:"";position:absolute;right:6px;top:50%;margin-top:-5px;
  width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid var(--linea-fuerte);border-bottom:4px solid var(--linea-fuerte);
  opacity:0;transition:opacity .12s;
}
.datos th.ordenable:hover::after,.datos th.ordenable:focus-visible::after{opacity:.55}
.datos th[aria-sort]{color:var(--tinta)}
.datos th[aria-sort]::after{opacity:1;border-color:var(--grafito)}
.datos th[aria-sort="ascending"]::after{border-top-color:transparent;border-bottom-color:var(--grafito)}
.datos th[aria-sort="descending"]::after{border-bottom-color:transparent;border-top-color:var(--grafito)}
.datos th.ordenable:focus-visible{outline:2px solid var(--grafito);outline-offset:-2px}

/* ---------- gráfico de arquitectura web ---------- */
.arquitectura{position:relative;background:var(--papel);border-top:1px solid var(--linea)}
.arquitectura-lienzo{display:block;width:100%;cursor:grab;touch-action:none}
.arquitectura-lienzo:active{cursor:grabbing}
.arquitectura-mandos{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;
}
.arquitectura-mandos select,.arquitectura-mandos input[type=search]{width:auto;min-width:180px}
.arquitectura-mandos label{margin:0}
.arquitectura-ficha{
  position:absolute;top:14px;left:14px;width:290px;max-width:calc(100% - 28px);
  background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  padding:12px 14px;box-shadow:0 4px 14px rgba(20,20,19,.12);font-size:13px;
}
.arquitectura-ficha h4{margin:0 26px 4px 0;font-size:14px;line-height:1.35}
.arquitectura-ficha p{margin:0 0 8px;color:var(--apagado);word-break:break-all;font-size:12px}
.arquitectura-ficha table{width:100%;border-collapse:collapse;margin-bottom:8px}
.arquitectura-ficha th{
  text-align:left;font-weight:400;color:var(--apagado);font-size:12px;padding:2px 0;
}
.arquitectura-ficha td{text-align:right;font-variant-numeric:tabular-nums;padding:2px 0}
.arquitectura-ficha .cerrar{
  position:absolute;top:6px;right:8px;border:0;background:none;font-size:19px;line-height:1;
  color:var(--apagado);cursor:pointer;padding:2px 4px;
}
.arquitectura-ficha .cerrar:hover{color:var(--tinta)}
.arquitectura-leyenda{
  position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.92);
  border:1px solid var(--linea);border-radius:var(--radio);padding:8px 10px;
  display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--apagado);
}
.arquitectura-leyenda .titulo{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:2px;
}
.arquitectura-leyenda .paso{display:flex;align-items:center;gap:6px}
.arquitectura-leyenda i{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 9px}
.arquitectura-leyenda i.fuera{background:#141413}

/* ---------------------------------------------------------------- SERP
   La simulación de un resultado de Google.

   Es el único sitio de Hermes que no usa la identidad de Agarimo, y es a
   propósito: lo que se está enseñando es cómo se vería la página EN GOOGLE, y
   pintarlo en gris grafito con Rubik contestaría a otra pregunta. Va dentro de
   un recuadro etiquetado como simulación para que nadie lo confunda con una
   captura de verdad. */
.serp{
  border:1px solid var(--linea);border-radius:var(--radio);background:#fff;
  padding:20px 22px;max-width:640px;
  font-family:arial,-apple-system,"Segoe UI",sans-serif;
}
.serp-resultado{font-size:14px;line-height:1.58;color:#4d5156}
.serp-sitio{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.serp-favicon{
  width:26px;height:26px;border-radius:50%;flex:0 0 26px;
  background:#f1f3f4;border:1px solid #dadce0;
}
.serp-ruta{font-size:12px;color:#202124;line-height:1.3;word-break:break-all}
.serp-titulo{
  font-size:20px;line-height:1.3;color:#1a0dab;margin:2px 0 3px;
  font-family:arial,sans-serif;
}
.serp-titulo.sin{color:#70757a}
.serp-estrellas{font-size:14px;color:#70757a;display:flex;gap:5px;flex-wrap:wrap;margin-bottom:2px}
/* Las estrellas se recortan por la parte que toca en vez de redondearse a
   estrellas enteras: un 4,7 pintado con cinco llenas promete un cinco. */
.serp-estrellas .estrellas{
  position:relative;display:inline-block;color:#dadce0;letter-spacing:.5px;
}
.serp-estrellas .estrellas::before{
  content:"★★★★★";position:absolute;left:0;top:0;width:var(--parte,0%);
  overflow:hidden;color:#e7711b;white-space:nowrap;
}
.serp-texto{font-size:14px;color:#4d5156}
.serp-texto.sin{color:#9aa0a6}
.serp-extra{font-size:13px;color:#70757a;margin-top:3px}
.serp-faq{margin-top:10px;border-top:1px solid #ebebeb}
.serp-pregunta{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid #ebebeb;font-size:14px;color:#202124;
}
.serp-pregunta span{color:#70757a;font-size:15px}
.serp-pregunta.mas{color:#70757a;font-size:13px;border-bottom:0}

/* ------------------------------------------- los elementos marcados, en crudo */
.marcado-item{padding:14px 16px;border-bottom:1px solid var(--linea)}
.marcado-item:last-child{border-bottom:0}
.marcado-item.anidado{padding-left:34px;background:var(--fondo)}
.marcado-cabeza{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.marcado-cabeza strong{font-size:14px}
table.datos.apretada td{padding:4px 10px;font-size:12.5px}
td.marcado-clave{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--apagado);width:190px;vertical-align:top;
}

/* La barra de acciones de una tabla con casillas. Solo se enseña cuando hay
   algo marcado: un botón de «añadir» que no puede hacer nada enseña a ignorarlo. */
.barra-seleccion{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  background:var(--fondo-2);border-bottom:1px solid var(--linea);
}
/* Un `display` puesto en una clase gana al `[hidden]{display:none}` que trae el
   navegador, así que la barra se quedaba a la vista con nada marcado por mucho
   que el atributo estuviera puesto. Hay que decirlo aquí. */
.barra-seleccion[hidden]{display:none}
.barra-seleccion > strong{padding-bottom:8px;white-space:nowrap}
.barra-seleccion .nota{padding-bottom:9px}

/* ------------------------------------------------------ el mapa de keywords
   Doce meses en una parrilla. Aquí el color SÍ informa —dice en qué banda de
   Google está la keyword— y por eso es la única tabla de Hermes con fondos de
   color: no es decoración, es el dato.

   Una sola familia de color, del más claro al más oscuro, y no un semáforo de
   verde-amarillo-rojo. La posición es una magnitud ordenada, no una alarma:
   con una escala de un solo tono se lee de un vistazo cuál está mejor sin
   tener que aprenderse qué significa cada color. Más allá del 30 no se pinta
   nada, porque un 47 y un 82 son la misma noticia.

   Del 30 en adelante no hay fondo: así el ojo encuentra las buenas sin leer. */
.mapa-keywords th.pegada{
  position:sticky;left:0;z-index:2;background:var(--papel);min-width:230px;max-width:320px;
  font-weight:500;color:var(--tinta);
}
.mapa-keywords thead th.pegada{background:var(--fondo-2);z-index:3}
.mapa-keywords th.pegada a{color:var(--tinta);text-decoration:none;font-weight:500}
.mapa-keywords th.pegada a:hover{text-decoration:underline}
.mapa-keywords th.pegada .nota,.mapa-keywords th.pegada .etiqueta{
  display:inline-block;margin-left:6px;font-weight:400;
}
.mapa-keywords td,.mapa-keywords tbody th{vertical-align:middle}
/* La última fila no lleva raya, igual que en el resto de tablas. La regla de
   arriba solo habla de <td> y aquí la primera celda de cada fila es un <th>:
   sin esto, la parrilla acababa con media raya debajo de la columna pegada. */
.mapa-keywords tbody tr:last-child th{border-bottom:0}
.mapa-keywords td.num{padding:5px 8px;text-align:center}
.mapa-keywords thead th.num{text-align:center}
.mapa-keywords thead th .anio{display:block;font-size:9px;opacity:.75;letter-spacing:.04em}
.celda-mapa{
  display:inline-block;min-width:42px;padding:5px 8px;border-radius:var(--radio);
  font-size:13px;font-variant-numeric:tabular-nums;color:var(--tinta);
}
.celda-mapa.vacia{color:var(--apagado)}
.celda-mapa.top30{background:#DCEDE2}
.celda-mapa.top10{background:#8FC7A6;color:#123322}
.celda-mapa.top3{background:#186B41;color:#fff;font-weight:600}
.leyenda-mapa{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.leyenda-mapa .celda-mapa{min-width:0;font-size:12px}
.leyenda-mapa .nota{margin-left:6px}

/* ---------------------------------------------------- Open Graph: la tarjeta
   La vista previa de cómo queda un enlace al compartirlo. Va con los colores
   de la casa y NO imitando a Facebook: lo que hay que comprobar aquí es el
   encuadre de la imagen y dónde corta el texto, no de qué color es el marco de
   una red concreta —que además cambia cada temporada—. */
.og-tarjeta{
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  max-width:520px;background:var(--papel);
}
.og-imagen{background:var(--fondo-2);aspect-ratio:1200/630;overflow:hidden}
.og-imagen img{width:100%;height:100%;object-fit:cover;display:block}
.og-imagen.pequena{aspect-ratio:1/1;max-width:130px;float:left}
.og-imagen.vacia{
  display:flex;align-items:center;justify-content:center;color:var(--apagado);font-size:12.5px;
}
.og-texto{padding:12px 14px;border-top:1px solid var(--linea)}
.og-dominio{font-size:11px;letter-spacing:.06em;color:var(--apagado);text-transform:uppercase}
.og-titulo{font-size:15px;font-weight:600;color:var(--tinta);margin-top:3px;line-height:1.3}
.og-descripcion{font-size:12.5px;color:var(--apagado);margin-top:4px;line-height:1.45}
.codigo{
  font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;
  background:var(--fondo-2);padding:16px;border-radius:var(--radio);overflow-x:auto;margin:0;
  overflow-wrap:anywhere;
}

/* ------------------------------------------------ conversiones: periodos
   Los seis botones de periodo y las casillas de los eventos. El punto de
   color de cada casilla es el de su línea en el gráfico: sin él hay que
   adivinar cuál es cuál, y con seis líneas eso no se adivina. */
.botonera-periodos{display:flex;gap:8px;flex-wrap:wrap}
.casillas-eventos{display:flex;gap:10px 18px;flex-wrap:wrap}
.casilla-evento{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer;
  padding:5px 10px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--papel);
}
.casilla-evento:hover{border-color:var(--grafito)}
.casilla-evento input{width:15px;height:15px;margin:0}
.casilla-evento .nota{font-variant-numeric:tabular-nums}
.punto{
  display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--grafito);
}

/* ---------------------------------------------- desplegable de marcar varios
   Un botón que dice qué hay elegido y, al abrirlo, buscador y casillas. Sin
   JavaScript el panel se queda visible y sigue funcionando: por eso no se
   esconde desde aquí, sino desde el guion. */
.multiselect{position:relative;margin:0;max-width:260px}
.multiselect > label{display:block;font-size:12.5px;font-weight:500;margin-bottom:5px;
  color:var(--grafito)}
.multiselect-boton{
  width:100%;padding:8px 26px 8px 10px;border:1px solid var(--linea-fuerte);
  border-radius:var(--radio);background:var(--papel);color:var(--tinta);
  font:inherit;font-size:14px;text-align:left;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* La flecha, dibujada con bordes: una imagen de fuera no la deja cargar la
   política de contenido, y un carácter tipográfico se descoloca según la
   fuente que acabe usando el navegador. */
.multiselect-boton::after{
  content:"";position:absolute;right:11px;top:calc(50% + 5px);
  border:4px solid transparent;border-top-color:var(--apagado);pointer-events:none;
}
.multiselect.abierto .multiselect-boton{border-color:var(--grafito)}
/* El panel es más ancho que el botón a propósito: el botón vive en una fila de
   filtros estrechos y, atado a su ancho, «Seleccionar todo» partía en dos
   líneas y los nombres largos no cabían. */
.multiselect-panel{
  position:absolute;z-index:40;left:0;top:100%;margin-top:2px;
  min-width:100%;width:max-content;max-width:340px;
  background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:var(--radio);
  box-shadow:0 6px 18px rgba(20,20,19,.12);
}
.multiselect-buscar{padding:8px;border-bottom:1px solid var(--linea)}
.multiselect-buscar input{width:100%}
.multiselect-lista{max-height:260px;overflow-y:auto;padding:4px 0}
.multiselect-opcion{
  display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:13.5px;
  cursor:pointer;line-height:1.3;
}
/* Esta línea no es una redundancia: «display:flex» de la regla de arriba gana
   al «[hidden]{display:none}» del navegador, y sin esto el buscador escondía
   las opciones en el papel y en ninguna otra parte —seguían todas a la vista—.
   Lo mismo para el aviso de que no hay coincidencias. */
.multiselect-opcion[hidden],.multiselect-nada[hidden],.multiselect-panel[hidden]{display:none}
.multiselect-opcion:hover{background:var(--fondo-2)}
.multiselect-opcion input{margin:0;flex:0 0 auto}
.multiselect-opcion span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.multiselect-todo{border-bottom:1px solid var(--linea);margin-bottom:4px;padding-bottom:8px;
  font-weight:500}
.multiselect-nada{padding:10px;margin:0}

/* Los meses en vigor de un proyecto de temporada: una rejilla que cabe en tres
   líneas en el móvil y en una o dos en el escritorio. */
.meses-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:4px 10px}
.mes-check{display:flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer;padding:3px 0}
.mes-check input{margin:0}

/* El texto largo que escribe la IA: ancho de lectura y párrafos que respiran.
   A toda la anchura de la pantalla no lo lee nadie. */
.texto-ia{max-width:70ch;line-height:1.6;font-size:14.5px;color:var(--tinta)}
.texto-ia strong{font-weight:600}

/* Un valor juzgado contra un umbral. No lleva flecha a propósito: la flecha de
   «.delta» dice «ha subido respecto a antes», y esto dice «está dentro o fuera
   del umbral», que es otra cosa. Un LCP con flecha hacia arriba se leería como
   una mejora cuando es lo contrario. */
.umbral{font-variant-numeric:tabular-nums;white-space:nowrap}
.umbral.bien{color:var(--grafito)}
.umbral.mal{color:var(--tinta);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--linea-fuerte);text-underline-offset:3px}

/* La fila de botones de descarga de un bloque. Va dentro del cuerpo y no en la
   cabecera a propósito: un botón dentro de <summary> abre y cierra el bloque al
   pulsarlo, que es justo lo que no puede pasar al bajarse un fichero. */
.cuerpo.descargas{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid var(--linea)}
.cuerpo.descargas .nota{flex:1 1 260px;margin:0}

/* ---------- rejilla de importes mes a mes ----------
   Doce casillas en una fila: sin ancho fijo, la tabla se va de la pantalla en
   cuanto un importe tiene cuatro cifras y decimales. */
.celda-importe{
  width:72px;padding:3px 5px;text-align:right;font:inherit;font-size:13px;
  font-variant-numeric:tabular-nums;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--papel);color:var(--tinta);
}
.celda-importe:focus{outline:none;border-color:var(--grafito);box-shadow:0 0 0 2px var(--fondo-2)}
.celda-importe:disabled{background:var(--fondo-2);color:var(--apagado)}

/* ---------- puntos de auditoría ----------
   El estado se dice con la marca, con la palabra y con el fondo. Nunca solo con
   color: uno de cada doce hombres no distingue el rojo del verde, y esta es una
   lista que se recorre con prisa. */
.item-check.estado-cumple{background:transparent}
.item-check.estado-no_aplica{opacity:.6}
.item-check .fila-campos{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.item-check .fila-campos input[type=text]{flex:1 1 260px;min-width:0}