/* ============================================================
   lecturas.css
   Pantalla de selección de dispositivos (lecturas).
   Alineado al sistema de diseño de io.css (variables --io-*).
   ============================================================ */

:root {
    --lec-radius: 6px;
    --lec-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    --lec-gap: 1rem;
}

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

/* ============================================================
   Panel de filtros superior (plegable)
   ============================================================ */
.barra-filtros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: .65rem 1rem;
    margin: 0;
    background: var(--io-color-bg-header-light, #e8f4fc);
    color: var(--io-color-primary-dark, #005a96);
    border: 1px solid var(--io-color-border, #ccc);
    border-left: 4px solid var(--io-color-primary, #0072BC);
    border-bottom: none;
    /* esquinas superiores redondeadas: la barra es la cabecera del panel */
    border-radius: var(--lec-radius) var(--lec-radius) 0 0;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .15s ease;
}
.barra-filtros:hover {
    background: var(--io-color-bg-header-hover, #d8ecfb);
}
/* Cuando el panel está plegado, la barra queda sola: cerramos la tarjeta */
.barra-filtros--plegado {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--io-color-border, #ccc);
    border-radius: var(--lec-radius);
}
.barra-filtros-ind {
    color: var(--io-color-primary, #0072BC);
    font-size: .8em;
}

.div_filtros_1 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: var(--lec-gap);
    margin: 0 0 1rem 0;
    padding: 1.25rem;
    background: var(--io-color-bg-alt, #f5f5f5);
    border: 1px solid var(--io-color-border, #ccc);
    border-left: 4px solid var(--io-color-primary, #0072BC);
    /* unida a la barra: sin esquinas superiores */
    border-radius: 0 0 var(--lec-radius) var(--lec-radius);
    box-shadow: var(--lec-shadow);
}
.div_filtros_2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .5rem 1rem;
}
.div_filtros_2:first-child {
    position: relative;
    z-index: 1001;
}
.div_filtros_2 div {
    padding: .3rem;
}

#tabla_filtros tr {
    cursor: pointer;
    transition: background .12s ease;
}
#tabla_filtros tr:hover {
    background: var(--io-color-bg-header-light, #e8f4fc);
}
/* fila del rango activo (resaltada por JS con background inline) */
#celda_boton {
    vertical-align: middle;
    text-align: center;
}
#celda_boton .io_boton {
    height: 100%;
    min-height: 90px;
}

/* Enlace "Ver últimas lecturas" (acceso directo) */
.enlace-ultimas {
    padding: .3rem;
    max-width: 22em;
}
.enlace-ultimas-texto {
    display: inline-block;
    color: var(--io-color-primary, #0072BC);
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
}
.enlace-ultimas-texto:hover {
    color: var(--io-color-primary-dark, #005a96);
    border-bottom-style: solid;
}
.enlace-ultimas-texto::before {
    content: "\2192";   /* → */
    margin-right: .35em;
}
.enlace-ultimas-ayuda {
    margin-top: .4rem;
    font-size: .82em;
    color: var(--io-color-text-light, #666);
    line-height: 1.4;
}

/* ============================================================
   Caption + barra de herramientas + tabla = una sola tarjeta
   ============================================================ */
.lecturas-caption {
    font-size: .9em;
    color: var(--io-color-text-light, #666);
    margin: .25rem 0 .5rem;
}

/* Barra de acciones de la vista de lecturas (texto de búsqueda + botones) */
.lecturas-acciones-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: .6rem 1rem;
    margin-bottom: 1rem;
    background: var(--io-color-bg-alt, #f5f5f5);
    border: 1px solid var(--io-color-border, #ccc);
    border-left: 4px solid var(--io-color-primary, #0072BC);
    border-radius: var(--lec-radius);
}
.lecturas-acciones-bar .busqueda-actual {
    font-weight: 600;
    color: var(--io-color-text, #333);
    margin-right: auto;   /* empuja los botones al final de la línea */
}
.lecturas-acciones-bar .botonera-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.lecturas-acciones-bar .botonera-inline .io_boton {
    min-height: 0;
}

.lecturas-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1rem;
    background: var(--io-color-bg-alt, #f5f5f5);
    border: 1px solid var(--io-color-border, #ccc);
    border-bottom: none;
    border-radius: var(--lec-radius) var(--lec-radius) 0 0;
}
.lecturas-toolbar .toggle-excluidos {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    cursor: pointer;
    user-select: none;
    font-size: .9em;
    color: var(--io-color-text, #333);
}
.lecturas-toolbar .caja-filtrar {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .9em;
    color: var(--io-color-text-light, #666);
}
.lecturas-toolbar .caja-filtrar input {
    padding: .4em .7em .4em 2em;
    border: 1px solid var(--io-color-border, #ccc);
    border-radius: 999px;
    min-width: 15em;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat .6em center;
    background-size: 1em;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lecturas-toolbar .caja-filtrar input:focus {
    outline: none;
    border-color: var(--io-color-primary, #0072BC);
    box-shadow: 0 0 0 3px rgba(var(--io-color-primary-rgb), .18);
}

/* ============================================================
   Tabla de dispositivos
   ============================================================ */
.tabla-lecturas {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--io-color-border, #ccc);
    box-shadow: var(--lec-shadow);
    font-size: .9rem;
}

/* --- Cabecera azul SXR --- */
.tabla-lecturas thead th {
    position: sticky;
    top: 0;
    z-index: 101;
    background: var(--io-color-table-header, #0072BC);
    color: var(--io-color-table-header-text, #fff);
    border-bottom: 1px solid var(--io-color-primary-dark, #005a96);
    padding: .6em 1em;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.tabla-lecturas thead th + th {
    border-left: 1px solid rgba(255, 255, 255, .15);
}

/* --- Cuerpo: zebra, hover, selección --- */
.tabla-lecturas tbody td {
    padding: .5em 1em;
    border-bottom: 1px solid #eaeaea;
}
.tabla-lecturas tbody tr:hover {
    background: var(--io-color-bg-header-hover, #d8ecfb);
}
.tabla-lecturas tbody tr.fila-seleccionada,
.tabla-lecturas tbody tr.fila-seleccionada:hover {
    background: rgba(var(--io-color-primary-rgb), .14);
    box-shadow: inset 3px 0 0 0 var(--io-color-primary, #0072BC);
}

/* Columna de selección (checkbox) */
.col-check {
    width: 2.75em;
    text-align: center;
}
.col-check input {
    cursor: pointer;
    width: 1.05em;
    height: 1.05em;
    accent-color: var(--io-color-primary, #0072BC);
    vertical-align: middle;
}
.tabla-lecturas thead .col-check input {
    accent-color: #fff;
}

/* Celdas-atajo de selección */
.celda-clic {
    cursor: pointer;
}
.div_familia {
    min-width: 5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Filas excluidas (recursos no vigilados) */
.excluido td {
    color: #9a8a4f;
    font-style: italic;
}

/* ============================================================
   Cabecera: ordenar (texto) + icono de filtro
   ============================================================ */
.header-filtrable {
    position: relative;
}
.th-orden {
    cursor: pointer;
    user-select: none;
}
.th-orden:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sort-ind {
    color: rgba(255, 255, 255, .7);
    font-size: .85em;
    margin-left: .35em;
}
.th-filtro-icono {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0 .4em;
    margin-left: .25em;
    vertical-align: middle;
    border-radius: 4px;
    transition: background .12s ease;
}
.th-filtro-icono:hover {
    background: rgba(255, 255, 255, .2);
}
.th-filtro-icono svg {
    width: 1.4em;
    height: 1.4em;
    fill: #fff;   /* sobreescribe el fill inline del SVG */
}

/* ---------- Mini filtros desplegables ---------- */
.mini-filtro {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--io-color-border, #ccc);
    border-radius: 0 0 var(--lec-radius) var(--lec-radius);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    min-width: 210px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.mini-filtro .filtro-item {
    padding: .5em 1em;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    color: var(--io-color-text, #333);
    font-size: .9rem;
}
.mini-filtro .filtro-item:hover {
    background: var(--io-color-bg-header-light, #e8f4fc);
}
.mini-filtro .filtro-item.marcado {
    background: var(--io-color-primary, #0072BC);
    color: #fff;
}
.mini-filtro .filtro-item.marcado:hover {
    background: var(--io-color-primary-dark, #005a96);
}

/* ============================================================
   Botonera de acciones (pie de la tarjeta, sticky)
   ============================================================ */
.botones-visualizacion {
    position: sticky;
    bottom: 0;
    z-index: 100;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    padding: .6rem 1rem;
    background: var(--io-color-bg-alt, #f5f5f5);
    border: 1px solid var(--io-color-border, #ccc);
    border-top: 1px solid #ddd;
    border-radius: 0 0 var(--lec-radius) var(--lec-radius);
}
.botones-visualizacion .boton-atras {
    margin-right: auto;
}

/* ============================================================
   Gráfica de lecturas (graficaStockChart.php)
   Filas de información (umbrales/estadística), indicador de fecha
   fijo bajo la gráfica y valores integrados en la leyenda.
   ============================================================ */
.info-fila {
    display: flex;
    align-items: center;
    justify-content: space-between; /* título a la izquierda, valores a la derecha */
    gap: 0.4em 1em;
    flex-wrap: wrap;
    padding: 0.35em 0.6em;
    border-radius: 6px;
    margin-bottom: 0.4em;
    font-size: 0.9em;
    border: 1px solid var(--io-color-border, #e0e0e0);
    background: var(--io-color-bg, #fafafa);
}
/* Grupo de valores (lado derecho de la fila) */
.info-fila .fila-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4em 1.2em;
}
.info-fila .fila-titulo {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--io-color-text-light, #888);
    white-space: nowrap;
    margin-right: 0.3em;
}
.info-fila .fila-sep {
    color: var(--io-color-border, #ccc);
    user-select: none;
}
.info-item {
    display: flex;
    align-items: baseline;
    gap: 0.3em;
    white-space: nowrap;
}
.info-item .lbl {
    font-size: 0.8em;
    color: var(--io-color-text-light, #888);
    text-transform: uppercase;
}
.info-item .val { font-weight: bold; }

/* fecha seleccionada bajo la gráfica */
#indicador_fecha {
    text-align: center;
    min-height: 1.5em; /* evita saltos de layout */
    margin-bottom: 0.4em;
    color: var(--io-color-text-light, #888);
    font-size: 0.9em;
}

/* Elementos de la leyenda: nombre de la sonda + temperatura al lado */
.leg-sonda .leg-valor {
    display: inline-block;
    min-width: 3.5em; /* ancho reservado: así el valor no descuadra la leyenda al aparecer */
    font-weight: bold;
    text-align: left;
}
.val-activacion    { color: #c62828; }
.val-desactivacion { color: #2e7d32; }
.val-baja          { color: #1565c0; }
.val-minima        { color: #1565c0; }
.val-media         { color: #f57f17; }
.val-maxima        { color: #c62828; }