/* carteras.css — la piel de las ocho carteras modelo, sus cifras horneadas y su simulador
 * (P3 lote C3; desde P12, lote F, tambien las cifras del indice y el bloque de fuentes).
 *
 * REGLAS DE ESTA HOJA
 * - No declara tokens: `tokens.css` es su unico origen, y `tests/web/test_carteras_vista.py` lo
 *   comprueba. Un token sin respaldo no da error: invalida la declaracion entera, y la caja
 *   se queda sin fondo, sin borde o sin tamano, en silencio.
 * - No hay ningun hex. El color se compone con tokens que ya existen, como se hizo en P2.
 * - Todo lo que pinta `carteras.js` cuelga de `[data-carteras-ficha]` o `[data-carteras-simulador]`.
 *   Una hoja de una seccion que se lleva por delante la tipografia del articulo, del menu o del
 *   pie es una hoja de otra cosa.
 * - El aire y la forma salen de `--ds-*` (el sistema de P2), no de numeros sueltos: un lote
 *   posterior tiene que poder ajustar la seccion sin tener que leer esta hoja entera.
 * - Sin `url()`, sin `@import`, sin terceros. La linea legal de la seccion («esta web no carga de
 *   nadie») es cierta porque aqui no hay nada que cargue.
 */

/* ——— el bloque de una ficha: metricas, curvas y el simulador ———
   Un solo contenedor lleva las dos cosas. El simulador se distingue por su propio atributo, no
   por una clase que alguien pueda olvidar: el atributo es lo que el publicador escribe. */
[data-carteras-ficha],
[data-carteras-simulador] {
  margin-block-start: var(--ds-esp-6);
  min-width: 0;
}

/* ——— la entradilla de cada bloque ———
   Dice sobre cuanto se ha simulado y con que supuestos. Sin esto, «+7,2 %» no significa nada:
   el 100 % de una cartera de referencia y el 100 % de una de oro no se miden igual. */
.cart-entradilla {
  max-width: 62ch;
  margin: 0 0 var(--ds-esp-5);
  color: var(--hueso-2);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}

/* ——— las metricas ———
   Una rejilla de celdas, no una tabla: a 390 px la tabla obliga a un scroll horizontal, y una
   cifra que hay que desplazar para ver no es una cifra que se lee. */
.cart-metricas {
  margin-block: var(--ds-esp-5);
  padding: var(--ds-esp-5);
  background: var(--ds-superficie-1);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
}

.cart-metricas-lista {
  display: grid;
  gap: var(--ds-esp-4);
  margin: 0;
  /* `minmax(0, 1fr)`: un `1fr` a secas es `minmax(auto, 1fr)`, y el `auto` del minimo deja que
     una cifra larga (una ventana con dos meses) empuje la celda y desborde el contenedor. */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.cart-metrica { min-width: 0; }

.cart-metrica-rotulo {
  margin: 0 0 var(--ds-esp-1);
  color: var(--hueso-3);
  font: 500 var(--ds-rotulo)/1.5 var(--condensada);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}

.cart-metrica-valor {
  margin: 0;
  color: var(--hueso);
  font: 400 var(--ds-cuerpo-grande)/1.3 var(--datos);
  font-variant-numeric: tabular-nums;
  /* Una cifra larga tiene que poder partirse antes que empujar la celda. Las FECHAS no: llevan su
     propio `nowrap` (`.cart-fecha`), que es lo que impide que «sep-2004» se parta por el guion. */
  overflow-wrap: anywhere;
}

/* El rango completo. No lleva `nowrap` a proposito: es lo unico que puede partirse, y solo por el
   guion de en medio. El elemento existe para que «sep-2004 – ago-2026» mas los años de debajo sean
   una sola pieza, igual que en el indice. */
.cart-periodo { display: block; }

/* Una fecha con su propio elemento, para poder decir que NO se parte. El rango entero no lo lleva,
   y es deliberado: `nowrap` en «sep-2004 – ago-2026» cabe en un portatil y a 390 px empuja la celda
   entera fuera de la pantalla. El reparto es el de cada fecha, que es corta, con el guion de en
   medio como el unico punto por el que la linea puede caer. */
.cart-fecha { white-space: nowrap; }

/* Los años de la ventana, DEBAJO y en letra apagada. No son un septimo dato de la rejilla: son la
   traduccion de «sep-2004 – ago-2026» a la unidad en la que se piensa una cartera («¿cuanto
   tiempo?»), y por eso van en su propia linea y mas pequenos. `display:block` los baja de linea;
   sin el, «22 años» se leeria como parte de la ventana. El tamano va declarado aparte (y no en el
   atajo `font:`) para que se vea de un vistazo que es MAS pequeño que el de la ventana de al lado,
   que va en `--ds-cuerpo-grande`. */
.cart-anos {
  display: block;
  margin-block-start: 2px;
  color: var(--hueso-3);
  font-family: var(--prosa);
  font-size: var(--ds-pie);
  line-height: var(--ds-linea-cuerpo);
}

/* La cifra que responde a la pregunta es la unica con brasa. En una rejilla de cinco, si todas
   destacan, no destaca ninguna. */
.cart-metrica-clave .cart-metrica-valor {
  color: var(--catodo);
  font-size: var(--ds-titulo-3);
}


/* ——— las curvas ———
   El `svg` lleva `viewBox` fijo y `width:100%` desde el JS: la caja escala con la columna y el
   alto se queda en el viewBox, de modo que cambiar de ancho no empuja la pagina hacia abajo. */
.cart-grafico {
  margin: var(--ds-esp-6) 0;
  min-width: 0;
}

.cart-grafico-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cart-rejilla { stroke: var(--rejilla); stroke-width: 1; }

.cart-linea {
  fill: none;
  stroke: var(--catodo);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Las cifras del eje van en el tipo de datos, no en la prosa: una columna de etiquetas de eje con
   la cifra proporcional baila y no se lee como una escala. */
.cart-texto {
  fill: var(--hueso-3);
  font: 400 12px var(--datos);
  font-variant-numeric: tabular-nums;
}

/* Los dos cortes horizontales. Se separan porque se apoyan en bordes distintos: la rejilla se
   ancla a la izquierda, los meses se ancla cada uno a su extremo. El mismo estilo para las dos
   dejaria el primer mes pegado al borde de la rejilla y el ultimo colgando fuera de la caja. */
.cart-tick-y { dominant-baseline: middle; }

.cart-tick-x {
  fill: var(--bronce);
  font-size: 11px;
}

.cart-grafico-pie {
  margin-block-start: var(--ds-esp-2);
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.5 var(--prosa);
}

/* ——— el aviso de rentabilidades ———
   Va al lado de la cifra que explica, con su caja y su tamano pequeno. Deliberadamente NO es un
   pie de pagina ni un texto gris sobre gris: la regulacion (art. 7 Ley 3/1991) pide que la cifra
   y su advertencia se puedan leer juntas, y eso exige contraste, no un adorno.

   UNA sola vez en la ficha (P13-H), bajo el bloque de cifras. No hay ya una regla aparte para el de
   las curvas: con dos curvas la frase salia tres veces seguidas, y con el metodo y el recuadro
   final eran cinco en una pantalla, que es como no ponerla ninguna. */
.cart-aviso {
  margin: var(--ds-esp-4) 0 0;
  padding-inline-start: var(--ds-esp-3);
  border-inline-start: 2px solid var(--catodo);
  color: var(--hueso-2);
  font: 400 var(--ds-pie)/1.5 var(--prosa);
}

/* ——— el fallo: nunca ceros, siempre la frase ———
   Este es el bloque mas importante de la hoja. Sin el, `carteras.js` no tiene donde poner «No se
   han podido cargar los datos historicos.» y la pagina cae en un hueco vacio que se lee como
   «no hay nada que ver». */
.cart-sin-datos {
  margin: var(--ds-esp-5) 0;
  padding: var(--ds-esp-4);
  background: var(--ds-superficie-2);
  border: 1px dashed var(--ds-borde-fuerte);
  border-radius: var(--ds-radio-s);
  color: var(--hueso-2);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}


/* ——— el simulador ———
   El selector «partir de» va el solo, con su campo de peso al lado, no en una rejilla de tres
   columnas: es la unica accion que se hace «entera» (elige una y se rellena sola), y separarla
   del resto hace claro que las otras solo sirven para ajustar. */
.cart-fila-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-esp-3);
  margin-block-end: var(--ds-esp-5);
}

.cart-campo-rotulo {
  color: var(--hueso-2);
  font: 500 var(--ds-rotulo)/1.5 var(--condensada);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}

.cart-selector,
.cart-campo {
  min-height: 44px;
  padding: var(--ds-esp-2) var(--ds-esp-3);
  background: var(--ds-superficie-2);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-s);
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/1.4 var(--datos);
  font-variant-numeric: tabular-nums;
}

.cart-selector { max-width: 100%; }

/* Las `<option>` del desplegable. Se visten con la misma caja que el campo para que el selector
   no salga como un control del sistema en medio de una pagina que no usa ninguno; en movil, donde
   el desplegable nativo se dibuja al pulsar, estas reglas se ignoran y sale como el navegador
   quiere, que es justo lo que se busca. */
.cart-opcion {
  background: var(--ds-superficie-2);
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/1.4 var(--prosa);
}

/* Los diez campos de peso. `minmax(0, 1fr)` por lo mismo que en las metricas: un `auto` en el
   minimo deja que el nombre largo de un componente (o su cifra) empuje la celda. */
.cart-campos {
  display: grid;
  gap: var(--ds-esp-4);
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-block-end: var(--ds-esp-4);
}

.cart-celda {
  display: flex;
  flex-direction: column;
  gap: var(--ds-esp-1);
  min-width: 0;
}

.cart-campo { width: 100%; }
.cart-campo-rotulo { overflow-wrap: anywhere; }

/* ——— la suma y su error ———
   La suma visible es la mitad del trabajo de quien teclea: sin ella, cambiar «20» por «25» no se
   ve pasar nada. El error va en brasa, el acierto en el crema: el color es el mensaje. */
.cart-suma {
  margin: 0 0 var(--ds-esp-4);
  padding: var(--ds-esp-3) var(--ds-esp-4);
  background: var(--ds-superficie-1);
  border-inline-start: 2px solid var(--ds-borde);
  border-radius: var(--ds-radio-s);
  color: var(--hueso-2);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}

.cart-suma-error {
  border-inline-start-color: var(--catodo);
  color: var(--hueso);
}

.cart-suma-ok { border-inline-start-color: var(--ds-borde-fuerte); }

.cart-salida { min-width: 0; }

/* ——— el foco ———
   En el simulador hay diez campos numericos y un selector: el teclado es la primera forma de
   usarlo, y un contorno que no se ve es un campo que no se puede rellenar sin el raton. El
   `outline` va con `offset` para que no quede pegado al campo ni desaparezca en el borde de la
   pantalla. */
[data-carteras-ficha] :focus-visible,
[data-carteras-simulador] :focus-visible {
  outline: 2px solid var(--catodo);
  outline-offset: var(--ds-esp-1);
}

/* ——— el movil (390 px) ———
   El unico trabajo aqui es que nada desborde: a 390 px la rejilla de metricas y la de campos caen
   a una columna sola, que es lo que se lee. Los margenes de pantalla los pone el layout de la
   pagina, no esta hoja. */
@media (max-width: 640px) {
  .cart-metricas-lista,
  .cart-campos {
    grid-template-columns: minmax(0, 1fr);
  }

  /* La etiqueta del selector baja a su propia linea: en una fila con el campo, el nombre se
     parte y el desplegable se queda sin sitio. */
  .cart-fila-selector {
    flex-direction: column;
    align-items: stretch;
  }

  .cart-metricas { padding: var(--ds-esp-4); }
}

/* ——— el movimiento ———
   La unica transicion de esta seccion es la de los campos, y es de un color de fondo y un borde:
   se ve al tabular en un campo que pasa a no valido, que es justo cuando la vista esta hablando.
   Con movimiento reducido se apaga, y se apaga de verdad (no se queda declarada). */
.cart-campo,
.cart-selector {
  transition: background var(--ds-t-rapida) var(--ds-curva),
              border-color var(--ds-t-rapida) var(--ds-curva);
}

@media (prefers-reduced-motion: reduce) {
  [data-carteras-ficha] *,
  [data-carteras-ficha] *::before,
  [data-carteras-ficha] *::after,
  [data-carteras-simulador] *,
  [data-carteras-simulador] *::before,
  [data-carteras-simulador] *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ——— el marco que hornea el publicador (clases carteras-*) ———
   Añadido al integrar P3: seo.py emite estas clases y la hoja solo vestía las cart-* del módulo. */

/* Las migas de pan. Las usa el indice de las calculadoras (`catalogo.css`) y el foro (`foro.css`),
   cada una con su hoja; estas ocho paginas tienen la suya, y sin regla las migas salian con la
   tipografia del articulo: mas grandes que el menu y que el pie, que es al reves. Son una
   orientacion, no un contenido, asi que van en el tamano del pie y en el gris apagado.

   El separador es un `::before` y no un caracter suelto en el marcado: asi el lector de pantalla
   no lo anuncia, y el hueco entre las dos migas lo pone la caja (`gap`) y no los espacios del HTML.
   `flex-wrap: wrap` es lo que hace que a 390 px la tercera migas baje a su linea en vez de empujar
   la pagina a un scroll horizontal: una miga que hay que desplazar para ver no es una orientacion. */
.carteras .migas {
  margin: 0 0 var(--ds-esp-5);
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.4 var(--prosa);
}

.carteras .migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.carteras .migas li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.carteras .migas li + li::before {
  content: "/";
  margin-inline-end: var(--ds-esp-2);
  color: var(--bronce);
}

.carteras .migas a {
  color: var(--hueso-3);
  text-decoration-color: var(--bronce);
  text-underline-offset: var(--ds-esp-1);
}

.carteras .migas a:hover,
.carteras .migas a:focus-visible {
  color: var(--hueso);
}

.carteras .migas [aria-current='page'] { color: var(--hueso-2); }

.carteras-rejilla {
  list-style: none;
  padding: 0;
  margin: var(--ds-esp-4) 0 var(--ds-esp-6);
  display: grid;
  gap: var(--ds-esp-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.carteras-tarjeta a {
  display: flex;
  flex-direction: column;
  gap: var(--ds-esp-2);
  height: 100%;
  padding: var(--ds-esp-4);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
  background: var(--ds-superficie-1);
  color: var(--hueso);
  text-decoration: none;
  transition: border-color var(--ds-t-rapida) var(--ds-curva);
}
.carteras-tarjeta a:hover { border-color: var(--ds-borde-fuerte); }
.carteras-tarjeta a:focus-visible { outline: 2px solid var(--bronce); outline-offset: 2px; }
.carteras-tarjeta h2 { margin: 0; font-size: var(--ds-titulo-3); }
.carteras-reparto { margin: 0; color: var(--hueso-2); font-size: var(--ds-pie); line-height: var(--ds-linea-cuerpo); }
.carteras-flecha { margin-top: auto; color: var(--bronce); }
/* ——— las dos cifras de la tarjeta (P12, lote F) ———
   Van HORNEADAS en el HTML, no pintadas por `carteras.js`: el indice no carga el modulo, y un numero
   que depende de un modulo es un numero que no esta. Son la unica parte de la tarjeta que no sale de
   `modelos.json`, y salen de `series.json` con la misma cuenta que la ficha —el test
   `CifrasHorneadas` lo comprueba contra `simula` de node—.

   Dos celdas y no un parrafo: cada cifra lleva su nombre («Anualizada», «Total») porque un 10,0 % y
   un 708,9 % sin nombre se leen como dos medidas de lo mismo y solo una es al año. La rejilla usa
   `minmax(0, 1fr)`: a 390 px las dos celdas se apilan solas y, si la cifra no cabe, baja de linea en
   vez de empujar la tarjeta entera fuera de la pantalla. */
.carteras-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--ds-esp-2) var(--ds-esp-3);
  margin: var(--ds-esp-1) 0 0;
  padding-block-start: var(--ds-esp-2);
  border-block-start: 1px solid var(--ds-borde);
}
.carteras-cifra { min-width: 0; }
.carteras-cifra dt {
  color: var(--hueso-3);
  font-size: var(--ds-rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}
.carteras-cifra dd { margin: 0; }
.carteras-anualizada, .carteras-total {
  color: var(--hueso);
  font-family: var(--datos);
  font-size: var(--ds-cuerpo);
  overflow-wrap: anywhere;
}
/* La anualizada es la que responde a la pregunta; el total acompaña. El brasa se lo lleva la
   primera, como en el bloque de cifras de la ficha: si las dos lo llevan, no destaca ninguna. */
.carteras-anualizada { color: var(--catodo); }
/* La ventana, debajo de las dos cifras y en el tono apagado: sin ella, un 10,0 % no dice de cuanto
   tiempo habla. Va en su propio `<p>` y no en la rejilla porque es un dato de la TARJETA, no una
   cifra mas.

   Las dos fechas van cada una en su `<span class="carteras-fecha">` con `nowrap` (abajo): el
   rango entero NO lo lleva, porque a 390 px una celda insquitable empuja la tarjeta entera fuera de
   la pantalla. Lo que se permite es que la linea caiga por el guion de en medio, que es donde se
   lee bien. */
.carteras-periodo {
  margin: var(--ds-esp-2) 0 0;
  color: var(--hueso-3);
  font-size: var(--ds-pie);
}

/* Una fecha con su propio elemento, para poder decir que NO se parte. «sep-2004 – ago-2026 · 263
   meses» se partia justo por el guion de la fecha, y una fecha partida («sep-» arriba, «2004»
   abajo) ya no es una fecha. */
.carteras-fecha { white-space: nowrap; }

/* Los años, en su propia linea y MAS PEQUEÑOS que la ventana. No son un dato más de la tarjeta:
   son la traducción de la ventana a la unidad en la que se piensa una cartera («¿cuánto tiempo?»),
   y por eso van debajo y en letra apagada. `display:block` los baja de linea; sin él, «22 años» se
   leería como parte de la ventana. */
.carteras-anos {
  display: block;
  color: var(--hueso-3);
  font-size: var(--ds-rotulo);
  font-family: var(--datos);
  line-height: var(--ds-linea-cuerpo);
}
/* El hueco de la curva en la ficha. Solo el margen: lo que hay DENTRO lo pinta `carteras.js` y lo
   viste la hoja de la vista (`.cart-*`), que es la misma. Este bloque existe para que el modulo
   tenga donde escribir, y para que quien lea sin JavaScript sepa, en su `<noscript>`, de que
   ventana se habla. */
.carteras-historico { margin-block: var(--ds-esp-5); }
.carteras-rotulo { color: var(--hueso-3); font-size: var(--ds-rotulo); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; }
/* La tabla de composición: a 390 px no cabe, así que se desplaza DENTRO de su caja y la página no. */
.carteras-tabla {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: var(--ds-esp-5) 0 var(--ds-esp-2);
  font-size: var(--ds-pie);
}
/* El título no se desplaza con la tabla: sin sticky, a 390 px salía cortado por el borde. */
.carteras-tabla caption { position: sticky; left: 0; display: block; max-width: calc(100vw - 32px); text-align: left; color: var(--hueso-2); padding-bottom: var(--ds-esp-2); }
.carteras-tabla th, .carteras-tabla td { padding: var(--ds-esp-2) var(--ds-esp-3); border-bottom: 1px solid var(--ds-borde); text-align: left; vertical-align: top; }
.carteras-tabla th { color: var(--hueso-3); font-weight: 500; }
.carteras-peso, .carteras-isin, .carteras-ter { font-family: var(--datos); white-space: nowrap; }
.carteras-nota { color: var(--hueso-2); font-size: var(--ds-pie); }
/* El bloque de «como se ha calculado y de donde salen los datos» y el aviso legal comparten caja:
   los dos son una nota que cierra la pagina, no una seccion de lectura, y separarlos seria fingir
   que son dos cosas. */
.carteras-fuentes, .carteras-legal {
  margin-top: var(--ds-esp-6);
  padding: var(--ds-esp-4);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
  background: var(--ds-superficie-1);
}
.carteras-fuentes h2 { margin-top: 0; }
.carteras-fuentes h3 { margin-block: var(--ds-esp-4) var(--ds-esp-2); font-size: var(--ds-titulo-3); }
.carteras-fuentes p { color: var(--hueso-2); }
/* El parrafo del metodo va un punto mas claro que el resto del bloque: es donde esta la respuesta a
   «como has medido esto», y escondida entre dos parrafos igual que los demas no se encuentra. El
   selector lleva `p` para ganarle a `.carteras-fuentes p` por especificidad, sin `!important`: dos
   selectores que compiten se resuelven escribiendo el mas especifico, y un `!important` aqui seria
   tapar el problema en vez de resolverlo. */
.carteras-fuentes p.carteras-metodo { color: var(--hueso); }
.carteras-metodo strong { color: var(--bronce); }
/* La cita de una fuente, en italica y sin comillas propias (las bring el HTML), para que se lea como
   lo que es —el nombre de un fichero de otro— y no como un parrafo mas de esta pagina. */
.carteras-fuentes cite { color: var(--hueso); font-style: italic; }
/* La lista de fuentes: un `li` por origen, con sus enlaces y su licencia debajo. A 390 px un enlace
   largo se parte solo (`overflow-wrap`) en vez de empujar la pagina: una URL de API es justo el caso
   que hace desbordar un `li` si se le pone `nowrap`. */
.carteras-fuentes-lista { margin: 0; padding-inline-start: var(--ds-esp-5); }
.carteras-fuentes-lista li { margin-block: var(--ds-esp-2); color: var(--hueso-2); }

/* Los enlaces de «Las fuentes», con el estilo de enlace de la CASA. Sin esto salian en el azul por
   defecto del navegador, que es lo unico de la pagina que parecia de otra pagina: el resto —la
   tabla, las migas, el texto— es crema y bronce, y un azul del sistema entre eso se lee como un
   error. Los tokens son los mismos que usa `estilo.css` para los enlaces de la prosa
   (`.prosa-panel a`, `#lectura-texto a`), no un color propio de esta seccion: un enlace con otros
   tokens es un enlace que no es de la casa y se separa del resto en cuanto cambia el tema.

   `overflow-wrap` se queda por lo de las URLs del BCE, que son larguisimas. */
.carteras-fuentes-lista a {
  color: var(--hueso);
  text-decoration-color: var(--catodo);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.carteras-fuentes-lista a:hover,
.carteras-fuentes-lista a:focus-visible { color: var(--catodo); }
/* La licencia se ve mas pequeña y mas apagada que el nombre del origen: es el pie de la cita, y no
   la informacion principal. Pero sale ENTERA y con su nombre («CC BY 4.0»), porque una licencia sin
   nombrar no es una licencia. */
.carteras-fuente-licencia { display: block; color: var(--hueso-3); font-size: var(--ds-pie); }
.carteras-legal p { margin: var(--ds-esp-1) 0; }
@media (prefers-reduced-motion: reduce) { .carteras-tarjeta a { transition: none; } }

/* ——— los quesitos: el anillo de la composicion (P11, seccion D) ———
   El color de cada componente vive AQUI y en ningun otro sitio de la seccion, en la clase
   `q-<componente>`, que es la misma en las siete carteras: `rv_mundo` es el mismo tono este
   lunes que el martes, en la ficha y en la tarjeta. El SVG no lleva ni un color escrito, solo la
   clase, de modo que el mismo marcado sirve en cualquier tema y cambiar la paleta es cambiar
   estas diez lineas.

   Los tonos salen de tokens de `tokens.css` y, donde no hay uno del tono justo, de `color-mix`
   sobre dos que si. Se eligieron por FAMILIA y no a ojo: renta variable en oro y bronce, oro en
   el amarillo metalico del sistema, monetario en hueso apagado, emergentes y materias primas en
   dos tonos distinguibles, y los cuatro bonos en cobre y arena. Ademas, los dos que comparten
   cartera tienen que leerse como dos: eso lo mide `test_carteras_quesitos.py` en CIELAB, y es lo
   que impide que un tono nuevo se acerque a uno que ya esta. */

/* El unico sitio donde vive el color de un componente. Cada componente publica su tono con
   `color` y los dos que lo pintan (el sector del aro y la muestra de la leyenda) lo toman con
   `currentColor`, de modo que el mismo valor llega a los dos sin poder separarse. Un `var()` por
   medio habria sido lo mismo, con un token mas; la prueba de que esta hoja no declara tokens
   (`test_carteras_vista.py`) es la que obliga a esta via. */

/* Renta variable: oro para el mundo desarrollado, bronce para las pequenas de EE. UU. El oro
   va con un 45 % de su propia sombra porque el token `--oro` a secas es el del commodity, y la
   Cartera Permanente lleva los dos a la vez. */
.q-rv_mundo        { color: color-mix(in srgb, var(--oro) 45%, var(--oro-sombra)); }
.q-small_value_usa { color: var(--bronce); }
/* El oro fisico es el amarillo metalico del sistema, sin mezcla: es el token de la marca. */
.q-oro             { color: var(--oro); }
/* El monetario es hueso apagado, el tono que menos llama la atencion: es dinero en efectivo y
   pesa lo que pese, y no tiene por que competir con el resto del aro. */
.q-monetario       { color: color-mix(in srgb, var(--hueso-3) 20%, var(--bronce)); }
/* Emergentes y materias primas, dos tonos distinguibles: brasa y bronce. Los dos son los mismos
   que se usan en el resto del sistema, no tonos inventados para el quesito. */
.q-emergentes      { color: var(--catodo); }
.q-materias_primas { color: color-mix(in srgb, var(--bronce) 70%, var(--oro-sombra)); }
/* Los cuatro bonos, de cobre (cobre y brasa) a arena (hueso y bronce). Los plazos van del cobre
   profundo al arena: la deuda larga es la que mas se nota en el aro, y la corta es la que mas se
   parece a dinero. */
.q-bonos_eur       { color: color-mix(in srgb, var(--oro-sombra) 55%, var(--catodo)); }
.q-bonos_largos    { color: color-mix(in srgb, var(--oro-sombra) 10%, var(--catodo)); }
.q-bonos_medios    { color: var(--hueso-2); }
.q-bonos_cortos    { color: color-mix(in srgb, var(--hueso-2) 90%, var(--bronce)); }

/* La ficha: el anillo de 220 px y la leyenda, uno al lado del otro. Se apilan por debajo de
   600 px, que es donde 220 px mas la leyenda no caben en una columna de lectura. */
.carteras-quesitos {
  /* Rejilla y no flex: el pie ocupa el 100 % en flex y mandaba la leyenda debajo del anillo,
     dejando media caja vacia. Anillo a la izquierda (dos filas), pie y leyenda a la derecha. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: var(--ds-esp-6);
  row-gap: var(--ds-esp-3);
  margin: var(--ds-esp-5) 0 var(--ds-esp-2);
  padding: var(--ds-esp-4);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
  background: var(--ds-superficie-1);
}

/* `max-width: 100%` y no un ancho fijo: el SVG trae su `width` en el marcado (96 o 220 segun
   donde este) y con esto escala con la caja sin poder desbordarla a 390 px. */
.quesitos { display: block; flex: 0 0 auto; max-width: 100%; height: auto; overflow: visible; }
.quesito-sector { fill: currentColor; transition: opacity var(--ds-t-rapida) var(--ds-curva); }
/* El hueco se pinta con el color de la CAJA, no con el del fondo de la pagina: el anillo vive
   dentro de una caja con su propia superficie, y un hueco del color del `--fondo` se veria como
   un agujero si la caja cambiara de tono. */
.quesito-hueco { fill: var(--ds-superficie-1); pointer-events: none; }

/* El tamano va en unidades del viewBox (100): 9 son ~20 px en el anillo de 220 y caben en el hueco
   de 58. Con un token en rem, el SVG lo escalaba x2,2 y el texto se salia del hueco. */
.quesitos-centro {
  fill: var(--hueso-2);
  font: 500 9px/1 var(--prosa);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.quesitos-leyenda-cap { flex: 0 0 100%; color: var(--hueso-3); font-size: var(--ds-rotulo); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; }
.quesitos-leyenda {
  flex: 1 1 16rem;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ds-esp-1);
}
.quesitos-leyenda-fila {
  display: grid;
  /* `minmax(0, 1fr)` en el nombre y no `1fr`: sin el minimo, un nombre largo empuja la fila
     entera y el peso sale de la caja. */
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--ds-esp-2);
  font: 400 var(--ds-pie)/1.4 var(--prosa);
  color: var(--hueso-2);
  transition: color var(--ds-t-rapida) var(--ds-curva);
}
/* La muestra es un cuadrado y no un punto: a 12 px se distingue mejor el TONO que la forma. El
   color va en la misma clase que el del sector, para que no pueda haber dos. */
.quesitos-muestra { inline-size: 12px; block-size: 12px; border-radius: 3px; background: currentColor; align-self: center; }
.quesitos-leyenda-peso { font-family: var(--datos); font-variant-numeric: tabular-nums; color: var(--hueso); }

/* ——— el realce: pasar por la fila enciende su quesito, y al reves ———
   Solo CSS, con `:has()`. Sin esto el aro y la lista serian dos cosas que no se hablan, y quien
   pasa el raton por «oro 25 %» tendria que buscar en el aro que slice es el suyo.

   El efecto NO pinta el sector de otro color: sube la opacidad del que se señala y baja la de
   los demas. Un color nuevo ahi seria un segundo sitio donde vive el color de un componente, y
   el segundo sitio es siempre el que se queda viejo. */
.carteras-quesitos:has(.quesitos-leyenda-fila:hover) .quesito-sector { opacity: .45; }
.carteras-quesitos:has(.quesitos-leyenda-fila:hover) .quesitos-leyenda-fila { color: var(--hueso-3); }
.carteras-quesitos:has(.quesitos-leyenda-fila:hover) .quesito-sector[data-componente]:hover { opacity: 1; }
.carteras-quesitos:has(.quesito-sector:hover) .quesito-sector { opacity: .45; }
.carteras-quesitos:has(.quesito-sector:hover) .quesitos-leyenda-fila { color: var(--hueso-3); }
.carteras-quesitos:has(.quesito-sector:hover) .quesitos-leyenda-fila:hover { opacity: 1; }

/* El indice: el aro de 96 px arriba a la derecha de la tarjeta, con el titulo al lado. El
   `space-between` lo pone a la derecha; el `min-width: 0` del titulo deja que el texto se apriete
   en vez de empujar el aro fuera de la caja, que es lo que descuadraba la rejilla. */
.carteras-tarjeta-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-esp-3);
}
.carteras-tarjeta-cab h2 { margin: 0; min-width: 0; font-size: var(--ds-titulo-3); }
.carteras-tarjeta-cab .quesitos { inline-size: 96px; block-size: 96px; }

@media (max-width: 600px) {
  .carteras-quesitos { padding: var(--ds-esp-3); }
  .quesitos { margin-inline: auto; }
  .quesitos-leyenda { flex: 1 1 100%; }
  /* En el movil el aro de la tarjeta baja a 72 px: con el titulo al lado, 96 px se comian media
     caja y el nombre de la cartera se partia en tres lineas. Sigue siendo legible a 72. */
  .carteras-tarjeta-cab .quesitos { inline-size: 72px; block-size: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .quesito-sector,
  .quesitos-leyenda-fila { transition: none; }
}

.carteras-quesitos > .quesitos { grid-row: 1 / span 2; }
.carteras-quesitos > .quesitos-leyenda-cap { align-self: end; }
.carteras-quesitos > .quesitos-leyenda { align-self: start; }
@media (max-width: 599px) {
  .carteras-quesitos { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .carteras-quesitos > .quesitos { grid-row: auto; }
}