/* =========================================================================
   Cotizador — capa visual de Joyería Kendra

   No define colores ni tipografías propias: usa las variables que ya declara
   index.html (--papel, --tinta, --oro-hondo, --f-display, --f-dato...). Así el
   cotizador no parece un widget pegado de otro sitio, y si mañana cambia la
   paleta del sitio, cambia con ella.

   Las cifras van en IBM Plex Mono, la fuente que el sitio reserva para la capa
   técnica. Encaja con el argumento del analizador de metales: aquí se mide,
   no se adivina.

   Los valores de reserva (el segundo término de cada var()) existen para que
   el cotizador siga siendo legible si se inserta en una página que aún no
   cargó el sistema de tokens.
   ========================================================================= */

.cotz {
    --cotz-linea: var(--linea, #DED7C9);
    --cotz-linea-fuerte: var(--linea-fuerte, #C7BEAB);
    --cotz-tinta: var(--tinta, #231F1B);
    --cotz-tinta-suave: var(--tinta-45, #615B51);
    --cotz-oro: var(--oro-hondo, #6B5119);
    --cotz-oro-claro: var(--oro, #A8843F);
    --cotz-fondo: var(--papel, #FAF8F4);
    --cotz-carta: var(--blanco, #FFFFFF);
    --cotz-vapor: var(--oro-vapor, #F2EADA);

    background: var(--cotz-fondo);
    color: var(--cotz-tinta);
}

/* Dentro de la página propia respira más; dentro de la home, menos. */
.cotz--completo { padding-block: var(--ritmo, 72px); }
.cotz--compacto { padding-block: clamp(48px, 6vw, 88px); }

.cotz__cabecera {
    max-width: 46ch;
    margin-bottom: clamp(28px, 3.5vw, 48px);
}

.cotz__titulo {
    font-family: var(--f-display, Georgia, serif);
    font-weight: 400;
    font-size: var(--t-acto, clamp(1.95rem, 1.3rem + 2.8vw, 4rem));
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 var(--e-md, 20px);
}

.cotz--compacto .cotz__titulo {
    font-size: var(--t-titulo, clamp(1.25rem, 1.1rem + .7vw, 1.7rem));
}

.cotz__lead {
    font-size: var(--t-lead, 1.05rem);
    color: var(--tinta-70, #3B3730);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Campo de gramos
   -------------------------------------------------------------------------- */
.cotz__control {
    margin-bottom: clamp(28px, 3.5vw, 44px);
    max-width: 420px;
}

.cotz__etiqueta {
    display: block;
    font-family: var(--f-dato, monospace);
    font-size: var(--t-dato, .75rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cotz-oro);
    margin-bottom: var(--e-sm, 12px);
}

.cotz__campo {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cotz-linea-fuerte);
    background: var(--cotz-carta);
}

.cotz__campo:focus-within {
    outline: 2px solid var(--cotz-oro);
    outline-offset: 3px;
}

.cotz__input {
    flex: 1;
    min-width: 0;
    min-height: 68px;
    padding: 0 var(--e-md, 20px);
    border: 0;
    background: transparent;
    color: var(--cotz-tinta);
    font-family: var(--f-dato, monospace);
    /* 1.75rem evita el zoom automático de iOS al tocar el campo. */
    font-size: 1.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.cotz__input:focus { outline: none; }

.cotz__unidad {
    display: flex;
    align-items: center;
    padding-right: var(--e-md, 20px);
    font-family: var(--f-dato, monospace);
    font-size: 1.1rem;
    color: var(--cotz-tinta-suave);
}

.cotz__ayuda {
    margin: var(--e-sm, 12px) 0 0;
    font-size: var(--t-min, .875rem);
    color: var(--cotz-tinta-suave);
}

.cotz__error {
    margin: var(--e-sm, 12px) 0 0;
    font-size: var(--t-min, .875rem);
    /* El error no se comunica solo por color: lleva su propio texto y un
       filete a la izquierda. */
    border-left: 3px solid #8C2F1D;
    padding-left: var(--e-sm, 12px);
    color: #8C2F1D;
}

/* --------------------------------------------------------------------------
   Resultados
   En móvil son tarjetas apiladas, nunca cuatro columnas diminutas.
   -------------------------------------------------------------------------- */
.cotz__resultados {
    display: grid;
    gap: var(--e-sm, 12px);
    grid-template-columns: 1fr;
}

.cotz__carta { position: relative; }

/* El radio queda accesible al teclado y a los lectores de pantalla, pero no
   se dibuja: la tarjeta entera es el control. */
.cotz__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cotz__carta-cuerpo {
    display: grid;
    gap: 2px;
    padding: var(--e-md, 20px);
    min-height: 56px;
    background: var(--cotz-carta);
    border: 1px solid var(--cotz-linea);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.cotz__carta-cuerpo:hover {
    border-color: var(--cotz-linea-fuerte);
    border-left-color: var(--cotz-oro-claro);
}

.cotz__radio:checked + .cotz__carta-cuerpo {
    border-color: var(--cotz-oro-claro);
    border-left-color: var(--cotz-oro);
    background: var(--cotz-vapor);
}

/* El foco se ve incluso cuando el control real está oculto. */
.cotz__radio:focus-visible + .cotz__carta-cuerpo {
    outline: 2px solid var(--cotz-oro);
    outline-offset: 3px;
}

.cotz__quilate {
    font-family: var(--f-display, Georgia, serif);
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    line-height: 1.1;
}

.cotz__pureza {
    font-family: var(--f-dato, monospace);
    font-size: var(--t-dato, .75rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cotz-tinta-suave);
    margin-bottom: var(--e-sm, 12px);
}

.cotz__gramo {
    display: block;
    font-family: var(--f-dato, monospace);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-70, #3B3730);
    padding-bottom: var(--e-sm, 12px);
    border-bottom: 1px solid var(--cotz-linea);
    margin-bottom: var(--e-sm, 12px);
}

.cotz__gramo-unidad {
    font-family: var(--f-texto, system-ui, sans-serif);
    letter-spacing: 0;
    color: var(--cotz-tinta-suave);
}

.cotz__total { display: block; }

.cotz__total-rotulo {
    display: block;
    font-family: var(--f-dato, monospace);
    font-size: var(--t-dato, .75rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cotz-tinta-suave);
    margin-bottom: 2px;
}

.cotz__total-cifra {
    display: block;
    font-family: var(--f-dato, monospace);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--cotz-tinta);
}

.cotz__radio:checked + .cotz__carta-cuerpo .cotz__total-cifra {
    color: var(--cotz-oro);
}

/* --------------------------------------------------------------------------
   Fecha, llamada a la acción y aviso
   -------------------------------------------------------------------------- */
/* Aclaración de moneda. Va junto a las cifras, no escondida en el aviso
   legal del final: es un dato que cambia cómo se lee cada número. */
.cotz__moneda {
    margin: var(--e-lg, 32px) 0 0;
    font-family: var(--f-dato, monospace);
    font-size: var(--t-dato, .75rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cotz-oro);
}

.cotz__moneda + .cotz__fecha { margin-top: var(--e-sm, 12px); }

.cotz__fecha {
    margin: var(--e-lg, 32px) 0 0;
    font-family: var(--f-dato, monospace);
    font-size: var(--t-dato, .75rem);
    letter-spacing: .1em;
    color: var(--cotz-tinta-suave);
}

.cotz__fecha-rotulo {
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--cotz-oro);
}

.cotz__cta { margin: var(--e-lg, 32px) 0 0; }

.cotz__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: var(--e-md, 20px) var(--e-xl, 40px);
    border: 1px solid var(--cotz-oro);
    background: var(--cotz-oro);
    color: var(--blanco, #fff);
    font-family: var(--f-texto, system-ui, sans-serif);
    font-weight: 500;
    font-size: var(--t-min, .875rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 260ms ease, color 260ms ease;
}

.cotz__accion:hover,
.cotz__accion:focus-visible {
    background: transparent;
    color: var(--cotz-oro);
}

.cotz__mas {
    margin: var(--e-md, 20px) 0 0;
    font-size: var(--t-min, .875rem);
}

.cotz__aviso {
    max-width: 62ch;
    margin: var(--e-lg, 32px) 0 0;
    padding-top: var(--e-md, 20px);
    border-top: 1px solid var(--cotz-linea);
    font-size: var(--t-min, .875rem);
    line-height: 1.6;
    color: var(--cotz-tinta-suave);
}

/* --------------------------------------------------------------------------
   Estado en reposo: pausado, precios sin actualizar o sin datos
   -------------------------------------------------------------------------- */
.cotz__reposo {
    background: var(--cotz-carta);
    border: 1px solid var(--cotz-linea);
    border-left: 3px solid var(--cotz-oro-claro);
    padding: clamp(24px, 3.5vw, 40px);
    max-width: 62ch;
}

.cotz__reposo-texto {
    font-family: var(--f-display, Georgia, serif);
    font-size: var(--t-titulo, 1.35rem);
    line-height: 1.35;
    margin: 0 0 var(--e-md, 20px);
}

.cotz__reintentar {
    min-height: 48px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--cotz-linea-fuerte);
    color: var(--cotz-tinta);
    font-family: var(--f-texto, system-ui, sans-serif);
    font-size: var(--t-min, .875rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}

.cotz__reintentar:hover { border-color: var(--cotz-tinta); }

/* --------------------------------------------------------------------------
   Pantallas grandes
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
    .cotz__resultados { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .cotz__resultados { grid-template-columns: repeat(4, 1fr); }
    .cotz__carta-cuerpo { padding: var(--e-lg, 32px) var(--e-md, 20px); }
}

@media (prefers-reduced-motion: reduce) {
    .cotz__carta-cuerpo,
    .cotz__accion { transition: none; }
}