/* app.css: piezas de la app que no son primitivas del sistema de diseño. Solo variables de tokens.css. */

/* hidden manda sobre los display de las primitivas (.field, .btn…) */
[hidden] { display: none !important; }

body.no-scroll { overflow: hidden; }
main:focus { outline: none; }
.wizard-step h2:focus { outline: none; }
.wizard-step h2:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-1); }

/* Fieldset sin el marco del navegador */
.fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--space-2); }
.fieldset > legend { padding: 0; margin-bottom: var(--space-2); }

/* Inicio: tarjetas de opción como enlaces */
.choice-link { color: var(--color-text); text-decoration: none; }
.choice-link:hover { color: var(--color-text); background: var(--color-surface-accent); }
.choice-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.choice-disabled { cursor: default; background: var(--color-surface-muted); border-style: dashed; }
.choice-disabled:hover { border-color: var(--color-border-input); }
.choice-disabled .icon { color: var(--color-text-muted); }

/* «o» entre ubicación y provincia */
.divider-or { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm-size); }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* Consumo mes a mes: 2 columnas en móvil, 3 desde 768 */
.month-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.month-grid .input-suffix { min-width: 0; padding: 0 var(--space-2); }

/* Listas dentro de avisos */
.plain-list { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.plain-list li + li { margin-top: var(--space-1); }

/* Esqueletos de las cifras clave */
.skeleton-label { height: var(--text-sm-line); width: 60%; }
.skeleton-value { height: var(--text-kpi-line); width: 80%; margin-top: var(--space-2); }

.result-actions { justify-content: flex-start; }
[data-result] > * + * { margin-top: var(--space-4); }

/* El valor de la cifra clave no debe romper la tarjeta con números largos */
.kpi-value { overflow-wrap: anywhere; }
@media (max-width: 479px) { .kpi-value { font-size: var(--text-h2-size); line-height: var(--text-h2-line); } }

/* Centro de la rosa: texto, no botón */
.compass .compass-center small { display: block; font-size: var(--text-xs-size); line-height: var(--text-xs-line); }

/* Mes a mes plegable */
details.card > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--touch-min); cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h3 { display: flex; align-items: center; gap: var(--space-2); }
details.card > summary .icon { color: var(--color-accent); }
details.card[open] > summary .chev { transform: rotate(180deg); }

/* En el ancho del asistente (640 px) caben 2 cifras clave por fila, no 4; la unidad no se parte */
.container-narrow .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-unit { white-space: nowrap; }