/* Los widgets mineros (portal/widgets.py). Se acomodan al ancho de donde los pongan, con consultas de contenedor: sirven igual a lo ancho y en
   la columna. Gramática de imprenta: filetes, tinta y un solo acento para lo elegido. Sin radios ni sombras. */
.widget { container-type: inline-size; padding-block: 8px 48px; min-width: 0; }
.lateral .widget { padding-block: 0; }
.w-bajada { max-width: 62ch; margin-bottom: 18px; font-size: var(--t-base); line-height: 1.5; color: var(--tinta-2); }
.w-cuerpo { display: grid; gap: 20px; align-items: start; }
.w-pie, .w-nota { margin-top: 14px; font: 500 var(--t-meta)/1.45 var(--sans); color: var(--tinta-2); }
.w-pie a, .w-enlace a { color: var(--rojo); text-decoration: underline; text-underline-offset: 3px; }
.w-enlace { margin-top: 12px; font: 600 var(--t-ui)/1.3 var(--sans); }
.w-cifra { font: 700 min(2.5rem, var(--letra-max))/1 var(--fuente-titular); color: var(--rojo); font-variant-numeric: lining-nums; }
.w-marco { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 16px; background: var(--papel-2); }
.w-marco figcaption { justify-self: start; font: 500 var(--t-meta)/1.4 var(--sans); color: var(--tinta-2); }
.w-marco figcaption b { font: 700 1.75rem/1 var(--fuente-titular); color: var(--tinta); font-variant-numeric: lining-nums; }
.w-mapa { height: auto; width: min(100%, 340px); max-height: 460px; }
.w-marco--mini { padding: 8px; }
.w-marco--mini .w-mapa { max-height: 220px; }
.widget--unidad .mapa__mina.es-elegida { r: 10; }
.mapa__mina.es-activo { fill: var(--rojo); }
.w-marco--acento .mapa__mina { fill: var(--rojo); }
.mapa__mina { fill-opacity: .9; }
.widget--mineral .mapa__mina:not(.es-activo) { fill: var(--tinta); fill-opacity: .16; }
.w-pin { fill: var(--papel); font: 700 8px var(--sans); text-anchor: middle; pointer-events: none; }
.w-detalle { min-width: 0; }
.w-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.w-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--filete); }
.w-lista li[hidden] { display: none; }
.w-lista a { font: 600 var(--t-s)/1.3 var(--fuente-titular); }
.w-lista a:hover { color: var(--rojo); }
.w-lista span { font: 500 var(--t-meta)/1.5 var(--sans); color: var(--tinta-2); }
.w-detalle .w-lista { max-height: 420px; overflow-y: auto; scrollbar-width: thin; padding-right: 8px; }
.w-lista--suelta { margin: 6px 0 12px; }
.w-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.w-chip { min-height: 40px; padding: 0 10px; border: 1px solid var(--filete); background: var(--papel); color: var(--tinta); font: 600 var(--t-meta)/1 var(--sans); cursor: pointer; }
.w-chip b { font-family: var(--fuente-titular); font-size: 1rem; }
.w-chip span { margin-left: 2px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.w-chip:hover { border-color: var(--tinta); }
.w-chip[aria-pressed="true"] { border-color: var(--rojo); background: var(--rojo); color: var(--sobre-acento); }
.w-chip[aria-pressed="true"] span { color: inherit; }

/* Perú en 3D: una maqueta dibujada a tinta */
.relieve { margin: 0; padding: 12px; background: var(--papel-2); }
.relieve svg { display: block; width: 100%; max-height: 560px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.relieve svg.es-girando { cursor: grabbing; }
.relieve__sombra { fill: #b9b4a9; }
.relieve__tierra { fill: #e3e0d8; stroke: #b9b4a9; stroke-width: 1; }
.relieve__col { cursor: pointer; outline: 0; }
.relieve__cara--0 { fill: var(--tinta); }
.relieve__cara--1 { fill: color-mix(in srgb, var(--tinta) 72%, var(--papel)); }
.relieve__tapa { fill: color-mix(in srgb, var(--tinta) 45%, var(--papel)); }
.relieve__col:hover .relieve__tapa { fill: var(--rojo); }
.relieve__col.es-activo .relieve__cara--0 { fill: color-mix(in srgb, var(--rojo) 78%, #000); }
.relieve__col.es-activo .relieve__cara--1 { fill: var(--rojo); }
.relieve__col.es-activo .relieve__tapa { fill: color-mix(in srgb, var(--rojo) 55%, var(--papel)); }
.relieve__col:focus-visible .relieve__tapa { stroke: var(--rojo); stroke-width: 2; }
.relieve__rotulo { fill: var(--tinta); stroke: var(--papel-2); stroke-width: 3px; paint-order: stroke; font: 700 12px var(--sans); text-anchor: middle; pointer-events: none; }
.w-giro { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

/* Regiones en mosaico: el cuadro se oscurece con el número, y lo elegido va en el acento */
.mosaico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; max-width: 420px; }
.mosaico__celda { display: grid; align-content: center; justify-items: center; aspect-ratio: 1; padding: 0; border: 1px solid var(--filete); background: color-mix(in srgb, var(--tinta) var(--tono), var(--papel)); color: var(--tinta); font: 600 clamp(.6875rem, 2.8cqw, .8125rem)/1.1 var(--sans); cursor: pointer; }
.mosaico__celda b { font: 700 1.0625rem/1.1 var(--fuente-titular); font-variant-numeric: lining-nums; }
.mosaico__celda[style*="--tono:5"], .mosaico__celda[style*="--tono:6"], .mosaico__celda[style*="--tono:7"], .mosaico__celda[style*="--tono:8"], .mosaico__celda[style*="--tono:9"], .mosaico__celda[style*="--tono:100"] { color: var(--papel); }
.mosaico__celda:disabled { background: var(--papel-2); color: var(--tinta-2); cursor: default; }
.mosaico__celda:hover:not(:disabled) { border-color: var(--rojo); }
.mosaico__celda.es-activo { border-color: var(--rojo); background: var(--rojo); color: var(--sobre-acento); }

/* Tabla de minerales */
.tabla-min { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.elemento { display: grid; grid-template-columns: 1fr auto; padding: 8px; border: 1px solid var(--tinta); background: var(--papel); color: var(--tinta); text-align: left; cursor: pointer; font-family: var(--sans); }
.elemento i { grid-column: 1; font: 500 var(--t-rotulo)/1.2 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.elemento b { grid-column: 1 / -1; font: 700 2rem/1.1 var(--fuente-titular); }
.elemento span { grid-column: 1 / -1; font: 500 var(--t-rotulo)/1.3 var(--sans); }
.elemento em { grid-column: 2; grid-row: 1; font: 700 var(--t-meta)/1.2 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.elemento:hover { border-color: var(--rojo); color: var(--rojo); }
.elemento.es-activo { border-color: var(--rojo); background: var(--rojo); color: var(--sobre-acento); }

/* Los grupos en barras */
.barras { margin: 0; padding: 0; list-style: none; }
.barras > li { border-top: 1px solid var(--filete); }
.barras summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 0; cursor: pointer; list-style: none; }
.barras summary::-webkit-details-marker, .testigo summary::-webkit-details-marker { display: none; }
.barras__nombre { font: 600 var(--t-s)/1.3 var(--fuente-titular); }
.barras__pista { grid-column: 1 / -1; grid-row: 2; display: block; height: 10px; background: var(--papel-2); }
.barras__pista i { display: block; height: 100%; background: var(--tinta); }
.barras > li:first-child .barras__pista i { background: var(--rojo); }
.barras summary b { font: 700 var(--t-m)/1 var(--fuente-titular); font-variant-numeric: lining-nums; }
.barras summary:hover .barras__nombre { color: var(--rojo); }

/* Quién es dueño: la mina entera es el 100 % */
.socios { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.socios .titular span { margin-left: 4px; font: 500 var(--t-meta)/1.3 var(--sans); color: var(--tinta-2); }
.socios__barra { display: flex; height: 18px; margin: 8px 0; gap: 2px; }
.socios__parte { display: block; min-width: 2px; }
.socios__parte--0 { background: var(--rojo); }
.socios__parte--1 { background: var(--tinta); }
.socios__parte--2 { background: color-mix(in srgb, var(--tinta) 55%, var(--papel)); }
.socios__parte--3 { background: color-mix(in srgb, var(--tinta) 25%, var(--papel)); }
.socios__parte--resto { background: repeating-linear-gradient(135deg, var(--filete) 0 3px, var(--papel) 3px 6px); }
.socios__nombres { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font: 500 var(--t-meta)/1.4 var(--sans); }
.socios__nombres i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; }
.socios__nombres b { font-variant-numeric: tabular-nums; }

/* Proyectos en cartera */
.widget--cartera .subtitulo { margin: 16px 0 4px; }
.widget--cartera .w-bajada { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cartera { display: grid; margin: 0; padding: 0; list-style: none; column-gap: 32px; }
.cartera li { display: grid; gap: 2px; align-content: start; padding: 10px 0; border-top: 1px solid var(--filete); }
.cartera a:hover { color: var(--rojo); }
.cartera span { font: 500 var(--t-meta)/1.4 var(--sans); color: var(--tinta-2); }
.cartera__dueno { color: var(--tinta) !important; }

/* Testigo de perforación */
.testigo { margin: 0; padding: 0; list-style: none; }
.testigo summary { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; cursor: pointer; list-style: none; }
.testigo__capa { display: block; height: var(--alto); border: 1px solid var(--tinta); border-top-width: 0; background-color: var(--papel-2); }
.testigo > li:first-child .testigo__capa { border-top-width: 1px; }
.testigo__capa--cu { background-image: repeating-linear-gradient(45deg, var(--rojo) 0 2px, transparent 2px 7px); }
.testigo__capa--au { background-image: radial-gradient(var(--tinta) 1.5px, transparent 2px); background-size: 8px 8px; }
.testigo__capa--ag { background-image: repeating-linear-gradient(0deg, var(--tinta) 0 1px, transparent 1px 6px); }
.testigo__capa--zn { background-image: repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 6px); }
.testigo__capa--pb { background-image: repeating-linear-gradient(135deg, var(--tinta) 0 3px, transparent 3px 7px); }
.testigo__capa--fe { background-color: color-mix(in srgb, var(--tinta) 75%, var(--papel)); }
.testigo__capa--mo, .testigo__capa--sn { background-image: repeating-linear-gradient(45deg, var(--tinta) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, var(--tinta) 0 1px, transparent 1px 5px); }
.testigo summary > span { font: 500 var(--t-meta)/1.4 var(--sans); color: var(--tinta-2); }
.testigo summary strong { display: block; font: 600 var(--t-s)/1.25 var(--fuente-titular); color: var(--tinta); }
.testigo summary:hover strong { color: var(--rojo); }
.testigo .w-lista--suelta { margin: 4px 0 10px 70px; }

/* La unidad de hoy */
.unidad { display: grid; gap: 16px; }
.unidad a:hover { color: var(--rojo); }
.unidad__ficha { display: grid; gap: 8px; margin: 12px 0 0; }
.unidad__ficha dt { font: 700 var(--t-rotulo)/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.unidad__ficha dd { margin: 1px 0 0; font: 500 var(--t-ui)/1.4 var(--sans); }

/* Las noticias en el mapa */
.pines { margin: 0; padding: 0; list-style: none; counter-reset: pin; }
.pines li { counter-increment: pin; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 8px; padding: 10px 0; border-top: 1px solid var(--filete); }
.pines li::before { content: counter(pin); grid-row: span 2; font: 700 1.25rem/1 var(--fuente-titular); color: var(--rojo); font-variant-numeric: lining-nums; }
.pines strong { font: 600 var(--t-meta)/1.4 var(--sans); color: var(--tinta-2); }
.pines a { font: 600 var(--t-s)/1.3 var(--fuente-titular); }
.pines a:hover { color: var(--rojo); }

/* Dos mapas, uno al lado del otro cuando hay ancho */
.dos-mapas { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@container (min-width: 640px) {
  .w-cuerpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; }
  .widget--mosaico .w-cuerpo, .widget--tabla .w-cuerpo { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .cartera { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .unidad { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
  .barras { columns: 2; column-gap: 40px; }
  .barras > li { break-inside: avoid; }
}
@container (max-width: 320px) { .dos-mapas { grid-template-columns: minmax(0, 1fr); } }