:root {
  --tinta: #1C2430;
  --tinta-suave: #5B6574;
  --fondo: #F4F6F8;
  --superficie: #FFFFFF;
  --linea: #DCE1E7;
  --rotulo: #FFD84D;
  --rotulo-tinta: #1C2430;
  --rebaja: #D7332A;
  --accion: #2457C5;
  --accion-tinta: #FFFFFF;
  --radio: 10px;
  --barra: 64px;
  --letra: "Barlow", system-ui, sans-serif;
  --letra-rotulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #E8ECF1;
    --tinta-suave: #9AA4B2;
    --fondo: #11161E;
    --superficie: #1A212C;
    --linea: #2A3340;
    --rebaja: #FF6B5E;
    --accion: #6E9BFF;
    --accion-tinta: #0E1420;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --tinta: #E8ECF1; --tinta-suave: #9AA4B2; --fondo: #11161E; --superficie: #1A212C;
  --linea: #2A3340; --rebaja: #FF6B5E; --accion: #6E9BFF; --accion-tinta: #0E1420;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1rem/1.5 var(--letra);
}
h1, h2 { font-family: var(--letra-rotulo); font-weight: 700; line-height: 1.1; margin: 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
a { color: var(--accion); }
:focus-visible { outline: 3px solid var(--accion); outline-offset: 2px; }

.pagina {
  max-width: 640px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(var(--barra) + 24px + env(safe-area-inset-bottom));
}
.cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }

/* Barra de pestañas inferior, al alcance del pulgar */
.pestanas {
  position: fixed; inset: auto 0 0 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--barra) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--superficie);
  border-top: 1px solid var(--linea);
}
.pestana {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--tinta-suave); text-decoration: none; font-size: .75rem; font-weight: 500;
}
.pestana svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pestana.activa { color: var(--tinta); }
.pestana.activa svg { stroke-width: 2.4; }

/* Buscador */
.buscador input {
  width: 100%; min-height: 48px; padding: 0 16px;
  font: inherit; color: var(--tinta);
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 999px;
}
.buscador input:focus { border-color: var(--accion); outline: none; }

.bloque { margin-top: 28px; }
.bloque h2 { margin-bottom: 8px; }
.vacio { color: var(--tinta-suave); margin: 8px 0; max-width: 60ch; }
.enlace-sutil { background: none; border: 0; padding: 8px; font: inherit; color: var(--tinta-suave); cursor: pointer; }

/* El rótulo de precio: el único elemento llamativo de la app */
.rotulo {
  --muesca: 12px;
  display: inline-block;
  padding: 4px 14px 4px calc(var(--muesca) + 8px);
  background: var(--rotulo);
  color: var(--rotulo-tinta);
  font: 800 1.5rem/1 var(--letra-rotulo);
  letter-spacing: -.01em;
  clip-path: polygon(var(--muesca) 0, 100% 0, 100% 100%, var(--muesca) 100%, 0 50%);
  font-variant-numeric: tabular-nums;
}
.rotulo-grande { font-size: 4rem; --muesca: 28px; padding: 8px 22px 8px 44px; }
.rotulo s { font-weight: 600; font-size: .6em; opacity: .7; margin-right: 6px; }
.descuento { color: var(--rebaja); font: 700 1rem var(--letra-rotulo); }
.marca-mejor { color: var(--rebaja); font-weight: 700; }

/* Login */
.login { min-height: 100dvh; display: grid; align-content: center; gap: 32px; padding: 24px 16px; max-width: 420px; margin: 0 auto; }
.login-marca { display: grid; gap: 16px; justify-items: start; }
.login-marca h1 { font-size: 2.6rem; }
.formulario { display: grid; gap: 16px; }
.formulario label { display: grid; gap: 6px; font-weight: 500; }
.formulario input {
  min-height: 48px; padding: 0 14px; font: inherit; color: var(--tinta);
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--radio);
}
.formulario input:focus { border-color: var(--accion); outline: none; }
.boton {
  min-height: 48px; border: 0; border-radius: var(--radio);
  background: var(--accion); color: var(--accion-tinta);
  padding: 0 20px; font: 600 1.05rem var(--letra); cursor: pointer;
}
.aviso-error { margin: 0; padding: 12px 14px; border-left: 4px solid var(--rebaja); background: var(--superficie); }

/* Estado (administración) */
.estado { display: grid; gap: 0; margin: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.estado div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.estado div + div { border-top: 1px solid var(--linea); }
.estado dt { color: var(--tinta-suave); }
.estado dd { margin: 0; font-weight: 600; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Administración de fuentes */
.aviso { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid var(--accion); background: var(--superficie); }
.resumen { margin: 0 0 16px; color: var(--tinta-suave); }
.resumen strong { color: var(--tinta); }
.resumen .sep::before { content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 10px; background: var(--linea); vertical-align: -1px; }
.txt-error { color: var(--rebaja); }
.fuentes, .items { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.fuente { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 16px; }
.fuente + .fuente, .item + .item { border-top: 1px solid var(--linea); }
.fuente-cuerpo { display: grid; gap: 2px; color: inherit; text-decoration: none; min-width: 0; }
.fuente-nombre { font-weight: 600; }
.fuente-meta { color: var(--tinta-suave); font-size: .875rem; overflow-wrap: anywhere; }
.fuente-error { color: var(--rebaja); font-size: .875rem; overflow-wrap: anywhere; }
.estado-pausada .fuente-nombre { color: var(--tinta-suave); }
.chip { align-self: start; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1.5px solid currentColor; white-space: nowrap; }
.chip-ok { color: #1F8A4C; }
.chip-error { color: var(--rebaja); background: color-mix(in srgb, var(--rebaja) 10%, transparent); }
.chip-pausada, .chip-nueva, .chip-vacia { color: var(--tinta-suave); }
.chip-vacia { border-style: dashed; }
.fuente-acciones { grid-column: 1 / -1; display: flex; gap: 8px; }
.boton-chico { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radio); background: var(--accion); color: var(--accion-tinta); font: 600 .875rem var(--letra); cursor: pointer; }
.boton-sutil { background: transparent; color: var(--tinta-suave); border: 1.5px solid var(--linea); }

/* Ítems con su rótulo de precio */
.item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 16px; }
.item-img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fff; }
.item:not(:has(.item-img)) { grid-template-columns: 1fr auto; }
.item-cuerpo { display: grid; gap: 2px; min-width: 0; }
.item-titulo { color: var(--tinta); text-decoration: none; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.item .rotulo { font-size: 1.25rem; --muesca: 10px; padding: 4px 10px 4px 18px; white-space: nowrap; justify-self: end; }
.item .descuento { grid-column: -2; justify-self: end; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-ok { color: #4CC27F; } }
:root[data-theme="dark"] .chip-ok { color: #4CC27F; }

/* Campos de formulario comunes */
select, .filtros input, .form-linea input {
  min-height: 44px; padding: 0 12px; font: inherit; color: var(--tinta); width: 100%;
  background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--radio);
}
.formulario select { min-height: 48px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; }
legend { font: 700 1.2rem var(--letra-rotulo); margin-bottom: 8px; padding: 0; }
.casilla { display: flex !important; align-items: center; gap: 10px; font-weight: 400 !important; }
.casilla input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accion); }
.boton-enlace { display: inline-flex; align-items: center; text-decoration: none; }

/* Filtros del buscador */
.filtros { margin-top: 12px; }
.filtros summary { cursor: pointer; color: var(--accion); font-weight: 600; padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.filtros-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 0 12px; }
.filtros-campos label { display: grid; gap: 4px; font-size: .875rem; color: var(--tinta-suave); }
.filtros-campos label:has(select), .filtros-campos .casilla { grid-column: 1 / -1; }
.filtros-acciones { display: flex; gap: 12px; align-items: center; }
.buscador + .resumen, .buscador ~ .resumen { margin-top: 16px; }

/* Tablas densas: ficha, empresas */
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; vertical-align: top; }
.tabla th { font-weight: 500; }
.tabla th .fuente-meta { display: block; }
.tabla tr + tr > * { border-top: 1px solid var(--linea); }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.tabla .num s { color: var(--tinta-suave); font-weight: 400; }
.fila-mejor { background: color-mix(in srgb, var(--rotulo) 22%, transparent); }
.fila-mejor .marca-mejor { display: block; }
.fila-pausada th { color: var(--tinta-suave); }

/* Ficha de producto */
.titulo-producto { font-size: 1.6rem; overflow-wrap: anywhere; }
.ficha-cabeza { display: flex; align-items: center; gap: 16px; }
.ficha-img { width: 96px; height: 96px; object-fit: contain; border-radius: var(--radio); background: #fff; flex: none; }
.rotulo-ficha { font-size: 2.6rem; --muesca: 20px; padding: 6px 18px 6px 32px; }
.ficha-cabeza .fuente-meta { margin: 6px 0 0; }
.grafica { margin: 0; padding: 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.grafica > svg { display: block; width: 100%; height: auto; }
.grafica-guia { stroke: var(--linea); stroke-width: 1; }
.grafica-eje { fill: var(--tinta-suave); font: 500 13px var(--letra); }
.serie { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.serie-0 { stroke: var(--accion); }
.serie-1 { stroke: var(--tinta); stroke-dasharray: 8 4; }
.serie-2 { stroke: var(--tinta-suave); stroke-dasharray: 2 4; }
.serie-3 { stroke: var(--accion); stroke-dasharray: 12 4 2 4; }
.grafica-minimo { fill: var(--rebaja); stroke: var(--superficie); stroke-width: 2; }
.grafica figcaption { display: grid; gap: 6px; margin-top: 8px; font-size: .875rem; color: var(--tinta-suave); }
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--tinta); }
.leyenda li { display: flex; align-items: center; gap: 6px; }
.leyenda svg { width: 24px; height: 8px; }
.form-linea { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.form-linea label { display: grid; gap: 4px; flex: 1 1 160px; font-size: .875rem; color: var(--tinta-suave); }

/* Lista de deseos */
.form-deseo { margin-bottom: 8px; }
.deseo + .deseo { margin-top: 24px; }
.deseo-cabeza { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.deseo-cabeza h2 { overflow-wrap: anywhere; }
.deseo-cabeza h2 a { color: inherit; }
.deseo-cabeza form { margin-left: auto; }
.deseo-cumple .deseo-cabeza h2::after { content: " · ya está"; color: var(--rebaja); font-size: .8em; }

/* Temporadas */
.cuenta { display: flex; align-items: center; gap: 16px; padding: 16px; color: inherit; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--linea); border-left: 6px solid var(--rotulo); border-radius: var(--radio); }
.cuenta-numero { font: 800 3.5rem/1 var(--letra-rotulo); font-variant-numeric: tabular-nums; min-width: 2ch; }
.cuenta-numero small { display: block; font-size: 1rem; font-weight: 600; color: var(--tinta-suave); }
.cuenta-texto { display: grid; gap: 2px; }
.cuenta-texto strong { font: 700 1.5rem/1.1 var(--letra-rotulo); }
.tabla thead th { font-size: .8rem; font-weight: 600; color: var(--tinta-suave); border-bottom: 1px solid var(--linea); padding-top: 8px; padding-bottom: 8px; }
.tabla-temporadas .num { font-weight: 500; color: var(--tinta-suave); }
.tabla-temporadas .fila-mejor .num { color: var(--tinta); font-weight: 600; }
.fila-elegida th { font-weight: 700; }
.anios { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.anios a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 999px; color: var(--tinta); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.anios a[aria-current] { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.subtitulo { font: 700 1.1rem var(--letra-rotulo); margin: 20px 0 8px; }
.aviso-temporada { display: block; margin: 16px 0 0; color: inherit; text-decoration: none; border-left-color: var(--rotulo); }

/* Avisos */
.cabecera-acciones { display: flex; align-items: center; gap: 4px; }
.telefono { display: grid; gap: 12px; justify-items: start; }
.telefono .vacio { margin: 0; }
.telefono-acciones:not(:has(button:not([hidden]))) { display: none; }
.boton:disabled, .boton-chico:disabled { opacity: .5; cursor: not-allowed; }
.form-avisos input[type="time"] { max-width: 10rem; }
.tabla-avisos .num { font-weight: 400; }
.ficha-promo { margin-top: 16px; }
.texto-promo { color: var(--tinta-suave); white-space: pre-line; max-width: 60ch; }