/* ==========================================================================
   Parte Solar — componentes propios
   Héroe solar, curva horaria, barras de 7 días, balance energético.
   ========================================================================== */

/* ==========================================================================
   Héroe: la respuesta de hoy en tres segundos
   ========================================================================== */

.heroe {
    position: relative;
    margin-bottom: 12px;
    padding: 20px 18px 0;
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Resplandor de fondo: pura decoración, detrás del contenido y sin tocar la
   legibilidad del texto. */
.heroe::before {
    content: '';
    position: absolute;
    top: -70px; right: -50px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, var(--sol-relleno) 0%, transparent 70%);
    pointer-events: none;
}

.heroe__encabezado {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.heroe__cuando {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.heroe__tiempo {
    margin-top: 3px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta-media);
}

/* --- Cifra protagonista --------------------------------------------------- */

/* Una sola cifra grande, sin gráfico: es un dato único, no una serie. La
   unidad y el contexto van alrededor, no dentro del número. */
.heroe__cifra {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 4px;
}
.heroe__valor {
    font-size: 54px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--tinta);
}
.heroe__unidad {
    font-size: 19px;
    font-weight: 650;
    color: var(--tinta-media);
}

.heroe__contexto {
    position: relative;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--tinta-media);
    margin-bottom: 14px;
}
.heroe__contexto strong { color: var(--tinta); font-weight: 650; }

.heroe__meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

/* --- Datos secundarios ---------------------------------------------------- */

.heroe__detalles {
    position: relative;
    display: flex;
    gap: 0;
    margin: 0 -18px;
    padding: 12px 18px;
    border-top: 1px solid var(--borde);
    background: var(--fondo-sutil);
}
.detalle { flex: 1; min-width: 0; text-align: center; }
.detalle + .detalle { border-left: 1px solid var(--borde); }
.detalle__valor {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.detalle__etiqueta {
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* ==========================================================================
   Aviso destacado — el núcleo del producto
   ========================================================================== */

.alerta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding: 15px;
    border-radius: var(--r-lg);
    border: 1px solid var(--borde);
    background: var(--fondo-tarjeta);
}
/* El tono de estado entra por un filo lateral y el icono; el texto se queda en
   tinta normal para que nunca dependa del color. */
.alerta--bajo    { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 42%, transparent); }
.alerta--critico { background: var(--grave-fondo); border-color: color-mix(in srgb, var(--grave) 38%, transparent); }

.alerta__icono { flex-shrink: 0; margin-top: 1px; }
.alerta--bajo .alerta__icono    { color: color-mix(in srgb, var(--aviso) 78%, var(--tinta)); }
.alerta--critico .alerta__icono { color: var(--grave); }
body.oscuro .alerta--bajo .alerta__icono { color: var(--aviso); }

.alerta__cuerpo { flex: 1; min-width: 0; }
.alerta__titulo {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 3px;
}
.alerta__texto {
    font-size: 13px;
    line-height: 1.5;
    color: var(--tinta-media);
}
.alerta__texto strong { color: var(--tinta); font-weight: 650; }
.alerta__accion {
    margin-top: 9px;
    font-size: 13px;
    font-weight: 650;
}

/* ==========================================================================
   Curva horaria — área de una sola serie
   ========================================================================== */

.curva { position: relative; }

.curva__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    touch-action: pan-y;
}

/* Rejilla y ejes recesivos: el dato manda, la estructura acompaña. */
.curva__rejilla { stroke: var(--rejilla); stroke-width: 1; }
.curva__eje { stroke: var(--eje); stroke-width: 1; }
.curva__etiqueta {
    fill: var(--tinta-suave);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.curva__area { fill: url(#degradadoSol); }
.curva__linea {
    fill: none;
    stroke: var(--sol);
    stroke-width: 2;          /* 2px, según especificación de marcas */
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Franja recomendada: un realce del plano, no una segunda serie. */
.curva__franja { fill: var(--sol-relleno-tenue); }
.curva__franja-borde {
    stroke: var(--sol);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.45;
    fill: none;
}
.curva__franja-texto {
    fill: var(--tinta-media);
    font-size: 10px;
    font-weight: 700;
}

/* --- Capa de interacción -------------------------------------------------- */

.curva__cruz {
    stroke: var(--tinta-suave);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    pointer-events: none;
}
.curva__punto {
    fill: var(--sol);
    stroke: var(--fondo-tarjeta);
    stroke-width: 2;          /* anillo de superficie sobre la marca */
    pointer-events: none;
}
/* Zona de impacto más ancha que la marca, como pide la especificación. */
.curva__zona { fill: transparent; cursor: crosshair; }

.curva__globo {
    position: absolute;
    top: 0; left: 0;
    z-index: 5;
    padding: 7px 10px;
    background: var(--marca-azul);
    color: #fff;
    border-radius: var(--r-sm);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--sombra-md);
    transform: translate(-50%, -100%);
    margin-top: -8px;
    opacity: 0;
    transition: opacity var(--t-rapida);
}
body.oscuro .curva__globo { background: var(--fondo-hundido); color: var(--tinta); border: 1px solid var(--borde-fuerte); }
.curva__globo--visible { opacity: 1; }
.curva__globo b { font-weight: 700; font-variant-numeric: tabular-nums; }
.curva__globo span { color: rgba(255,255,255,0.72); }
body.oscuro .curva__globo span { color: var(--tinta-suave); }

/* ==========================================================================
   Siete días
   ========================================================================== */

.dias { display: flex; flex-direction: column; }

/* La primera columna da para «Dom 25» sin partir en dos líneas: un nombre de
   día roto hace que la fila cambie de alto y la lista pierda el ritmo. */
.dia {
    display: grid;
    grid-template-columns: 58px 24px 1fr auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: none;
    border-top: 1px solid var(--borde);
    cursor: pointer;
    text-align: left;
    transition: background var(--t-rapida);
    -webkit-tap-highlight-color: transparent;
}
.dia:first-child { border-top: none; }
.dia:hover { background: var(--fondo-sutil); }
.dia--abierto { background: var(--fondo-sutil); }

.dia__fecha { min-width: 0; }
.dia__nombre {
    font-size: 13.5px;
    font-weight: 650;
    text-transform: capitalize;
    white-space: nowrap;
}
.dia__numero { font-size: 11px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.dia__icono { color: var(--tinta-media); display: grid; place-items: center; }

/* --- Barra: una sola serie, la longitud codifica la magnitud -------------- */

.dia__barra {
    position: relative;
    height: 26px;
    display: flex;
    align-items: center;
}
.dia__pista {
    position: absolute;
    inset: 7px 0;
    background: var(--fondo-hundido);
    border-radius: var(--r-full);
}
.dia__relleno {
    position: absolute;
    top: 7px; bottom: 7px; left: 0;
    background: var(--sol);
    /* Extremo de dato redondeado 4px, anclado al origen de la escala. */
    border-radius: 0 4px 4px 0;
    min-width: 4px;
    transition: width var(--t-normal);
}

/* Referencia «lo normal del mes»: gris neutro a propósito. Un color de estado
   aquí se leería como una segunda serie — medido ΔE 2.5 contra el ámbar en
   modo oscuro. */
.dia__referencia {
    position: absolute;
    top: 3px; bottom: 3px;
    width: 2px;
    background: var(--eje);
    border-radius: 1px;
}
.dia__referencia::after {
    content: '';
    position: absolute;
    inset: -6px -8px;
}

.dia__cifra {
    display: flex;
    align-items: baseline;
    gap: 3px;
    justify-content: flex-end;
    min-width: 62px;
}
.dia__kwh {
    font-size: 14.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dia__kwh-unidad { font-size: 10.5px; font-weight: 600; color: var(--tinta-suave); }

.dia__punto-estado {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- Detalle desplegable -------------------------------------------------- */

.dia-detalle {
    padding: 0 16px 16px;
    background: var(--fondo-sutil);
    border-top: 1px solid var(--borde);
    animation: desplegar var(--t-normal) both;
}
@keyframes desplegar {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.dia-detalle__rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 1px;
    margin: 14px 0 0;
    background: var(--borde);
    border-radius: var(--r-md);
    overflow: hidden;
}
.mini {
    padding: 9px 10px;
    background: var(--fondo-tarjeta);
}
.mini__valor { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini__etiqueta { font-size: 10.5px; font-weight: 600; color: var(--tinta-suave); margin-top: 1px; }

/* --- Leyenda -------------------------------------------------------------- */

/* Una sola serie no necesita caja de leyenda: el título la nombra. Lo que sí
   hace falta explicar es la marca de referencia. */
.leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 16px 12px;
    font-size: 11.5px;
    color: var(--tinta-suave);
}
.leyenda__item { display: flex; align-items: center; gap: 6px; }
.leyenda__muestra-barra { width: 14px; height: 8px; border-radius: 0 3px 3px 0; background: var(--sol); }
.leyenda__muestra-ref { width: 2px; height: 13px; background: var(--eje); border-radius: 1px; }

/* ==========================================================================
   Balance energético
   ========================================================================== */

.balance { display: flex; flex-direction: column; gap: 10px; }

.balance__fila {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
}
.balance__etiqueta { flex: 1; color: var(--tinta-media); }
.balance__valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.balance__valor--falta { color: var(--grave); }
.balance__valor--sobra { color: var(--bien); }

.balance__separador { height: 1px; background: var(--borde); margin: 2px 0; }

/* --- Barra de batería ----------------------------------------------------- */

.bateria { margin-top: 4px; }
.bateria__pista {
    position: relative;
    height: 10px;
    background: var(--fondo-hundido);
    border-radius: var(--r-full);
    overflow: hidden;
}
.bateria__relleno {
    height: 100%;
    border-radius: var(--r-full);
    background: var(--bien);
    transition: width var(--t-normal), background var(--t-normal);
}
.bateria__relleno--medio { background: var(--aviso); }
.bateria__relleno--bajo  { background: var(--grave); }
.bateria__pie {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--tinta-suave);
}

/* --- Proyección semanal --------------------------------------------------- */

/* Medidores de nivel, no bloques macizos. El color de estado solo entra
   cuando HAY un estado que señalar: con la reserva alta el tono es neutro y
   discreto, porque siete rectángulos verdes a todo lo ancho gritan sin decir
   nada. El porcentaje va escrito en cada columna, así que el nivel nunca
   depende solo del color. */
.proyeccion { display: flex; gap: 6px; margin-top: 12px; }
.proyeccion__dia { flex: 1; min-width: 0; text-align: center; }
.proyeccion__columna {
    position: relative;
    height: 46px;
    display: flex;
    align-items: flex-end;
    background: var(--fondo-hundido);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.proyeccion__nivel {
    width: 100%;
    background: color-mix(in srgb, var(--bien) 42%, var(--fondo-hundido));
    border-radius: var(--r-sm);
    min-height: 3px;
    transition: height var(--t-normal);
}
.proyeccion__nivel--medio { background: var(--aviso); }
.proyeccion__nivel--bajo  { background: var(--grave); }

.proyeccion__pct {
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-media);
}
.proyeccion__etiqueta {
    font-size: 10px;
    font-weight: 600;
    color: var(--tinta-suave);
    text-transform: capitalize;
}

/* ==========================================================================
   Buscador de municipios
   ========================================================================== */

.buscador { position: relative; margin-bottom: 14px; }
.buscador .input { padding-left: 42px; }
.buscador__lupa {
    position: absolute;
    top: 50%; left: 14px;
    transform: translateY(-50%);
    color: var(--tinta-suave);
    pointer-events: none;
}
.buscador__limpiar {
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    background: var(--fondo-hundido);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--tinta-media);
}

/* Sangrado completo tirando del padding del contenedor. El valor es −16px en
   todas partes a propósito: el cuerpo del modal y la pantalla de bienvenida
   usan los dos 16px de padding, así que un único número vale para ambos. Si
   un contenedor usara otro padding, aquí aparecería un desbordamiento
   horizontal. */
.resultados { margin: 0 -16px; }

.grupo-provincia {
    padding: 14px 16px 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    background: var(--fondo);
    position: sticky;
    top: 0;
    z-index: 1;
}

.municipio {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    min-height: 48px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--borde);
    cursor: pointer;
    text-align: left;
    transition: background var(--t-rapida);
    -webkit-tap-highlight-color: transparent;
}
.municipio:hover { background: var(--fondo-sutil); }
.municipio__cuerpo { flex: 1; min-width: 0; }
.municipio__nombre { font-size: 14.5px; font-weight: 600; }
.municipio__provincia { font-size: 12px; color: var(--tinta-suave); margin-top: 1px; }
.municipio__marca { color: var(--bien); flex-shrink: 0; }
.municipio--elegido .municipio__nombre { color: var(--sol); }

/* ==========================================================================
   Comparar municipios
   ========================================================================== */

.comparado {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    margin-bottom: 8px;
}
.comparado__nombre { font-size: 14px; font-weight: 650; }
.comparado__provincia { font-size: 11.5px; color: var(--tinta-suave); }
.comparado__cifra { text-align: right; }
.comparado__kwh { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.comparado__sub { font-size: 10.5px; color: var(--tinta-suave); }
.comparado__quitar {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: none;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--tinta-suave);
}
.comparado__quitar:hover { background: var(--grave-fondo); color: var(--grave); }

/* ==========================================================================
   Histórico
   ========================================================================== */

.calibracion {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    background: var(--bien-fondo);
    border: 1px solid color-mix(in srgb, var(--bien) 30%, transparent);
    border-radius: var(--r-lg);
    margin-bottom: 12px;
}
.calibracion__icono { color: var(--bien); flex-shrink: 0; }
.calibracion__cuerpo { flex: 1; }
.calibracion__titulo { font-size: 14px; font-weight: 700; }
.calibracion__texto { font-size: 12.5px; color: var(--tinta-media); line-height: 1.45; margin-top: 2px; }

.registro {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--borde);
}
.registro:last-child { border-bottom: none; }
.registro__fecha { font-size: 13.5px; font-weight: 600; }
.registro__sub { font-size: 11.5px; color: var(--tinta-suave); margin-top: 1px; }
.registro__par { display: flex; gap: 14px; text-align: right; }
.registro__valor { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.registro__etiqueta { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--tinta-suave); }
.registro__desvio { font-size: 11px; font-weight: 650; }
.registro__desvio--alto { color: var(--bien); }
.registro__desvio--bajo { color: var(--grave); }

/* ==========================================================================
   Ajustes
   ========================================================================== */

.ajuste-grupo { margin-bottom: 12px; }

.ajuste-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--borde);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.ajuste-fila:last-child { border-bottom: none; }
.ajuste-fila__cuerpo { flex: 1; min-width: 0; }
.ajuste-fila__titulo { font-size: 14.5px; font-weight: 600; }
.ajuste-fila__valor { font-size: 12.5px; color: var(--tinta-suave); margin-top: 2px; }
.ajuste-fila__flecha { color: var(--tinta-suave); flex-shrink: 0; }

.credito {
    padding: 18px 2px 8px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--tinta-suave);
    text-align: center;
}
.credito a { color: var(--tinta-media); }

/* ==========================================================================
   Onboarding
   ========================================================================== */

/* El padding lateral es 16px, igual que el del cuerpo del modal, para que el
   sangrado de .resultados funcione sin ajustes por contexto. */
.bienvenida {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 0 16px calc(env(safe-area-inset-bottom) + 16px);
}
.bienvenida__cabecera {
    padding: 40px 0 24px;
    text-align: center;
}
.bienvenida__sol { margin-bottom: 16px; }
.bienvenida__titulo { font-size: 25px; letter-spacing: -0.02em; margin-bottom: 8px; }
.bienvenida__texto { font-size: 14.5px; line-height: 1.55; color: var(--tinta-media); }
.bienvenida__cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* El sangrado lo aporta .resultados; aquí solo se habilita el desplazamiento.
   Añadir un margen negativo también haría que el contenido se saliera. */
.bienvenida__lista { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bienvenida__pie { padding-top: 14px; }

.bienvenida__paso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    background: var(--fondo-sutil);
    border-radius: var(--r-full);
}