:root {
  --fondo: #ffffff;
  --fondo-suave: #f6f7f9;
  --fondo-hover: #eef2f7;
  --borde: #d5dae1;
  --borde-fuerte: #b8c0cc;
  --texto: #1d2430;
  --texto-suave: #5b6676;
  --acento: #003a63;       /* azul Pantone 2955 C */
  --acento-hover: #0b4f82;
  --acento-suave: #e6eef5;
  --gris-marca: #b3b3b3;   /* gris 30 % */
  --ok: #1e7a3c;
  --ok-suave: #e3f4e8;
  --aviso: #8a5a00;
  --aviso-suave: #fff3d6;
  --error: #b42318;
  --error-suave: #fde8e6;
  --gris-suave: #eceff3;
  --radio: 4px;
  --alto-control: 32px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 14px/1.45 var(--fuente); min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }
p { margin: 0 0 8px; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Cabecera y pestañas del programa */
.cabecera { border-bottom: 1px solid var(--borde); background: var(--fondo-suave); }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 16px; padding: 6px 16px 0; min-height: 44px; }
.marca-producto { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--texto); padding-bottom: 8px; white-space: nowrap; }
.marca-producto:hover { text-decoration: none; }
.logo { display: inline-block; width: 24px; height: 24px; flex: none; }
.logo svg { display: block; width: 100%; height: 100%; }
[data-instalar][hidden] { display: none; }
/* App instalada en el escritorio: usar también la franja superior del navegador —donde salía la dirección web— dejando
   solo los botones de la ventana. Se activa solo con window-controls-overlay; en el móvil y en la web normal no cambia nada. */
@media (display-mode: window-controls-overlay) {
  .cabecera { position: sticky; top: 0; z-index: 50; -webkit-app-region: drag; }
  .cabecera-fila {
    padding-left: calc(16px + env(titlebar-area-x, 0px));
    padding-right: calc(16px + 100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px));
  }
  .cabecera a, .cabecera button, .cabecera input, .cabecera form, .cabecera .cuenta { -webkit-app-region: no-drag; }
}
/* Las secciones nunca se esconden en un scroll: si no caben, van a capo (en su propia fila por debajo de 1280 px). */
.pestanas { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 0; min-width: 0; overflow: visible; }
.pestana {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; white-space: nowrap;
  border: 1px solid var(--borde); border-bottom: 0; border-radius: var(--radio) var(--radio) 0 0;
  background: var(--gris-suave); color: var(--texto-suave); margin-bottom: -1px;
}
.pestana:hover { text-decoration: none; color: var(--texto); }
.pestana.activa { background: var(--fondo); color: var(--texto); font-weight: 600; border-color: var(--borde-fuerte); border-bottom: 1px solid var(--fondo); }
.cuenta { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-left: auto; }
.cuenta-nombre { color: var(--texto-suave); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta form { margin: 0; }

/* Contenido */
.principal { flex: 1; width: 100%; padding: 12px 16px 24px; }
.principal-publica, .principal.principal-publica { padding: 0; }
.estrecho { max-width: 420px; margin: 32px auto; }
details > .estrecho { margin: 8px 0 16px; }
.barra-titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.barra-titulo h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-titulo .acciones { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.suave { color: var(--texto-suave); }
.fuente-mini { font-size: 11px; color: var(--texto-suave); }
.num { font-variant-numeric: tabular-nums; }

/* Controles: 32 px, pensados para ratón */
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number], input[type=month], input[type=tel], select {
  height: var(--alto-control); padding: 0 8px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background: #fff; min-width: 0;
}
textarea { padding: 6px 8px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-suave); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--alto-control); padding: 0 12px; border-radius: var(--radio); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--borde-fuerte); background: #fff; color: var(--texto);
  transition: transform 160ms var(--ease-out), background-color 120ms ease, border-color 120ms ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.btn-sutil { border-color: transparent; background: transparent; color: var(--texto-suave); }
.btn-peligro { color: var(--error); border-color: var(--error); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--fondo-hover); }
  .btn-primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
  .btn-sutil:hover { background: var(--gris-suave); color: var(--texto); }
}

/* Formularios simples (entrar, alta) */
.formulario { display: grid; gap: 10px; }
.formulario label { display: grid; gap: 4px; font-weight: 600; font-size: 13px; }
.formulario input { width: 100%; font-weight: 400; }
.formulario .btn { width: 100%; height: 36px; }
.ayuda { font-size: 12px; color: var(--texto-suave); font-weight: 400; }
.campo-clave { position: relative; display: block; }
.campo-clave input { width: 100%; padding-right: 76px; }
.ver-clave {
  position: absolute; top: 2px; right: 2px; bottom: 2px; min-width: 64px; padding: 0 10px;
  border: 0; border-radius: var(--radio); background: transparent; color: var(--acento);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.ver-clave:hover { background: var(--gris-suave); }
.ver-clave:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Mensajes */
.aviso { padding: 8px 12px; border-radius: var(--radio); border: 1px solid; margin-bottom: 10px; }
.aviso-error { background: var(--error-suave); border-color: #f3b8b2; color: var(--error); }
.aviso-ok { background: var(--ok-suave); border-color: #a9d8b6; color: var(--ok); }
.aviso-info { background: var(--acento-suave); border-color: #b9cff0; color: #17427f; }

/* Cajas de cifras */
.cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 14px; }
.caja { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; background: #fff; min-width: 0; }
.caja-etiqueta { font-size: 12px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caja-valor { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere; }
.caja-nota { font-size: 12px; color: var(--texto-suave); }
a.caja-enlace { display: block; color: inherit; text-decoration: none; transition: border-color 120ms var(--ease-out), background-color 120ms var(--ease-out); }
a.caja-enlace .caja-nota { color: var(--acento); }
.tabla-enlaces td > a { display: block; margin: 0 -8px; padding: 0 8px; line-height: 30px; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.tabla-enlaces td:first-child > a { color: var(--acento); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  a.caja-enlace:hover { border-color: var(--acento); background: var(--fondo-hover); }
  .tabla-enlaces tbody tr:hover td { background: var(--fondo-hover); cursor: pointer; }
}
@media (pointer: coarse), (max-width: 1023px) { .tabla-enlaces td > a { line-height: 44px; } }
.atajos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Inicio: buscar arriba, un recuadro por boletín, una fila por día */

.buscador { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 14px; margin-bottom: 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-suave); }
.buscador label { flex-basis: 100%; font-weight: 600; }
.buscador input { flex: 1 1 280px; max-width: 640px; height: 40px; font-size: 15px; }
.buscador .btn { height: 40px; }
/* Inicio: una tarjeta por módulo (España, Europa, Vigilancia), una al lado de la otra en el ordenador. */
.hoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hoy-caja { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; min-width: 0; }
.origen-cab { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.origen-cab h2 { margin: 0; font-size: 16px; }
.origen-sigla { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: var(--acento-suave); color: var(--acento); }
a.hoy-enlace { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio); color: inherit; text-decoration: none; transition: border-color 120ms var(--ease-out), background-color 120ms var(--ease-out); }
a.hoy-enlace.hoy-alerta { border-color: var(--acento); background: var(--acento-suave); }
.hoy-num { font-size: 30px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hoy-texto { font-size: 14px; color: var(--texto-suave); }
.origen-ver { margin-top: 4px; font-size: 14px; color: var(--acento); font-weight: 600; }
.oepm { font-weight: 600; font-variant-numeric: tabular-nums; }
.oepm-ok { color: var(--ok); }
.oepm-mal { color: var(--error); }
.origen-pie { margin: 0; font-size: 13px; color: var(--texto-suave); }
.tabla-dias .dia-c1, .tabla-dias .dia-c3 { width: 22%; }
.tabla-dias .dia-c2, .tabla-dias .dia-c5 { width: 18%; }
.tabla-dias .dia-c4 { width: 20%; }
.tabla-dias .t-corto { display: none; }
/* Teléfono: el día se lee entero (primera columna de 100 px o más). */
@container (max-width: 480px) {
  .tabla-dias .dia-c1 { width: 30%; }
  .tabla-dias .dia-c2, .tabla-dias .dia-c5 { width: 17%; }
  .tabla-dias .dia-c3 { width: 17%; }
  .tabla-dias .dia-c4 { width: 19%; }
  .tabla-dias th, .tabla-dias td { padding: 0 4px; font-size: 12px; }
  .tabla-dias td > a { margin: 0 -4px; padding: 0 4px; }
  /* Títulos cortos (el largo va en el title): «Nuevas», «Movim.», «UE» caben enteros. */
  .tabla-dias .t-largo { display: none; }
  .tabla-dias .t-corto { display: inline; }
}
.tabla-dias td > a { display: block; margin: 0 -8px; padding: 0 8px; line-height: 30px; color: var(--acento); font-weight: 600; text-decoration: none; }
.carga { margin-top: 18px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-suave); font-size: 13px; }
.carga summary { cursor: pointer; font-weight: 600; min-height: 28px; line-height: 28px; }
.carga p { margin: 6px 0 0; }
@media (hover: hover) and (pointer: fine) {
  a.hoy-enlace:hover { border-color: var(--acento); background: var(--fondo-hover); }
  .tabla-dias td > a:hover { background: var(--fondo-hover); }
}
@media (pointer: coarse), (max-width: 1023px) { .tabla-dias td > a { line-height: 44px; } }

/* Tablas densas: una fila por registro; el desborde se queda dentro del contenedor */
/* «position: relative»: la caja es el bloque contenedor de los textos ocultos (position: absolute) de sus celdas. Sin él
   se colocan respecto a <body>, escapan del recorte de la caja y estiran la página (blanco bajo el pie, scroll de lado). */
.tabla-caja { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); container-type: inline-size; }
/* «separate» y no «collapse»: con «collapse» el borde de los títulos fijos (sticky) no los sigue y entre título y fila
   queda una raya de 1 px por la que se ve el texto de las filas que pasan debajo. Solo hay bordes abajo: se ve igual. */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tabla th, .tabla td { padding: 0 8px; height: var(--alto-fila, 30px); border-bottom: 1px solid var(--gris-suave); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabla th { position: sticky; top: 0; background: var(--fondo-suave); font-weight: 600; font-size: 12px; color: var(--texto-suave); border-bottom-color: var(--borde); }
.tabla td.num, .tabla th.num { text-align: right; }
/* La columna de la casilla: sin relleno ni «…» (si no, sale un punto junto a cada casilla). */
.tabla th.col-sel, .tabla td.col-sel { padding: 0; text-align: center; text-overflow: clip; }
/* La última fila, sin raya pero con su píxel: así mide lo mismo que las demás. */
.tabla tbody tr:last-child td { border-bottom-color: transparent; }
@media (hover: hover) and (pointer: fine) { .tabla tbody tr:hover td { background: var(--fondo-hover); } }

/* Estados de un día de boletín */
.estado { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.est-completo { background: var(--ok-suave); color: var(--ok); }
.est-en_curso { background: var(--acento-suave); color: var(--acento); }
.est-pendiente { background: var(--aviso-suave); color: var(--aviso); }
.est-vacio { background: var(--gris-suave); color: var(--texto-suave); }
.est-error { background: var(--error-suave); color: var(--error); }
.leyenda { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; }

/* Calendario mensual */
.cal-barra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-barra form { display: flex; gap: 6px; margin: 0; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--borde); border-left: 1px solid var(--borde); }
.cal-cab { padding: 4px 6px; font-size: 12px; font-weight: 600; color: var(--texto-suave); background: var(--fondo-suave); border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.cal-dia { min-height: 74px; padding: 4px 6px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--texto); }
a.cal-dia:hover { text-decoration: none; background: var(--fondo-hover); }
.cal-dia.fuera { background: var(--fondo-suave); }
.cal-dia.hoy .cal-num { color: #fff; background: var(--acento); border-radius: 3px; padding: 0 4px; }
.cal-num { font-weight: 600; font-size: 12px; align-self: flex-start; }
.cal-linea { font-size: 11px; display: flex; gap: 4px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.cal-dia .estado { font-size: 11px; line-height: 16px; padding: 0 4px; }

/* Mapa de boletines: año × mes */
.mapa-anio .mapa-c-anio { width: 6.25rem; }
.mapa-anio .mapa-c-total { width: 5.25rem; }
.mapa-anio td.mes { padding: 0 4px; text-align: right; font-variant-numeric: tabular-nums; }
/* Teléfono: cada año, un bloque con sus 12 meses en rejilla (6 × 2) y la etiqueta del mes; sin desplazarse de lado. */
@container (max-width: 640px) {
  .mapa-anio thead, .mapa-anio colgroup { display: none; }
  .mapa-anio, .mapa-anio tbody { display: block; }
  .mapa-anio tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--borde); }
  .mapa-anio tbody tr:last-child { border-bottom: 0; }
  .mapa-anio tr > th { grid-row: 1; grid-column: 1 / 4; display: flex; align-items: center; height: 36px; }
  .mapa-anio tr > td.mapa-total { grid-row: 1; grid-column: 4 / -1; display: flex; align-items: center; justify-content: flex-end; height: 36px; }
  .mapa-anio td.mes { display: block; height: auto; padding: 2px 4px; border-bottom: 0; }
  .mapa-anio td.mes::before { content: attr(data-mes); display: block; font-size: 11px; line-height: 14px; color: var(--texto-suave); text-align: left; }
  .mapa-anio td.mes a.celda { height: auto; min-height: 44px; line-height: 44px; }
}
.mapa-anio a.celda { display: block; height: 100%; color: var(--texto); }
.celda-lleno { background: var(--ok-suave); }
.celda-parcial { background: var(--aviso-suave); }
.celda-error { background: var(--error-suave); }

/* Patentes: el título se lleva el resto; lo accesorio se va cuando la caja se estrecha (sin scroll de lado). */
.tabla-patentes .pt-exp { width: 6.875rem; }
.tabla-patentes .pt-mod { width: 8.125rem; }
.tabla-patentes .pt-anot { width: 18%; }
.tabla-patentes .pt-tit { width: 17%; }
.tabla-patentes .pt-lugar { width: 8.75rem; }
.tabla-patentes .pt-cip { width: 6.25rem; }
@container (max-width: 1200px) { .tabla-patentes .pt-cip { display: none; } }
@container (max-width: 1050px) { .tabla-patentes .pt-lugar { display: none; } }
@container (max-width: 900px) { .tabla-patentes .pt-mod { display: none; } }
@container (max-width: 700px) { .tabla-patentes .pt-tit { display: none; } }
@container (max-width: 520px) { .tabla-patentes .pt-anot { display: none; } }

/* Pie */
.pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--borde); font-size: 12px; color: var(--texto-suave); background: var(--fondo-suave); }
.pie-sep { color: var(--borde-fuerte); }

/* Ventana media: la marca y la cuenta arriba, las secciones en su fila (todas a la vista). */
@media (max-width: 1279px) {
  .pestanas { order: 3; flex-basis: 100%; }
  .pestana { padding: 0 11px; }
  .cuenta { padding-bottom: 6px; }
}
/* Dedo: todo lo que se toca, de 44 px. Por debajo de 1024 px (teléfono y tableta) o en pantallas sin ratón; la
   colocación (apilar, rejillas) sigue siendo cosa del teléfono, en el bloque de 760 px de abajo. */
@media (max-width: 1023px), (pointer: coarse) {
  /* Todas las filas de una tabla, de la misma altura: 44 px de toque + 1 de raya (con o sin enlace dentro). */
  :root { --alto-fila: calc(44px + 1px); }
  .pestana, .btn { min-height: 44px; }
  .mapa-anio a.celda { line-height: 44px; }
  input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number], input[type=month], input[type=tel], select { height: 44px; }
  /* Casillas y radios: se ven de 22 px pero se tocan en 44 × 44 (el borde transparente es zona de toque; el margen
     negativo hace que ocupen en la fila lo mismo que una de 22 px). */
  /* Las reglas de escritorio que dan tamaño a casillas (.mv-op, .mv-c-sel, .elige-meses) van con :where() y pesan
     menos que estas: aquí no hace falta subir la especificidad. */
  input:is([type=checkbox], [type=radio]) {
    -webkit-appearance: none; appearance: none; flex: none; width: 44px; height: 44px; margin: -11px; padding: 0;
    border: 11px solid transparent; border-radius: 15px; background: #fff padding-box; vertical-align: middle; cursor: pointer;
    box-shadow: inset 0 0 0 2px var(--borde-fuerte);
  }
  input[type=radio] { border-radius: 50%; }
  input[type=checkbox]:checked {
    box-shadow: none;
    background: var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat padding-box;
  }
  input[type=checkbox]:indeterminate {
    box-shadow: none;
    background: var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat padding-box;
  }
  input[type=radio]:checked { background-color: var(--acento); box-shadow: inset 0 0 0 2px var(--acento), inset 0 0 0 6px #fff; }
  input:is([type=checkbox], [type=radio]):focus-visible { outline: 2px solid var(--acento); outline-offset: -9px; }
  input:is([type=checkbox], [type=radio]):disabled { opacity: .5; cursor: default; }
  /* La celda de una casilla no recorta: si recortara, la zona de toque de 44 px se quedaría en el ancho de la celda. */
  :is(td, th):has(> input:is([type=checkbox], [type=radio])) { overflow: visible; text-overflow: clip; min-width: 44px; }
  /* La etiqueta de una casilla, de 44 px: así la zona de toque de la casilla no pisa la fila de al lado. */
  label:has(> input:is([type=checkbox], [type=radio])) { min-height: 44px; }
  /* Enlaces dentro de tablas, migas y desplegables: 44 px de alto para el dedo. */
  /* Bloque en línea con su propio «…»: un inline-block es atómico y el text-overflow de la celda ya no le llega. */
  :where(.tabla td) a:not(.btn, .celda), .migas a { display: inline-block; min-width: 44px; max-width: 100%; padding-block: 12px; line-height: 20px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  summary:not(.btn) { min-height: 44px; padding-block: 11px; line-height: 22px; }
  .marca-producto { min-height: 44px; }
  .origen-pie a, .carga a { display: inline-block; padding-block: 12px; line-height: 20px; }
  /* Calendario: cada línea (España / UE) de un día, 44 px. */
  .cal-linea { min-height: 44px; }
}
/* Teléfono: se apila, sin scroll lateral de la página. */
@media (max-width: 760px) {
  .cabecera-fila { padding: 6px 10px 0; gap: 6px 10px; }
  /* Las secciones, en rejilla de 3: todas a la vista y de 44 px, sin ocupar media pantalla. */
  .pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-bottom: 8px; }
  .pestana { justify-content: center; padding: 0 6px; margin-bottom: 0; border-bottom: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; text-overflow: ellipsis; }
  .pestana.activa { border-bottom: 1px solid var(--borde-fuerte); }
  .principal { padding: 10px; }
  .cal-dia { min-height: 54px; padding: 3px; }
  .cal-linea .cal-texto { display: none; }
  .barra-titulo .acciones { margin-left: 0; }
}
/* Portada pública (04/11/2026): quien llega sin sesión ve qué es Bopix y que el acceso es por invitación. */
/* ---------- Portada pública (bopix.es, 05/11/2026). Jorge: sobriedad, son abogados → sin efectos, filetes finos,
   titulares Newsreader en peso medio, el azul solo como acento y en la banda de la prueba. ---------- */
@font-face { font-family: "Newsreader"; src: url(/fuentes/newsreader.woff2) format("woff2"); font-weight: 500 650; font-display: swap; }
.acceso-clientes { margin-left: auto; }
.portada { --titular: "Newsreader", Georgia, "Times New Roman", serif; --tinta: #14263a; --filete: #dfe3e8;
  margin: 0; color: var(--texto); overflow-x: clip; }
.portada ::selection { background: #d7e3ee; color: var(--tinta); }
.pp-ancho { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.portada h1, .portada h2 { font-family: var(--titular); font-weight: 500; color: var(--tinta); letter-spacing: -0.01em; text-wrap: balance; }
.portada h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.12; margin: 0 0 20px; }
.portada h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; margin: 0 0 12px; }
.portada p { font-size: 16px; line-height: 1.65; max-width: 60ch; margin: 0; color: #36404d; }
.portada .btn { min-height: 46px; padding: 0 22px; font-size: 15px; border-radius: 3px; }

.pp-hero { padding: 64px 0 72px; border-bottom: 1px solid var(--filete); }
.pp-hero-rejilla { display: grid; gap: 40px; align-items: center; }
.pp-entrada { font-size: 17px !important; margin-bottom: 28px !important; }
.pp-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.pp-sello { font-size: 13px !important; color: var(--texto-suave) !important; padding-top: 14px; border-top: 1px solid var(--filete); max-width: 46ch !important; }

.pp-bloque { padding: 64px 0; border-bottom: 1px solid var(--filete); }
.pp-par { display: grid; gap: 28px; align-items: center; }

/* La pantalla: una lámina del programa, plana, con filete fino. */
.pantalla { margin: 0; background: #fff; border: 1px solid var(--borde); border-radius: 3px; font-size: 13px; }
.pt-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 11px 14px; border-bottom: 1px solid var(--borde); background: var(--fondo-suave); }
.pt-titulo { font-weight: 600; color: var(--tinta); }
.pt-dato { color: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.pt-suave { color: var(--texto-suave); font-size: 12px; }
.pt-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pt-tabla th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--texto-suave); padding: 8px 14px; border-bottom: 1px solid var(--borde); }
.pt-tabla td { padding: 9px 14px; border-bottom: 1px solid var(--gris-suave); }
.pt-tabla tbody tr:last-child td { border-bottom: 0; }
.pt-tabla td .pt-suave { display: block; margin-top: 1px; }
.pt-fila-alerta td { background: #fbf3f2; }
.pt-estado { font-size: 12px; font-weight: 600; white-space: nowrap; }
.pt-viva { color: var(--ok); }
.pt-extinta { color: var(--error); }
.pt-nota { display: block; padding: 8px 14px; border-top: 1px solid var(--gris-suave); font-size: 11px; color: #7d8794; }

.pt-ficha { padding: 14px; }
.pt-ficha-nombre { font-family: var(--titular); font-size: 22px !important; font-weight: 500; color: var(--tinta) !important; margin: 0 0 10px !important; }
.pt-datos { margin: 0 0 14px; display: grid; gap: 6px; }
.pt-datos > div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: baseline; }
.pt-datos dt { color: var(--texto-suave); font-size: 12px; }
.pt-datos dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pt-historial { width: 100%; border-collapse: collapse; border-top: 1px solid var(--borde); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pt-historial td { padding: 7px 0; border-bottom: 1px solid var(--gris-suave); }
.pt-historial td:first-child { width: 92px; color: var(--texto-suave); padding-right: 10px; }
.pt-historial .pt-fila-alerta td { background: none; color: var(--error); }

/* La prueba: banda azul sobria, formulario en lámina blanca. */
.pp-prueba { background: var(--acento); color: #fff; padding: 64px 0 72px; }
.pp-prueba-rejilla { display: grid; gap: 28px; align-items: start; }
.portada .pp-prueba h2 { color: #fff; }
.portada .pp-prueba-texto p { color: #d3e0ec; }
.pp-prueba-caja { background: #fff; color: var(--texto); border-radius: 3px; padding: 22px; }
.portada .solicitud { display: grid; grid-template-columns: 1fr; gap: 12px 16px; }
.portada .solicitud input { min-height: 44px; font-size: 16px; border-radius: 3px; }
.portada .solicitud .btn { width: 100%; height: auto; }
.portada .solicitud .fuente-mini { margin: 0; font-size: 12px; line-height: 1.5; max-width: none; }
.portada .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Portada v3 (06/11/2026, Matteo: «troppo basica»): más sustancia en el mismo mundo sobrio. El programa grande,
   la mañana en tres pasos, sin/con, fuentes, datos, preguntas y un pie completo. Sin efectos. */
.pp-hero-portada { padding: 56px 0 0; border-bottom: 0; }
.pp-hero-cabeza { display: grid; gap: 20px 56px; align-items: end; margin-bottom: 40px; }
.pp-hero-cabeza h1 { margin: 0; max-width: 16ch; }
.pp-hero-lado .pp-entrada { margin-bottom: 22px !important; }
.pp-hero-lado .pp-acciones { margin-bottom: 0; }
.pantalla-programa { border-radius: 4px 4px 0 0; border-bottom: 0; box-shadow: 0 -1px 0 var(--borde), 0 30px 60px -40px rgba(20, 38, 58, 0.35); }
.pg-cabecera { display: flex; align-items: center; gap: 18px; padding: 0 16px; height: 46px; border-bottom: 1px solid var(--borde); background: var(--fondo-suave); overflow: hidden; }
.pg-marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tinta); flex: none; }
.pg-logo { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; background: var(--acento); color: #fff; font-family: var(--titular); font-size: 14px; }
.pg-pestanas { display: flex; gap: 2px; min-width: 0; overflow: hidden; white-space: nowrap; }
.pg-pestana { padding: 13px 10px; font-size: 12.5px; color: var(--texto-suave); border-bottom: 2px solid transparent; }
.pg-activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.pg-cuenta { margin-left: auto; font-size: 12px; color: var(--texto-suave); flex: none; }
.pg-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.pg-lista { min-width: 0; }
.pg-lista .pt-cabeza { background: #fff; }
.pg-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 14px 10px; }
.pg-excel { margin-left: auto; font-size: 12px; padding: 3px 10px; border: 1px solid var(--borde-fuerte); border-radius: 3px; color: var(--tinta); }
.pg-elegida td { box-shadow: inset 0 1px 0 #f0c9c3, inset 0 -1px 0 #f0c9c3; }
.pg-ficha { display: none; padding: 16px; border-left: 1px solid var(--borde); background: #fcfcfd; }
.pg-ficha-num { font-size: 12px !important; color: var(--texto-suave) !important; margin: 0 0 4px !important; }
.pg-pdf { display: inline-block; margin-top: 12px; font-size: 12px; padding: 3px 10px; border: 1px solid var(--borde-fuerte); border-radius: 3px; color: var(--tinta); }

.pp-fuentes { border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); background: var(--fondo-suave); }
.pp-fuentes-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 36px; padding-top: 18px; padding-bottom: 18px; }
.pp-fuentes-titulo { font-size: 12px; color: var(--texto-suave); flex-basis: 100%; }
.pp-fuente { font-size: 13px; color: var(--texto-suave); }
.pp-fuente strong { display: block; font-family: var(--titular); font-weight: 500; font-size: 18px; color: var(--tinta); }

.pp-titulo-seccion { max-width: 22ch; margin-bottom: 32px !important; }
.pp-pasos { list-style: none; margin: 0 0 56px; padding: 0; display: grid; gap: 28px; counter-reset: paso; }
.pp-pasos li { border-top: 1px solid var(--borde-fuerte); padding-top: 16px; }
.pp-paso-num { display: block; font-family: var(--titular); font-size: 30px; line-height: 1; color: var(--acento); margin-bottom: 12px; }
.pp-pasos h3, .pp-tres h3, .pp-contraste h3 { font-size: 17px; font-weight: 600; color: var(--tinta); margin: 0 0 8px; }
.pp-pasos p, .pp-tres p { font-size: 15.5px !important; }
.pp-contraste { display: grid; gap: 16px; }
.pp-contraste-col { border: 1px solid var(--borde); border-radius: 4px; padding: 22px 24px; }
.pp-con { border-color: var(--acento); background: #f5f8fb; }
.pp-contraste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pp-contraste li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.5; color: #36404d; }
.pp-sin li { color: var(--texto-suave); }
.pp-check, .pp-raya { width: 18px; height: 18px; margin-top: 2px; }
.pp-check { color: var(--acento); }
.pp-raya { color: var(--borde-fuerte); }
.pp-mas { margin-top: 16px !important; font-size: 15px !important; }
.pp-mas a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pp-tres { display: grid; gap: 28px; }
.pp-tres > div { border-top: 1px solid var(--borde-fuerte); padding-top: 16px; }
.pp-faq-rejilla { display: grid; gap: 8px 64px; }
.pp-acordeon details { border-top: 1px solid var(--borde); }
.pp-acordeon details:last-child { border-bottom: 1px solid var(--borde); }
.pp-acordeon summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; font-size: 16px; font-weight: 600; color: var(--tinta); }
.pp-acordeon summary::-webkit-details-marker { display: none; }
.pp-acordeon summary::after { content: "+"; font-family: var(--titular); font-size: 22px; font-weight: 400; color: var(--acento); }
.pp-acordeon details[open] summary::after { content: "−"; }
.pp-acordeon details p { margin: 0 0 18px !important; }

.pie-portada { display: block; padding: 0 16px; --titular: "Newsreader", Georgia, "Times New Roman", serif; --tinta: #14263a; }
.pp-pie { display: grid; gap: 24px 40px; max-width: 1088px; margin: 0 auto; padding: 36px 0 24px; border-bottom: 1px solid var(--borde); text-align: left; }
.pp-pie-linea { max-width: 1088px; margin: 0 auto; padding: 14px 0 18px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.pp-pie-col { display: grid; gap: 8px; align-content: start; }
.pp-pie-nombre { font-family: var(--titular); font-size: 20px; color: var(--tinta); }
.pp-pie-marca p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--texto-suave); max-width: 36ch; }
.pp-pie-titulo { font-size: 12px; font-weight: 600; color: var(--tinta); }
.pp-pie-col a { color: var(--texto); font-size: 13px; }

@media (min-width: 700px) {
  .pp-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-contraste { grid-template-columns: 1fr 1fr; }
  .pp-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-pie { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
@media (min-width: 960px) {
  .pp-hero-cabeza { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .pg-cuerpo { grid-template-columns: minmax(0, 1fr) 260px; }
  .pg-ficha { display: block; }
  .pp-faq-rejilla { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}
@media (max-width: 699px) {
  .pg-col-fecha, .pg-col-acto, .pg-oculto-movil, .pg-cuenta { display: none; }
}

/* Páginas públicas de bopix.es (06/11/2026): mismo mundo que la portada, lectura larga y sobria. */
.pp-miga { font-size: 13px !important; margin: 0 0 14px !important; color: var(--texto-suave) !important; }
.pp-miga a { color: var(--texto-suave); }
.pp-legal { }
.pp-hero-legal { padding: 48px 0 40px; }
.pp-texto-largo { }
.pp-apartado + .pp-apartado { margin-top: 40px; }
.pp-apartado h2 { margin-bottom: 10px; }
.pp-apartado p + p { margin-top: 12px; }
.pp-lista { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.6; color: #36404d; max-width: 60ch; }
.pp-faq { margin: 0; display: grid; gap: 4px 0; max-width: 64ch; }
.pp-faq dt { font-weight: 600; color: var(--tinta); font-size: 16px; padding-top: 14px; border-top: 1px solid var(--filete); }
.pp-faq dt:first-child { border-top: 0; padding-top: 0; }
.pp-faq dd { margin: 4px 0 0; font-size: 16px; line-height: 1.6; color: #36404d; }
.pp-cifras { padding: 48px 0 8px; }
.pp-cifras h2 { margin-bottom: 6px !important; }
.pp-cifras-nota { font-size: 14px !important; color: var(--texto-suave) !important; margin-bottom: 16px !important; }
.pp-tabla-cifras { border: 1px solid var(--borde); border-radius: 3px; font-size: 14px; }
.pp-tabla-cifras th.num, .pp-tabla-cifras td.num { text-align: right; }
@media (max-width: 559px) { .pp-tabla-cifras th:last-child, .pp-tabla-cifras td:last-child { display: none; } }
.pp-prueba-corta { padding: 48px 0 52px; }
.pp-prueba-corta .pp-prueba-rejilla { align-items: center; }
.portada .btn-claro { background: #fff; color: var(--acento); border-color: #fff; font-weight: 600; }
.portada .btn-claro:hover { background: #eef3f8; text-decoration: none; }
.pp-enlaces { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--borde); }
.pp-enlaces a { color: var(--texto); font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }

@media (max-width: 559px) {
  .pt-col-titular, .pt-col-clase { display: none; }
  .pt-tabla th, .pt-tabla td { padding-left: 10px; padding-right: 10px; }
  .pp-hero { padding: 40px 0 48px; }
  .pp-bloque { padding: 48px 0; }
}
@media (min-width: 560px) { .portada .solicitud { grid-template-columns: 1fr 1fr; }
  .portada .solicitud .btn, .portada .solicitud .fuente-mini { grid-column: 1 / -1; }
  .portada .solicitud .btn { width: auto; justify-self: start; min-width: 260px; } }
@media (min-width: 960px) {
  .pp-hero-rejilla { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
  .pp-par { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; }
  .pp-prueba-rejilla { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}


/* ---------- Módulo de consulta ---------- */
.mv-modulo { max-width: 1880px; margin: 0 auto; min-width: 0; }
.mv-titulo { flex-wrap: nowrap; margin-bottom: 6px; min-width: 0; }
.mv-titulo h1 { min-width: 0; flex: 0 1 auto; }
.mv-total { font-weight: 600; white-space: nowrap; color: var(--texto-suave); }
.mv-fuente { margin-left: auto; white-space: nowrap; }
.mv-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mv-sin { color: var(--texto-suave); }
.mv-empuje { flex: 1 1 auto; }

.mv-pestanas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 8px; }
.mv-pest { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radio) var(--radio) 0 0; color: var(--texto-suave); white-space: nowrap; margin-bottom: -1px; }
a.mv-pest:hover { background: var(--fondo-hover); color: var(--texto); text-decoration: none; }
.mv-pest.activa { background: var(--fondo); border-color: var(--borde); color: var(--texto); font-weight: 600; }
.mv-pest.apagada { opacity: .5; cursor: default; }

.mv-herramientas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0 8px; }
.mv-herramientas form { margin: 0; }
.mv-herramientas .btn, .mv-nav-ficha .btn { height: var(--alto-control); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.mv-op { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; cursor: pointer; white-space: nowrap; }
:where(.mv-op) input { margin: 0; width: 15px; height: 15px; accent-color: var(--acento); }
.mv-todas { padding: 0 6px; }
.mv-cuenta { min-width: 0; font-size: 12px; }

/* Menús Cargar / Grabar */
.mv-menu { position: relative; }
.mv-menu > summary { list-style: none; cursor: pointer; }
.mv-menu > summary::-webkit-details-marker { display: none; }
.mv-menu > summary::after { content: "▾"; margin-left: 6px; font-size: 10px; color: var(--texto-suave); }
.mv-menu-caja { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 18.75rem; max-width: calc(100vw - 32px); padding: 8px; background: var(--fondo); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); box-shadow: 0 6px 20px rgba(15, 23, 42, .12); }
/* Cerrado, el menú no ocupa sitio (si no, su caja invisible sigue «existiendo» fuera de la pantalla). */
.mv-menu:not([open]) > .mv-menu-caja { display: none; }
.mv-menu-lista { list-style: none; margin: 0 0 6px; padding: 0; max-height: 280px; overflow-y: auto; }
.mv-menu-lista a { display: block; padding: 5px 8px; border-radius: var(--radio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto); }
.mv-menu-lista a:hover { background: var(--fondo-hover); text-decoration: none; }
.mv-menu-pie { display: block; padding: 6px 8px 2px; border-top: 1px solid var(--gris-suave); font-size: 12px; }
.mv-grabar { display: grid; gap: 8px; }
.mv-grabar .mv-campo { grid-template-columns: 1fr; }

/* ---------- Filtro ---------- */
.mv-filtro { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.mv-subpestanas { display: flex; gap: 2px; padding: 4px 4px 0; background: var(--fondo-suave); border-bottom: 1px solid var(--borde); border-radius: var(--radio) var(--radio) 0 0; flex-wrap: wrap; }
.mv-subpest { height: 30px; padding: 0 14px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radio) var(--radio) 0 0; background: transparent; color: var(--texto-suave); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.mv-subpest:hover { color: var(--texto); background: var(--fondo-hover); }
.mv-subpest.activa { background: var(--fondo); border-color: var(--borde); color: var(--texto); font-weight: 600; }
.mv-paginas { padding: 10px 12px 12px; }
.mv-pag { container-type: inline-size; display: grid; gap: 10px; }
.mv-pag[hidden] { display: none; }
.mv-bloque { margin: 0; padding: 8px 10px 10px; border: 1px solid var(--borde); border-radius: var(--radio); min-width: 0; display: grid; gap: 6px; align-content: start; }
.mv-bloque > legend { padding: 0 4px; font-weight: 600; font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.mv-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 10px; }
.mv-linea { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.mv-crece { flex: 1 1 auto; min-width: 0; }
.mv-campo { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 4px 10px; min-width: 0; }
.mv-campo > .ayuda { grid-column: 2; }
.mv-etq { font-size: 13px; color: var(--texto-suave); }
.mv-campo input[type=text], .mv-campo input[type=date], .mv-campo select { width: 100%; max-width: 420px; }
.mv-rango { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mv-rango input { flex: 1 1 0; min-width: 0; max-width: 170px; }
.mv-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.mv-tres input { width: 100%; }
.mv-campo-textos { align-items: start; }
.mv-campo-textos > .mv-etq { padding-top: 7px; }
.mv-viena { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.mv-viena input { width: 100%; }
.mv-rejilla-clases { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 2px 6px; }
.mv-rejilla-clases .mv-op:last-child { grid-column: span 4; }
.mv-nota { margin: 0; }
.mv-dual { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mv-dual.mv-dual-lista { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mv-situaciones, .mv-elegidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 12px; align-content: start; }
.mv-dual-lista .mv-situaciones, .mv-dual-lista .mv-elegidas { grid-template-columns: 1fr; max-height: 380px; overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--radio); padding: 4px 8px; }
.mv-dual-tit { grid-column: 1 / -1; position: sticky; top: -4px; margin: 0 -8px 2px; padding: 4px 8px; background: var(--fondo-suave); font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.mv-situaciones .mv-op, .mv-elegidas .mv-op { white-space: normal; padding: 2px 0; }
.mv-elegidas .mv-vacio-dual { color: var(--texto-suave); font-size: 12px; padding: 4px 0; }
@container (max-width: 640px) {
  .mv-campo { grid-template-columns: 1fr; }
  .mv-campo > .ayuda { grid-column: 1; }
  .mv-campo-textos > .mv-etq { padding-top: 0; }
  .mv-tres { grid-template-columns: 1fr; }
  .mv-dual.mv-dual-lista { grid-template-columns: 1fr; }
}

/* ---------- Lista ---------- */
.mv-resumen { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; margin-bottom: 4px; font-size: 12px; min-width: 0; }
.mv-chip { display: inline-block; max-width: 340px; padding: 1px 8px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-cambiar { margin-left: 4px; white-space: nowrap; }
.mv-tipos { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin: 6px 0 8px; }
.mv-tipo { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--borde); border-radius: 999px; background: var(--fondo); color: inherit; font-size: 12px; text-decoration: none; line-height: 1.2; }
.mv-tipo:hover, .mv-tipo:focus-visible { border-color: currentColor; }
.mv-tipo.activa { background: #003a63; border-color: #003a63; color: #fff; }
.mv-tipos-mas { width: 100%; }
.mv-tipos-mas > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; font-size: 12px; opacity: .75; }
.mv-tipos-resto { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (max-width: 1023px) { .mv-tipo, .mv-tipos-mas > summary { min-height: 44px; } }
.mv-tamano { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); overflow: hidden; }
.mv-tam { display: inline-flex; align-items: center; height: 30px; padding: 0 9px; color: var(--texto-suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.mv-tam + .mv-tam { border-left: 1px solid var(--borde); }
a.mv-tam:hover { background: var(--fondo-hover); text-decoration: none; color: var(--texto); }
.mv-tam.activa { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.mv-vistas { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); overflow: hidden; }
.mv-vistas[hidden] { display: none; }
.mv-vista { height: 30px; padding: 0 10px; border: 0; background: var(--fondo); color: var(--texto-suave); cursor: pointer; font-size: 12px; }
.mv-vista + .mv-vista { border-left: 1px solid var(--borde); }
.mv-vista.activa { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

.mv-tabla th a.mv-orden { color: inherit; display: block; overflow: hidden; text-overflow: ellipsis; }
.mv-tabla th a.mv-orden.activa { color: var(--acento); }
.mv-tabla tbody tr[data-href] { cursor: pointer; }
.mv-tabla tbody tr:hover td { background: var(--fondo-hover); }
.mv-tabla tbody tr.mv-marcada td { background: var(--acento-suave); }
.mv-tabla td.mv-c-sel, .mv-tabla th.mv-c-sel { padding: 0; text-align: center; }
:where(.mv-c-sel) input { width: 15px; height: 15px; margin: 0; vertical-align: middle; accent-color: var(--acento); }
.mv-tabla td.mv-c-logo { padding: 2px 4px; }
.mv-c-logo img { display: block; width: 40px; height: 24px; object-fit: contain; }
.mv-tabla td.mv-c-den b { font-weight: 600; }
.mv-c-exp a { font-variant-numeric: tabular-nums; }
.mv-puntos { display: inline-block; min-width: 32px; padding: 0 6px; border-radius: 3px; background: var(--aviso-suave); color: var(--aviso); font-weight: 600; text-align: center; }
.mv-w-sel { width: 2.125rem; }
.mv-w-logo { width: 3.25rem; }
.mv-w-exp { width: 6.75rem; }
.mv-w-fecha { width: 5.75rem; }
.mv-w-cla { width: 5.75rem; }
.mv-w-pts { width: 4.5rem; }
.mv-w-pq { width: 20%; }
.mv-w-est { width: 15%; }
.mv-w-ev { width: 28%; }
.mv-w-filtro { width: 40%; }
.mv-w-n { width: 6rem; }
.mv-w-creado { width: 8.75rem; }
.mv-w-acc { width: 5.625rem; }
.mv-w-acc2 { width: 10.625rem; }
.mv-w-nombre { width: 30%; }
.mv-w-bol { width: 6.25rem; }
.mv-acc { text-align: right; }
.mv-acc form { display: inline; margin: 0; }
.mv-acc .btn { height: 24px; padding: 0 8px; font-size: 12px; }
.mv-estado { font-size: 12px; }
.mv-g-concedida { color: var(--ok); }
.mv-g-tramite { color: var(--acento); }
.mv-g-denegada { color: var(--error); }

/* Informe: columnas que se van cuando la tabla se estrecha (1920 → 800 px sin scroll). */
@container (max-width: 1180px) { .mv-tabla:not(.mv-lista) .mv-w-rep, .mv-tabla:not(.mv-lista) .mv-c-rep { display: none; } }
@container (max-width: 980px) { .mv-tabla:not(.mv-lista) .mv-w-cla, .mv-tabla:not(.mv-lista) .mv-c-cla { display: none; } }
@container (max-width: 860px) { .mv-tabla:not(.mv-lista) .mv-w-fsol, .mv-tabla:not(.mv-lista) .mv-c-fsol { display: none; } }
@container (max-width: 720px) { .mv-tabla:not(.mv-lista) .mv-w-tit, .mv-tabla:not(.mv-lista) .mv-c-tit { display: none; } }
@container (max-width: 560px) {
  .mv-tabla:not(.mv-lista) .mv-w-fpub, .mv-tabla:not(.mv-lista) .mv-c-fpub { display: none; }
  .mv-tabla-informe .mv-w-est { width: 34%; }
}

/* Tablas sencillas (Mis informes, Filtros grabados, Boletines UE): la columna que dice qué es cada fila nunca baja de
   lo legible; lo accesorio se va cuando la caja se estrecha. */
.mv-boletines { max-width: 51.25rem; }
.mv-boletines .mv-w-fecha { width: 6.5rem; }
.mv-boletines .mv-w-n { width: 6.5rem; }
.mv-boletines .mv-w-abrir { width: 6.875rem; }
.mv-boletines .mv-w-est { width: auto; }
.mv-tabla-simple .mv-w-filtro { width: 34%; }
@container (max-width: 760px) {
  .mv-tabla-simple .mv-w-filtro, .mv-tabla-simple .mv-c-filtro, .mv-tabla-simple .mv-w-cond, .mv-tabla-simple .mv-c-cond { display: none; }
  .mv-tabla-simple .mv-w-nombre { width: auto; }
}
@container (max-width: 680px) { .mv-boletines .mv-w-bol, .mv-boletines .mv-c-bol, .mv-boletines .mv-w-anot, .mv-boletines .mv-c-anot { display: none; } }
@container (max-width: 560px) { .mv-tabla-simple .mv-w-creado, .mv-tabla-simple .mv-c-creado { display: none; } }
@container (max-width: 480px) {
  .mv-boletines .mv-w-abrir, .mv-boletines .mv-c-abrir,
  .mv-tabla-informe .mv-w-logo, .mv-tabla-informe .mv-c-logo { display: none; }
}
.mv-eventos .mv-w-fecha { width: 6.25rem; }
@container (max-width: 480px) { .mv-eventos .mv-w-ev { width: 34%; } }

/* ---------- Lista: anchos por defecto (se cambian arrastrando el borde del título y se recuerdan) ---------- */
/* Fechas: primero la concesión (la que manda), luego la publicación; la solicitud, la última y algo más estrecha. */
.mv-lista .mv-w-sel { width: 2.125rem; }
.mv-lista .mv-w-logo { width: 3.125rem; }
/* Expediente: primera columna de datos, nunca por debajo de 100 px. */
.mv-lista .mv-w-exp { width: 6.25rem; }
.mv-lista .mv-w-fcon { width: 5.875rem; }
.mv-lista .mv-w-fpub { width: 5.5rem; }
.mv-lista .mv-w-fsol { width: 5.25rem; }
.mv-lista .mv-w-bol { width: 4.75rem; }
.mv-lista .mv-w-cla { width: 4.25rem; }
.mv-lista .mv-w-den { width: 19%; }
/* Patentes (01/11/2026, como España): el título se lleva el sitio que queda. */
.mv-patentes .mv-w-exp { width: 7.25rem; }
.mv-patentes .mv-w-mod { width: 8.5rem; }
.mv-patentes .mv-w-den { width: 24%; }
.mv-patentes .mv-w-tit { width: 15%; }
.mv-patentes .mv-w-anot { width: 11rem; }
.mv-patentes :is(.mv-w-fcon, .mv-w-fpub, .mv-w-fsol, .mv-w-bol) { width: 5.75rem; }
.mv-patentes .mv-w-inv { width: 12%; }
.mv-patentes .mv-w-cip { width: 6.5rem; }
.mv-patentes .mv-w-est { width: 7.5rem; }
.mv-lista .mv-w-pais { width: 3.125rem; }
.mv-lista .mv-w-prov { width: 6rem; }
.mv-lista .mv-w-loc { width: 6.25rem; }
.mv-lista .mv-w-est { width: 8.25rem; }
.mv-lista .mv-w-tipo { width: 6.75rem; }
/* Empresa (España): ¿la sociedad titular sigue activa? (BORME, por Messer). */
.mv-lista .mv-w-emp { width: 5.75rem; }
.mv-emp { font-size: 12px; }
.mv-emp-act { color: var(--ok); }
.mv-emp-ext { color: var(--error); font-weight: 600; }
.mv-emp-fuente { font-size: 12px; color: var(--texto-suave); }
.mv-lista td.mv-c-fcon { font-weight: 600; }
/* ¿Activa hoy? (España, 30/10/2026): una palabra que cabe siempre; la fecha, en el title. */
.mv-lista .mv-w-vida { width: 6.5rem; }
.mv-vida { font-size: 12px; font-weight: 600; white-space: nowrap; cursor: help; }
.mv-vida-si { color: var(--ok); }
.mv-vida-vence, .mv-vida-gracia { color: var(--aviso); }
.mv-vida-no { color: var(--error); }
.mv-vida-tramite { color: var(--acento); }
.mv-vida-sin_dato { color: var(--texto-suave); }
/* En trámite con un suspenso del BOPI sin resolver (06/11/2026): se ve desde la lista, sin abrir la ficha. */
.mv-vida-reparo { color: var(--aviso); font-weight: 700; }
.mv-lista td.mv-c-fcon .mv-sin { font-weight: 400; }
.mv-lista td.mv-c-fsol { font-size: 13px; color: var(--texto-suave); }
.mv-con-no { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mv-lista .mv-w-pts { width: 4rem; }
.mv-lista .mv-w-pq { width: 18%; }
.mv-lista .mv-w-pdf { width: 2.75rem; }
.mv-lista thead th { padding-right: 10px; }
.mv-lista td.mv-c-pdf, .mv-lista th.mv-c-pdf { padding: 0 4px; text-align: center; }
.mv-pdf { font-size: 11px; font-weight: 600; letter-spacing: .02em; }

/* Unión Europea (logo y boletín de más, y provincia y localidad como en España): algo más estrechas, para que a 1536 px
   de ventana (PC al 125 %) se vean todas. Antes que las reglas de abajo: con :where pesan igual y las de abajo mandan. */
.mv-lista:where(.mv-con-logo) .mv-w-den { width: 15%; }
.mv-lista:where(.mv-con-logo) .mv-w-prov { width: 5.25rem; }
.mv-lista:where(.mv-con-logo) .mv-w-loc { width: 5.75rem; }
.mv-lista:where(.mv-con-logo) .mv-w-est { width: 7.75rem; }
.mv-lista:where(.mv-con-logo) .mv-w-tipo { width: 6rem; }

/* Columnas que se van cuando la tabla se estrecha (1920 → 800 px sin scroll); debajo, scroll de lado.
   A 1536 px de ventana (caja de unos 1485 px) se ven todas, en España y en la UE. La fecha de concesión no se va nunca;
   la de solicitud, la primera de las fechas. */
@container (max-width: 1440px) { .mv-lista.mv-con-logo .mv-w-tipo, .mv-lista.mv-con-logo .mv-c-tipo { display: none; } }
@container (max-width: 1360px) { .mv-lista.mv-con-logo .mv-w-fsol, .mv-lista.mv-con-logo .mv-c-fsol { display: none; } }
@container (max-width: 1300px) { .mv-lista.mv-con-logo .mv-w-loc, .mv-lista.mv-con-logo .mv-c-loc, .mv-lista.mv-con-logo .mv-w-bol, .mv-lista.mv-con-logo .mv-c-bol { display: none; } }
@container (max-width: 1460px) { .mv-lista .mv-w-tipo, .mv-lista .mv-c-tipo { display: none; } }
@container (max-width: 1340px) { .mv-lista .mv-w-fsol, .mv-lista .mv-c-fsol { display: none; } }
@container (max-width: 1220px) { .mv-lista .mv-w-loc, .mv-lista .mv-c-loc, .mv-lista .mv-w-bol, .mv-lista .mv-c-bol { display: none; } }
@container (max-width: 1120px) { .mv-lista .mv-w-rep, .mv-lista .mv-c-rep { display: none; } .mv-lista .mv-w-den { width: 24%; } .mv-lista.mv-con-logo .mv-w-den { width: 20%; } }
@container (max-width: 1040px) { .mv-lista .mv-w-cla, .mv-lista .mv-c-cla { display: none; } }
@container (max-width: 960px) { .mv-lista .mv-w-fpub, .mv-lista .mv-c-fpub { display: none; } }
@container (max-width: 900px) { .mv-lista .mv-w-prov, .mv-lista .mv-c-prov { display: none; } .mv-lista .mv-w-den { width: 30%; } }
@container (max-width: 820px) { .mv-lista .mv-w-pais, .mv-lista .mv-c-pais { display: none; } }
@container (max-width: 720px) { .mv-lista .mv-w-est, .mv-lista .mv-c-est { display: none; } }
/* Con «parecidos» hay dos columnas más: otras se van antes. */
@container (max-width: 1900px) { .mv-con-parecidos .mv-w-tipo, .mv-con-parecidos .mv-c-tipo, .mv-con-parecidos .mv-w-loc, .mv-con-parecidos .mv-c-loc, .mv-con-parecidos .mv-w-bol, .mv-con-parecidos .mv-c-bol { display: none; } }
@container (max-width: 1700px) { .mv-con-parecidos .mv-w-rep, .mv-con-parecidos .mv-c-rep, .mv-con-parecidos .mv-w-fsol, .mv-con-parecidos .mv-c-fsol { display: none; } }
@container (max-width: 1300px) { .mv-con-parecidos .mv-w-cla, .mv-con-parecidos .mv-c-cla { display: none; } }
@container (max-width: 1180px) { .mv-con-parecidos :is(.mv-w-fpub, .mv-c-fpub, .mv-w-prov, .mv-c-prov, .mv-w-pais, .mv-c-pais) { display: none; } }
@container (max-width: 950px) { .mv-con-parecidos :is(.mv-w-est, .mv-c-est) { display: none; } }
@container (max-width: 820px) { .mv-con-parecidos :is(.mv-w-logo, .mv-c-logo) { display: none; } }
@container (max-width: 720px) { .mv-con-parecidos :is(.mv-w-pdf, .mv-c-pdf) { display: none; } }
@container (max-width: 980px) { .mv-con-parecidos .mv-w-pq { width: 26%; } }

/* Títulos y fila de filtros siempre a la vista: la lista se desplaza DENTRO de su caja (vertical y de lado), así la
   cabecera queda arriba y la barra de desplazamiento lateral, siempre en pantalla. La casilla y el embudo, fijos a la
   izquierda aunque se desplace de lado. */
@media screen and (min-width: 761px) { .mv-caja:not(.mv-tarjetas) { max-height: var(--mv-alto-caja, max(360px, calc(100vh - 230px))); overflow: auto; } }
.mv-lista thead { position: sticky; top: 0; z-index: 3; background: var(--fondo-suave); }
.mv-lista thead th { position: relative; }
.mv-lista th.mv-c-sel, .mv-lista td.mv-c-sel { position: sticky; left: 0; z-index: 1; background: var(--fondo); }
.mv-lista thead th.mv-c-sel { background: var(--fondo-suave); }
/* El icono de «Columnas» en la esquina derecha de los títulos (29/10/2026): se ve sin buscarlo. */
.mv-cols-icono { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--fondo); color: var(--acento); cursor: pointer; }
.mv-cols-icono:hover { background: var(--acento-suave); }
.mv-cols-icono:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .mv-cols-icono { width: calc(100% - 2px); height: 44px; left: 1px; transform: translateY(-50%); }
}
.mv-lista tbody tr.mv-marcada td.mv-c-sel { background: var(--acento-suave); }
.mv-cols-caja { width: 15rem; }
.mv-cols-caja .mv-op { display: flex; padding: 3px 4px; }
.mv-cols-caja .mv-op-nocabe { color: var(--texto-suave); cursor: default; }
.mv-normal[hidden] { display: none; }

/* Rejilla en las demás tablas (Vigilancia, Empresas): lo mismo que la Lista. Barra propia (↺, Columnas, Lista|Tarjetas),
   columnas que se ensanchan y orden por columna pulsando el título (asc → desc → normal). */
.mv-rejilla-barra { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.mv-rejilla-barra .mv-menu-caja { left: auto; right: 0; }
.rx-gen thead th:not(.col-sel) { cursor: pointer; }
.rx-gen thead th[aria-sort=ascending], .rx-gen thead th[aria-sort=descending] { color: var(--acento); }
.rx-gen thead th[aria-sort=ascending]::after { content: " ▴"; }
.rx-gen thead th[aria-sort=descending]::after { content: " ▾"; }
.mv-caja.mv-tarjetas > .rx-gen { display: block; min-width: 0 !important; }
/* Tabla en tarjetas (elegidas a mano) o apilada (teléfono, caja estrecha): el JS le pone .rx-apilada. Los títulos no se
   esconden nunca: quedan arriba como una tira de botones para ordenar (pulsar = ascendente → descendente → normal),
   de 44 px con el dedo. Sin la casilla ni las columnas sin título (Acciones). */
.mv-caja > .rx-gen.rx-apilada > thead { display: block; width: auto; margin: 0 0 8px; border: 0; background: none; }
.mv-caja > .rx-gen.rx-apilada > thead > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; height: auto; padding: 6px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-suave); }
.mv-caja > .rx-gen.rx-apilada > thead > tr::before { content: "Ordenar por"; font-size: 12px; color: var(--texto-suave); }
.mv-caja > .rx-gen.rx-apilada > thead > tr > th { position: static; display: inline-flex; align-items: center; flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; height: auto; min-height: 32px; padding: 0 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.mv-caja > .rx-gen.rx-apilada > thead > tr > th:is(.col-sel, .rx-sin-titulo, [hidden]) { display: none; }
.mv-caja > .rx-gen.rx-apilada > thead .mv-asa { display: none; }
.mv-caja.mv-tarjetas > .rx-gen > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.mv-caja.mv-tarjetas > .rx-gen > tbody > tr { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); min-width: 0; }
/* Sin el flex ni el margen de las tablas apiladas (.tabla-apila): en columna, un «flex: 1 1 100%» o un «flex-wrap» sacarían
   las celdas de la tarjeta. */
.mv-caja.mv-tarjetas > .rx-gen > tbody > tr > td { display: block; flex: none; width: auto; max-width: 100%; height: auto; margin: 0; padding: 0; border: 0; text-align: left; box-shadow: none; white-space: normal; overflow-wrap: anywhere; }
/* En la tarjeta el texto va a capo (nada cortado): también el enlace (nombre de la empresa, la marca…). */
.mv-caja.mv-tarjetas > .rx-gen > tbody > tr > td a { white-space: normal; }
.mv-caja.mv-tarjetas > .rx-gen > tbody > tr > td:not(.col-sel)[data-etq]::before { content: attr(data-etq) ": "; color: var(--texto-suave); font-size: 12px; }
@media (max-width: 760px) {
  /* Teléfono: cada fila ya es una tarjeta (Lista y Tarjetas se ven igual: sin el botón); los títulos, en su tira. */
  .rx-gen > colgroup, .rx-gen .mv-asa, .mv-rejilla-barra :is(.mv-vistas, .mv-normal) { display: none; }
}
@media (pointer: coarse), (max-width: 1023px) { .mv-caja > .rx-gen.rx-apilada > thead > tr > th { min-height: 44px; } }

/* Fila de filtros bajo los títulos, como en Excel. */
.mv-fx-form { margin: 0; }
.mv-lista .mv-filtros td { height: auto; padding: 3px; background: var(--fondo-suave); border-bottom: 1px solid var(--borde); }
.mv-lista .mv-filtros td.mv-c-sel { padding: 3px 0; text-align: center; }
.mv-filtros .mv-fx { width: 100%; height: 26px; padding: 0 6px; font-size: 12px; font-weight: 400; }
.mv-filtros select.mv-fx { padding: 0 2px; }
.mv-filtros .mv-fx::placeholder { color: var(--texto-suave); opacity: .7; }
.mv-filtros .mv-fx.mv-fx-activo { border-color: var(--acento); background: var(--acento-suave); color: var(--texto); font-weight: 600; }
.mv-fx-ir { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: #fff; color: var(--texto-suave); cursor: pointer; vertical-align: middle; }
.mv-fx-ir:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .mv-fx-ir:hover { color: var(--acento); border-color: var(--acento); } }

/* Asa para ensanchar: el borde derecho de cada título. */
.mv-asa { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; user-select: none; -webkit-user-select: none; z-index: 2; }
.mv-asa::after { content: ""; position: absolute; top: 7px; bottom: 7px; right: 3px; width: 2px; border-radius: 1px; background: var(--borde); transition: background-color 120ms ease; }
@media (hover: hover) and (pointer: fine) { .mv-asa:hover::after { background: var(--acento); } }
.mv-asa.activa::after { background: var(--acento); }
html.mv-arrastrando, html.mv-arrastrando * { cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important; }
/* Dedo (teléfono, tableta o pantalla sin ratón): filtros, embudo, títulos para ordenar y «Cambiar», de 44 px. */
@media (pointer: coarse), (max-width: 1023px) {
  .mv-filtros .mv-fx, .mv-fx-ir { height: 44px; }
  .mv-tabla thead th a.mv-orden, .mv-caja .mv-tabla thead th a.mv-orden { display: block; padding: 12px 0; line-height: 20px; }
  .mv-cambiar { display: inline-block; padding-block: 12px; line-height: 20px; }
  .mv-menu-lista a, .mv-menu-pie { min-height: 44px; padding-block: 12px; line-height: 20px; }
  .mv-cols-caja .mv-op { min-height: 44px; }
  .mv-fx-ir { width: 100%; }
  .mv-asa { width: 18px; }
  .mv-asa::after { right: 8px; }
  .mv-pdf { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Tarjetas: elegidas a mano, o solas en pantallas estrechas. */
.mv-caja.mv-tarjetas { border: 0; overflow: visible; }
.mv-caja.mv-tarjetas .mv-tabla, .mv-caja.mv-tarjetas tbody { display: block; }
.mv-caja.mv-tarjetas colgroup, .mv-caja.mv-tarjetas .mv-asa { display: none; }
/* En Tarjetas, los títulos (para ordenar) y la fila de filtros siguen arriba, en una tira propia. */
.mv-caja.mv-tarjetas thead { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 8px; border: 1px solid var(--borde); background: var(--fondo-suave); }
.mv-caja.mv-tarjetas tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.mv-caja.mv-tarjetas tbody tr { display: grid; grid-template-columns: auto 1fr auto; grid-auto-flow: row dense; align-items: center; align-content: start; gap: 2px 8px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); min-width: 0; }
.mv-caja.mv-tarjetas tbody td { display: block; height: auto; padding: 0; border: 0; min-width: 0; }
.mv-caja.mv-tarjetas tbody .mv-c-sel { grid-column: 1; grid-row: 1; }
.mv-caja.mv-tarjetas tbody .mv-c-den { grid-column: 2; grid-row: 1; font-size: 15px; }
.mv-caja.mv-tarjetas tbody .mv-c-logo { grid-column: 3; grid-row: 1 / span 2; }
.mv-caja.mv-tarjetas tbody .mv-c-exp, .mv-caja.mv-tarjetas tbody .mv-c-tit, .mv-caja.mv-tarjetas tbody .mv-c-rep, .mv-caja.mv-tarjetas tbody .mv-c-cla, .mv-caja.mv-tarjetas tbody .mv-c-pq { grid-column: 2 / -1; color: var(--texto-suave); font-size: 12px; }
.mv-caja.mv-tarjetas tbody .mv-c-fsol, .mv-caja.mv-tarjetas tbody .mv-c-fpub { display: none; }
/* La concesión sí: «Concedida el 16/10/2026» o «Aún no concedida». */
.mv-caja.mv-tarjetas tbody .mv-c-fcon { grid-column: 2 / -1; font-size: 12px; text-align: left; }
.mv-caja.mv-tarjetas tbody .mv-con-fecha::before { content: "Concedida el "; font-weight: 400; }
.mv-caja.mv-tarjetas tbody .mv-c-fcon .mv-sin { display: none; }
.mv-caja.mv-tarjetas tbody .mv-con-no { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: var(--texto-suave); font-weight: 400; }
.mv-caja.mv-tarjetas tbody .mv-c-cla:not(:empty)::before { content: "Clases "; }
.mv-caja.mv-tarjetas tbody .mv-c-pts { grid-column: 1; grid-row: 2; }
.mv-caja.mv-tarjetas tbody .mv-c-rep, .mv-caja.mv-tarjetas tbody .mv-c-tit, .mv-caja.mv-tarjetas tbody .mv-c-cla { display: block; }
.mv-caja.mv-tarjetas .mv-tabla { min-width: 0 !important; }
.mv-caja.mv-tarjetas tbody .mv-c-pais, .mv-caja.mv-tarjetas tbody .mv-c-prov, .mv-caja.mv-tarjetas tbody .mv-c-loc, .mv-caja.mv-tarjetas tbody .mv-c-tipo, .mv-caja.mv-tarjetas tbody .mv-c-bol { display: none; }
.mv-caja.mv-tarjetas tbody .mv-c-est, .mv-caja.mv-tarjetas tbody .mv-c-pdf { display: block; grid-column: 2 / -1; font-size: 12px; text-align: left; }
@container (max-width: 640px) {
  .mv-caja .mv-tabla { display: block; min-width: 0 !important; }
  .mv-caja .mv-tabla colgroup, .mv-caja .mv-asa { display: none; }
  /* Teléfono: los títulos (para ordenar) y los filtros de columna siguen arriba, en parejas «título | filtro»
     (el JS pone el orden de cada celda; sin JS salen primero los títulos y luego los filtros). El embudo, al final. */
  .mv-caja .mv-tabla thead { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 112px) minmax(120px, 1fr)); align-items: center; gap: 4px 6px; margin-bottom: 8px; padding: 6px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-suave); }
  .mv-caja .mv-tabla thead tr { display: contents; }
  .mv-caja .mv-tabla thead :is(th, td) { display: none; height: auto; padding: 0; border: 0; background: none; min-width: 0; text-align: left; }
  /* Solo lo que se ve en la tarjeta; el resto, en «Más filtros». */
  .mv-caja .mv-tabla thead :is(th, td):is(.mv-c-exp, .mv-c-fcon, .mv-c-den, .mv-c-tit, .mv-c-est, .mv-c-pts) { display: block; }
  .mv-caja .mv-tabla thead th a.mv-orden { padding: 12px 0; line-height: 20px; }
  .mv-caja .mv-tabla thead .mv-filtros td.mv-c-sel { display: block; order: 999; grid-column: 1 / -1; text-align: right; }
  .mv-caja .mv-tabla thead .mv-filtros td.mv-c-sel .mv-fx-ir { width: 100%; }
  /* Cada fila, una tarjeta; todas de la misma altura. */
  .mv-caja .mv-tabla tbody { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
  .mv-caja .mv-tabla tbody tr { display: grid; grid-template-columns: auto 1fr auto; align-content: start; gap: 2px 8px; padding: 8px 6px; border-bottom: 1px solid var(--gris-suave); }
  .mv-caja .mv-tabla tbody td { display: block; height: auto; padding: 0; border: 0; }
  .mv-caja .mv-tabla tbody .mv-c-sel { grid-column: 1; grid-row: 1; }
  .mv-caja .mv-tabla tbody .mv-c-den { grid-column: 2; grid-row: 1; }
  .mv-caja .mv-tabla tbody .mv-c-logo { grid-column: 3; grid-row: 1 / span 2; }
  .mv-caja .mv-tabla tbody :is(.mv-c-exp, .mv-c-tit, .mv-c-pq) { display: block; grid-column: 2 / -1; font-size: 12px; color: var(--texto-suave); }
  .mv-caja .mv-tabla tbody .mv-c-pts { grid-column: 1; grid-row: 2; }
  .mv-caja .mv-tabla tbody :is(.mv-c-fsol, .mv-c-fpub, .mv-c-cla, .mv-c-rep, .mv-c-pais, .mv-c-prov, .mv-c-loc, .mv-c-tipo, .mv-c-bol) { display: none; }
  .mv-caja .mv-tabla tbody .mv-c-fcon { display: block; grid-column: 2 / -1; font-size: 12px; text-align: left; }
  .mv-caja .mv-tabla tbody .mv-con-fecha::before { content: "Concedida el "; font-weight: 400; }
  .mv-caja .mv-tabla tbody .mv-c-fcon .mv-sin { display: none; }
  .mv-caja .mv-tabla tbody .mv-con-no { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: var(--texto-suave); font-weight: 400; }
  .mv-caja .mv-tabla tbody :is(.mv-c-est, .mv-c-pdf) { display: block; grid-column: 2 / -1; font-size: 12px; text-align: left; }
}

.mv-pie-lista { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; font-size: 13px; }
.mv-paginacion { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.mv-paginacion .btn { height: 30px; }
.mv-vacia { max-width: 620px; padding: 24px; margin: 8px 0; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--fondo-suave); }
.mv-vacia p { margin: 0 0 8px; }
.mv-vacia ul { margin: 0 0 12px; padding-left: 18px; color: var(--texto-suave); }
.mv-vacia code { font-family: var(--mono); background: var(--fondo); padding: 0 4px; border-radius: 3px; }

/* ---------- Ficha ---------- */
.mv-nav-ficha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0 8px; }
.mv-nav-ficha .suave { padding: 0 6px; }
/* Ficha mista (01/11/2026, come Almogarén): una colonna, testata → situazione di oggi → dati in righe → prodotti → storico. */
.mv-ficha-cuerpo { display: grid; gap: 14px; max-width: 1280px; }
.mv-testata { display: flex; gap: 20px; align-items: flex-start; }
.mv-logo-grande { width: 160px; height: 160px; object-fit: contain; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; padding: 6px; flex: none; }
.mv-den { font-size: 24px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.mv-ficha-nombre p.mv-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mv-seccion.mv-sit { border-left-width: 5px; }
.mv-seccion.mv-sit-ok { border-left-color: var(--ok); background: var(--ok-suave); }
.mv-seccion.mv-sit-atencion { border-left-color: var(--aviso); background: var(--aviso-suave); }
.mv-seccion.mv-sit-problema { border-left-color: var(--error); background: var(--error-suave); }
.mv-sit-frase { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.mv-sit .mv-sit-etq { background: var(--fondo); }
.mv-filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 0; }
.mv-dato { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--borde); min-width: 0; }
.mv-dato dt { color: var(--texto-suave); }
.mv-dato dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .mv-filas { grid-template-columns: 1fr; } .mv-dato { grid-template-columns: minmax(0, 8em) minmax(0, 1fr); } }
.mv-seccion { min-width: 0; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.mv-seccion-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mv-seccion-cab h2 { margin-right: auto; }
.mv-seccion-cab form { margin: 0; }
.mv-ficha-nombre { min-width: 0; }
.mv-ficha-nombre p { margin: 0 0 4px; }
.mv-ficha-nombre p.mv-concesion { margin: 2px 0 6px; font-size: 16px; }
.mv-con-si { color: var(--ok); }
.mv-con-si .mv-con-etq { font-weight: 600; }
.mv-con-si b { font-weight: 700; }
.mv-con-no-ficha { color: var(--texto-suave); font-weight: 600; }
/* «Situación hoy en la OEPM/EUIPO» (01/11/2026): el borde y la etiqueta dicen la gravedad. */
.mv-sit-etq { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.mv-sit-ok .mv-sit-etq { background: var(--ok-suave); color: var(--ok); }
.mv-sit-atencion .mv-sit-etq { background: var(--aviso-suave); color: var(--aviso); }
.mv-sit-problema .mv-sit-etq { background: var(--error-suave); color: var(--error); }
.mv-sit-sub { margin: 10px 0 4px; font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.mv-sit-lista { margin: 0; padding-left: 18px; }
.mv-sit-lista li { margin: 2px 0; }
.mv-sit-motivo summary, .mv-sit-hitos summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.mv-sit-motivo p { margin: 4px 0 8px; }
.mv-sit-hitos { margin-top: 8px; }
.mv-ancho { grid-column: 1 / -1; }
.mv-productos { display: grid; gap: 4px; }
:where(.mv-idioma) summary { cursor: pointer; font-weight: 600; font-size: 12px; padding: 2px 0; }
.mv-idioma p, .mv-texto-largo { margin: 4px 0 8px; white-space: pre-line; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; }
.mv-eventos td { white-space: nowrap; }
/* 01/11/2026 (Matteo: «le scritte escono e non si può leggere»): el detalle entero, en varias líneas. */
.mv-eventos td.mv-ev-detalle { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; height: auto; padding-top: 6px; padding-bottom: 6px; line-height: 1.4; }

/* ---------- Informes ---------- */
.mv-informe-cab { margin: 4px 0 10px; }
.mv-informe-cab h2 { font-size: 17px; }
.mv-informe-cab p { margin: 2px 0; }
.mv-tabla-simple tbody tr[data-href] { cursor: pointer; }
.mv-tabla-simple tbody tr:hover td { background: var(--fondo-hover); }

/* Dedo: los botones de las filas (Borrar, Ver lista) de 44 px y la fila a su medida, sin cortarlos. */
@media (max-width: 1023px), (pointer: coarse) {
  .mv-tabla-simple td { height: 48px; }
  .mv-acc .btn { height: 44px; padding: 0 10px; }
  .mv-pest, .mv-subpest, .mv-tam, .mv-vista { min-height: 44px; }
}
@media (max-width: 640px) {
  .mv-titulo { flex-wrap: wrap; }
  .mv-fuente { margin-left: 0; }
  .mv-herramientas .mv-empuje { display: none; }
  .mv-testata { flex-direction: column; }
}

/* ---------- Impresión ---------- */
@media print {
  .cabecera, .pie, .mv-pestanas, .mv-noimprimir, .mv-c-sel, .mv-w-sel, .mv-resumen .mv-cambiar { display: none !important; }
  .principal { padding: 0; }
  .mv-modulo { max-width: none; }
  .tabla-caja, .mv-caja { border: 0; overflow: visible !important; max-height: none !important; }
  .tabla th, .mv-lista thead { position: static; }
  .tabla th, .tabla td { white-space: normal; height: auto; padding: 3px 4px; font-size: 10px; }
  /* En papel vuelven Titular, Representante y Clases (salvo las quitadas en «Columnas»: [hidden] manda). La <col>
     sigue a sus celdas, así la colgroup tiene tantas columnas como cada fila. */
  .mv-tabla :is(th, td):is(.mv-c-rep, .mv-c-cla, .mv-c-tit):not([hidden]) { display: table-cell !important; }
  .mv-tabla col:is(.mv-w-rep, .mv-w-cla, .mv-w-tit):not([hidden]) { display: table-column !important; }
  .mv-tabla [hidden] { display: none !important; }
  .mv-filtros, .mv-asa, .mv-c-pdf, .mv-tabla col.mv-w-pdf { display: none !important; }
  /* En papel, cada columna a la medida de su texto (no los anchos de la pantalla ni los puestos a mano). */
  .mv-tabla { min-width: 0 !important; table-layout: auto; }
  .mv-lista col { width: auto !important; }
  .mv-tabla tr { break-inside: avoid; }
  body.mv-solo-sel .mv-tabla tbody tr:not(.mv-marcada) { display: none; }
  .mv-tabla tbody tr.mv-marcada td { background: none; }
  a { color: inherit; text-decoration: none; }
  @page { margin: 12mm; }
}

/* Vista previa del PDF (29/10/2026): mismo esquema que Almogarén (vista-pdf.js), con el estilo de Marcavista. */
.mv-vista-pdf { width: min(1100px, 94vw); height: 92vh; max-height: 92vh; padding: 0; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); overflow: hidden; color: var(--texto); background: var(--fondo); }
.mv-vista-pdf[open] { display: flex; flex-direction: column; }
.mv-vista-pdf::backdrop { background: rgb(0 0 0 / .55); }
.mv-vista-pdf__barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--borde); background: var(--fondo-suave); }
.mv-vista-pdf__titulo { flex: 1 1 200px; margin: 0; font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-vista-pdf__marco { position: relative; flex: 1; background: var(--gris-suave); }
.mv-vista-pdf__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--fondo); }
.mv-vista-pdf__espera { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 16px; text-align: center; color: var(--texto-suave); }
.mv-vista-pdf__espera p { margin: 0; max-width: 46ch; }
.mv-vista-pdf [hidden] { display: none !important; }
/* Una página de aviso de Marcavista dentro de la ventana: sin cabecera ni pie (ya están detrás). */
.mv-en-marco .cabecera, .mv-en-marco .pie { display: none !important; }
@media (max-width: 640px) {
  .mv-vista-pdf { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; border: 0; border-radius: 0; }
  .mv-vista-pdf__barra .btn { min-height: 44px; }
  .mv-vista-pdf__titulo { flex-basis: 100%; }
}
@media print { .mv-vista-pdf { display: none !important; } }


/* ---------- Filtros rápidos ---------- */
.mv-rq-modo { display: inline-flex; flex: none; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); overflow: hidden; }
.mv-rq-op { height: 30px; padding: 0 10px; border: 0; background: var(--fondo); color: var(--texto-suave); cursor: pointer; font-size: 12px; white-space: nowrap; }
.mv-rq-op + .mv-rq-op { border-left: 1px solid var(--borde); }
.mv-rq-op.activa { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.mv-rq-caja { margin: 0 0 6px; padding: 6px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-suave); min-width: 0; }
.mv-rq-caja[hidden] { display: none; }
.mv-rq-form { display: flex; gap: 6px; align-items: center; margin: 0; min-width: 0; }
.mv-rq-form input[type=search] { flex: 1 1 auto; min-width: 0; width: 100%; height: var(--alto-control); font-size: 14px; }
.mv-rq-entendido { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 12px; min-width: 0; }
.mv-rq-tit { color: var(--texto-suave); }
.mv-rq-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 4px 1px 8px; border: 1px solid #b9cff0; border-radius: 10px; background: var(--acento-suave); color: #17427f; overflow-wrap: anywhere; }
.mv-rq-chip:hover { text-decoration: none; border-color: var(--acento); }
.mv-rq-fijo { padding-right: 8px; }
.mv-rq-resto { background: var(--fondo); border-color: var(--borde-fuerte); color: var(--texto); }
.mv-rq-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 13px; line-height: 1; color: var(--texto-suave); }
.mv-rq-chip:hover .mv-rq-x { background: var(--fondo); color: var(--error); }
.mv-rq-avisos { margin: 6px 0 0; padding: 4px 8px 4px 24px; border: 1px solid #f0d9a8; border-radius: var(--radio); background: var(--aviso-suave, #fff7e6); color: var(--aviso, #8a5a00); font-size: 12px; }
@media (max-width: 1023px), (pointer: coarse) {
  .mv-rq-op { min-height: 44px; }
  .mv-rq-chip { min-height: 44px; padding-left: 12px; }
  .mv-rq-x { width: 32px; height: 32px; }
  .mv-rq-form input[type=search] { height: 44px; }
}
@media (max-width: 640px) {
  .mv-rq-form { flex-wrap: wrap; }
  .mv-rq-form input[type=search] { flex-basis: 100%; }
}
@media print { .mv-rq-modo, .mv-rq-caja { display: none !important; } }


/* ---------- Período (Lista) ---------- */
.mv-fila-periodo { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 6px; min-width: 0; }
.mv-periodo { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; margin: 0; min-width: 0; font-size: 12px; }
.mv-periodo-tit { color: var(--texto-suave); font-weight: 600; }
.mv-periodo-campo { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-suave); min-width: 0; }
.mv-periodo-campo input { height: 30px; padding: 0 4px; font-size: 12px; max-width: 100%; }
.mv-periodo-mes input { width: 9.5rem; }
.mv-periodo .btn { height: 30px; }
.mv-periodo-atajo { display: inline-flex; align-items: center; height: 30px; padding: 0 8px; border: 1px solid var(--borde); border-radius: var(--radio); color: var(--texto); white-space: nowrap; }
.mv-periodo-atajo:hover { background: var(--fondo-hover); text-decoration: none; }
.mv-periodo-atajo.activa { background: var(--acento-suave); border-color: #b9cff0; color: var(--acento); font-weight: 600; }
.mv-fila-periodo .mv-rq-modo { margin-left: auto; }
@media (max-width: 1023px), (pointer: coarse) {
  .mv-periodo-campo input, .mv-periodo .btn, .mv-periodo-atajo { height: 44px; min-height: 44px; }
}
@media (max-width: 640px) {
  .mv-fila-periodo .mv-rq-modo { margin-left: 0; }
  .mv-periodo-campo { flex: 1 1 9rem; }
  .mv-periodo-campo input { flex: 1 1 auto; width: 100%; }
}
/* Calendario: «Todo el mes» en la Lista. */
.cal-mes-entero { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; font-size: 12px; }
.cal-barra .mv-rq-modo { margin-left: auto; }

/* ---------- Vista previa de imprimir / descargar todo ---------- */
.mv-previa { max-width: 760px; padding: 12px 0; }
.mv-previa-cifra { font-size: 20px; margin: 0 0 4px; }
.mv-previa-acc { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.mv-previa-sub { font-size: 14px; margin: 16px 0 6px; }
.mv-meses { display: grid; gap: 4px; }
.mv-meses-anio { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mv-meses-num { flex: none; width: 3rem; font-weight: 600; color: var(--texto-suave); }
.mv-meses-fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; flex: 1 1 auto; min-width: 0; }
.mv-meses-trozos { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
.mv-mes { display: flex; align-items: center; justify-content: center; height: 30px; border: 1px solid var(--borde); border-radius: var(--radio); font-size: 12px; white-space: nowrap; }
a.mv-mes:hover { background: var(--fondo-hover); text-decoration: none; }
.mv-mes-fuera { border-style: dashed; color: var(--borde-fuerte); }
@media (max-width: 1023px), (pointer: coarse) { .mv-mes { height: 44px; } }
@media (max-width: 640px) {
  .mv-meses-anio { align-items: flex-start; }
  .mv-meses-fila { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Hoja para imprimir ---------- */
.mv-hoja-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.mv-hoja-tit { font-size: 16px; margin: 0 0 2px; }
.mv-hoja-sub { font-size: 12px; color: var(--texto-suave); margin: 0 0 8px; }
.mv-hoja-tabla { width: 100%; border-collapse: collapse; font-size: 11px; }
.mv-hoja-tabla th, .mv-hoja-tabla td { padding: 2px 4px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.mv-hoja-tabla th { background: var(--fondo-suave); font-weight: 600; white-space: nowrap; overflow-wrap: normal; }
.mv-hoja-tabla .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media screen and (max-width: 760px) { .mv-hoja-tabla { display: block; overflow-x: auto; } }
@page mv-apaisada { size: A4 landscape; margin: 10mm; }
@media print {
  .mv-hoja { page: mv-apaisada; }
  .mv-hoja-tabla { font-size: 9px; }
  .mv-hoja-tabla thead { display: table-header-group; }
  .mv-hoja-tabla tr { break-inside: avoid; }
}


.aviso-pronto { background: var(--aviso-suave); border-color: var(--aviso); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caja-enlace { display: block; color: inherit; text-decoration: none; }
.caja-enlace:hover { background: var(--fondo-hover); }
.caja-activa { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.pastilla { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.pastilla-prueba { background: var(--acento-suave); color: var(--acento); }
.pastilla-pagada { background: var(--ok-suave); color: var(--ok); }
.pastilla-pronto { background: var(--aviso-suave); color: var(--texto); border-color: var(--aviso); }
.pastilla-caducada, .pastilla-bloqueada { background: var(--error-suave); color: var(--error); }
.nueva-empresa { margin-bottom: 14px; }
.nueva-empresa > summary { list-style: none; display: inline-flex; cursor: pointer; }
.nueva-empresa > summary::-webkit-details-marker { display: none; }
.nueva-empresa[open] > summary { margin-bottom: 10px; }
.rejilla-form { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; background: var(--fondo-suave); }
.rejilla-form .ancho { grid-column: 1 / -1; }
.rejilla-form textarea { width: 100%; font: inherit; font-weight: 400; }
.rejilla-form select { width: 100%; }
.elige-meses { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.elige-meses legend { font-weight: 600; font-size: 13px; padding: 0; margin-bottom: 4px; }
.elige-meses label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
:where(.elige-meses) input { width: auto; }
.barra-filtros, .barra-bloque { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.barra-filtros input[type=search], .barra-filtros input[type=text], .barra-filtros input[type=email] { min-width: 0; flex: 1 1 200px; max-width: 320px; }
.marcar-todas { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.en-linea { display: inline; margin: 0; }
.btn-mini { height: 26px; padding: 0 10px; font-size: 12px; }
.tabla-empresas .col-sel { width: 2.25rem; }
.tabla-empresas .col-estado { width: 8.125rem; }
/* Una fecha («Desde» de Personas que entran): ancho fijo, no columna de texto que se reparte el sobrante. */
.tabla .col-vence { width: 6.5rem; }
.tabla-empresas .col-vence { width: 11.875rem; }
.tabla-empresas .col-personas { width: 5rem; }
.tabla-empresas .col-accion { width: 22rem; text-align: right; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.tabla .col-acciones { width: 11.875rem; text-align: right; }
.tabla td.col-acciones form + form { margin-left: 4px; }
@container (max-width: 900px) { .tabla-empresas .col-vence { width: 8.125rem; } .tabla-empresas .col-vence .suave { display: none; } }
@container (max-width: 760px) { .tabla-empresas .col-modulos { display: none; } }
@container (max-width: 640px) { .tabla-empresas .col-personas { display: none; } }
/* Caja estrecha (teléfono): cada fila, una tarjeta; lo que dice qué es la fila, en su propia línea entera. */
@container (max-width: 560px) {
  .tabla-apila thead, .tabla-apila > colgroup { display: none; }
  .tabla-apila, .tabla-apila tbody { display: block; }
  .tabla-apila tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px; border-bottom: 1px solid var(--gris-suave); }
  .tabla-apila tbody tr:last-child { border-bottom: 0; }
  .tabla-apila td { display: block; height: auto; padding: 0; border: 0; max-width: 100%; }
  .tabla-apila td.apila-ancho { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .tabla-apila td.apila-texto { flex: 1 1 100%; white-space: normal; }
  .tabla-apila td.col-modulos { display: block; }
  .tabla-apila td.col-acciones, .tabla-apila td.col-accion { margin-left: auto; width: auto; white-space: normal; text-align: right; }
}
/* Módulos: Estado y Acciones (botones) son anchos fijos; en tarjeta antes, para que Módulo y «Qué resuelve» no bajen de 100 px.
   Mismas reglas que .tabla-apila (una sola copia, en apilar()), solo que desde 720 px de caja. */
@container (max-width: 720px) {
  .tabla-modulos thead, .tabla-modulos > colgroup { display: none; }
  .tabla-modulos, .tabla-modulos tbody { display: block; }
  .tabla-modulos tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px; border-bottom: 1px solid var(--gris-suave); }
  .tabla-modulos tbody tr:last-child { border-bottom: 0; }
  .tabla-modulos td { display: block; height: auto; padding: 0; border: 0; max-width: 100%; }
  .tabla-modulos td.apila-ancho { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .tabla-modulos td.apila-texto { flex: 1 1 100%; white-space: normal; }
  .tabla-modulos td.col-modulos { display: block; }
  .tabla-modulos td.col-acciones, .tabla-modulos td.col-accion { margin-left: auto; width: auto; white-space: normal; text-align: right; }
}
.migas { margin: 0 0 4px; font-size: 13px; }
.resumen-licencia { margin: 0 0 12px; }
.acciones-licencia { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.enlace-listo p { margin: 0 0 8px; }
.copiar { display: flex; gap: 8px; margin-bottom: 6px; }
.copiar input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
.bloque-admin { margin: 0 0 18px; }
.bloque-admin > h2, .bloque-admin > summary { font-size: 15px; font-weight: 600; margin: 0 0 8px; cursor: pointer; }
.pendientes { margin: 6px 0; font-size: 13px; }
.invitar { margin-top: 8px; }
.historial { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.historial li { padding: 4px 0; border-bottom: 1px solid var(--gris-suave); }
.ajustes { margin-top: 20px; }
.ajustes > summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.error-ue { white-space: pre-wrap; font-family: var(--mono); font-size: 12px; background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px; margin: 0 0 8px; }
.incluye-modulo { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 13px; font-weight: 400; }
@media (pointer: coarse), (max-width: 1023px) {
  .btn-mini, .barra-filtros .btn, .barra-bloque .btn, .acciones-licencia .btn, .copiar .btn { min-height: 44px; }
  .marcar-todas, .elige-meses label { min-height: 44px; }
  .tabla-empresas td { height: 44px; }
}


[hidden] { display: none !important; }
.pestana-cerrada { color: var(--texto-suave); }
.tabla-modulos .col-estado { width: 11.25rem; }
.tabla-modulos .col-acciones { width: 18.125rem; }
.pestana-cerrada .candado { vertical-align: -1px; margin-right: 2px; }
.vg-contador {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  background: var(--error); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
}
.vg-pestanas { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--borde); margin: 8px 0 10px; }
.vg-pestana {
  padding: 6px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radio) var(--radio) 0 0;
  color: var(--texto-suave); margin-bottom: -1px;
}
.vg-pestana:hover { color: var(--texto); text-decoration: none; }
.vg-pestana.activa { color: var(--texto); font-weight: 600; border-color: var(--borde); background: var(--fondo); }
.vg-estado { margin-left: auto; font-size: 12px; }
.vg-progreso { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 12px; color: var(--texto-suave); }
.vg-barra { flex: 0 0 220px; height: 6px; background: var(--gris-suave); border-radius: 3px; overflow: hidden; }
.vg-barra span { display: block; height: 100%; width: 0; background: var(--acento); transition: width 200ms var(--ease-out); }
.vg-filtros select, .vg-filtros input[type=search] { max-width: 220px; }
.vg-tabla .col-sel { width: 2.5rem; }
.vg-tabla .vg-c-num { width: 8.75rem; }
.vg-tabla .vg-c-parecido { width: 22%; }
.vg-tabla .vg-c-fecha { width: 6rem; }
.vg-tabla .vg-c-plazo { width: 12.875rem; }
/* Mis marcas y «Traer»: anchos para lo corto; el nombre se lleva el resto. Por clase de columna, nunca por posición. */
.vg-mias .vg-c-ambito { width: 8.5rem; }
.vg-mias .vg-c-donde { width: 6.875rem; }
.vg-mias .vg-c-avisos { width: 7.5rem; }
.vg-traer-tabla .vg-c-num, .vg-traer-tabla .vg-c-sit { width: 9.375rem; }
/* Las columnas de texto nunca se aplastan: cuando la caja se estrecha, primero se van las accesorias (como en la Lista).
   Solo en tabla (ordenador): en el teléfono cada fila es una tarjeta con todos los datos. */
@media (min-width: 761px) {
@container (max-width: 1400px) { .vg-avisos .vg-c-cla { display: none; } }
@container (max-width: 1250px) { .vg-avisos .vg-c-fecha { display: none; } }
@container (max-width: 1100px) { .vg-avisos .vg-c-num, .vg-mias .vg-c-donde { display: none; } }
@container (max-width: 950px) { .vg-avisos .vg-c-tit, .vg-mias .vg-c-num, .vg-traer-tabla .vg-c-cla { display: none; } }
}
.vg-tabla .vg-nueva { font-weight: 600; }
.vg-tabla tr.vg-es-nuevo td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.vg-tabla tr.vg-descartado { color: var(--texto-suave); }
.vg-puntos { display: inline-block; min-width: 30px; padding: 0 4px; border-radius: 3px; text-align: center; font-weight: 600; font-size: 12px; }
.vg-puntos-alto { background: var(--error-suave); color: var(--error); }
.vg-puntos-medio { background: var(--aviso-suave); color: var(--aviso); }
.vg-puntos-bajo { background: var(--gris-suave); color: var(--texto-suave); }
.vg-plazo-pronto { color: var(--error); font-weight: 600; }
.vg-plazo-cerrado { color: var(--texto-suave); }
.vg-anadir { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-start; margin-bottom: 12px; }
.vg-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.vg-form label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.vg-form input[name=nombre] { width: 260px; }
.vg-form input[name=clases] { width: 120px; }
.vg-oficinas { border: 0; padding: 0; margin: 0; display: flex; gap: 10px; font-size: 12px; }
.vg-oficinas legend { padding: 0; margin-bottom: 2px; }
.vg-oficinas label { flex-direction: row; align-items: center; gap: 4px; }
.vg-traer { flex-basis: 100%; }
.vg-traer > summary { list-style: none; display: inline-flex; }
.vg-traer > summary::-webkit-details-marker { display: none; }
.vg-traer[open] > summary { margin-bottom: 8px; }
.vg-traer[open] { padding: 12px; border: 1px solid var(--acento); border-radius: var(--radio); background: var(--acento-suave); }
.vg-traer-paso { margin: 8px 0; }
.vg-por { display: flex; flex-wrap: wrap; gap: 4px 16px; flex-basis: 100%; margin: 0; padding: 0; border: 0; }
.vg-por label { display: flex; gap: 6px; align-items: center; min-height: 44px; cursor: pointer; }
.vg-seguir { display: flex; gap: 6px; align-items: center; }
.vg-tabla tr.vg-muerta { color: var(--texto-suave); }
.vg-seguidos { flex-basis: 100%; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.vg-datos { margin-top: 24px; border-top: 1px solid var(--borde); padding-top: 12px; }
.vg-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; margin: 8px 0 12px; max-width: 900px; }
.vg-opcion { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer; }
.vg-opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.vg-email { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
.vg-copia { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vg-modulo { max-width: 620px; margin: 32px auto; }
.vg-modulo h1 { font-size: 22px; margin: 6px 0 10px; }
.vg-modulo-texto { font-size: 15px; }
.vg-vigilada { color: var(--ok); font-weight: 600; }
.vg-tercero { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--borde); border-radius: 999px; font-size: 11px; color: var(--texto-suave); background: var(--fondo-suave); vertical-align: 1px; }
.vg-intro { margin: 0 0 10px; }
@media (max-width: 1023px), (pointer: coarse) { .vg-pestana { display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 760px) {
  .vg-tabla thead { display: none; }
  .vg-tabla, .vg-tabla tbody, .vg-tabla tr, .vg-tabla td { display: block; width: 100%; }
  /* Las celdas con ancho de columna (Número, Parecido, Plazo…) también a lo ancho de la tarjeta. */
  .vg-tabla td[class] { width: 100%; }
  .vg-tabla tr { border-bottom: 1px solid var(--borde); padding: 8px 0; }
  .vg-tabla td { border: 0; padding: 2px 4px; height: auto; white-space: normal; overflow: visible; }
  .vg-tabla td.num { text-align: left; }
  .vg-tabla td.col-sel { padding: 2px 4px; text-align: left; }
  .vg-tabla td[data-etq]::before { content: attr(data-etq) ": "; color: var(--texto-suave); }
  .vg-form input[name=nombre] { width: 100%; }
  .vg-barra { flex-basis: 120px; }
}


.sug { max-width: 720px; }
.sug-tipos { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.sug-tipos legend { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.formulario .sug-tipo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 999px; font-weight: 400; cursor: pointer; }
.formulario .sug-tipo input { width: auto; margin: 0; }
.formulario .sug-tipo { white-space: nowrap; }
.sug-tipo:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.formulario textarea { width: 100%; font: inherit; font-weight: 400; }
.sug-lista { list-style: none; padding: 0; display: grid; gap: 10px; }
.sug-lista li { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; }
.sug-lista p { margin: 6px 0 0; white-space: pre-wrap; }
.sug-estado { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--gris-suave); }
.sug-en_marcha { background: var(--aviso-suave); color: var(--aviso); }
.sug-hecha { background: var(--ok-suave); color: var(--ok); }
.sug-no { background: var(--gris-suave); color: var(--texto-suave); }
.sug-texto { white-space: pre-wrap; min-width: 240px; }
.sug-cambiar { display: flex; gap: 6px; align-items: center; }
.sug-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sug-fotos:empty { display: none; }
.sug-fotos img { width: 120px; height: 80px; object-fit: cover; border: 1px solid var(--borde); border-radius: 6px; display: block; }