@import url('/assets/fonts/fuentes.css');

:root {
    --color-primary: #1E293B;
    --color-on-primary: #FFFFFF;
    --color-secondary: #334155;
    --color-accent: #22C55E;
    --color-background: #0F172A;
    --color-foreground: #F8FAFC;
    --color-muted: #272F42;
    --color-muted-text: #94A3B8;
    --color-border: #475569;
    --color-destructive: #EF4444;
    --radius: 10px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: 'Fira Sans', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, .cifra {
    font-family: 'Fira Code', monospace;
}

a { color: var(--color-accent); }

.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4);
}

/* Navbar */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.navbar__marca {
    font-family: 'Fira Code', monospace;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-foreground);
    text-decoration: none;
}

.navbar__enlaces {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.navbar__enlaces a {
    color: var(--color-muted-text);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.navbar__enlaces a:hover,
.navbar__enlaces a.activo {
    background: var(--color-muted);
    color: var(--color-foreground);
}

.navbar__usuario {
    color: var(--color-muted-text);
    font-size: 14px;
}

/* Cards */
.rejilla-sensores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.tarjeta {
    background: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
}

.tarjeta__titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0 0 var(--space-2);
    overflow-wrap: anywhere;
}

.tarjeta__metricas {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.metrica__valor {
    font-family: 'Fira Code', monospace;
    font-size: 32px;
    font-weight: 600;
}

.metrica__etiqueta {
    color: var(--color-muted-text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tarjeta__fecha {
    color: var(--color-muted-text);
    font-size: 13px;
    margin-top: var(--space-3);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--color-accent);
}

.badge--alerta {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-destructive);
}

/* Forms */
.formulario {
    background: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    max-width: 420px;
    margin: 0 auto;
}

.campo {
    margin-bottom: var(--space-3);
}

.campo label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 14px;
    color: var(--color-muted-text);
}

.campo input,
.campo select {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-foreground);
    font-size: 16px;
}

.campo input:focus,
.campo select:focus,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.formulario-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: end;
    margin-top: var(--space-4);
}

.formulario-filtros .campo {
    margin-bottom: 0;
    min-width: 200px;
}

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    background: var(--color-accent);
    color: #06280F;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 150ms ease-out;
}

.boton:hover { filter: brightness(1.1); }

.boton--secundario {
    background: var(--color-muted);
    color: var(--color-foreground);
    border: 1px solid var(--color-border);
}

.boton--peligro {
    background: var(--color-destructive);
    color: #fff;
}

/* Tables */
.tabla-envoltorio {
    overflow-x: auto;
    margin-top: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

th, td {
    text-align: left;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}

th {
    background: var(--color-muted);
    color: var(--color-muted-text);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}

td.numerica, th.numerica { font-variant-numeric: tabular-nums; }

tr:last-child td { border-bottom: none; }

/* Flash messages */
.flash {
    padding: var(--space-3);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    font-size: 14px;
}

.flash--error {
    background: rgba(239, 68, 68, 0.15);
    color: #FCA5A5;
    border: 1px solid var(--color-destructive);
}

.flash--exito {
    background: rgba(34, 197, 94, 0.15);
    color: #86EFAC;
    border: 1px solid var(--color-accent);
}

.flash--info {
    background: var(--color-muted);
    color: var(--color-foreground);
    border: 1px solid var(--color-border);
}

.pagina-login {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.seccion {
    margin-top: var(--space-5);
}

.seccion__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.vacio {
    color: var(--color-muted-text);
    padding: var(--space-4);
    text-align: center;
}

.acciones-fila {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.texto-apagado {
    color: var(--color-muted-text);
    font-size: 13px;
    margin: var(--space-1) 0 0;
}

.celda-mono {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: var(--color-muted-text);
}

.tarjeta__ubicacion {
    color: var(--color-muted-text);
    font-size: 13px;
    margin-top: -4px;
}

.campo__ayuda {
    display: block;
    margin-top: var(--space-1);
    font-size: 12px;
    color: var(--color-muted-text);
}

.formulario__titulo {
    margin: 0;
    font-size: 22px;
}

.formulario__subtitulo {
    margin: var(--space-1) 0 var(--space-4);
    color: var(--color-muted-text);
    font-size: 14px;
}

.grafica-tarjeta__titulo {
    margin-top: 0;
    font-size: 17px;
}

/* Bloque explicativo (instrucciones de importacion). */
.nota {
    background: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-3);
    font-size: 14px;
    color: var(--color-muted-text);
}

.nota code {
    background: var(--color-background);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: var(--color-foreground);
}

/* Barra de filtros de la consulta historica. */
.formulario-filtros__sensores {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 280px;
}

.formulario-filtros__sensores .filtro-bodegas { margin-top: 0; }

.formulario-filtros__fechas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.formulario-filtros__acciones {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .tarjeta__metricas { gap: var(--space-3); }
    .metrica__valor { font-size: 26px; }
}

/* Filtros: barra de bodegas + lista de sensores */
.filtro-bodegas {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.filtro-bodegas__tab {
    min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-primary);
    color: var(--color-muted-text);
    font-size: 14px;
    cursor: pointer;
    transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.filtro-bodegas__tab:hover {
    color: var(--color-foreground);
}

.filtro-bodegas__tab.activo {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #06280F;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   Selector multiple con casillas. Sustituye a los <select multiple>,
   que obligaban a mantener Ctrl presionado para elegir varios.
   ------------------------------------------------------------------ */
.barra-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.selector {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 240px;
}

.selector__etiqueta {
    font-size: 14px;
    color: var(--color-muted-text);
}

.selector__disparador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-3);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-foreground);
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease-out;
}

.selector__disparador:hover { border-color: var(--color-accent); }

.selector__flecha {
    color: var(--color-muted-text);
    transition: transform 150ms ease-out;
}

.selector--abierto .selector__flecha { transform: rotate(180deg); }
.selector--abierto .selector__disparador { border-color: var(--color-accent); }

.selector__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 100%;
    max-width: 380px;
    margin-top: var(--space-1);
    background: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* Sin JavaScript el panel se queda visible y en el flujo: las casillas son
   campos de formulario reales, asi que todo sigue funcionando. */
.selector__panel[hidden] { display: none; }

.selector__buscador {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.selector__busqueda {
    width: 100%;
    min-height: 36px;
    padding: 0 var(--space-2);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-foreground);
    font-size: 14px;
}

.selector__acciones {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.selector__accion {
    background: none;
    border: none;
    padding: 4px 6px;
    color: var(--color-accent);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
}

.selector__accion:hover { background: var(--color-muted); }

.selector__lista {
    overflow-y: auto;
    padding: var(--space-1);
}

.selector__opcion {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 var(--space-2);
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.selector__opcion:hover { background: var(--color-muted); }
.selector__opcion[hidden] { display: none; }

.selector__opcion input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    min-height: auto;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.selector__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.selector__nombre { color: var(--color-foreground); }

.selector__detalle {
    font-size: 12px;
    color: var(--color-muted-text);
}

.selector__vacio,
.selector__sin-resultados {
    padding: var(--space-3);
    color: var(--color-muted-text);
    font-size: 14px;
    text-align: center;
}

/* Formularios en linea dentro de tablas (renombrar, cambiar clave). */
.form-en-linea {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.form-en-linea input {
    min-height: 36px;
    padding: var(--space-1) var(--space-2);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-foreground);
    font-size: 14px;
}

.form-en-linea .selector { min-width: 180px; }

/* Graficas */
.tarjeta__graficas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.grafica {
    position: relative;
}

.grafica--barra .grafica__lienzo {
    width: 100%;
    height: 100px;
    display: block;
}

.grafica__titulo {
    font-size: 11px;
    color: var(--color-muted-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.grafica-tarjeta {
    background: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.grafica-tarjeta .grafica__lienzo {
    width: 100%;
    height: 240px;
    display: block;
}

.grafica__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.grafica-leyenda__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-muted-text);
}

.grafica-leyenda__linea {
    display: inline-block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
}

.grafica-tooltip {
    position: fixed;
    z-index: 1000;
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.grafica-tooltip__fila {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.grafica-tooltip__llave {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.grafica-tooltip__etiqueta {
    color: var(--color-muted-text);
}

@media (max-width: 640px) {
    .tarjeta__graficas { grid-template-columns: 1fr; }
}

/* Nota explicativa bajo el titulo de cada grafica de la consulta historica. */
.grafica-tarjeta__nota {
    margin: 0 0 var(--space-3);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-muted-text);
    max-width: 78ch;
}

/* Encabezado del tooltip: el instante exacto al que corresponden los valores. */
.grafica-tooltip__titulo {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    color: var(--color-muted-text);
    white-space: nowrap;
}

/* El eje X con fechas necesita mas alto util que la version sin etiquetas. */
.grafica-tarjeta .grafica__lienzo {
    height: 300px;
}

@media (max-width: 640px) {
    .grafica-tarjeta .grafica__lienzo { height: 220px; }
}

/* El selector de agrupacion no necesita tanto ancho como los sensores. */
.formulario-filtros__fechas .campo { min-width: 150px; }

/* ------------------------------------------------------------------
   Alertas por correo
   ------------------------------------------------------------------ */
.rejilla-alertas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
    align-items: start;
    margin-top: var(--space-4);
}

.rejilla-alertas .formulario {
    max-width: none;
    margin: 0;
}

.boton--ancho { width: 100%; }

.badge--aviso {
    background: rgba(234, 179, 8, 0.15);
    color: #FACC15;
}

.badge--neutro {
    background: var(--color-muted);
    color: var(--color-muted-text);
}

/* Casillas: .campo input las estiraria al ancho completo. */
.casilla {
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.campo--casilla label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-foreground);
    font-size: 15px;
    cursor: pointer;
}

.campo--casilla input.casilla {
    width: 20px;
    min-height: 20px;
    padding: 0;
}

.lista-correos {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
}

.lista-correos__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.lista-correos__item:last-child { border-bottom: none; }

.lista-correos__correo {
    word-break: break-all;
}

.bloque-codigo { margin-top: var(--space-3); }

.acciones-codigo { margin-top: var(--space-2); }

/* Doble clase para ganarle a .campo input sin recurrir a !important. */
.campo .entrada-codigo {
    font-family: 'Fira Code', monospace;
    font-size: 24px;
    letter-spacing: 0.3em;
    text-align: center;
}

.entrada-corta {
    width: 110px;
    min-height: 36px;
    padding: var(--space-1) var(--space-2);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-foreground);
    font-size: 14px;
}

.acciones-tabla {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-3);
}