/* Componentes. Cada uno con todos sus estados: reposo, hover, foco, presionado, seleccionado,
   deshabilitado, cargando y hecho. Solo usan tokens; se ven completos en /sistema. */

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font: var(--peso-normal) var(--t-cuerpo)/1.55 var(--sans);
  color: var(--texto); background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd, ol, ul, fieldset, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--amarillo); color: var(--tinta); }
.oscuro { background: var(--fondo); color: var(--texto); }
.amarilla { background: var(--fondo); color: var(--texto); }

/* Foco: anillo doble, visible sobre claro, oscuro y amarillo */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; box-shadow: 0 0 0 2px var(--foco-halo); border-radius: 6px; }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; box-shadow: none; } }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar {
  position: fixed; left: var(--e-3); top: var(--e-3); z-index: 100;
  padding: var(--e-3) var(--e-5); border-radius: var(--radio-pildora);
  background: var(--amarillo); color: var(--tinta); font-weight: var(--peso-fuerte); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--medio) var(--ease-out);
}
.saltar:focus { transform: none; }

/* Texto */
.secundario { color: var(--texto-2); }
.display { font-weight: var(--peso-medio); letter-spacing: var(--tracking-display); line-height: .92; }
.titulo-tarjeta { font-size: var(--t-titulo); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titulo); line-height: 1.1; }

/* Botón en píldora */
:root { --boton-fondo: var(--tinta); --boton-texto: var(--papel); --boton-hover: var(--tinta-3); --boton-off: var(--gris-c); --boton-off-texto: #8C8C91; }
.oscuro { --boton-fondo: var(--amarillo); --boton-texto: var(--tinta); --boton-hover: var(--amarillo-2); --boton-off: var(--tinta-3); --boton-off-texto: #8C8C91; }
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-6); border: 0; border-radius: var(--radio-pildora);
  background: var(--boton-fondo); color: var(--boton-texto);
  font: var(--peso-fuerte) 15px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--rapido) var(--ease-out), color var(--rapido) var(--ease-out), transform var(--rapido) var(--ease-out), box-shadow var(--rapido) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .boton:hover { background: var(--boton-hover); } }
.boton:active { transform: scale(.96); }
.boton:focus-visible { border-radius: var(--radio-pildora); }
.boton:disabled, .boton[aria-disabled="true"] { background: var(--boton-off); color: var(--boton-off-texto); cursor: not-allowed; transform: none; }
.boton-amarillo { --boton-fondo: var(--amarillo); --boton-texto: var(--tinta); --boton-hover: var(--amarillo-2); }
.boton-tinta { --boton-fondo: var(--tinta); --boton-texto: var(--papel); --boton-hover: var(--tinta-3); }
.boton-borde { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px currentColor; }
@media (hover: hover) { .boton-borde:hover { background: var(--texto); color: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--texto); } }
.boton-chico { min-height: 44px; padding: 0 var(--e-5); font-size: 14px; }
.boton-ancho { width: 100%; }
.flecha { display: inline-block; transition: transform var(--medio) var(--ease-out); }
@media (hover: hover) { .boton:hover .flecha, a:hover > .flecha { transform: translateX(3px); } }
.boton.cargando, .boton.hecho { pointer-events: none; }
.boton.cargando > span { visibility: hidden; }
.boton.cargando::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: girar .7s linear infinite;
}
.boton.hecho { background: var(--exito); color: #fff; }
@keyframes girar { to { transform: rotate(1turn); } }

.enlace { font-weight: var(--peso-fuerte); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color var(--rapido) var(--ease-out); }
@media (hover: hover) { .enlace:hover { text-decoration-color: currentColor; } }

/* Asterisco: el sello de la marca */
.ast { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--radio-chico); background: var(--tinta); color: var(--amarillo); }
.ast svg { width: 58%; height: 58%; }
.ast-amarillo { background: var(--amarillo); color: var(--tinta); }
.ast-chico { width: 40px; height: 40px; border-radius: 11px; }
.ast-suelto { background: none; width: 76px; height: 76px; }
.ast-suelto svg { width: 100%; height: 100%; }

/* Etiqueta en píldora */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--e-3); border-radius: var(--radio-pildora); font-size: var(--t-meta); font-weight: var(--peso-fuerte); white-space: nowrap; background: var(--papel); color: var(--tinta); }
.etiqueta-amarilla { background: var(--amarillo); color: var(--tinta); }
.etiqueta-tinta { background: var(--tinta); color: var(--amarillo); }
.etiqueta-borde { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }

/* Control segmentado: radios reales, así se maneja con flechas y lector de pantalla */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: var(--radio-pildora); background: var(--gris-c); }
.segmentado label { position: relative; cursor: pointer; }
.segmentado input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmentado span {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--e-4);
  border-radius: var(--radio-pildora); font-size: 14px; font-weight: var(--peso-fuerte); color: #47474C;
  transition: background-color var(--rapido) var(--ease-out), color var(--rapido) var(--ease-out), transform var(--rapido) var(--ease-out);
}
@media (hover: hover) { .segmentado label:hover input:not(:checked) + span { color: var(--tinta); background: rgba(15, 15, 16, .07); } }
.segmentado input:checked + span { background: var(--tinta); color: var(--papel); }
.segmentado input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; box-shadow: 0 0 0 2px var(--papel); }
.segmentado input:active + span { transform: scale(.96); }
.segmentado input:disabled + span { color: #8C8C91; background: transparent; cursor: not-allowed; text-decoration: line-through; }
.segmentado input:disabled { cursor: not-allowed; }
.segmentado-flotante { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Interruptor */
.interruptor { position: relative; display: inline-flex; align-items: center; gap: var(--e-3); cursor: pointer; min-height: 44px; font-weight: var(--peso-medio); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .riel { position: relative; flex: none; width: 48px; height: 28px; border-radius: var(--radio-pildora); background: var(--gris-c-2); transition: background-color var(--medio) var(--ease-out); }
.interruptor .riel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--papel); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--medio) var(--ease-out); }
@media (hover: hover) { .interruptor:hover .riel { background: #CFCFD2; } }
.interruptor input:checked + .riel { background: var(--tinta); }
.interruptor input:checked + .riel::after { transform: translateX(20px); background: var(--amarillo); }
.interruptor input:focus-visible + .riel { outline: 2px solid var(--tinta); outline-offset: 2px; box-shadow: 0 0 0 2px var(--papel); }
.interruptor input:disabled + .riel { opacity: .45; }
.interruptor:has(input:disabled) { cursor: not-allowed; color: var(--texto-2); }

/* Tarjeta */
.tarjeta { position: relative; border-radius: var(--radio); background: var(--superficie); padding: var(--relleno); overflow: hidden; }
.tarjeta.oscuro { background: var(--tinta); }
.tarjeta.amarilla { background: var(--amarillo); }
.tarjeta-gris { background: var(--gris-c); }
.tarjeta-foto { padding: 0; }

/* Lista de datos */
.datos { display: grid; }
.datos > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); padding: var(--e-3) 0; border-top: 1px solid var(--filete); }
.datos > div:first-child { border-top: 0; }
.datos dt { color: var(--texto-2); font-size: var(--t-chico); }
.datos dd { font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }

/* Foto con estado de carga: esqueleto con brillo hasta que la imagen llega */
.foto { position: relative; overflow: hidden; background: var(--gris-c); }
.foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
  animation: brillo 1.3s linear infinite; transition: opacity var(--medio) var(--ease-out);
}
.foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--lento) var(--ease-out); }
.foto.cargada::before { opacity: 0; animation: none; }
.foto.cargada img { opacity: 1; }
.foto.fallo::after { content: "No se pudo cargar la imagen"; position: absolute; inset: auto 0 0; padding: var(--e-4); font-size: var(--t-meta); color: var(--gris); }
@keyframes brillo { to { background-position: 250% 0; } }
.no-js .foto img { opacity: 1; }
.no-js .foto::before { display: none; }

/* Aviso que se anuncia al lector de pantalla */
.aviso {
  position: fixed; left: 50%; bottom: calc(var(--e-6) + env(safe-area-inset-bottom)); z-index: 60;
  padding: var(--e-3) var(--e-5); border-radius: var(--radio-pildora);
  background: var(--tinta); color: var(--papel); font-size: var(--t-chico); font-weight: var(--peso-medio);
  transform: translate(-50%, 140%); opacity: 0; transition: transform var(--medio) var(--ease-out), opacity var(--medio) var(--ease-out);
  pointer-events: none;
}
.aviso.visible { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .foto::before { animation: none; }
  .boton.cargando::after { animation-duration: 2s; }
}