/* ============================================================
   S.I.M.A. — styles.css
   Sistema Inteligente de Monitoreo Agrícola
   Paleta: verde agrícola, blanco, gris claro
   Diseño responsive — mobile first
   ============================================================ */

/* ----------------------------------------------------------
   Variables CSS (Design Tokens)
   ---------------------------------------------------------- */
:root {
    --verde-primario:    #2d6a4f;
    --verde-medio:       #40916c;
    --verde-claro:       #74c69d;
    --verde-muy-claro:   #b7e4c7;
    --verde-fondo:       #d8f3dc;
    --blanco:            #ffffff;
    --gris-100:          #f5f5f5;
    --gris-200:          #e8e8e8;
    --gris-400:          #9e9e9e;
    --gris-700:          #424242;
    --gris-900:          #1a1a1a;
    --rojo-alerta:       #c62828;
    --rojo-claro:        #ffebee;
    --amarillo-aviso:    #f9a825;
    --amarillo-claro:    #fffde7;
    --azul-info:         #1565c0;
    --azul-claro:        #e3f2fd;

    --radio-tarjeta:     12px;
    --radio-panel:       10px;
    --sombra-tarjeta:    0 2px 8px rgba(0,0,0,.10);
    --sombra-hover:      0 4px 16px rgba(45,106,79,.18);
    --transicion:        0.25s ease;
    --fuente-base:       'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ----------------------------------------------------------
   Reset y base
   ---------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente-base);
    background-color: var(--gris-100);
    color: var(--gris-900);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Clase utilitaria: solo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------
   Cabecera
   ---------------------------------------------------------- */
.sima-header {
    background: linear-gradient(135deg, var(--verde-primario) 0%, var(--verde-medio) 100%);
    color: var(--blanco);
    padding: 1rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.header-brand { display: flex; align-items: center; }

.header-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.logo-icon { font-size: 2rem; line-height: 1; }

.logo-sima {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.1;
}

.logo-desc {
    display: block;
    font-size: .78rem;
    opacity: .85;
    font-weight: 400;
    letter-spacing: .02em;
}

.header-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
    font-size: .82rem;
}

.status-row { display: flex; align-items: center; gap: .4rem; }

.status-label { opacity: .75; }

.status-value { font-weight: 600; }

/* Badges de estado */
.estado-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .7rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    transition: background var(--transicion), color var(--transicion);
}

.estado-en-linea    { background: rgba(255,255,255,.25); color: #fff; }
.estado-sin-conexion { background: var(--rojo-alerta); color: #fff; }
.estado-desconocido  { background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }

/* ----------------------------------------------------------
   Banner de error
   ---------------------------------------------------------- */
.banner-error {
    background: var(--rojo-alerta);
    color: var(--blanco);
    text-align: center;
    padding: .6rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    animation: parpadeo 2s infinite;
}

@keyframes parpadeo {
    0%, 100% { opacity: 1; }
    50%       { opacity: .7; }
}

/* ----------------------------------------------------------
   Contenido principal
   ---------------------------------------------------------- */
.sima-main {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
    width: 100%;
}

.section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--verde-primario);
    border-left: 4px solid var(--verde-claro);
    padding-left: .7rem;
    margin-bottom: 1rem;
}

/* ----------------------------------------------------------
   Tarjetas de sensores
   ---------------------------------------------------------- */
.section-tarjetas { margin-bottom: 2rem; }

.tarjetas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.tarjeta {
    background: var(--blanco);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
    padding: 1.2rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow var(--transicion), transform var(--transicion), border-left-color var(--transicion);
    border-left: 4px solid var(--verde-claro);
    position: relative;
    overflow: hidden;
}

.tarjeta:hover {
    box-shadow: var(--sombra-hover);
    transform: translateY(-2px);
}

/* Estado de la tarjeta — modificado por JS */
.tarjeta.estado-ok       { border-left-color: var(--verde-claro); }
.tarjeta.estado-alerta   { border-left-color: var(--rojo-alerta); }
.tarjeta.estado-aviso    { border-left-color: var(--amarillo-aviso); }
.tarjeta.estado-info     { border-left-color: var(--azul-info); }
.tarjeta.estado-inactivo { border-left-color: var(--gris-400); }

.tarjeta-icono {
    font-size: 2rem;
    margin-bottom: .5rem;
    line-height: 1;
}

.tarjeta-valor {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--verde-primario);
    line-height: 1;
    transition: color var(--transicion);
}

.tarjeta.estado-alerta .tarjeta-valor   { color: var(--rojo-alerta);   }
.tarjeta.estado-aviso  .tarjeta-valor   { color: var(--amarillo-aviso); }

.tarjeta-unidad {
    font-size: .9rem;
    color: var(--gris-400);
    font-weight: 600;
    margin-top: .1rem;
}

.tarjeta-etiqueta {
    font-size: .82rem;
    font-weight: 700;
    color: var(--gris-700);
    margin-top: .5rem;
}

.tarjeta-descripcion {
    font-size: .72rem;
    color: var(--gris-400);
    margin-top: .2rem;
}

/* ----------------------------------------------------------
   Gráficas
   ---------------------------------------------------------- */
.section-graficas { margin-bottom: 2rem; }

.graficas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

.grafica-panel {
    background: var(--blanco);
    border-radius: var(--radio-panel);
    box-shadow: var(--sombra-tarjeta);
    padding: 1.2rem 1rem 1rem;
}

.grafica-titulo {
    font-size: .9rem;
    font-weight: 700;
    color: var(--verde-primario);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.grafica-contenedor {
    position: relative;
    height: 220px;
}

/* ----------------------------------------------------------
   Alertas
   ---------------------------------------------------------- */
.section-alertas { margin-bottom: 2rem; }

.lista-alertas {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.alerta-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: var(--blanco);
    border-radius: 8px;
    padding: .75rem 1rem;
    box-shadow: var(--sombra-tarjeta);
    border-left: 4px solid var(--gris-400);
}

.alerta-item.alerta-humedad_suelo_baja { border-left-color: var(--azul-info); background: var(--azul-claro); }
.alerta-item.alerta-temperatura_alta   { border-left-color: var(--rojo-alerta); background: var(--rojo-claro); }
.alerta-item.alerta-lluvia_detectada   { border-left-color: var(--azul-info); }
.alerta-item.alerta-mq2_elevado        { border-left-color: var(--amarillo-aviso); background: var(--amarillo-claro); }

.alerta-icono { font-size: 1.4rem; line-height: 1; }

.alerta-cuerpo { flex: 1; min-width: 0; }

.alerta-tipo {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gris-400);
}

.alerta-mensaje {
    font-size: .88rem;
    font-weight: 600;
    color: var(--gris-900);
    margin-top: .1rem;
}

.alerta-fecha {
    font-size: .72rem;
    color: var(--gris-400);
    margin-top: .2rem;
}

/* ----------------------------------------------------------
   Historial de mediciones
   ---------------------------------------------------------- */
.section-historial { margin-bottom: 2rem; }

.historial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.historial-header .section-title { margin-bottom: 0; }

.sel-limite {
    border: 1.5px solid var(--gris-200);
    border-radius: 6px;
    padding: .35rem .8rem;
    font-size: .85rem;
    color: var(--gris-700);
    background: var(--blanco);
    cursor: pointer;
    transition: border-color var(--transicion);
}

.sel-limite:focus {
    outline: 2px solid var(--verde-medio);
    border-color: var(--verde-medio);
}

.tabla-scroll {
    background: var(--blanco);
    border-radius: var(--radio-panel);
    box-shadow: var(--sombra-tarjeta);
    overflow-x: auto;
}

.tabla-historial {
    width: 100%;
    border-collapse: collapse;
    font-size: .83rem;
    white-space: nowrap;
}

.tabla-historial thead {
    background: var(--verde-primario);
    color: var(--blanco);
}

.tabla-historial th {
    padding: .65rem .9rem;
    text-align: left;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.tabla-historial tbody tr {
    border-bottom: 1px solid var(--gris-200);
    transition: background var(--transicion);
}

.tabla-historial tbody tr:hover {
    background: var(--verde-fondo);
}

.tabla-historial td {
    padding: .6rem .9rem;
    color: var(--gris-700);
}

.tabla-historial td:first-child { color: var(--gris-400); font-size: .75rem; }

.badge-lluvia-si {
    background: var(--azul-info);
    color: #fff;
    border-radius: 4px;
    padding: .1rem .4rem;
    font-size: .72rem;
    font-weight: 700;
}

.badge-lluvia-no {
    color: var(--gris-400);
    font-size: .75rem;
}

/* Textos vacíos / placeholder */
.texto-vacio {
    text-align: center;
    color: var(--gris-400);
    padding: 2rem;
    font-size: .9rem;
    font-style: italic;
}

/* ----------------------------------------------------------
   Pie de página
   ---------------------------------------------------------- */
.sima-footer {
    background: var(--verde-primario);
    color: rgba(255,255,255,.85);
    text-align: center;
    padding: 1rem 1.5rem;
    font-size: .8rem;
    line-height: 1.8;
}

.sima-footer strong { color: var(--blanco); }

.footer-actualiza {
    font-size: .72rem;
    opacity: .7;
    margin-top: .2rem;
}

/* ----------------------------------------------------------
   Responsive — Tablet (≥ 600px)
   ---------------------------------------------------------- */
@media (min-width: 600px) {
    .tarjetas-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .graficas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----------------------------------------------------------
   Responsive — Desktop (≥ 1024px)
   ---------------------------------------------------------- */
@media (min-width: 1024px) {
    .sima-main {
        padding: 2rem 2rem 3rem;
    }

    .tarjetas-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .graficas-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grafica-contenedor {
        height: 260px;
    }
}

/* ----------------------------------------------------------
   Animación de actualización — parpadeo suave al cambiar valor
   ---------------------------------------------------------- */
@keyframes actualizacion {
    0%   { opacity: .4; }
    100% { opacity: 1; }
}

.actualizando {
    animation: actualizacion .4s ease-out;
}