/*
 * Calculadora de cafeina. Misma familia que el reto: tarjeta oscura de la marca dentro de un
 * articulo blanco, y el mismo grano como unidad (tostado = lo que tomas y cabe, verde = lo que
 * te pasas, hueco = el margen que te queda).
 *
 * 🚨 El tema (Kadence) pinta todos los <button>, <input> y <fieldset> del articulo y sangra las
 * listas. Todo lo que choca va con `.cmwi-cafeina` delante para pesar mas que sus reglas (ver la
 * misma nota en reto.css).
 */
.cmwi-cafeina {
    --cmwi-fondo: #17100b;
    --cmwi-fondo-2: #241912;
    --cmwi-borde: #3a2a1f;
    --cmwi-marron: #543013;
    --cmwi-dorado: #e4c387;
    --cmwi-crema: #fadeb7;
    --cmwi-texto: #f6efe6;
    --cmwi-suave: #c9b8a6;
    --cmwi-verde: #a9b58f;
    --cmwi-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
    --cmwi-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

    box-sizing: border-box;
    max-width: 640px;
    margin: 2.2em auto;
    padding: 28px 24px 22px;
    border-radius: 14px;
    background: var(--cmwi-fondo);
    background-image: radial-gradient(120% 80% at 100% 0%, rgba(228, 195, 135, 0.09), transparent 60%);
    color: var(--cmwi-texto);
    font-family: var(--cmwi-sans);
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 0 10px 30px rgba(23, 16, 11, 0.18);
}
.cmwi-cafeina *, .cmwi-cafeina *::before, .cmwi-cafeina *::after { box-sizing: border-box; }
/* Doble clase: el `p` del tema (margen de 32px) pesa igual que una clase sola. */
.cmwi-cafeina.cmwi-cafeina p { margin: 0; }
.cmwi-cafeina [hidden] { display: none !important; }
.cmwi-cafeina button { text-transform: none; letter-spacing: normal; }

/*
 * Cerrada = banner en mitad del articulo (como el reto): titular grande, cinco granos que cuentan
 * la idea (tres caben, dos sobran) y "Calcular mi limite". Abierta (.cmwi-cafeina--abierta) se
 * van los granos de muestra: el resultado trae los suyos.
 */
.cmwi-cafeina:not(.cmwi-cafeina--abierta) { box-shadow: 0 0 0 1px rgba(228, 195, 135, 0.28), 0 14px 34px rgba(23, 16, 11, 0.24); }
.cmwi-cafeina__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cmwi-cafeina .cmwi-cafeina__muestra { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cmwi-cafeina .cmwi-cafeina__muestra > li { margin: 0; padding: 0; }
.cmwi-cafeina .cmwi-cafeina__muestra .cmwi-cafeina__grano { width: 16px; height: 22px; }
.cmwi-cafeina--abierta .cmwi-cafeina__muestra { display: none; }
.cmwi-cafeina__antetitulo {
    color: var(--cmwi-dorado);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    margin: 0 !important;
}
.cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__boton,
.cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__boton:focus,
.cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__boton:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--cmwi-dorado);
    color: #1b120b;
    font: 600 16px/1.2 var(--cmwi-sans);
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}
.cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__boton:hover { background: var(--cmwi-crema); color: #1b120b; }
.cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__boton:focus-visible { outline: 3px solid var(--cmwi-crema); outline-offset: 3px; }
.cmwi-cafeina__cuerpo { margin-top: 4px; }
/* El tema hijo lleva `p { text-transform: none !important }`: solo lo gana otro !important con mas peso. */
.cmwi-cafeina .cmwi-cafeina__antetitulo { text-transform: uppercase !important; }
.cmwi-cafeina__titulo {
    font-family: var(--cmwi-serif);
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem);
    font-weight: 700;
    line-height: 1.12;
    margin-bottom: 10px !important;
}
.cmwi-cafeina__texto { color: var(--cmwi-suave); margin-bottom: 22px !important; }

/* Campos */
.cmwi-cafeina .cmwi-cafeina__grupo { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; background: none; }
.cmwi-cafeina__campo { margin-bottom: 20px; }
.cmwi-cafeina .cmwi-cafeina__etiqueta {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    color: var(--cmwi-texto);
    font: 600 15px/1.3 var(--cmwi-sans);
    letter-spacing: normal;
    text-transform: none;
}
.cmwi-cafeina__peso { display: flex; align-items: center; gap: 10px; max-width: 200px; }
/* Campo blanco con letra negra, como el del reto: oscuro sobre oscuro no se leia (4-oct-2026). */
.cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__entrada {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--cmwi-dorado);
    border-radius: 10px;
    background: #ffffff !important;
    color: #17100b !important;
    -webkit-text-fill-color: #17100b;
    caret-color: #17100b;
    font: 600 18px/1.2 var(--cmwi-sans); /* 16px o mas: iOS no hace zoom al entrar */
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}
.cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__entrada::placeholder { color: #8a7a6c; -webkit-text-fill-color: #8a7a6c; opacity: 1; font-weight: 400; }
.cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__entrada:focus { border-color: var(--cmwi-crema); outline: none; box-shadow: 0 0 0 3px rgba(228, 195, 135, 0.45); }
.cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__entrada[aria-invalid="true"] { border-color: var(--cmwi-verde); box-shadow: 0 0 0 3px rgba(169, 181, 143, 0.45); }
.cmwi-cafeina__unidad { flex: none; color: var(--cmwi-suave); font-weight: 600; }
.cmwi-cafeina__ayuda { margin-top: 6px !important; font-size: 13px; color: var(--cmwi-suave); }
.cmwi-cafeina__ayuda--error { color: var(--cmwi-crema); }

/* Radios: el input real queda para el teclado y el lector de pantalla; se ve la caja de al lado. */
.cmwi-cafeina .cmwi-cafeina__segmento input,
.cmwi-cafeina .cmwi-cafeina__tipo input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}
.cmwi-cafeina__segmentos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmwi-cafeina__segmento { position: relative; display: block; margin: 0; cursor: pointer; }
.cmwi-cafeina__segmento span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1.5px solid var(--cmwi-borde);
    border-radius: 10px;
    background: var(--cmwi-fondo-2);
    color: var(--cmwi-texto);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    transition: border-color .2s ease, background .2s ease;
}
.cmwi-cafeina__segmento:hover span { border-color: var(--cmwi-dorado); }
.cmwi-cafeina__segmento input:checked + span { border-color: var(--cmwi-dorado); background: rgba(228, 195, 135, 0.14); color: var(--cmwi-crema); }
.cmwi-cafeina__segmento input:focus-visible + span,
.cmwi-cafeina__tipo input:focus-visible + .cmwi-cafeina__tipo-caja { outline: 3px solid var(--cmwi-crema); outline-offset: 2px; }

/* Tipos de cafe: nombre, cantidad y una barrita con su cafeina */
.cmwi-cafeina__tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmwi-cafeina__tipo { position: relative; display: block; margin: 0; cursor: pointer; }
.cmwi-cafeina__tipo-caja {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    padding: 12px 12px 11px;
    border: 1.5px solid var(--cmwi-borde);
    border-radius: 10px;
    background: var(--cmwi-fondo-2);
    transition: border-color .2s ease, background .2s ease;
}
.cmwi-cafeina__tipo:hover .cmwi-cafeina__tipo-caja { border-color: var(--cmwi-dorado); }
.cmwi-cafeina__tipo input:checked + .cmwi-cafeina__tipo-caja { border-color: var(--cmwi-dorado); background: rgba(228, 195, 135, 0.14); }
.cmwi-cafeina__tipo-nombre { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--cmwi-texto); }
.cmwi-cafeina__tipo-dato { font-size: 12.5px; color: var(--cmwi-suave); font-variant-numeric: tabular-nums; }
.cmwi-cafeina__barra { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(250, 222, 183, 0.10); overflow: hidden; }
.cmwi-cafeina__barra span { display: block; height: 100%; border-radius: 4px; background: var(--cmwi-marron); }
.cmwi-cafeina__tipo input:checked + .cmwi-cafeina__tipo-caja .cmwi-cafeina__barra span { background: var(--cmwi-dorado); }

/* Resultado */
.cmwi-cafeina__resultado { margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--cmwi-borde); }
.cmwi-cafeina__cifra-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cmwi-cafeina__cifra {
    font-family: var(--cmwi-serif);
    font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem);
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cmwi-texto);
}
.cmwi-cafeina__unidad-resultado { color: var(--cmwi-crema); font-size: 1.05rem; font-weight: 600; }
.cmwi-cafeina .cmwi-cafeina__granos { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.cmwi-cafeina .cmwi-cafeina__granos > li { margin: 0; padding: 0; }
.cmwi-cafeina__grano { width: 18px; height: 25px; display: block; }
.cmwi-cafeina__grano .cmwi-g-cuerpo { fill: transparent; stroke: var(--cmwi-dorado); stroke-width: 1.4; transition: fill .35s ease, stroke .35s ease; }
.cmwi-cafeina__grano .cmwi-g-raja { fill: none; stroke: var(--cmwi-dorado); stroke-width: 1.3; stroke-linecap: round; transition: stroke .35s ease; }
.cmwi-cafeina__grano--dentro .cmwi-g-cuerpo { fill: var(--cmwi-marron); }
.cmwi-cafeina__grano--exceso .cmwi-g-cuerpo { fill: rgba(169, 181, 143, 0.28); stroke: var(--cmwi-verde); }
.cmwi-cafeina__grano--exceso .cmwi-g-raja { stroke: var(--cmwi-verde); }
.cmwi-cafeina__explica { margin-top: 14px !important; color: var(--cmwi-suave); }

.cmwi-cafeina__tomas { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.cmwi-cafeina__tomas-pregunta { font-weight: 600; }
.cmwi-cafeina__contador { display: inline-flex; align-items: center; gap: 4px; }
.cmwi-cafeina .cmwi-cafeina__paso,
.cmwi-cafeina .cmwi-cafeina__paso:hover,
.cmwi-cafeina .cmwi-cafeina__paso:focus,
.cmwi-cafeina .cmwi-cafeina__paso:active {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--cmwi-dorado);
    border-radius: 999px;
    background: transparent;
    color: var(--cmwi-dorado);
    font: 600 22px/1 var(--cmwi-sans);
    box-shadow: none;
    cursor: pointer;
}
.cmwi-cafeina .cmwi-cafeina__paso:hover { background: rgba(228, 195, 135, 0.12); color: var(--cmwi-crema); }
.cmwi-cafeina .cmwi-cafeina__paso[disabled] { opacity: .35; cursor: default; background: transparent; }
.cmwi-cafeina .cmwi-cafeina__paso:focus-visible { outline: 3px solid var(--cmwi-crema); outline-offset: 2px; }
.cmwi-cafeina__cuenta { min-width: 2.2em; text-align: center; font: 700 1.4rem/1 var(--cmwi-serif); font-variant-numeric: tabular-nums; }
.cmwi-cafeina__veredicto {
    margin-top: 14px !important;
    padding: 12px 14px;
    border-left: 3px solid var(--cmwi-dorado);
    border-radius: 0 10px 10px 0;
    background: rgba(250, 222, 183, 0.06);
}
.cmwi-cafeina__veredicto--pasas { border-left-color: var(--cmwi-verde); }
.cmwi-cafeina .cmwi-cafeina__veredicto a { color: var(--cmwi-dorado); text-decoration: underline; text-underline-offset: 2px; }

.cmwi-cafeina__nota { margin-top: 20px !important; font-size: 12.5px; line-height: 1.45; color: #9d8c7d; }

@media (min-width: 560px) {
    .cmwi-cafeina__tipos { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 480px) {
    .cmwi-cafeina { padding: 22px 16px 18px; border-radius: 12px; margin: 1.8em 0; }
    .cmwi-cafeina.cmwi-cafeina .cmwi-cafeina__boton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cmwi-cafeina *, .cmwi-cafeina *::before, .cmwi-cafeina *::after { transition: none !important; animation: none !important; }
}