/* ============================================================================
   Veleroteca — sistema de diseño (Fase 5)
   Estética técnica y marina: azules profundos de mar, neutros cálidos y un
   único acento cobre/latón para lo importante. SSR puro, CSS propio.
   ============================================================================ */

:root {
  /* Azules profundos de mar (base) */
  --mar-950: #071a27;
  --mar-900: #0b2739;
  --mar-800: #103349;
  --mar-700: #164866;
  --mar-600: #1f5f82;
  --mar-500: #2c7599;
  --mar-300: #8fb3c6;
  --mar-100: #dbe8ee;

  /* Neutros cálidos */
  --fondo: #f5f1ea;          /* papel cálido */
  --superficie: #fffdf8;     /* tarjetas */
  --superficie-2: #efe9df;   /* zonas suaves */
  --linea: #e2d9c9;          /* bordes cálidos */
  --linea-fuerte: #d2c6b1;
  --tinta: #16242c;          /* texto principal */
  --tinta-suave: #566670;    /* texto secundario */

  /* Acento cobre / latón */
  --cobre: #a9691f;
  --cobre-fuerte: #834e16;   /* para texto sobre claro (AA) */
  --cobre-tenue: #f2e3cf;    /* fondo de resalte */
  --cobre-borde: #d9b483;

  /* Estados */
  --verde: #2f7150;
  --verde-tenue: #e2efe6;
  --peligro: #a5342f;

  /* Tipografía */
  --f-titular: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Georgia, ui-serif, serif;
  --f-cuerpo: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
              sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  /* Forma */
  --radio: 10px;
  --radio-sm: 6px;
  --sombra: 0 1px 2px rgba(11, 39, 57, .06), 0 6px 20px rgba(11, 39, 57, .06);
  --sombra-sm: 0 1px 2px rgba(11, 39, 57, .08);
  --linea-agua: linear-gradient(90deg, transparent, var(--cobre-borde), transparent);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-cuerpo);
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.6;
  font-size: 16px;
  /* Cifras alineadas en todo el sitio */
  font-variant-numeric: tabular-nums;
}

.contenedor { width: min(1140px, 92%); margin-inline: auto; }

/* Enfoque visible y accesible en todos los interactivos */
:focus-visible {
  outline: 2px solid var(--cobre);
  outline-offset: 2px;
  border-radius: 3px;
}

a { color: var(--mar-600); text-decoration-color: color-mix(in srgb, var(--mar-600) 35%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--mar-800); text-decoration-color: currentColor; }

/* Salto al contenido (accesibilidad) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--mar-900); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--radio-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Tipografía --- */
h1, h2, h3, h4 { font-family: var(--f-titular); color: var(--mar-900); line-height: 1.15; font-weight: 600; letter-spacing: .01em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); margin: .2rem 0 1rem; }
h2 { font-size: 1.4rem; margin: 0 0 .6rem; }
h3 { font-size: 1.05rem; color: var(--mar-700); margin: 1.5rem 0 .5rem;
     font-family: var(--f-cuerpo); font-weight: 700; letter-spacing: .04em;
     text-transform: uppercase; font-size: .82rem; color: var(--tinta-suave); }

/* --- Cabecera --- */
.cabecera { background: var(--mar-900); color: #fff; border-bottom: 3px solid var(--cobre); }
.cabecera-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; }
.marca { color: #fff; font-family: var(--f-titular); font-weight: 600; font-size: 1.3rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .5rem; }
.marca:hover { color: #fff; text-decoration: none; }
.marca .marca-glifo { color: var(--cobre-borde); }
.nav { display: flex; gap: 1.4rem; }
.nav a { color: var(--mar-100); font-size: .95rem; text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: #fff; border-bottom-color: var(--cobre); }

main.contenedor { padding: 2rem 0 3.5rem; min-height: 62vh; }

/* --- Migas --- */
.miga { color: var(--tinta-suave); font-size: .85rem; margin-bottom: 1rem; }
.miga a { color: var(--tinta-suave); }
.miga a:hover { color: var(--mar-700); }

/* --- Botones --- */
button, .boton, .boton-sec {
  font: inherit; font-weight: 600; cursor: pointer; display: inline-flex;
  align-items: center; gap: .4rem; padding: .55rem 1.05rem; border-radius: var(--radio-sm);
  border: 1px solid transparent; text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
button, .boton { background: var(--mar-800); color: #fff; }
button:hover, .boton:hover { background: var(--mar-700); color: #fff; text-decoration: none; }
.boton-cta { background: var(--cobre); }
.boton-cta:hover { background: var(--cobre-fuerte); }
.boton-sec { background: var(--superficie); color: var(--mar-800); border-color: var(--linea-fuerte); }
.boton-sec:hover { background: var(--superficie-2); color: var(--mar-900); text-decoration: none; }

/* --- Formularios --- */
.campo { display: flex; flex-direction: column; gap: .3rem; }
label { font-size: .78rem; font-weight: 600; color: var(--tinta-suave); letter-spacing: .02em; }
input, select, textarea {
  font: inherit; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm);
  padding: .5rem .6rem; min-width: 8rem;
}
input:hover, select:hover, textarea:hover { border-color: var(--mar-300); }

/* Filtros */
.filtros {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  background: var(--superficie); padding: 1rem 1.2rem;
  border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra-sm);
  margin-bottom: 1.4rem;
}
.campo-acciones { flex-direction: row; align-items: center; gap: .5rem; margin-left: auto; }

.resumen { color: var(--tinta-suave); font-size: .9rem; margin: 0 0 1rem; }

/* Introducción de la portada: contexto en cuatro líneas, sin robarle la
   pantalla al listado. Ancho de lectura contenido aunque la rejilla sea ancha. */
.intro-portada {
  max-width: 62ch; margin: -.4rem 0 1.4rem; color: var(--tinta-suave);
  font-size: .95rem; line-height: 1.6;
}
.intro-portada strong { color: var(--mar-800); font-weight: 600; }

/* Enlaces del pie: legales y contacto, separados sin listas ni viñetas. */
.pie-enlaces { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }

/* Invitación a corregir, al final de la ficha. Deliberadamente sosa: no compite
   con el aviso de borrador, que sí es una advertencia. */
.aviso-correccion { margin: 1rem 0 0; font-size: .85rem; color: var(--tinta-suave); }
.aviso-correccion a { font-weight: 600; }

/* --- Etiquetas de estado --- */
.etiqueta {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700;
  padding: .16rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid transparent; font-variant-numeric: normal;
}
.etiqueta::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.borrador { background: var(--cobre-tenue); color: var(--cobre-fuerte); border-color: var(--cobre-borde); }
.verificado { background: var(--verde-tenue); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 30%, transparent); }

/* --- Paginación --- */
.paginacion { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 2rem; }
.paginacion span { color: var(--tinta-suave); font-size: .9rem; }
.paginacion a { padding: .4rem .8rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm); text-decoration: none; background: var(--superficie); }
.paginacion a:hover { border-color: var(--mar-300); }

/* --- Estados vacíos --- */
.estado-vacio {
  text-align: center; color: var(--tinta-suave); padding: 3rem 1rem;
  border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie);
}
.estado-vacio svg { color: var(--mar-300); margin-bottom: .6rem; }
.estado-vacio h2 { color: var(--mar-700); }
.vacio { color: var(--tinta-suave); }

/* --- Prosa (metodología) --- */
.prosa { max-width: 68ch; }
.prosa h1 { margin-bottom: .3rem; }
.prosa .prosa-intro { color: var(--tinta-suave); font-size: 1.05rem; }
.prosa h2 { font-family: var(--f-titular); text-transform: none; letter-spacing: 0; color: var(--mar-800);
            font-size: 1.3rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); }
.prosa ul, .prosa ol { padding-left: 1.1rem; }
.prosa li { margin: .45rem 0; }
.prosa strong { color: var(--mar-900); }
.prosa sup { font-size: .72em; }

/* Definiciones de la metodología: tipos de fuente, casos rechazados y ratios.
   Un <dl> con el término destacado y la explicación sangrada; se lee como una
   lista pero deja claro qué es término y qué es glosa. */
.lista-fuentes { margin: 1rem 0; }
.lista-fuentes > div { padding: .55rem 0; border-bottom: 1px dotted var(--linea-fuerte); }
.lista-fuentes > div:last-child { border-bottom: 0; }
.lista-fuentes dt { font-weight: 700; color: var(--mar-900); margin-bottom: .15rem; }
.lista-fuentes dd { margin: 0; color: var(--tinta); }
.lista-fuentes dd em { color: var(--tinta-suave); font-style: italic; }
.prosa .marca-est { color: var(--cobre-fuerte); font-weight: 700; }

/* --- Página de error --- */
.error-pag { text-align: center; padding: 3.5rem 1rem; max-width: 40ch; margin-inline: auto; }
.error-pag .codigo { font-family: var(--f-titular); font-size: 4rem; color: var(--cobre); line-height: 1; }
.error-pag h1 { margin-top: .4rem; }
.error-pag p { color: var(--tinta-suave); }

/* --- Pie --- */
.pie { border-top: 1px solid var(--linea); background: var(--superficie); color: var(--tinta-suave); font-size: .85rem; padding: 1.4rem 0; margin-top: 2rem; }
.pie .pie-inner { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: space-between; }
.pie a { color: var(--mar-700); }
.pie .pie-linea { height: 2px; background: var(--linea-agua); border: 0; margin: 0 0 1rem; }

/* --- Ficha: datos (baseline, se refina en su sección) --- */
.ficha-cab { padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--linea); }
.ficha-cab h1 { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .2rem; }
.ficha-sub { color: var(--tinta-suave); margin: 0; }
.ficha-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2rem; align-items: start; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1.4rem; margin: 0 0 .4rem; }
.datos div { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; border-bottom: 1px dotted var(--linea-fuerte); }
.datos dt { color: var(--tinta-suave); margin: 0; font-size: .88rem; }
.datos dd { margin: 0; font-weight: 600; text-align: right; }

.fuentes { list-style: none; padding: 0; margin: 0; }
.fuentes li { padding: .4rem 0; border-bottom: 1px dotted var(--linea-fuerte); font-size: .92rem; }
.tipo-fuente { display: inline-block; background: var(--mar-100); color: var(--mar-800); font-size: .7rem; font-weight: 700;
               padding: .1rem .45rem; border-radius: 4px; margin-right: .45rem; text-transform: uppercase; letter-spacing: .04em; font-variant-numeric: normal; }

/* Aviso de borrador: cobre, el acento de "ojo con esto" del sistema visual.
   Discreto (no ocupa una caja de alerta) pero con el borde lateral que ya
   identifica a los borradores en la tarjeta del listado. */
.aviso-borrador {
  margin: 1rem 0; padding: .6rem .85rem; font-size: .88rem; line-height: 1.5;
  color: var(--tinta); background: var(--cobre-tenue);
  border-left: 3px solid var(--cobre); border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}
.aviso-borrador strong { color: var(--cobre-fuerte); }
.aviso-borrador a { color: var(--cobre-fuerte); }

/* --- Listado: filtros compactos --- */
.filtros select { min-width: 9rem; }
.filtros input[type="number"] { width: 6.5rem; min-width: 0; }

/* --- Listado: rejilla de tarjetas --- */
.rejilla { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.tarjeta {
  position: relative; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.1rem 1.2rem; box-shadow: var(--sombra-sm);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.tarjeta:hover { box-shadow: var(--sombra); border-color: var(--linea-fuerte); transform: translateY(-2px); }
.tarjeta-borrador { border-left: 3px solid var(--cobre-borde); }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; }
.tarjeta h2 { font-size: 1.22rem; margin: 0 0 .1rem; line-height: 1.1; }
.tarjeta h2 a { text-decoration: none; color: var(--mar-900); }
.tarjeta h2 a:hover { color: var(--cobre-fuerte); }
.tarjeta-sub { color: var(--tinta-suave); font-size: .85rem; margin: 0; }
.tarjeta-cab .etiqueta { flex: none; }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .9rem; margin: 0; }
.mini div { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding-bottom: .25rem; border-bottom: 1px dotted var(--linea-fuerte); }
.mini dt { color: var(--tinta-suave); font-size: .78rem; margin: 0; }
.mini dd { margin: 0; font-weight: 600; font-size: .85rem; }
.dd-casco { display: inline-flex; align-items: center; gap: .3rem; }
.silueta { color: var(--mar-300); flex: none; }

/* --- Comparativa (tabla pegajosa) ---
   Panel acotado que hace scroll en ambos ejes: cabecera de modelos fija arriba
   y primera columna (etiquetas) fija a la izquierda. Funciona con 2-4 barcos y
   en móvil. Navegable con teclado (el panel es focusable). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tabla-scroll {
  overflow: auto; max-height: 78vh;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--superficie); box-shadow: var(--sombra-sm);
  scrollbar-width: thin; scrollbar-color: var(--mar-300) transparent;
}
.tabla-scroll:focus-visible { outline: 2px solid var(--cobre); outline-offset: 2px; }
.comparativa { border-collapse: separate; border-spacing: 0; width: 100%; }
.comparativa th, .comparativa td {
  padding: .6rem .9rem; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea);
}
.comparativa td:last-child, .comparativa th:last-child { border-right: 0; }

/* Cabecera de modelos: pegajosa arriba */
.comparativa thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--mar-900); color: #fff; vertical-align: top;
  font-family: var(--f-titular); font-weight: 600; font-size: 1rem;
  border-bottom: 2px solid var(--cobre);
}
.comparativa thead th a { color: #fff; text-decoration: none; }
.comparativa thead th a:hover { text-decoration: underline; text-decoration-color: var(--cobre-borde); }
.th-sub { display: block; font-weight: 400; font-size: .74rem; color: var(--mar-100);
          font-family: var(--f-cuerpo); font-variant-numeric: normal; margin-top: .15rem; }

/* Primera columna (etiquetas): pegajosa a la izquierda */
.col-etq {
  position: sticky; left: 0; z-index: 1;
  text-align: left; color: var(--tinta-suave); font-weight: 600; font-size: .88rem;
  background: var(--superficie-2);
}
.comparativa thead th.col-etq { z-index: 3; color: #fff; background: var(--mar-950); }

/* Sub-cabeceras de grupo */
.comparativa tr.grupo th {
  background: var(--mar-100); color: var(--mar-800); font-weight: 700; text-align: left;
  text-transform: uppercase; font-size: .74rem; letter-spacing: .07em;
}

/* Mejor valor: fondo cobre tenue + marcador NO cromático (triángulo) */
td.mejor { background: var(--cobre-tenue); font-weight: 700; color: var(--cobre-fuerte);
           box-shadow: inset 0 -2px 0 var(--cobre); }
.marca-mejor {
  display: inline-block; width: 0; height: 0; margin-right: .32rem; vertical-align: .05em;
  border-left: .28rem solid transparent; border-right: .28rem solid transparent;
  border-bottom: .42rem solid var(--cobre);
}
.est-signo { color: var(--cobre-fuerte); margin-right: .1rem; }
.marca-est { color: var(--cobre-fuerte); font-weight: 700; }

/* Celdas de texto (fabricante, diseñador, motor…): alineadas a la izquierda y
   con salto de línea permitido */
.comparativa td.celda-texto { text-align: left; white-space: normal; font-variant-numeric: normal; min-width: 9rem; }

/* Leyenda */
.leyenda { list-style: none; padding: 0; margin: 1rem 0 0; color: var(--tinta-suave); font-size: .85rem; display: grid; gap: .35rem; }
.leyenda li { display: flex; align-items: baseline; gap: .5rem; }
.muestra { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; flex: none; }
.muestra-mejor { background: var(--cobre-tenue); border: 1px solid var(--cobre-borde); border-radius: 4px; height: 1.2rem; }
.muestra-est { color: var(--cobre-fuerte); font-weight: 700; }

/* --- Ficha: panel de ratios (baseline) --- */
.ficha-ratios { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem 1.3rem; box-shadow: var(--sombra-sm); position: sticky; top: 1rem; }
.nota-ratios { font-size: .82rem; color: var(--tinta-suave); margin: 0 0 1rem; }
.ratio { padding: .8rem 0; border-top: 1px solid var(--linea); }
.ratio:first-of-type { border-top: 0; padding-top: 0; }
.ratio-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.ratio-etq { font-size: .82rem; color: var(--tinta-suave); font-weight: 600; }
.ratio-val { font-size: 1.4rem; font-weight: 700; color: var(--mar-800); font-family: var(--f-titular); }
.ratio-interp { font-size: .85rem; margin: .3rem 0 0; color: var(--tinta); }
.ratio-interp.sin-datos { color: var(--tinta-suave); font-style: italic; }
.ratio-nota-est { font-size: .74rem; color: var(--cobre-fuerte); margin: .35rem 0 0; }
/* Matiz junto a un dato: el % de solape del génova, que cualifica su superficie. */
.matiz { font-size: .8em; color: var(--tinta-suave); white-space: nowrap; }

/* Barra de posición del ratio en su rango típico (CSS puro, sin JS).
   Decorativa (aria-hidden); el valor y la frase interpretativa dan el sentido. */
.barra { position: relative; margin: .55rem 0 .15rem; }
.barra-pista { display: flex; height: 1.5rem; border-radius: 4px; overflow: hidden; border: 1px solid var(--linea); }
.zona { position: relative; display: flex; align-items: flex-end; min-width: 0; }
.zona-1 { background: #e8eef2; }
.zona-2 { background: #dae7ec; }
.zona-3 { background: #cbdde6; }
.zona-4 { background: #bcd3de; }
.zona-lbl { font-size: .58rem; line-height: 1; color: var(--tinta-suave); font-variant-numeric: normal;
            padding: 0 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: clip; width: 100%; text-align: center; }
.barra-marca { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--cobre); transform: translateX(-1px); border-radius: 2px; }
.barra-marca::before {
  content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  border-left: .32rem solid transparent; border-right: .32rem solid transparent; border-top: .36rem solid var(--cobre);
}
.barra-marca.est { background: repeating-linear-gradient(var(--cobre) 0 3px, transparent 3px 6px); }
.comparar-desde-ficha { margin-top: 1.3rem; width: 100%; justify-content: center; }

/* --- Admin (funcional, heredando el sistema) --- */
.admin-cab { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.admin-acciones { display: flex; gap: .5rem; }
.tabla-admin { width: 100%; border-collapse: collapse; background: var(--superficie); box-shadow: var(--sombra-sm); border-radius: var(--radio); overflow: hidden; }
.tabla-admin th, .tabla-admin td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla-admin thead th { background: var(--superficie-2); color: var(--mar-800); font-size: .85rem; }
.acciones-fila { display: flex; gap: .8rem; align-items: center; }
.acciones-fila form { display: inline; margin: 0; }
.enlace-peligro { background: none; color: var(--peligro); border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.enlace-peligro:hover { background: none; color: #7c211d; }
code { background: var(--superficie-2); padding: .1rem .35rem; border-radius: 4px; font-family: var(--f-mono); font-size: .85rem; }
.form-modelo fieldset, .form-fuente { border: 1px solid var(--linea); border-radius: var(--radio); margin: 0 0 1.2rem; padding: 1rem 1.2rem; background: var(--superficie); }
.form-modelo legend { color: var(--mar-800); font-weight: 700; padding: 0 .4rem; font-family: var(--f-titular); }
.rejilla-form { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.campo-ancho { grid-column: span 2; }
.campo textarea { width: 100%; }
.campo-check label { flex-direction: row; display: flex; align-items: center; gap: .5rem; color: var(--tinta); font-size: .95rem; }
.form-acciones { display: flex; gap: .6rem; margin-top: .5rem; }

/* --- Selector de comparación (mejora progresiva) --- */
/* Sin JS, los controles quedan ocultos: nada muerto en pantalla. */
html:not(.js) .solo-js { display: none !important; }

/* Casilla "Comparar" en la tarjeta */
.tarjeta-pie { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--linea); }
.cmp-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600;
             color: var(--mar-700); cursor: pointer; user-select: none; }
.cmp-check input { accent-color: var(--cobre); width: 1.05rem; height: 1.05rem; }
.cmp-check.is-disabled { color: var(--tinta-suave); cursor: not-allowed; }
.tarjeta:has(.cmp-toggle:checked) { border-color: var(--cobre-borde); box-shadow: 0 0 0 2px var(--cobre-tenue), var(--sombra); }

/* Botón "Añadir a comparar" en la ficha */
.cmp-toggle-ficha[aria-pressed="true"] { background: var(--cobre); }
.cmp-toggle-ficha[aria-pressed="true"]:hover { background: var(--cobre-fuerte); }
.cmp-toggle-ficha:disabled { opacity: .55; cursor: not-allowed; }
.comparar-desde-ficha { margin-top: .6rem; }
.comparar-desde-ficha.cmp-toggle-ficha { margin-top: 1.3rem; }

/* Barra inferior de comparación */
.cmp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
           background: var(--mar-900); color: #fff; border-top: 3px solid var(--cobre);
           box-shadow: 0 -4px 18px rgba(11, 39, 57, .22); }
.cmp-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; flex-wrap: wrap; }
.cmp-info { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1 1 12rem; }
.cmp-titulo { color: var(--mar-100); font-family: var(--f-titular); font-weight: 600; flex: none; }
.cmp-chips { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; flex-wrap: wrap; }
.cmp-chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--cobre-tenue);
            color: var(--mar-950); border: 1px solid var(--cobre-borde); border-radius: 999px;
            padding: .1rem .25rem .1rem .6rem; font-size: .84rem; font-weight: 600; }
.cmp-chip-x { border: 0; background: transparent; color: var(--cobre-fuerte); cursor: pointer;
              font-size: 1.15rem; line-height: 1; width: 1.35rem; height: 1.35rem; border-radius: 50%;
              display: inline-flex; align-items: center; justify-content: center; }
.cmp-chip-x:hover { background: rgba(131, 78, 22, .16); }
.cmp-acciones { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cmp-estado { color: var(--mar-100); font-size: .82rem; }
.cmp-bar .boton-sec { background: transparent; color: #fff; border-color: var(--mar-500); }
.cmp-bar .boton-sec:hover { background: var(--mar-800); color: #fff; }
.cmp-bar .boton-cta.is-disabled { opacity: .5; cursor: not-allowed; }
/* Deja aire bajo el contenido para que la barra no tape lo último */
html.cmp-activa main.contenedor { padding-bottom: 6rem; }

/* --- Movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* --- Responsive base --- */
@media (max-width: 820px) {
  .ficha-cols { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; }
  .cabecera-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .campo-acciones { margin-left: 0; }
  .campo-ancho { grid-column: span 1; }
}