/* ============================================================
   alarmas.css
   Listado de alarmas: panel de filtros, contador de auto-refresco.
   Alineado al sistema de diseño de io.css (variables --io-*).
   ============================================================ */

#tabla_alarmas {
    display: table;
}

/* Contenedor principal de filtros (borde/esquinas vienen de .io_panel) */
#filtro {
    margin: 0 0 1em 0;
    padding: 1em;
    background-color: var(--io-color-bg-alt, #f5f5f5);
}

/* Fila de filtros rápidos (texto + checkboxes) */
#filtro .filtro-rapido {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em 1.5em;
    padding-bottom: 0.75em;
    margin-bottom: 0.75em;
    border-bottom: 1px solid var(--io-color-border, #ccc);
}

/* Grupo de campo con label encima */
#filtro .filtro-campo {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

/* Fila de filtros avanzados (selects + fechas) */
#filtro .filtro-avanzado {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1em 1.5em;
}

/* Grupo de checkboxes en línea */
#filtro .filtro-checks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1.5em;
}

#filtro .filtro-check {
    display: flex;
    align-items: center;
    gap: 0.25em;
}

/* Labels */
#filtro label {
    font-weight: 500;
    color: var(--io-color-text, #333);
    cursor: pointer;
    font-size: 0.9em;
}

/* Inputs de texto y selects */
#filtro input[type="text"],
#filtro input[type="date"],
#filtro select {
    padding: 4px 8px;
    border: 1px solid var(--io-color-border, #ccc);
    border-radius: 4px;
    font-size: inherit;
}

#filtro input[type="text"]:focus,
#filtro input[type="date"]:focus,
#filtro select:focus {
    outline: none;
    border-color: var(--io-color-primary, #0072BC);
    box-shadow: 0 0 0 2px rgba(var(--io-color-primary-rgb), 0.2);
}

/* Checkboxes */
#filtro input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Grupo de fechas */
#filtro .filtro-fechas {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* Contador de auto-refresco */
#auto_refresco_contador {
    font-weight: bold;
    color: var(--io-color-primary, #0072BC);
    min-width: 2em;
    text-align: center;
}

/* Tabla de alarmas con esquinas redondeadas (mismo radio que .io_panel).
   Acotado a esta tabla: NO se toca .io_listado global. overflow:hidden recorta
   las esquinas de la cabecera azul y de la última fila. */
.al-tabla {
    border-radius: 4px;
    overflow: hidden;
}

/* Utilidades de la tabla de alarmas (sustituyen estilos inline) */
.al-nowrap   { white-space: nowrap; }
.al-clic     { cursor: pointer; }
.al-centro   { text-align: center; }
.al-acciones { text-align: center; width: 54px; }