/* =====================================================================
   Kalnech · estilos comunes de la calculadora (calculadora.html y index.html)

   Colores, fuentes, espacios y radios salen SOLO de marca/kalnech-tokens.css
   (tema oscuro por defecto; claro con data-theme="claro" en <html>).
   Aquí no hay ningún color suelto (hex o rgb): si hace falta un color, es un token.

   Reglas de color de la marca:
   - Verde (--brand, --brand-text) solo para: la cifra de beneficio, el botón principal,
     el foco y los pasos completados. Nunca decorativo.
   - --brand es un relleno; para TEXTO verde, siempre --brand-text.
   - --negative solo para importes que restan, el margen real peor que el esperado
     y el asterisco de obligatorio.
   - Los colores --data-* nunca colorean texto: solo barras y muestras de leyenda.
   ===================================================================== */

:root {
  /* Alto de la cabecera fija: botón de tema de 44 px + 2 × 16 px de relleno + 1 px de borde */
  --alto-cabecera: 77px;
  --transicion: 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
  :root { --transicion: 0ms; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans);
       font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
input, select, textarea, button { font: inherit; color: inherit; }
img { display: block; }
/* Todas las cifras, con números tabulares (todas las cifras miden lo mismo y quedan alineadas) */
input, .cifra, .porcentaje, .valor, .kpi-valor, .paso-importe, .formula, .importe, .bc-dato strong {
  font-variant-numeric: tabular-nums; }
a { color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
               white-space: nowrap; }

/* Contenedor: mismo ancho máximo para cabecera, contenido y pie */
.contenedor { max-width: var(--content-max); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
@media (max-width: 600px) {
  .contenedor { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ---------- Cabecera fija: logo a la izquierda, botón de tema a la derecha ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); }
.cabecera-contenido { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
                      padding-top: var(--space-4); padding-bottom: var(--space-4); }
.enlace-logo { display: inline-flex; align-items: center; min-height: var(--target-min); border-radius: var(--radius-sm); }
.enlace-logo img { height: 34px; width: auto; }

/* Cada logo tiene su versión para fondo oscuro y para fondo claro: se enseña la del tema activo */
.logo-tema-claro { display: none !important; }
[data-theme="claro"] .logo-tema-oscuro { display: none !important; }
[data-theme="claro"] .logo-tema-claro { display: block !important; }

/* Botón de tema: sol en oscuro (pasa a claro) y luna en claro (pasa a oscuro) */
.boton-tema { display: inline-flex; align-items: center; justify-content: center; flex: none;
              width: var(--target-min); height: var(--target-min); padding: 0; border-radius: 50%;
              border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer;
              transition: background-color var(--transicion); }
.boton-tema:hover { background: var(--surface); }
.icono-luna { display: none; }
[data-theme="claro"] .icono-luna { display: block; }
[data-theme="claro"] .icono-sol { display: none; }

/* ---------- Portada: titular, entradilla y aviso de privacidad ---------- */
.portada { padding-top: var(--space-12); padding-bottom: var(--space-8); }
.portada h1 { max-width: 760px; margin: 0 0 var(--space-4); font-size: clamp(32px, 5vw, 48px); line-height: 1.05;
              font-weight: 600; letter-spacing: -1.2px; }
.entradilla { max-width: 760px; margin: 0 0 var(--space-5); font-size: 18px; line-height: 1.55; color: var(--text-muted); }
.sello { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 6px 14px;
         border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border);
         color: var(--text-muted); font-size: 14px; }
.sello svg { flex: none; }

/* ---------- Disposición: formulario y resultado. En móvil, el resultado queda debajo ---------- */
.disposicion { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8); padding-bottom: var(--space-12); }
.disposicion > form { flex: 999 1 560px; min-width: 0; }
.columna-resultado { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5);
                     scroll-margin-top: calc(var(--alto-cabecera) + var(--space-4)); }
.columna-resultado p { margin: 0; }

/* ---------- Barra del formulario: nota de obligatorio a la izquierda, acciones a la derecha ---------- */
.barra-formulario { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                    gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.nota-obligatorio { margin: 0; font-size: 13px; color: var(--text-muted); }
.obligatorio { color: var(--negative); }
.acciones-formulario { display: flex; align-items: center; gap: var(--space-3); }
.separador-vertical { width: 1px; height: 16px; background: var(--border); }
.boton-enlace { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0; border: 0;
                background: none; color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer;
                text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.boton-enlace:hover { text-decoration-thickness: 2px; }
.boton-enlace.acento { color: var(--brand-text); }
.boton-enlace.neutro { color: var(--text-muted); }

/* Aviso de modo ejemplo: discreto, encima del formulario */
.aviso-ejemplo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin-bottom: var(--space-4);
                 padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--surface);
                 border: 1px solid var(--border); font-size: 14px; color: var(--text-muted); }

/* ---------- Barra de pasos: un chip por sección, enlazado a su tarjeta ---------- */
.etapas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.etapa { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
         border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-muted);
         font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
         transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion); }
.etapa:hover { color: var(--text); }
.etapa.siguiente { color: var(--text); }                 /* la próxima sección que conviene rellenar */
.etapa.completa { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-text); }
.etapa .icono-check { display: none; }
.etapa.completa .icono-check { display: block; }
.etapa.completa .etapa-num { display: none; }

/* ---------- Tarjetas de sección (las 6 iguales) ---------- */
.tarjetas { display: flex; flex-direction: column; gap: var(--space-5); }
.seccion { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6);
           background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
           scroll-margin-top: calc(var(--alto-cabecera) + var(--space-4)); }
.seccion-cabecera { display: flex; align-items: flex-start; gap: var(--space-3); }
.insignia { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
            border-radius: 9px; border: 1px solid var(--border); color: var(--text-muted);
            font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.seccion.completa .insignia { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-text); }
.seccion h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0;
              font-size: 22px; line-height: 1.25; font-weight: 600; }
.seccion-descripcion { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }
.etiqueta-opcional { padding: 3px 8px; border-radius: 6px; background: var(--border); color: var(--text-muted);
                     font-family: var(--font-sans); font-size: 12px; line-height: 1.2; font-weight: 600; }
.separador { margin: 0; border: 0; border-top: 1px solid var(--border); }

/* ---------- Campos ---------- */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); align-items: start; }
.campo { min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
/* Rejilla con un campo a ancho completo (la pasarela): debajo, siempre dos columnas
   (con auto-fit saldrían 4 columnas vacías a medias) */
.campos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) { .campos.dos { grid-template-columns: minmax(0, 1fr); } }
label, .etiqueta { display: block; margin-bottom: var(--space-2); font-size: 14px; line-height: 1.4; font-weight: 500; }
.ayuda { display: block; margin-top: var(--space-2); font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.ayuda:empty { display: none; }
/* Etiqueta, caja y ayuda comparten filas con los campos vecinos: si una etiqueta ocupa dos líneas,
   las cajas de esa fila siguen alineadas */
@supports (grid-template-rows: subgrid) {
  .campos { row-gap: 0; margin-bottom: calc(-1 * var(--space-4)); }
  .campo { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;
           padding-bottom: var(--space-4); }
  .campo > label, .campo > .etiqueta { align-self: end; }
}

/* Caja del campo numérico: input transparente y unidad (€ o %) a la derecha, dentro de la caja */
.caja { display: flex; align-items: center; gap: var(--space-2); min-width: 0; height: var(--control-h); padding: 0 14px;
        border-radius: var(--radius-md); background: var(--field); border: 1px solid var(--border);
        transition: border-color var(--transicion), box-shadow var(--transicion); }
.caja:hover { border-color: var(--placeholder); }
/* Foco: borde de 1,5 px (1 px de borde + medio de sombra, para que la caja no cambie de tamaño) y halo */
.caja:focus-within { border-color: var(--focus); box-shadow: 0 0 0 0.5px var(--focus), 0 0 0 4px var(--focus-halo); }
.caja input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
              color: var(--text); font-size: 16px; font-weight: 500; }   /* 16 px: evita el zoom de iOS */
.caja input::placeholder, .campo-suelto::placeholder { color: var(--placeholder); opacity: 1; }
.unidad { flex: none; color: var(--text-muted); font-size: 14px; }
input.error { color: var(--negative); }
.caja:has(input.error) { border-color: var(--negative); }

/* Select con el mismo aspecto que la caja y flecha propia */
.caja-select { position: relative; }
.caja-select select { width: 100%; height: var(--control-h); padding: 0 44px 0 14px; -webkit-appearance: none; appearance: none;
                      border-radius: var(--radius-md); background: var(--field); border: 1px solid var(--border);
                      color: var(--text); font-size: 16px; font-weight: 500; cursor: pointer;
                      transition: border-color var(--transicion), box-shadow var(--transicion); }
.caja-select select:hover { border-color: var(--placeholder); }
.caja-select select:focus-visible { outline: 0; border-color: var(--focus);
                                    box-shadow: 0 0 0 0.5px var(--focus), 0 0 0 4px var(--focus-halo); }
.caja-select .chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
                        color: var(--text-muted); pointer-events: none; }
select option { background: var(--surface); color: var(--text); }

/* Selector Sí / No. El elegido, en neutro fuerte (aquí no se usa el verde) */
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: var(--control-h); padding: 4px;
              border-radius: var(--radius-md); background: var(--field); border: 1px solid var(--border); }
.segmentado button { padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent;
                     color: var(--text-muted); font-size: 15px; font-weight: 500; cursor: pointer;
                     transition: background-color var(--transicion), color var(--transicion); }
.segmentado button:hover { color: var(--text); }
.segmentado button[aria-checked="true"] { background: var(--segment-on); color: var(--on-segment); }
.segmentado button:focus-visible { outline-offset: 1px; }

/* Fila desplegable "IVA de tus facturas": borde discontinuo y chevron a la derecha */
.fila-desplegable { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%;
                    min-height: 48px; padding: var(--space-2) 14px; border: 1px dashed var(--border);
                    border-radius: var(--radius-md); background: transparent; color: var(--text); text-align: left;
                    font-size: 15px; font-weight: 500; cursor: pointer; }
.fila-desplegable:hover { border-color: var(--placeholder); }
.fila-desplegable .secundario { color: var(--text-muted); font-weight: 400; }
.fila-desplegable .chevron { flex: none; color: var(--text-muted); transition: transform var(--transicion); }
.fila-desplegable[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.panel-desplegable { margin-top: calc(-1 * var(--space-1)); }

/* ---------- Tarjetas del resultado ---------- */
.tarjeta { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.tarjeta h2 { margin: 0 0 var(--space-4); font-size: 22px; line-height: 1.25; font-weight: 600; }
.tarjeta h3 { margin: 0 0 var(--space-2); font-size: 15px; font-weight: 600; font-family: var(--font-sans); }
#cifras { display: flex; flex-direction: column; gap: var(--space-5); }

.estado-vacio { padding: var(--space-6) var(--space-2); text-align: center; color: var(--text-muted); font-size: 14px; }
.estado-vacio-titulo { margin-bottom: var(--space-2) !important; color: var(--text); font-family: var(--font-display);
                       font-size: 18px; font-weight: 600; }

/* Cifra protagonista: el beneficio por pedido */
.kpi-nombre { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.kpi-valor { margin: var(--space-2) 0 !important; font-family: var(--font-display); font-size: clamp(40px, 13vw, 56px);
             line-height: 1; font-weight: 700; letter-spacing: -1.5px; color: var(--brand-text); }
.kpi-principal.pierde .kpi-valor { color: var(--negative); }
.kpi-detalle { font-size: 13px; color: var(--text-muted); }
.aviso { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg);
         color: var(--negative); font-size: 14px; font-weight: 500; }

/* Cifras secundarias: margen y punto de equilibrio */
.kpis-secundarios { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: 0;
                    padding-top: var(--space-5); border-top: 1px solid var(--border); }
@media (max-width: 420px) { .kpis-secundarios { grid-template-columns: 1fr; } }
.kpi-secundario { min-width: 0; }
.kpi-secundario dt { font-size: 13px; color: var(--text-muted); }
.kpi-secundario dd { margin: 0; }
.kpi-secundario .valor { margin: var(--space-1) 0; font-family: var(--font-display); font-size: 26px; line-height: 1.1; font-weight: 600; }
.kpi-secundario .valor.negativo { color: var(--negative); }
.unidad-kpi { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }

/* Desglose en barra apilada: Tu beneficio → IVA → Comisiones → Producto → Envío (orden fijo) */
.reparto { padding-top: var(--space-5); border-top: 1px solid var(--border); }
.reparto-barra { display: flex; gap: 2px; height: 10px; }
.reparto-barra span { display: block; min-width: 4px; border-radius: 4px; }
.reparto-leyenda { display: grid; gap: 6px; margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: 14px; }
.reparto-leyenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3.2em; align-items: center; column-gap: var(--space-2); }
.reparto-leyenda .muestra { width: 10px; height: 10px; border-radius: 3px; }
.reparto-leyenda .nombre { min-width: 0; }
.reparto-leyenda .cifra { font-weight: 600; white-space: nowrap; text-align: right; }
.reparto-leyenda .porcentaje { color: var(--text-muted); white-space: nowrap; text-align: right; }
.reparto-nota { margin-top: var(--space-2) !important; font-size: 13px; color: var(--negative); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
         min-height: var(--target-min); padding: 0 var(--space-5); border-radius: var(--radius-md);
         font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
         transition: background-color var(--transicion), filter var(--transicion); }
.boton svg { flex: none; }
/* El único botón verde de la pantalla */
.boton-principal { width: 100%; min-height: 48px; background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); }
.boton-principal:hover { filter: brightness(1.06); }
.boton-secundario { background: transparent; color: var(--text); border: 1px solid var(--border); }
.boton-secundario:hover { background: var(--bg); }
/* Neutro fuerte: para acciones importantes que no son la principal (no usa verde) */
.boton-fuerte { background: var(--segment-on); color: var(--on-segment); border: 1px solid var(--segment-on); }
.boton-fuerte:hover { filter: brightness(1.12); }
.boton:disabled { opacity: .6; cursor: progress; }
.acciones-resultado { display: flex; flex-direction: column; gap: var(--space-2); }
.acciones-resultado .boton-secundario { width: 100%; }
.aviso-copiado { font-size: 13px; color: var(--text-muted); text-align: center; }
.aviso-copiado:empty { display: none; }

/* Tarjeta pequeña con la miniatura del informe (la hoja siempre en claro, como el PDF) */
.tarjeta-informe { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4);
                   border: 1px solid var(--border); border-radius: var(--radius-md); }
.miniatura { display: flex; flex-direction: column; gap: 5px; flex: none; width: 64px; height: 84px; padding: 8px 7px;
             border-radius: 4px; background: var(--surface); border: 1px solid var(--border); }
.miniatura img { height: 7px; width: auto; margin-bottom: 4px; }
.mini-barra { display: flex; gap: 1px; height: 4px; margin-bottom: 3px; }
.mini-barra span { border-radius: 1px; }
.mini-linea { display: block; height: 3px; border-radius: 2px; background: var(--border); }
.tarjeta-informe-titulo { font-size: 14px; font-weight: 600; }
.tarjeta-informe-texto { font-size: 13px; color: var(--text-muted); }

/* ---------- "De dónde sale cada número": cadena de lo cobrado al beneficio ---------- */
.cabecera-desglose { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
                     margin-bottom: var(--space-4); }
.cabecera-desglose h2 { margin: 0; }
.cadena { position: relative; margin: 0; padding: 0 0 0 var(--space-6); list-style: none; }
.cadena::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 16px; width: 1px; background: var(--border); }
.paso { position: relative; padding: var(--space-2) 0; }
/* Punto de cada paso: aro neutro; aro rojo si resta; relleno gris en los totales; relleno verde en el beneficio */
.paso::before { content: ""; position: absolute; left: calc(-1 * var(--space-6)); top: 15px; width: 11px; height: 11px;
                border-radius: 50%; background: var(--surface); border: 2px solid var(--border); }
.paso.resta::before { border-color: var(--negative); }
.paso.total::before, .paso.dato::before { background: var(--text-muted); border-color: var(--text-muted); }
.paso.final::before { background: var(--brand); border-color: var(--brand); }
.paso.final.pierde::before { background: var(--negative); border-color: var(--negative); }
.paso-linea { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.paso-concepto { font-size: 15px; }
.paso-importe { font-size: 15px; font-weight: 500; white-space: nowrap; }
.paso.resta .paso-importe { color: var(--negative); }
.paso.total .paso-concepto, .paso.total .paso-importe { font-weight: 700; }
.paso.final { margin-top: var(--space-1); }
.paso.final .paso-concepto { font-weight: 600; }
.paso.final .paso-importe { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--brand-text); }
.paso.final.pierde .paso-importe { color: var(--negative); }
.formula { display: block; margin-top: 1px; font-size: 13px; color: var(--text-muted); }

/* Fila del desglose: toda la fila abre la explicación larga; chevron a la derecha */
.fila-calculo > summary { display: grid; grid-template-columns: minmax(0, 1fr) 14px; column-gap: var(--space-2);
                          list-style: none; cursor: pointer; border-radius: var(--radius-sm); }
.fila-calculo > summary::-webkit-details-marker { display: none; }
.fila-calculo > summary > .paso-linea, .fila-calculo > summary > .formula { grid-column: 1; }
.fila-calculo > summary > .flecha { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; width: 6px; height: 6px;
                                    border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
                                    transform: rotate(45deg) translateY(-2px); transition: transform var(--transicion); }
.fila-calculo[open] > summary > .flecha { transform: rotate(-135deg) translateY(-1px); }
.fila-calculo > summary:hover .paso-concepto { text-decoration: underline; text-underline-offset: 3px;
                                               text-decoration-color: var(--placeholder); }
.fila-fija { padding-right: calc(14px + var(--space-2)); }
.explicacion { max-width: 52ch; margin: var(--space-2) 0 var(--space-1) !important; padding-left: var(--space-3);
               border-left: 2px solid var(--border); font-size: 14px; color: var(--text-muted); }

/* Interruptor "Mostrar cálculos" (neutro: el verde no se usa aquí) */
.interruptor { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); margin: 0;
               font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-pista { position: relative; width: 30px; height: 18px; border-radius: var(--radius-pill); background: var(--placeholder);
                     transition: background-color var(--transicion); }
.interruptor-pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
                            background: var(--surface); transition: transform var(--transicion); }
.interruptor input:checked + .interruptor-pista { background: var(--segment-on); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(12px); }
.interruptor input:focus-visible + .interruptor-pista { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Desplegable del punto de equilibrio dentro de su cifra */
.kpi-explicacion { margin-top: var(--space-1); }
.kpi-explicacion > summary { grid-template-columns: max-content 14px; justify-content: start; align-items: center;
                             min-height: var(--target-min); }
.kpi-explicacion .explicacion { max-width: none; }

.bloque-desglose { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.bloque-desglose .cadena { margin-top: var(--space-1); }

/* "A tener en cuenta": informativo, en neutro */
.info-fila + .info-fila { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.info .paso-importe { color: var(--text-muted); }

/* ---------- Barra compacta de resumen ----------
   Aparece cuando la tarjeta de resumen sale de la vista: fija bajo la cabecera en escritorio
   y abajo en el móvil. */
.barra-compacta { position: fixed; left: 0; right: 0; top: var(--alto-cabecera); z-index: 15; height: 48px;
                  background: var(--surface); border-bottom: 1px solid var(--border);
                  opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none;
                  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; }
.barra-compacta.visible { opacity: 1; transform: none; visibility: visible; pointer-events: auto;
                          transition: opacity 180ms ease, transform 180ms ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .barra-compacta, .barra-compacta.visible { transition: none; } }
.barra-compacta-contenido { display: flex; align-items: center; gap: var(--space-3); height: 100%; font-size: 14px;
                            white-space: nowrap; overflow: hidden; }
.bc-nombre { color: var(--text-muted); }
.bc-dato strong { font-weight: 600; }
#bc-beneficio { color: var(--brand-text); }
.barra-compacta.pierde #bc-beneficio { color: var(--negative); }
.bc-separador { color: var(--placeholder); }
.bc-enlace { display: inline-flex; align-items: center; min-height: var(--target-min); margin-left: auto;
             color: var(--text); font-weight: 500; text-underline-offset: 3px; }
.bc-ver-icono { display: none; }
/* Por debajo de 1000 px el resultado pasa bajo el formulario: la barra va abajo */
@media (max-width: 999px) {
  .barra-compacta { top: auto; bottom: 0; height: auto; min-height: 48px; border-bottom: 0; border-top: 1px solid var(--border);
                    transform: translateY(6px); padding-bottom: env(safe-area-inset-bottom); }
  .barra-compacta-contenido { min-height: 48px; gap: var(--space-2); font-size: 13px; }
  body { padding-bottom: 64px; }
}
/* Móvil: cada dato en dos líneas cortas y "Ver desglose" como botón de icono de 44 px */
@media (max-width: 600px) {
  .barra-compacta-contenido { gap: var(--space-4); }
  .bc-dato { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .bc-nombre { font-size: 11px; }
  .bc-dato strong { font-size: 14px; }
  .bc-separador, .bc-unidad-larga { display: none; }
  .bc-enlace { display: inline-flex; align-items: center; justify-content: center; width: var(--target-min);
               height: var(--target-min); border-radius: 50%; color: var(--text-muted); }
  .bc-ver-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bc-ver-icono { display: block; }
}

/* ---------- Desplegables con flecha propia (en lugar del triángulo nativo) ---------- */
.desplegable > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
                         min-height: var(--target-min); list-style: none; cursor: pointer; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: var(--space-1);
                                border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
                                transform: rotate(45deg) translateY(-2px); transition: transform var(--transicion); }
.desplegable[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* ---------- Pie de página ---------- */
.pie-pagina { border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13px; }
.pie-pagina-contenido { padding-top: var(--space-5); padding-bottom: var(--space-8); }
.supuestos { margin-bottom: var(--space-4); }
.supuestos summary { color: var(--text); font-size: 14px; font-weight: 500; }
.supuestos ul { max-width: 760px; margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: 14px; }
.supuestos li + li { margin-top: var(--space-1); }
.pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6);
       padding-top: var(--space-4); border-top: 1px solid var(--border); }
.pie-logo img { height: 16px; width: auto; }
.enlaces-legales { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.enlaces-legales a { display: inline-flex; align-items: center; min-height: var(--target-min);
                     color: var(--text-muted); text-decoration: none; }
.enlaces-legales a:hover { color: var(--text); text-decoration: underline; }
.actualizacion { margin-left: auto; }
@media (max-width: 600px) {
  .pie { flex-direction: column; align-items: flex-start; }
  .actualizacion { margin-left: 0; }
}

/* ---------- Pantallas táctiles: todo lo pulsable mide al menos 44 px ---------- */
@media (pointer: coarse) {
  .etapa { min-height: var(--target-min); }
  .fila-calculo > summary { min-height: var(--target-min); align-content: center; }
}

/* =====================================================================
   SOLO CAPTACIÓN (index.html): puerta del email, comparación,
   invitación y opinión. Sin colores nuevos.
   ===================================================================== */
.puerta { display: grid; gap: var(--space-4); }
.puerta-texto { margin-top: calc(-1 * var(--space-3)) !important; color: var(--text-muted); font-size: 14px; }
.campo-puerta label { margin-bottom: var(--space-2); }
/* Email y comentario: mismo aspecto que la caja de los campos */
.campo-suelto { width: 100%; height: var(--control-h); padding: 0 14px; border-radius: var(--radius-md); background: var(--field);
                border: 1px solid var(--border); color: var(--text); font-size: 16px; font-weight: 500;
                transition: border-color var(--transicion), box-shadow var(--transicion); }
.campo-suelto:hover { border-color: var(--placeholder); }
.campo-suelto:focus-visible { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 0.5px var(--focus), 0 0 0 4px var(--focus-halo); }
.campo-suelto.error { border-color: var(--negative); }
textarea.campo-suelto { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; font-weight: 400; line-height: 1.5; }
.casilla { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: 14px; font-weight: 400; cursor: pointer; }
.casilla input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--text); }
.casilla a { color: var(--text); }
.opcional { color: var(--text-muted); }
.error-puerta { color: var(--negative); font-size: 14px; font-weight: 500; }
.error-puerta:empty { display: none; }

/* "Creías un X %. En realidad es un Y %": el real en rojo si es peor, en verde si es mejor */
.comparacion { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg);
               color: var(--text-muted); font-size: 14px; }
.comparacion strong { color: var(--text); }
.comparacion.peor strong:last-of-type { color: var(--negative); }
.comparacion.mejor strong:last-of-type { color: var(--brand-text); }

.invitacion-botones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.invitacion-botones .boton { flex: 1 1 160px; }
.invitacion-gracias { color: var(--text) !important; font-weight: 500; }

.opinion-subtitulo { margin: calc(-1 * var(--space-3)) 0 var(--space-4) !important; color: var(--text-muted); font-size: 14px; }
#form-opinion { display: grid; gap: var(--space-3); justify-items: start; }
#form-opinion > label, .estrellas legend { margin: 0; padding: 0; font-size: 14px; font-weight: 500; }
.estrellas { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; border: 0; }
.estrellas legend { width: 100%; margin-bottom: var(--space-1); }
/* Estrellas: llenas en el color del texto y vacías en gris (sin colores nuevos) */
.estrella { display: inline-flex; align-items: center; justify-content: center; width: var(--target-min); height: var(--target-min);
            margin: 0; border-radius: var(--radius-sm); color: var(--placeholder); cursor: pointer;
            transition: color var(--transicion); }
.estrella.llena { color: var(--text); }
.estrella input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrella:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* =====================================================================
   PÁGINAS DE TEXTO (privacidad.html, aviso-legal.html): columna de lectura
   de 760 px, con la misma cabecera y pie que la calculadora.
   ===================================================================== */
.texto-legal { max-width: 760px; padding-top: var(--space-12); padding-bottom: var(--space-12); }
.texto-legal h1 { margin: 0 0 var(--space-2); font-size: clamp(32px, 5vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -1px; }
.texto-legal .actualizado { margin: 0 0 var(--space-8); color: var(--text-muted); font-size: 14px; }
.texto-legal h2 { margin: var(--space-8) 0 var(--space-3); font-size: 22px; line-height: 1.25; font-weight: 600; }
.texto-legal h3 { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-sans); font-size: 16px; font-weight: 600; }
.texto-legal p, .texto-legal li { font-size: 15px; line-height: 1.65; }
.texto-legal p { margin: 0 0 var(--space-3); }
.texto-legal ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.texto-legal li + li { margin-top: var(--space-1); }
.texto-legal .resumen-legal { margin-bottom: var(--space-8); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
                              background: var(--surface); border: 1px solid var(--border); }
.texto-legal .resumen-legal h2 { margin-top: 0; font-size: 18px; }
.texto-legal .resumen-legal ul { margin-bottom: 0; }
/* Tablas: en el móvil se desplazan dentro de su caja, sin mover la página */
.tabla-legal { overflow-x: auto; margin: 0 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.tabla-legal table { width: 100%; border-collapse: collapse; font-size: 14px; }
@media (max-width: 600px) { .tabla-legal th, .tabla-legal td { padding: var(--space-2) var(--space-3); } }
.tabla-legal th, .tabla-legal td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tabla-legal th { background: var(--surface); color: var(--text-muted); font-weight: 500; }
.tabla-legal tr:last-child td { border-bottom: 0; }
/* Datos pendientes de rellenar ([NOMBRE], [NIF]…): en neutro, para que se vean al revisar */
.pendiente { padding: 1px 6px; border-radius: 6px; border: 1px dashed var(--placeholder); color: var(--text-muted);
             overflow-wrap: break-word; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.volver { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); margin-bottom: var(--space-4);
          color: var(--text-muted); font-size: 14px; text-decoration: none; }
.volver:hover { color: var(--text); }

/* =====================================================================
   INFORME PDF: siempre en claro (data-theme="claro"), con el logo de informes.
   En pantalla no se ve; al imprimir solo se imprime el informe.
   ===================================================================== */
.informe { display: none; }

@media print {
  /* La fecha de los tipos de IVA está también en el pie de la web (FECHA_TIPOS_IVA en la página) */
  @page {
    size: A4 portrait;
    margin: 20mm 20mm 22mm;
    @bottom-left { content: "Generado con Kalnech"; font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }
    @bottom-right { content: "Tipos de IVA actualizados a octubre de 2026 · Página " counter(page);
                    font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); }
  }
  html, body { background: none !important; }
  body { padding: 0 !important; }
  body > * { display: none !important; }
  body > .informe { display: block !important; }
  .informe, .informe * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.informe { color: var(--text); font-family: var(--font-sans); font-size: 10.5pt; line-height: 1.45; }
.inf-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 12px;
                border-bottom: 1px solid var(--border); }
.inf-cabecera img { height: 28px; width: auto; }
.inf-fecha { color: var(--text-muted); font-size: 13px; }
.inf-antetitulo { margin: 0 0 6px; color: var(--brand-text); font-size: 13px; font-weight: 600; letter-spacing: .6px; }
.inf-titulo { margin: 0 0 8px; font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -.8px; }
.inf-resumen { margin: 0 0 20px; color: var(--text-muted); }
.inf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.inf-kpi { padding: 14px 16px; border-radius: var(--radius-md); background: var(--bg); break-inside: avoid; }
.inf-kpi p { margin: 0; }
.inf-kpi-nombre { margin-bottom: 8px !important; color: var(--text-muted); font-size: 10pt; font-weight: 500; }
.inf-kpi-valor { font-family: var(--font-display); font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -1px;
                 font-variant-numeric: tabular-nums; }
.inf-kpi-valor .unidad-kpi { font-size: 10pt; }
.inf-kpi-detalle { margin-top: 6px !important; color: var(--text-muted); font-size: 10pt; }
.inf-kpi.destacado { background: var(--brand-soft); }
.inf-kpi.destacado .inf-kpi-nombre, .inf-kpi.destacado .inf-kpi-valor, .inf-kpi.destacado .inf-kpi-detalle { color: var(--brand-text); }
.inf-kpi.destacado.pierde .inf-kpi-valor { color: var(--negative); }
.informe h2 { margin: 28px 0 12px; font-size: 16pt; line-height: 1.25; font-weight: 600; break-after: avoid; }
.informe h3 { margin: 18px 0 6px; font-family: var(--font-sans); font-size: 11pt; font-weight: 600; break-after: avoid; }
.inf-barra { display: flex; gap: 2px; height: 14px; margin-bottom: 12px; }
.inf-barra span { display: block; min-width: 4px; border-radius: 4px; }
.inf-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inf-tabla th { padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 10pt;
                font-weight: 500; text-align: left; }
.inf-tabla td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.inf-tabla .num { text-align: right; white-space: nowrap; }
.inf-tabla .muestra { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: -1px; }
.inf-tabla .resta { color: var(--negative); }
.inf-tabla .beneficio { color: var(--brand-text); font-weight: 600; }
.inf-tabla .total td { font-weight: 700; border-bottom: 0; }
.inf-nota { margin: 8px 0 0; color: var(--negative); font-size: 10pt; }
.inf-pasos { margin: 0; padding: 0; list-style: none; }
.inf-paso { padding: 8px 0 8px 12px; border-left: 2px solid var(--border); break-inside: avoid; }
.inf-paso + .inf-paso { margin-top: 4px; }
.inf-paso p { margin: 0; }
.inf-paso-linea { display: flex; justify-content: space-between; gap: 12px; }
.inf-paso .importe { white-space: nowrap; font-weight: 500; }
.inf-paso.resta .importe { color: var(--negative); }
.inf-paso.total .inf-paso-linea, .inf-paso.final .inf-paso-linea { font-weight: 700; }
.inf-paso.final .importe { color: var(--brand-text); }
.inf-paso.final.pierde .importe { color: var(--negative); }
.inf-paso .formula { font-size: 10pt; }
.inf-paso .explicacion { max-width: none; margin: 4px 0 0 !important; padding-left: 0; border-left: 0; font-size: 10pt; }
.inf-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
.inf-datos div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border);
                 break-inside: avoid; }
.inf-datos dt { color: var(--text-muted); }
.inf-datos dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.inf-vacio { color: var(--text-muted); }