:root {
    color-scheme: dark;
    --fondo: #0b0d10;
    --panel: #14181d;
    --panel-suave: #1b2027;
    --texto: #f3f5f7;
    --suave: #9aa4af;
    --linea: rgba(255, 255, 255, 0.09);
    --acento: #f4c430;
    --ok: #46d37d;
    --naranja: #ff9f43;
    --rojo: #ff5c72;
    --morado: #b889ff;
    --alto-barra: 4rem;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    color: var(--texto);
    background: var(--fondo);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

a {
    color: inherit;
}

.barra-accesos {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.6rem, 1.3vw, 1.35rem);
    width: 100%;
    min-height: 4rem;
    padding: 0.55rem max(3vw, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid var(--linea);
    background: rgba(11, 13, 16, 0.92);
    backdrop-filter: blur(10px);
    overflow: visible;
}

.barra-accesos + .layout,
.barra-accesos + main {
    margin-top: var(--alto-barra);
}

.barra-accesos::before {
    content: "";
    position: absolute;
    inset: -4rem auto auto -5rem;
    width: min(42rem, 58vw);
    height: 9rem;
    pointer-events: none;
    background:
        radial-gradient(circle at 8rem 2.4rem, rgba(244, 196, 48, 0.24), transparent 34%),
        linear-gradient(105deg, transparent 0%, rgba(244, 196, 48, 0.12) 36%, transparent 72%);
    filter: blur(18px);
    opacity: 0.95;
}

.barra-accesos::after {
    content: "";
    position: absolute;
    inset: auto 8% -2.8rem auto;
    width: min(30rem, 42vw);
    height: 5.5rem;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(244, 196, 48, 0.12), transparent 70%);
    filter: blur(14px);
}

.logo-les {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    left: auto;
    bottom: auto;
    width: 2.65rem;
    height: 2.65rem;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

.nombre-app {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    left: auto;
    bottom: auto;
    margin-right: clamp(0.45rem, 1.2vw, 1.2rem);
    color: var(--texto);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 900;
    white-space: nowrap;
}

.barra-accesos a {
    position: relative;
    z-index: 1;
    min-width: auto;
    padding: 0.35rem 0;
    border: 0;
    border-radius: 0;
    color: var(--suave);
    text-align: center;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.barra-accesos a:hover,
.barra-accesos a.activo {
    color: var(--texto);
    background: transparent;
}

.barra-accesos a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35rem;
    height: 2px;
    border-radius: 999px;
    background: var(--acento);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease, opacity 160ms ease;
    opacity: 0;
}

.barra-accesos a:hover::after,
.barra-accesos a.activo::after {
    transform: scaleX(1);
    opacity: 1;
}

.barra-publica {
    justify-content: space-between;
}

.marca-publica {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.login-publico {
    position: relative;
    z-index: 1;
    margin-left: auto;
}

.sesion-cerrada-card {
    gap: 1rem;
}

.modal-sesion-cerrada {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(5, 7, 10, 0.66);
    backdrop-filter: blur(8px);
}

.modal-sesion-cerrada[hidden] {
    display: none;
}

.modal-sesion-card {
    width: min(420px, 92vw);
    padding: 1.25rem;
    border: 1px solid rgba(244, 196, 48, 0.28);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at top right, rgba(244, 196, 48, 0.14), transparent 38%),
        var(--panel);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

.modal-sesion-card h2 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.35rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.cierre-progreso {
    width: 100%;
    height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.cierre-progreso span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--acento), #ffe08a);
    transform-origin: left;
    animation: cierre-progreso 2s linear forwards;
}

.enlace-cierre {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.25rem;
    text-decoration: none;
}

@keyframes cierre-progreso {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.notificaciones-widget {
    position: relative;
    z-index: 120;
    margin-left: 0;
}

.notificaciones-boton {
    position: relative;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    color: var(--texto);
    background: transparent;
    border-color: transparent;
    border-radius: 0.65rem;
}

.notificaciones-boton:hover {
    color: var(--acento);
    background: rgba(244, 196, 48, 0.08);
}

.notificaciones-boton span {
    position: absolute;
    top: -0.35rem;
    right: -0.25rem;
    min-width: 1.15rem;
    height: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    border-radius: 999px;
    color: #111;
    background: var(--acento);
    font-size: 0.68rem;
    font-weight: 900;
}

.notificaciones-panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 130;
    width: min(22rem, 88vw);
    overflow: hidden;
    border: 1px solid var(--linea);
    border-radius: 1rem;
    background: var(--panel);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

.notificaciones-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--linea);
}

.notificaciones-cabecera button {
    min-height: 2rem;
    padding: 0 0.65rem;
    color: var(--texto);
    background: var(--panel-suave);
    border-color: var(--linea);
    font-size: 0.78rem;
    font-weight: 700;
}

.notificaciones-lista {
    max-height: 22rem;
    overflow-y: auto;
}

.notificacion-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--linea);
    color: var(--texto);
    text-decoration: none;
}

.notificacion-item:hover {
    background: var(--panel-suave);
}

.notificacion-item.no-leida {
    background: rgba(244, 196, 48, 0.08);
}

.notificacion-icono {
    margin-top: 0.1rem;
    font-size: 0.95rem;
}

.notificacion-item strong,
.notificacion-item small {
    display: block;
}

.notificacion-item strong {
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

.notificacion-item small {
    margin: 0.12rem 0 0.2rem;
    color: var(--suave);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 500;
}

.notificaciones-vacio {
    margin: 0;
    padding: 1rem;
    color: var(--suave);
    text-align: center;
}

.layout {
    width: min(1180px, 94vw);
    max-width: 94vw;
    margin: 0 auto;
    padding: 1rem 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
}

.historico-layout {
    grid-template-columns: 1fr;
}

.panel-principal,
.panel-ajustes,
.grafico-card,
.tabla-card {
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--linea);
    border-radius: 1.2rem;
    background: var(--panel);
}

.panel-principal,
.panel-ajustes {
    padding: 1rem;
}

.ancho-completo {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.barra-superior {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.kicker,
.region-id {
    margin: 0 0 0.25rem;
    color: var(--suave);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

h2 {
    margin-bottom: 0.45rem;
    font-size: 1.1rem;
}

label {
    display: grid;
    gap: 0.35rem;
    color: var(--suave);
    font-size: 0.82rem;
    font-weight: 700;
}

select,
input,
textarea,
button,
.boton-secundario {
    min-height: 2.45rem;
    border: 1px solid var(--linea);
    border-radius: 0.6rem;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
}

select,
input,
textarea {
    width: 100%;
    padding: 0 0.75rem;
    color: var(--texto);
    background: var(--panel-suave);
}

textarea {
    padding-top: 0.65rem;
    padding-bottom: 0.55rem;
    line-height: 1.25;
}

button,
.boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.85rem;
    color: #111;
    background: var(--acento);
    border-color: transparent;
    cursor: pointer;
    text-decoration: none;
}

.boton-secundario {
    color: var(--texto);
    background: var(--panel-suave);
    border-color: var(--linea);
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.boton-secundario:not(:disabled):hover,
.boton-secundario:not(:disabled):focus-visible,
.boton-secundario.activo {
    color: #111;
    background: var(--acento);
    border-color: var(--acento);
    box-shadow: 0 0 0 1px rgba(244, 196, 48, 0.22), 0 10px 24px rgba(244, 196, 48, 0.14);
}

.boton-secundario:not(:disabled):hover {
    transform: translateY(-1px);
}

.boton-secundario:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.selector-region {
    min-width: min(280px, 48vw);
}

.alerta {
    margin-bottom: 0.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(255, 92, 114, 0.35);
    border-radius: 0.7rem;
    color: #ffd9df;
    background: rgba(255, 92, 114, 0.1);
    font-size: 0.9rem;
}

.aviso-ok {
    margin-bottom: 0.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(70, 211, 125, 0.35);
    border-radius: 0.7rem;
    color: #d8ffe8;
    background: rgba(70, 211, 125, 0.09);
    font-size: 0.9rem;
}

.alerta span {
    display: block;
    margin-top: 0.25rem;
    color: var(--suave);
}

.lectura {
    --categoria-color: var(--ok);
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--linea);
    border-radius: 0.8rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent),
        var(--panel-suave);
}

.lectura-local,
.sin-datos-local {
    margin-bottom: 0.8rem;
}

.lectura-local {
    border-color: rgba(244, 196, 48, 0.22);
    background:
        radial-gradient(circle at top right, rgba(244, 196, 48, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent),
        var(--panel-suave);
}

.categoria-2 { --categoria-color: var(--acento); }
.categoria-3 { --categoria-color: var(--naranja); }
.categoria-4 { --categoria-color: var(--rojo); }
.categoria-5 { --categoria-color: var(--morado); }

.lectura-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.lectura h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.chip-categoria {
    min-width: 7.2rem;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    color: #111;
    background: var(--categoria-color);
    text-align: center;
}

.chip-categoria strong {
    font-size: 1.45rem;
    line-height: 1;
}

.chip-categoria span {
    font-size: 0.78rem;
    font-weight: 900;
}

.chip-categoria span:only-child {
    font-size: 1rem;
    line-height: 1.1;
}

.valor-principal {
    display: grid;
    gap: 0.25rem;
}

.valor-principal span,
.metricas span {
    color: var(--suave);
    font-size: 0.82rem;
    font-weight: 800;
}

.valor-principal strong {
    color: var(--categoria-color);
    font-size: clamp(3.5rem, 10vw, 7rem);
    line-height: 0.9;
    letter-spacing: -0.08em;
}

.metricas,
.dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.metricas > div {
    padding: 0.75rem;
    border: 1px solid var(--linea);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.03);
}

.metricas strong {
    display: block;
    margin-top: 0.2rem;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

.mensaje-api,
.actualizacion,
.texto-suave {
    color: var(--suave);
}

.mensaje-api,
.actualizacion {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.acciones {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.panel-ajustes {
    align-self: start;
}

.form-ajustes {
    display: grid;
    gap: 0.7rem;
}

.form-configuracion {
    max-width: none;
    grid-template-columns: minmax(8.5rem, 0.75fr) minmax(10rem, 1fr) minmax(7.5rem, 0.65fr) minmax(6.2rem, 0.5fr) minmax(6.2rem, 0.5fr) auto;
    align-items: end;
}

.form-respaldos,
.form-restaurar {
    max-width: none;
    grid-template-columns: minmax(9rem, 0.8fr) minmax(8rem, 0.6fr) minmax(18rem, 1.6fr) minmax(10rem, 0.8fr) auto;
    align-items: end;
    margin-bottom: 0.8rem;
}

.form-restaurar {
    grid-template-columns: minmax(18rem, 1fr) auto;
    margin-top: 0.8rem;
}

.campo-ancho {
    min-width: min(24rem, 100%);
}

.campo-ruta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
}

.respaldos-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
}

.form-etiquetas {
    max-width: none;
    grid-template-columns: minmax(14rem, 1fr) 7rem auto;
    align-items: end;
}

.etiquetas-config,
.etiquetas-linea,
.etiquetas-seleccion {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.etiquetas-config {
    margin-top: 0.8rem;
}

.etiqueta-config-item {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin: 0;
}

.etiqueta-config-item button {
    min-height: 1.9rem;
    padding: 0 0.55rem;
    font-size: 0.75rem;
}

.etiqueta-chip,
.etiqueta-check span {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--tag-color) 55%, transparent);
    border-radius: 999px;
    color: var(--texto);
    background: color-mix(in srgb, var(--tag-color) 22%, transparent);
    font-size: 0.78rem;
    font-weight: 800;
}

.etiqueta-check {
    display: inline-flex;
    cursor: pointer;
}

.etiqueta-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.etiqueta-check input:checked + span {
    color: #111;
    background: var(--tag-color);
    border-color: var(--tag-color);
}

.label-texto {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--suave);
    font-size: 0.82rem;
    font-weight: 700;
}

.actualizacion-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.75rem 0;
}

.actualizacion-grid span {
    display: block;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--linea);
    border-radius: 0.8rem;
    background: var(--panel-suave);
    color: var(--suave);
    font-size: 0.82rem;
}

.actualizacion-grid strong {
    display: block;
    overflow: hidden;
    color: var(--texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actualizacion-log {
    max-height: 14rem;
    overflow: auto;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--linea);
    border-radius: 0.8rem;
    background: #0b0f14;
    color: var(--suave);
    white-space: pre-wrap;
}

.modal-reinicio {
    max-width: 520px;
}

.aviso-reinicio {
    margin-top: 0.8rem;
}

.sin-datos {
    padding: 2rem 1rem;
    text-align: center;
}

.filtros-historico {
    display: grid;
    grid-template-columns: minmax(8rem, 0.85fr) minmax(7.2rem, 0.7fr) minmax(7.2rem, 0.7fr) minmax(6.4rem, 0.55fr) minmax(6.4rem, 0.55fr) minmax(8.4rem, 0.75fr) auto;
    gap: 0.6rem;
    align-items: end;
    margin-bottom: 0.8rem;
}

.filtros-api-indiceuv {
    grid-template-columns: minmax(8rem, 0.72fr) minmax(7.2rem, 0.65fr) minmax(7.2rem, 0.65fr) minmax(6.4rem, 0.52fr) minmax(6.4rem, 0.52fr) minmax(8.4rem, 0.72fr) auto;
}

.filtros-solmaforo {
    grid-template-columns: minmax(7.2rem, 0.7fr) minmax(7.2rem, 0.7fr) minmax(6.4rem, 0.55fr) minmax(6.4rem, 0.55fr) minmax(8.4rem, 0.8fr) auto auto auto;
}

.filtros-comparacion {
    grid-template-columns: minmax(7.8rem, 0.65fr) minmax(7.2rem, 0.62fr) minmax(7.2rem, 0.62fr) minmax(6.4rem, 0.5fr) minmax(6.4rem, 0.5fr) minmax(8.4rem, 0.7fr) auto auto;
}

.filtros-rapidos {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.filtros-rapidos a {
    padding: 0.42rem 0.68rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--panel-suave);
    color: var(--texto);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.filtros-rapidos a:hover,
.rangos-rapidos a:hover {
    border-color: var(--acento);
    color: var(--acento);
}

.filtros-rapidos a.activo,
.rangos-rapidos a.activo {
    border-color: rgba(244, 196, 48, 0.75);
    color: #111111;
    background: var(--acento);
    box-shadow: 0 0 0 1px rgba(244, 196, 48, 0.22), 0 10px 24px rgba(244, 196, 48, 0.14);
}

.campo-region-compacta {
    min-width: 0;
}

.check-linea {
    min-height: 2.45rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.75rem;
    border: 1px solid var(--linea);
    border-radius: 0.6rem;
    background: var(--panel-suave);
    color: var(--texto);
}

.check-linea input {
    width: auto;
    min-height: auto;
}

.campo-archivo {
    display: grid;
    gap: 0.35rem;
    color: var(--suave);
    font-size: 0.82rem;
    font-weight: 700;
}

.boton-archivo {
    min-height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0 0.85rem;
    border: 1px solid var(--linea);
    border-radius: 0.6rem;
    color: var(--texto);
    background: var(--panel-suave);
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.campo-archivo + button {
    width: max-content;
    min-width: 0;
    justify-self: start;
    padding-inline: 0.95rem;
}

.boton-archivo:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.input-archivo {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.resumen-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.resumen-mini span {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--suave);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.82rem;
    font-weight: 700;
}

.resumen-acciones {
    align-items: center;
}

.bitacora-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1rem;
}

.bitacora-lista-card {
    align-self: start;
}

.bitacora-chips {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.bitacora-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.6rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--texto);
    background: var(--panel-suave);
    text-decoration: none;
    font-size: 0.82rem;
}

.bitacora-chip:hover {
    border-color: var(--acento);
}

.bitacora-chip.activo {
    border-color: var(--acento);
    box-shadow: 0 0 0 1px rgba(244, 196, 48, 0.25);
}

.bitacora-chip strong {
    font-weight: 800;
}

.bitacora-chip span {
    overflow: hidden;
    color: var(--suave);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bitacora-chip small {
    grid-column: 2;
    color: var(--acento);
    font-size: 0.68rem;
    font-weight: 800;
}

.form-bitacora {
    display: grid;
    grid-template-columns: 9rem 8rem minmax(14rem, 1fr);
    gap: 0.7rem;
    align-items: end;
}

.bitacora-observacion,
.form-bitacora .campo-ancho {
    grid-column: 1 / -1;
}

.bitacora-observacion textarea {
    min-height: 7rem;
    max-height: none;
    resize: vertical;
}

.bitacora-registros {
    display: grid;
    gap: 0.75rem;
}

.bitacora-registro {
    padding: 0.85rem;
    border: 1px solid var(--linea);
    border-radius: 0.9rem;
    background: var(--panel-suave);
}

.bitacora-registro div:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--suave);
    font-size: 0.82rem;
}

.bitacora-registro strong {
    color: var(--texto);
}

.bitacora-registro p {
    margin: 0.65rem 0;
    line-height: 1.45;
}

.boton-eliminar-observacion {
    width: auto;
    padding: 0.35rem 0.6rem;
    border-color: rgba(255, 77, 109, 0.35);
    color: #ff8fa3;
    background: rgba(255, 77, 109, 0.08);
    font-size: 0.74rem;
}

.boton-eliminar-observacion:hover {
    border-color: #ff4d6d;
    color: #ffd6de;
}

.herramientas-grafico {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.herramienta-campo {
    min-width: 8rem;
}

.herramienta-comentario {
    flex: 1 1 20rem;
    min-width: min(20rem, 100%);
    gap: 0.25rem;
}

.herramienta-comentario textarea {
    min-height: 2.45rem;
    max-height: 2.45rem;
    resize: none;
    overflow: hidden;
    border-radius: 0.6rem;
}

.herramientas-resultados {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.herramientas-resultados span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--panel-suave);
    color: var(--suave);
    font-size: 0.82rem;
    font-weight: 700;
}

.herramientas-grafico-card .grafico-cabecera {
    margin-bottom: 0.65rem;
}

.chip-boton {
    min-height: auto;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--suave);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.82rem;
    font-weight: 800;
}

.chip-boton:hover {
    color: var(--texto);
    border-color: rgba(255, 255, 255, 0.18);
    background: var(--panel-suave);
}

.rangos-rapidos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: -0.25rem 0 0.8rem;
}

.rangos-rapidos a {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--texto);
    background: var(--panel-suave);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
}

.analisis-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.analisis-card {
    padding: 0.85rem;
    border: 1px solid var(--linea);
    border-radius: 0.85rem;
    background: var(--panel-suave);
}

.analisis-card span,
.analisis-card small {
    display: block;
    color: var(--suave);
    font-weight: 800;
}

.analisis-card strong {
    display: block;
    margin: 0.25rem 0;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1;
}

.dos-paneles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 1rem;
}

.dos-paneles h3 {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
}

.distribucion-uv {
    display: grid;
    gap: 0.5rem;
}

.distribucion-fila {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) 4rem;
    gap: 0.55rem;
    align-items: center;
}

.distribucion-barra {
    height: 0.85rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.distribucion-barra span {
    display: block;
    height: 100%;
    min-width: 0.18rem;
    border-radius: inherit;
}

.top-dias {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding-left: 1.1rem;
}

.top-dias li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
    color: var(--texto);
}

.top-dias small {
    color: var(--suave);
    font-weight: 800;
}

.grafico-card,
.tabla-card {
    padding: 0.85rem;
    margin-top: 0.8rem;
}

.grafico-card {
    overflow: hidden;
}

.grafico-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.grafico-leyenda {
    position: sticky;
    top: 0.4rem;
    left: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1rem;
    width: 100%;
    margin: 0 0 0.55rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--linea);
    border-radius: 0.7rem;
    background: rgba(15, 19, 24, 0.96);
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 800;
}

.grafico-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.leyenda-color {
    display: inline-block;
    width: 1rem;
    height: 0.24rem;
    border-radius: 999px;
}

.leyenda-api {
    background: #f4c430;
}

.leyenda-solmaforo {
    background: #46d37d;
}

.comparacion-api {
    background: #2f80ed;
}

.comparacion-les {
    background: #ef0025;
}

.uv-bajo {
    background: #22b843;
}

.uv-moderado {
    background: #ffe600;
}

.uv-alto {
    background: #f7931e;
}

.uv-muy-alto {
    background: #ef0025;
}

.uv-extremo {
    background: #8e63ad;
}

.leyenda-detalle {
    color: var(--texto-suave);
    font-weight: 700;
}

.exportar {
    display: flex;
    gap: 0.5rem;
}

.exportar a,
.exportar button {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--linea);
    border-radius: 0.6rem;
    color: var(--texto);
    background: var(--panel-suave);
    text-decoration: none;
    font-weight: 800;
}

canvas {
    width: 100%;
    border-radius: 0.7rem;
    background: #0f1318;
}

.grafico-area {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.grafico-filtro-activo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(244, 196, 48, 0.2);
    border-radius: 0.75rem;
    color: var(--suave);
    background: linear-gradient(135deg, rgba(244, 196, 48, 0.08), rgba(255, 255, 255, 0.025));
    font-size: 0.8rem;
    font-weight: 700;
}

.grafico-filtro-activo span {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
}

.grafico-filtro-activo strong {
    color: var(--acento);
}

.grafico-inteligencia {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    margin: 0 0 0.7rem;
}

.grafico-distribucion,
.grafico-alerta-dia,
.grafico-comparacion-previa {
    border: 1px solid var(--linea);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.028);
}

.grafico-distribucion {
    padding: 0.65rem;
}

.grafico-inteligencia-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--suave);
    font-size: 0.78rem;
    font-weight: 700;
}

.grafico-inteligencia-titulo strong {
    color: var(--texto);
}

.uv-barra-segmentada {
    display: flex;
    width: 100%;
    height: 0.9rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.uv-barra-segmentada span {
    display: block;
    min-width: 0.25rem;
}

.grafico-alerta-dia,
.grafico-comparacion-previa {
    padding: 0.55rem 0.65rem;
    color: var(--suave);
    font-size: 0.82rem;
    font-weight: 800;
}

.grafico-alerta-dia {
    border-color: rgba(239, 0, 37, 0.26);
    background: rgba(239, 0, 37, 0.07);
}

.boton-dia-critico {
    min-height: 0;
    padding: 0;
    color: #ffccd4;
    background: transparent;
    border: 0;
    text-align: left;
    font-size: inherit;
    font-weight: 900;
}

.boton-dia-critico:hover {
    color: var(--texto);
    text-decoration: underline;
}

.grafico-comparacion-previa {
    border-color: rgba(244, 196, 48, 0.2);
    background: rgba(244, 196, 48, 0.06);
}

.mini-calendario {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
    gap: 0.35rem;
}

.mini-calendario-card .mini-calendario {
    margin-top: 0.25rem;
}

.mini-calendario-dia {
    min-height: 2.65rem;
    display: grid;
    place-items: center;
    gap: 0.05rem;
    padding: 0.25rem 0.18rem;
    border: 1px solid var(--linea);
    border-radius: 0.65rem;
    color: var(--texto);
    background: var(--panel-suave);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
}

.mini-calendario-dia small {
    color: inherit;
    font-size: 0.62rem;
    font-weight: 800;
    opacity: 0.86;
}

.mini-calendario-dia[data-nivel="Bajo"] {
    color: #ffffff;
    background: rgba(34, 184, 67, 0.78);
}

.mini-calendario-dia[data-nivel="Moderado"] {
    color: #111111;
    background: rgba(255, 230, 0, 0.92);
}

.mini-calendario-dia[data-nivel="Alto"] {
    color: #111111;
    background: rgba(247, 147, 30, 0.92);
}

.mini-calendario-dia[data-nivel="Muy alto"] {
    color: #ffffff;
    background: rgba(239, 0, 37, 0.92);
}

.mini-calendario-dia[data-nivel="Extremo"] {
    color: #ffffff;
    background: rgba(142, 99, 173, 0.95);
}

.mini-calendario-dia[data-nivel="Sin datos"] {
    color: var(--suave);
    background: rgba(255, 255, 255, 0.035);
}

.mini-calendario-dia:hover {
    border-color: var(--acento);
    transform: translateY(-1px);
}

.grafico-cargando {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    border-radius: 0.7rem;
    background: rgba(15, 19, 24, 0.58);
    backdrop-filter: blur(2px);
}

.grafico-cargando[hidden] {
    display: none;
}

.grafico-cargando-contenido {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid rgba(244, 196, 48, 0.32);
    border-radius: 999px;
    color: var(--texto);
    background: rgba(20, 24, 29, 0.92);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
    font-size: 0.88rem;
    font-weight: 800;
}

.grafico-cargando-pulso {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--acento);
    box-shadow: 0 0 0 0 rgba(244, 196, 48, 0.45);
    animation: pulso-grafico 1.15s ease-out infinite;
}

@keyframes pulso-grafico {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 196, 48, 0.45);
        transform: scale(0.92);
    }

    70% {
        box-shadow: 0 0 0 0.65rem rgba(244, 196, 48, 0);
        transform: scale(1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(244, 196, 48, 0);
        transform: scale(0.92);
    }
}

.grafico-eje-y {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    display: block;
    width: 52px;
    height: 500px;
    border-radius: 0.7rem 0 0 0.7rem;
    background: #0f1318;
    pointer-events: none;
}

.grafico-scroll {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 500px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.35rem;
    border-radius: 0.7rem;
    background: #0f1318;
    scrollbar-gutter: stable;
    overscroll-behavior-x: contain;
}

.grafico-scroll canvas {
    display: block;
    width: auto;
    max-width: none;
    min-height: 500px;
    border-radius: 0;
    image-rendering: crisp-edges;
}

.grafico-scroll::-webkit-scrollbar {
    height: 0.8rem;
}

.grafico-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.grafico-scroll::-webkit-scrollbar-thumb {
    background: rgba(244, 196, 48, 0.65);
    border-radius: 999px;
}

.tooltip-grafico {
    position: absolute;
    z-index: 5;
    width: max-content;
    max-width: 180px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--linea);
    border-radius: 0.6rem;
    color: var(--texto);
    background: rgba(20, 24, 29, 0.96);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    font-size: 0.78rem;
    line-height: 1.35;
    pointer-events: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.68);
}

.modal[hidden] {
    display: none;
}

.modal-contenido {
    width: min(1100px, 96vw);
    max-height: min(780px, 92vh);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--linea);
    border-radius: 1rem;
    background: var(--panel);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.modal-confirmacion {
    width: min(430px, 94vw);
}

.modal-rango-maximo {
    width: min(540px, 94vw);
    max-height: 92vh;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem;
    border-color: rgba(244, 196, 48, 0.28);
    background:
        radial-gradient(circle at top left, rgba(244, 196, 48, 0.13), transparent 38%),
        var(--panel);
}

.modal-rango-maximo .kicker {
    margin: 0 0 0.28rem;
    color: var(--acento);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modal-rango-maximo h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.modal-rango-maximo p:not(.kicker) {
    margin: 0.7rem 0 0;
    color: var(--suave);
    font-size: 0.96rem;
    line-height: 1.5;
}

.modal-rango-icono {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    color: #111318;
    background: linear-gradient(135deg, var(--acento), #f59e0b);
    box-shadow: 0 14px 34px rgba(244, 196, 48, 0.22);
    font-size: 1.5rem;
    font-weight: 900;
}

.modal-rango-detalle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.modal-rango-detalle span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.48rem 0.7rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--suave);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.84rem;
}

.modal-rango-detalle strong {
    color: var(--texto);
}

.modal-rango-maximo .acciones-modal {
    grid-column: 1 / -1;
    margin-top: 0.15rem;
}

.modal-dia-grafico {
    width: min(1280px, 96vw);
    max-height: min(860px, 94vh);
}

.modal-dia-grafico .kicker {
    margin: 0 0 0.25rem;
    color: var(--acento);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modal-dia-grafico h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.modal-dia-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.modal-dia-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.modal-dia-resumen span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.68rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--suave);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.84rem;
}

.modal-dia-resumen strong {
    color: var(--texto);
}

.modal-dia-canvas-wrap {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    border-radius: 0.8rem;
    background: #0f1318;
}

.modal-dia-canvas-wrap canvas {
    display: block;
    width: auto;
    max-width: none;
}

.modal-dia-tooltip {
    z-index: 1;
}

.volver-grafico {
    position: fixed;
    right: max(1rem, calc((100vw - 1180px) / 2));
    bottom: 1rem;
    z-index: 90;
    min-height: 2.45rem;
    padding: 0 0.9rem;
    border: 1px solid rgba(244, 196, 48, 0.42);
    border-radius: 999px;
    color: #111318;
    background: var(--acento);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34), 0 0 24px rgba(244, 196, 48, 0.18);
    font-size: 0.86rem;
    font-weight: 900;
}

.volver-grafico[hidden] {
    display: none;
}

.acciones-modal {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.boton-peligro {
    width: auto;
    background: #ff4d6d;
    color: #ffffff;
}

.boton-peligro:hover {
    background: #ff6f88;
}

.modal-cabecera,
.modal-acciones {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.modal-filtros {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 0.6rem;
    align-items: end;
}

.modal-tabla {
    max-height: 58vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--linea);
    border-radius: 0.75rem;
}

.modal-tabla thead th {
    position: sticky;
    top: 0;
    background: var(--panel);
}

.modal-resumen-filtro {
    justify-content: flex-start;
}

.modal-dia-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 0.8rem;
}

.modal-dias {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid var(--linea);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
}

.modal-dia-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.dias-rapidos-modal {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-right: 0.15rem;
}

.dia-chip {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--texto);
    background: var(--panel-suave);
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.dia-chip:hover,
.dia-chip.activo {
    border-color: var(--acento);
    color: #111;
    background: var(--acento);
}

button.dia-chip.activo {
    border-color: var(--acento);
    color: #111;
    background: var(--acento);
}

.chip-uv {
    display: inline-flex;
    min-width: 3.5rem;
    justify-content: center;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-weight: 900;
}

.chip-uv.uv-bajo {
    color: #fff;
    background: #22b843;
}

.chip-uv.uv-moderado {
    color: #111;
    background: #ffe600;
}

.chip-uv.uv-alto {
    color: #111;
    background: #f7931e;
}

.chip-uv.uv-muy-alto {
    color: #fff;
    background: #ef0025;
}

.chip-uv.uv-extremo {
    color: #fff;
    background: #8e63ad;
}

.fila-sin-datos td {
    height: 12rem;
    color: var(--suave);
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
    vertical-align: middle;
}

.tabla-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 0.6rem;
    border-bottom: 1px solid var(--linea);
    text-align: left;
    white-space: nowrap;
    font-size: 0.88rem;
}

th {
    color: var(--suave);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

footer {
    padding: 0.75rem;
    color: var(--suave);
    text-align: center;
    border-top: 1px solid var(--linea);
    font-size: 0.85rem;
}

.reporte-body {
    display: block;
    background: #0b0d10;
}

.reporte-contenedor {
    width: min(1180px, 94vw);
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

.reporte-hero,
.reporte-seccion {
    border: 1px solid var(--linea);
    border-radius: 1.1rem;
    background: var(--panel);
}

.reporte-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.reporte-hero h1 {
    margin-bottom: 0.35rem;
}

.reporte-hero p {
    margin: 0;
    color: var(--suave);
}

.reporte-acciones {
    flex: 0 0 auto;
}

.reporte-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.reporte-card {
    padding: 1rem;
    border: 1px solid var(--linea);
    border-radius: 1rem;
    background: var(--panel-suave);
}

.reporte-card span,
.reporte-card small {
    display: block;
    color: var(--suave);
    font-weight: 800;
}

.reporte-card strong {
    display: block;
    margin: 0.25rem 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1;
}

.reporte-seccion {
    padding: 1rem;
    margin-bottom: 1rem;
}

.reporte-titulo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.reporte-titulo p {
    margin: 0;
}

.pill {
    flex: 0 0 auto;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--texto);
    background: var(--panel-suave);
    font-size: 0.8rem;
    font-weight: 800;
}

.reporte-barras {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.reporte-barra-fila {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) 6rem;
    gap: 0.7rem;
    align-items: center;
}

.reporte-barra-fecha,
.reporte-barra-valor {
    color: var(--texto);
    font-size: 0.85rem;
    font-weight: 800;
}

.reporte-barra {
    height: 1.05rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.reporte-barra span {
    display: block;
    height: 100%;
    min-width: 0.25rem;
    border-radius: inherit;
}

.reporte-barra-valor small {
    display: block;
    color: var(--suave);
    font-size: 0.68rem;
}

.reporte-tabla {
    border: 1px solid var(--linea);
    border-radius: 0.8rem;
}

.reporte-filtros-uv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
}

.chip-filtro-uv {
    min-height: 2rem;
    padding: 0 0.7rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--chip-fg, var(--texto));
    background: var(--chip-bg, var(--panel-suave));
    font-size: 0.82rem;
    font-weight: 900;
}

.chip-filtro-uv.activo {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.chip-uv {
    display: inline-flex;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.reporte-footer {
    border: 0;
}

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at top, rgba(244, 196, 48, 0.16), transparent 34rem),
        #080b0f;
}

.auth-shell {
    width: min(28rem, 100%);
}

.auth-card {
    padding: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, rgba(24, 30, 38, 0.96), rgba(14, 18, 24, 0.96));
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.auth-brand img {
    width: 3.4rem;
    height: 3.4rem;
    object-fit: contain;
}

.auth-brand h1 {
    margin: 0;
    font-size: 2rem;
}

.auth-form {
    display: grid;
    gap: 0.9rem;
}

.alerta-error,
.alerta-ok {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    font-size: 0.9rem;
}

.alerta-error {
    border: 1px solid rgba(239, 0, 37, 0.35);
    color: #ffb3bd;
    background: rgba(239, 0, 37, 0.1);
}

.alerta-ok {
    border: 1px solid rgba(31, 190, 79, 0.35);
    color: #b8f5c8;
    background: rgba(31, 190, 79, 0.1);
}

.form-usuarios {
    align-items: end;
}

.usuarios-tabla {
    margin-top: 1rem;
}

.form-inline {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.form-inline input {
    min-width: 8rem;
}

.chip-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.chip-mini.correcto {
    color: #d8ffe3;
    background: rgba(31, 190, 79, 0.2);
}

.chip-mini.advertencia {
    color: #241a00;
    background: #f4c430;
}

.config-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding: 0.45rem;
    border: 1px solid var(--linea);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.03);
}

.config-tab {
    min-width: auto;
    padding: 0.55rem 0.8rem;
    color: var(--suave);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
}

.config-tab:hover,
.config-tab.activo {
    color: #111;
    background: var(--acento);
    border-color: rgba(244, 196, 48, 0.55);
}

.config-tab-panel {
    display: none;
}

.config-tab-panel.activo {
    display: block;
}

.usuario-navbar {
    position: relative;
    z-index: 1;
    max-width: 9.5rem;
    margin-left: auto;
    overflow: hidden;
    color: var(--suave);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.salir-navbar {
    min-width: auto !important;
    color: var(--suave) !important;
    background: transparent !important;
    font-weight: 700 !important;
}

.salir-navbar:hover {
    color: var(--acento) !important;
}

.embed-body {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 0%, rgba(244, 196, 48, 0.18), transparent 32%),
        var(--fondo);
}

.embed-contenedor {
    width: 100%;
    min-height: 100vh;
    padding: 0.7rem;
}

.embed-card {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 1.4rem);
    padding: 1rem;
    border: 1px solid var(--linea);
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        var(--panel);
    box-shadow: var(--sombra);
}

.embed-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.embed-header small {
    color: var(--suave);
    font-weight: 800;
    white-space: nowrap;
}

.embed-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.embed-marca img {
    width: 2.1rem;
    height: 2.1rem;
    object-fit: contain;
}

.embed-card h1 {
    margin: 0.15rem 0 0.8rem;
    font-size: clamp(1.25rem, 5vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.embed-valor {
    display: grid;
    gap: 0.15rem;
    margin: 0.6rem 0 0.9rem;
}

.embed-valor span,
.embed-metricas span,
.embed-card footer {
    color: var(--suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.embed-valor strong {
    color: var(--categoria-color, var(--ok));
    font-size: clamp(3.2rem, 18vw, 6.8rem);
    line-height: 0.85;
    letter-spacing: -0.08em;
}

.embed-metricas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.embed-metricas div {
    padding: 0.75rem;
    border: 1px solid var(--linea);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.035);
}

.embed-metricas strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.15rem;
}

.embed-card footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    margin-top: 0.9rem;
}

.embed-sin-datos {
    display: grid;
    align-content: center;
}

.embed-grafico-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.65rem;
}

.embed-leyenda {
    margin: 0;
}

.embed-grafico-area {
    min-height: 0;
}

.embed-grafico-area .grafico-scroll,
.embed-grafico-area canvas#graficoComparacion {
    min-height: 420px;
}

@media print {
    :root {
        color-scheme: light;
    }

    body,
    .reporte-body {
        color: #111;
        background: #fff;
    }

    .reporte-contenedor {
        width: 100%;
        padding: 0;
    }

    .reporte-hero,
    .reporte-seccion,
    .reporte-card,
    .reporte-tabla {
        border-color: #ddd;
        background: #fff;
        box-shadow: none;
    }

    .reporte-acciones {
        display: none;
    }

    th,
    td {
        color: #111;
        border-color: #ddd;
    }
}

@media (max-width: 960px) {
    .layout,
    .filtros-historico,
    .form-configuracion,
    .form-respaldos,
    .form-restaurar,
    .form-etiquetas,
    .form-usuarios,
    .form-bitacora,
    .bitacora-layout,
    .actualizacion-grid,
    .modal-filtros,
    .modal-dia-layout,
    .analisis-grid,
    .dos-paneles {
        grid-template-columns: 1fr;
    }

    .selector-region {
        min-width: 0;
    }
}

@media (max-width: 680px) {
    :root {
        --alto-barra: 3.4rem;
    }

    .barra-accesos {
        justify-content: flex-start;
        overflow-x: auto;
        min-height: 3.4rem;
        padding: 0.45rem 1rem;
        gap: 0.75rem;
    }

    .logo-les {
        width: 2.35rem;
        height: 2.35rem;
    }

    .nombre-app {
        display: none;
    }

    .barra-accesos a {
        min-width: max-content;
    }

    .usuario-navbar {
        margin-left: 0;
        max-width: 7rem;
    }

    .barra-superior,
    .lectura-cabecera,
    .grafico-cabecera,
    .acciones,
    .metricas,
    .dos-columnas {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .barra-superior,
    .lectura-cabecera,
    .grafico-cabecera,
    .acciones {
        display: flex;
    }
}