/**
 * Calculadora de tarifas.
 *
 * Usa las variables del tema (--primary-color, --accent-green, --paper…), así
 * que hereda la identidad de la web sin repetir ni un color. Los valores tras la
 * coma son solo por si el bloque se pega en una página sin el tema cargado.
 */

/* El atributo `hidden` vale `display: none` en la hoja del navegador, que es lo
   mas debil que hay: cualquier `display` de autor lo pisa. Y aqui casi todo lo
   que se oculta son `.asten-comparador__campo` (flex) o `__campos` (grid), asi
   que sin esta regla el atributo no oculta NADA y el formulario se ve entero en
   las dos pestañas. Con !important porque tiene que ganar a las reglas de
   display de mas abajo, que son mas especificas. */
.asten-comparador [hidden] {
    display: none !important;
}

.asten-comparador {
    --ac-borde: rgba(12, 18, 48, 0.12);
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-family, system-ui, sans-serif);
    color: var(--ink, #0C1230);
}

.asten-comparador__form {
    background: var(--surface-light, #fff);
    border: 1px solid var(--ac-borde);
    border-radius: 14px;
    padding: 1.75rem;
}

.asten-comparador__campos {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    /* 220px dejaba a Potencia P1/P2/Días de la factura (y a Punta/Llano/Valle)
       al límite de caber en tres columnas en el ancho habitual del formulario
       (~700px): con el gap de 1.25rem, 3×220px ya no entraba y saltaba a dos.
       200px les da margen de sobra sin apretar los campos más anchos. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    /* Los navegadores le dan a <fieldset> un `min-inline-size: min-content` que
       no se puede vencer con `width`: el bloque se niega a encoger por debajo
       de su contenido y se sale de su contenedor. En un movil de 375 px eso
       hacia que TODA la pagina se pudiera arrastrar de lado. */
    min-width: 0;
}

/* Un <legend> se pinta por defecto ENCIMA del borde del fieldset, y con un
   borde superior el texto queda partido por una raya. `float` lo devuelve al
   flujo normal; dentro de un contenedor grid el float se ignora y queda como un
   elemento mas de la rejilla, que es lo que se quiere. */
/* Dentro de una rejilla de campos, todo lo que NO es un campo ocupa la fila
   entera: leyendas, textos de ayuda, avisos y las rejillas anidadas. Sin esto
   un bloque anidado se mete en una columna de 220 px y apila sus campos en
   vertical dejando media pantalla vacia. */
.asten-comparador__campos > *:not(.asten-comparador__campo) {
    grid-column: 1 / -1;
}

/* "Tipo de contrato" ocupa su propia fila: solo se ve en empresas, y
   compartiendo fila empujaba las dos potencias y los días a un reparto
   distinto del que ve un particular, que no tiene este selector. Con la fila
   entera para él, lo que viene debajo se coloca igual en los dos casos.

   Se limita el ancho del propio selector para que no se estire de lado a lado
   del formulario: es un desplegable de tres opciones cortas. */
.asten-comparador__campo--acceso {
    grid-column: 1 / -1;
    max-width: 22rem;
}

/* ── Fila de la leyenda "Tu suministro", con los accesos directos a la
   derecha (subir CSV; subir factura si asten-factura-ocr está activo) ──── */
.asten-comparador__leyenda-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    width: 100%;
}

.asten-comparador__leyenda-acciones {
    display: flex;
    /* Sin esto, por defecto ("stretch") cada botón se estira a la altura del
       más alto de la fila: en cuanto el de "Subir factura" crece (su propio
       botón de reintento + el aviso de estado debajo), "Subir CSV" -con
       border-radius:999px- se deformaba en un óvalo casi circular en vez de
       quedarse en su altura natural de pastilla. */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-weight: 400;
    font-size: 0.85rem;
}

/* Botón compacto para un <input type="file">: el selector nativo, con su
   nombre de fichero y todo, es demasiado ancho para ir junto a un título.
   Se oculta el input (accesible igual, solo visualmente oculto) y el <label>
   hace de botón — el patrón habitual para esto, sin depender de JS. */
.asten-comparador__subida-rapida {
    display: inline-flex;
    align-items: center;
    /* Cinturón y tirantes junto al "align-items: flex-start" del contenedor:
       aunque algún día vuelva a compartir fila con algo más alto, esta
       pastilla no debe estirarse verticalmente con ello. */
    align-self: flex-start;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--ac-borde);
    border-radius: 999px;
    background: var(--paper, #F5F7FC);
    color: var(--ink, #0C1230);
    cursor: pointer;
    white-space: nowrap;
}

.asten-comparador__subida-rapida:hover {
    border-color: var(--secondary-color, #5B8DEF);
}

.asten-comparador__subida-rapida input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.asten-comparador__leyenda {
    float: left;
    grid-column: 1 / -1;
    width: 100%;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0;
    margin-bottom: 0.25rem;
}

.asten-comparador__campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.95rem;
}

.asten-comparador__campo > span {
    font-weight: 600;
}

.asten-comparador__campo small {
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
    font-size: 0.82rem;
}

/* Se apunta por exclusion y no por type="number": los campos numericos son de
   texto desde que aceptan la coma decimal, y un selector por tipo se quedo
   colgado sin que nada avisara — los campos salian sin estilo ninguno. */
.asten-comparador__campo > input:not([type="checkbox"]):not([type="file"]),
.asten-comparador__campo > select {
    font: inherit;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--ac-borde);
    border-radius: 8px;
    background: var(--white, #fff);
    color: var(--ink, #0C1230);
    box-sizing: border-box;
}

.asten-comparador__campo > input::placeholder {
    color: rgba(12, 18, 48, 0.35);
}

.asten-comparador__campo > input:hover,
.asten-comparador__campo > select:hover {
    border-color: rgba(12, 18, 48, 0.3);
}

.asten-comparador__campo > input:focus-visible,
.asten-comparador__campo > select:focus-visible,
.asten-comparador__enviar:focus-visible,
.asten-comparador__cta:focus-visible {
    outline: 2px solid var(--secondary-color, #5B8DEF);
    outline-offset: 2px;
}

.asten-comparador__enviar,
.asten-comparador__cta {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.85rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent-green, #4FB061);
    color: var(--white, #fff);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.asten-comparador__enviar[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.asten-comparador__estado {
    margin: 1rem 0 0;
    min-height: 1.4em;
    font-size: 0.95rem;
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
}

.asten-comparador__estado--error {
    color: #B3261E;
    font-weight: 600;
}

.asten-comparador__lista {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.asten-comparador__item {
    border: 1px solid var(--ac-borde);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    background: var(--surface-light, #fff);
}

/* La más barata se marca con borde y una barra lateral, no solo con color:
   así se distingue también sin percibir el verde. */
.asten-comparador__item--mejor {
    border-color: var(--accent-green, #4FB061);
    border-left-width: 5px;
}

.asten-comparador__item-cabecera {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.asten-comparador__nombre {
    font-weight: 700;
    font-size: 1.05rem;
}

.asten-comparador__importe {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--primary-color, #131A69);
}

.asten-comparador__detalle {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
}

.asten-comparador__descripcion {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
}

/* Mismo verde que el botón de enviar el formulario: es la misma acción, dar
   de alta una tarifa, solo que desde la tarjeta en vez de desde el CTA final. */
.asten-comparador__contratar {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    background: var(--accent-green, #4FB061);
    color: var(--white, #fff);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.asten-comparador__contratar:hover {
    filter: brightness(0.94);
}

.asten-comparador__aviso {
    margin-top: 1.1rem;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--secondary-color, #5B8DEF);
    background: var(--paper, #F5F7FC);
    font-size: 0.9rem;
    border-radius: 0 8px 8px 0;
}

.asten-comparador__letra-pequena {
    margin-top: 1.1rem;
    font-size: 0.82rem;
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
    line-height: 1.55;
}

.asten-comparador__error {
    padding: 1rem;
    border-radius: 10px;
    background: var(--paper, #F5F7FC);
}

@media (max-width: 480px) {
    .asten-comparador__form {
        padding: 1.25rem;
    }
    .asten-comparador__campos {
        grid-template-columns: 1fr;
    }
}

/* ── Histórico: lo que habría costado cada mes ya pasado ─────────────────── */

.asten-comparador__historico {
    margin-top: 1.75rem;
}

.asten-comparador__subtitulo {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.asten-comparador__historico-intro {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
}

/* Doce meses no caben en un móvil: la tabla scrolla dentro de su caja en vez
   de reventar el ancho de la página. */
.asten-comparador__tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.asten-comparador__tabla {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
    font-size: 0.85rem;
}

.asten-comparador__tabla th,
.asten-comparador__tabla td {
    padding: 0.45rem 0.55rem;
    text-align: right;
    border-bottom: 1px solid var(--ac-borde);
    white-space: nowrap;
}

.asten-comparador__tabla thead th,
.asten-comparador__tabla tbody th {
    text-align: left;
    font-weight: 700;
}

.asten-comparador__tabla thead th {
    border-bottom-width: 2px;
}

.asten-comparador__fila--mejor {
    background: var(--paper, #F5F7FC);
}

.asten-comparador__total {
    font-weight: 800;
    color: var(--primary-color, #131A69);
}

/* ── «Lo que pagas ahora» ────────────────────────────────────────────────── */

.asten-comparador__actual {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ac-borde);
}

.asten-comparador__ayuda {
    grid-column: 1 / -1;
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
    line-height: 1.55;
}

.asten-comparador__actual-campos > .asten-comparador__campos + .asten-comparador__campos {
    margin-top: 1.25rem;
}

/* El titular del ahorro es lo primero que se lee: va grande y arriba. */
.asten-comparador__ahorro {
    margin: 0 0 1rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    background: var(--accent-green, #4FB061);
    color: var(--white, #fff);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Si no ahorra, se dice igual, pero sin vestirlo de buena noticia. */
.asten-comparador__ahorro--negativo {
    background: var(--paper, #F5F7FC);
    color: var(--ink, #0C1230);
    border-left: 5px solid var(--secondary-color, #5B8DEF);
}

/* La tarifa actual no es una oferta: se distingue con un borde discontinuo
   para que no se lea como una tarjeta más del catálogo. */
.asten-comparador__item--actual {
    border-style: dashed;
    background: var(--paper, #F5F7FC);
}

.asten-comparador__item--actual .asten-comparador__importe {
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
}

.asten-comparador__fila--actual {
    font-style: italic;
}

.asten-comparador__fila--actual th {
    font-style: normal;
}

.asten-comparador__aviso-linea {
    margin: 0;
}

.asten-comparador__aviso-linea + .asten-comparador__aviso-linea {
    margin-top: 0.6rem;
}

/* ── Desglose por periodos ───────────────────────────────────────────────── */

.asten-comparador__desglose {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ac-borde);
}

/* Cuando no se sabe el desglose, este campo ocupa el mismo hueco que tenían
   Punta/Llano/Valle -toda la fila- pero centrado en el ancho de una sola
   columna, para que caiga donde estaba Llano (P2) en vez de estirarse de
   punta a punta. 200px es el mismo mínimo de columna que usa el resto de la
   rejilla (ver la regla de más arriba). */
.asten-comparador__consumo-centrado {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
}

.asten-comparador__consumo-centrado .asten-comparador__campo {
    width: 100%;
    max-width: 200px;
}

.asten-comparador__suma {
    grid-column: 1 / -1;
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
}

/* Cuando los periodos no cuadran con el total no se bloquea nada, pero se ve. */
.asten-comparador__suma--ojo {
    color: #B3261E;
    font-weight: 600;
}

/* ── Subida del consumo horario ──────────────────────────────────────────── */

.asten-comparador__csv {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--ac-borde);
}

/* Un <input type="file"> trae un ancho minimo propio —el boton mas el hueco del
   nombre del fichero— que en un movil es mas ancho que la pantalla. Como es un
   elemento de una rejilla, ese minimo estiraba la columna entera y con ella
   TODOS los campos del bloque, y la pagina se podia arrastrar de lado. */
.asten-comparador__csv,
.asten-comparador__csv .asten-comparador__campo {
    min-width: 0;
}

/* Los separadores se citan con <code>: un punto y coma suelto dentro de una
   frase no se ve, y es justo el dato que hay que mirar en el fichero. */
.asten-comparador__csv code {
    padding: 0.05em 0.35em;
    border-radius: 4px;
    background: rgba(12, 18, 48, 0.07);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95em;
}

.asten-comparador__csv-estado {
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
    line-height: 1.5;
}

.asten-comparador__csv-estado--error {
    color: #B3261E;
    font-weight: 600;
}

/* ── Pestañas particulares / empresas ────────────────────────────────────── */

/* El componente .tariff-toggle y .segment-toggle-wrap los pone el tema: son los
   mismos de /oferta/, así que las pestañas se ven igual aquí y allí. Esto solo
   les da aire. */
.asten-comparador__pestanas {
    margin-bottom: 1.5rem;
}

/* La misma pastilla que particulares/empresas, para mensual/anual. Si las
   dos barras salen juntas (segmento con pestañas) llevan menos separación
   entre ellas que la que hay debajo de la segunda, para que se lean como un
   grupo de controles y no como dos bloques sueltos. */
.asten-comparador__pestanas + .asten-comparador__modo-pestanas {
    margin-top: -0.75rem;
}

.asten-comparador__modo-pestanas {
    margin-bottom: 1.5rem;
}

/* Por si el bloque se pega en una página sin el tema cargado, para que al menos
   se distinga cuál está activa. */
.asten-comparador__pestanas .tariff-toggle:not([class*="tariff"]) span,
.asten-comparador .seg-radio:focus-visible + span {
    outline: 2px solid var(--secondary-color, #5B8DEF);
    outline-offset: 2px;
}

/* Potencias por periodo: solo en 3.0TD y 6.1TD. */
.asten-comparador__seis-potencias {
    grid-column: 1 / -1;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--ac-borde);
}

/* Estos parrafos existen siempre para que los lea un lector de pantalla cuando
   se rellenan, pero vacios no deben ocupar. Sin esto queda un hueco de varios
   centimetros en mitad del formulario. */
.asten-comparador__suma:empty,
.asten-comparador__csv-estado:empty,
.asten-comparador__estado:empty {
    display: none;
}

/* Las casillas ocupan su propia fila completa. Metidas en una columna quedaban
   flotando a media altura de la de al lado, porque cada campo vecino mide
   distinto segun cuantas lineas ocupe su etiqueta y su ayuda. */
.asten-comparador__campo--check {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
    line-height: 1.35;
    cursor: pointer;
}

.asten-comparador__campo--check input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    accent-color: var(--accent-green, #4FB061);
}

/* La casilla que hace de leyenda ocupa su fila entera y no lleva sangria. */
.asten-comparador__leyenda .asten-comparador__campo--check {
    margin-top: 0;
    font-weight: 700;
}

/* ── Alternar "sé cuánto consumo en cada periodo" ────────────────────────── */

/* La casilla real sigue en el DOM (el envío del formulario mira su estado),
   pero solo se ve el botón: oculta visualmente, no con `display:none` ni
   `hidden`, para que siga siendo parte del formulario y accesible por
   teclado si alguien navega hasta ella. */
.asten-comparador__oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.asten-comparador__check-desglose {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
}

.asten-comparador__boton-alternar-desglose {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--ac-borde);
    border-radius: 999px;
    background: var(--white, #fff);
    color: var(--ink, #0C1230);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.asten-comparador__boton-alternar-desglose:hover {
    border-color: var(--secondary-color, #5B8DEF);
}

/* ── Tarifa indexada ──────────────────────────────────────────────────────── */

/* Se distingue de las tarjetas de precio fijo con un tono calido, para que no
   se lea como una promesa de precio igual que las demas. */
.asten-comparador__item--indexada {
    border-style: dashed;
}

.asten-comparador__indexada-nota {
    margin: 0.75rem 0 0;
    padding: 0.7rem 0.85rem;
    border-left: 4px solid #B7791F;
    background: #FFF7E6;
    color: #6B4A05;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 0 8px 8px 0;
}

/* ── Precios unitarios en la tarjeta ─────────────────────────────────────── */

/* Un total al mes no se puede contrastar con nada; un €/kWh sí. Por eso el
   precio unitario va en la tarjeta y no escondido en la letra pequeña. */
/* Energía y potencia, uno debajo de otro por defecto y en paralelo en cuanto
   hay sitio.

   Se hace con una consulta de contenedor y no de pantalla porque lo que decide
   si caben dos columnas es el ancho de la TARJETA, no el del navegador: la
   misma tarjeta puede ir a media pantalla en un portatil o entera en un movil
   apaisado. Donde no haya soporte, se queda en una columna, que es el
   comportamiento de antes y se lee perfectamente. */
.asten-comparador__precios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem 1.75rem;
    margin: 0.75rem 0 0;
    padding: 0.7rem 0.85rem;
    background: var(--paper, #F5F7FC);
    border-radius: 8px;
    font-size: 0.84rem;
}

.asten-comparador__item {
    container-type: inline-size;
}

/* Dos columnas exactas, no `auto-fit`: los bloques son dos y solo dos, y con
   `auto-fit` una tarjeta ancha abria una tercera columna vacia al lado. */
@container (min-width: 26rem) {
    .asten-comparador__precios {
        grid-template-columns: 1fr 1fr;
    }
}

.asten-comparador__precios-bloque--ancho {
    grid-column: 1 / -1;
}

.asten-comparador__precios-titulo {
    margin: 0 0 0.35rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--ac-borde);
    font-weight: 700;
}

/* La unidad, una vez por bloque y en gris: es una aclaracion, no un dato. */
.asten-comparador__precios-titulo span {
    font-weight: 400;
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
}

/* Con tope de ancho: la columna de la derecha es `1fr` y sin tope se estira
   hasta el borde del bloque, dejando un palmo de blanco entre «P1» y su precio.
   Asi la etiqueta y su cifra se leen como una pareja. */
.asten-comparador__precios-filas {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    margin: 0;
    max-width: 15rem;
}

.asten-comparador__precios dt {
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
}

/* Los importes alineados a la derecha y con cifras de ancho fijo: asi las comas
   caen en la misma columna y se ven de un vistazo cual es mayor. */
.asten-comparador__precios dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── Desglose de precios por tarjeta (modo mensual) ──────────────────────── */

.asten-comparador__boton-desglose-precio {
    display: inline-block;
    margin: 0.75rem 0 0;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--ac-borde);
    border-radius: 999px;
    background: var(--white, #fff);
    color: var(--ink, #0C1230);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.asten-comparador__boton-desglose-precio:hover {
    border-color: var(--secondary-color, #5B8DEF);
}

.asten-comparador__boton-desglose-precio[aria-pressed="true"] {
    border-color: var(--accent-green, #4FB061);
}

.asten-comparador__desglose-precio {
    margin: 0.6rem 0 0;
    padding: 0.6rem 0.85rem;
    background: var(--paper, #F5F7FC);
    border-radius: 8px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    max-width: 18rem;
    font-size: 0.86rem;
}

.asten-comparador__desglose-precio dt {
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
}

.asten-comparador__desglose-precio dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── Desglose del histórico ──────────────────────────────────────────────── */

.asten-comparador__boton-desglose {
    display: inline-block;
    margin: 0 0 0.85rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ac-borde);
    border-radius: 999px;
    background: var(--white, #fff);
    color: var(--ink, #0C1230);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.asten-comparador__boton-desglose:hover {
    border-color: var(--secondary-color, #5B8DEF);
}

/* Estado activo: el mismo tratamiento que la tarjeta "mejor", para que se lea
   como un interruptor encendido y no como un boton mas. */
.asten-comparador__boton-desglose[aria-pressed="true"] {
    border-color: var(--accent-green, #4FB061);
    background: var(--accent-green, #4FB061);
    color: var(--white, #fff);
}

/* Las filas de concepto van sangradas y en gris para que se lean como parte de
   la tarifa de arriba, no como tarifas nuevas. */
.asten-comparador__fila-concepto th,
.asten-comparador__fila-concepto td {
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
    font-weight: 400;
    border-bottom-color: transparent;
}

.asten-comparador__fila-concepto th {
    padding-left: 1.4rem;
    font-weight: 400;
}

.asten-comparador__fila-tarifa th,
.asten-comparador__fila-tarifa td {
    border-top: 1px solid var(--ac-borde);
}

.asten-comparador__nota-desglose {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: var(--ink-soft, rgba(12, 18, 48, 0.68));
    line-height: 1.5;
}