/* ============================================ */
/* Gestión de Dispositivos > Cisternas          */
/* ============================================ */

/* Formulario del modal: etiquetas chicas y bloques separados */
#DC_modal .modal-body, .DC_compacto .modal-body { padding-top: .75rem; }
#DC_modal .form-label, .DC_compacto .form-label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    margin-bottom: .2rem;
}
#DC_modal .form-control, .DC_compacto .form-control,
#DC_modal .form-select, .DC_compacto .form-select { font-size: .9rem; padding-top: .3rem; padding-bottom: .3rem; }
#DC_modal .form-text, .DC_compacto .form-text { font-size: .72rem; margin-top: .15rem; }
#DC_modal .form-check-label, .DC_compacto .form-check-label { font-size: .85rem; }

.DC_bloque {
    border-top: 1px solid var(--bs-border-color);
    padding-top: .6rem;
    margin-top: .4rem;
}
.DC_bloque h6 {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin-bottom: .15rem;
}
.DC_bloque .DC_bloque_ayuda { font-size: .75rem; color: var(--bs-secondary-color); }

/* Sugerencias del análisis */
.DC_sugerencia {
    border-left: 3px solid #3d8faa;
    background: rgba(61, 143, 170, .08);
    border-radius: .35rem;
    padding: .5rem .75rem;
    font-size: .85rem;
}
.DC_sugerencia ul { margin: .25rem 0 0; padding-left: 1.1rem; }

/* Ojo de "mostrar en el tablero" en la tabla de puntos */
.DC_btn_ojo { border: 0; background: none; padding: 0 .25rem; color: inherit; }
.DC_btn_ojo:disabled { opacity: .5; }

/* Caja de cada alarma (Cisternas y Reconectadores) */
.DC_alarma {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .6rem .75rem .7rem;
    margin-top: .25rem;
}
.DC_alarma_head { margin-bottom: .5rem; }
.DC_alarma_titulo { font-weight: 600; font-size: .9rem !important; }
.DC_alarma.is-off .DC_alarma_body { opacity: .45; }
.DC_alarma_body .form-switch { margin-bottom: .35rem !important; }

/* Valor sugerido arriba del campo: click para usarlo */
.DC_sugerido {
    display: block;
    border: 0;
    background: rgba(61, 143, 170, .12);
    color: #2b7a94;
    border-radius: .3rem;
    padding: .05rem .4rem;
    margin-bottom: .2rem;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.DC_sugerido:hover { background: rgba(61, 143, 170, .25); }
[data-bs-theme="dark"] .DC_sugerido { color: #7ecde0; }
.form-control.DC_aplicado { border-color: #3d8faa; }

/* Panel de sugerencias del detalle: barra fina plegable + tarjetas compactas */
.DC_sug_panel {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: rgba(61, 143, 170, .05);
}
.DC_sug_barra { display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem; }
.DC_sug_toggle {
    border: 0; background: none; color: inherit; padding: .15rem 0;
    display: flex; align-items: center; gap: .4rem;
    font-size: .85rem; font-weight: 600;
}
.DC_sug_toggle .fa-chevron-right, .DC_sug_toggle .fa-chevron-down { width: .8rem; font-size: .7rem; color: var(--bs-secondary-color); }
.DC_sug_toggle .fa-wand-magic-sparkles { color: #3d8faa; }
.DC_sug_resumen {
    font-weight: 500; font-size: .72rem; color: #2b7a94;
    background: rgba(61, 143, 170, .14); border-radius: 1rem; padding: .05rem .5rem;
}
[data-bs-theme="dark"] .DC_sug_resumen { color: #7ecde0; }
.DC_sug_resumen:empty { display: none; }
.DC_sug_barra .form-select { font-size: .75rem; padding-top: .15rem; padding-bottom: .15rem; }
#DC_sugerencias { padding: .2rem .6rem .6rem; }
.DC_sug_tarjeta {
    height: 100%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    padding: .45rem .6rem;
    font-size: .78rem;
}
.DC_sug_titulo { font-weight: 600; font-size: .82rem; margin-bottom: .2rem; }
.DC_sug_detalle { font-weight: 400; font-size: .7rem; color: var(--bs-secondary-color); margin-left: .4rem; }
.DC_sug_texto { color: var(--bs-secondary-color); line-height: 1.3; margin-bottom: .2rem; }
.DC_sug_aplicar {
    border: 0; background: none; padding: 0; margin-top: .1rem;
    font-size: .76rem; font-weight: 600; color: #2b7a94;
}
.DC_sug_aplicar:hover { text-decoration: underline; }
[data-bs-theme="dark"] .DC_sug_aplicar { color: #7ecde0; }

/* Buscador chico junto al título de Puntos / Variadores */
.DC_buscar_chico { max-width: 260px; flex: 1 1 180px; }

/* KeepAlive: barra de acciones sobre los tildados y diferencias de la sincronización */
.DK_barra {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    border: 1px solid var(--bs-border-color);
    background: rgba(61, 143, 170, .06);
    border-radius: .5rem;
    padding: .4rem .6rem;
    margin-bottom: .6rem;
    font-size: .85rem;
}
.DK_dif { background: rgba(255, 193, 7, .25); border-radius: .2rem; padding: 0 .2rem; }

/* ---- Lista de puntos agrupada por sección (como la card del tablero) ---- */
.DC_seccion td {
    background: #f4f6f9 !important; font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #475569; padding-top: 0.55rem; padding-bottom: 0.55rem;
    border-left: 4px solid var(--DC_seccion_color, #94a3b8);
}
.DC_seccion td i { color: var(--DC_seccion_color, #94a3b8); }
.DC_seccion_cant { margin-left: 8px; font-size: 0.7rem; font-weight: 600; color: #94a3b8; }
.DC_seccion_general { --DC_seccion_color: #d97706; }
.DC_seccion_tanque  { --DC_seccion_color: #1abc9c; }
.DC_seccion_llenado { --DC_seccion_color: #3498db; }
.DC_seccion_presurizadoras { --DC_seccion_color: #0d6efd; }
.DC_seccion_presion     { --DC_seccion_color: #e67e22; }
.DC_seccion_frecuencia  { --DC_seccion_color: #3498db; }
/* Botones del título de sección (agregar bomba / flotante) */
.DC_seccion_btn {
    font-size: 0.72rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0.15rem 0.6rem;
    color: var(--DC_seccion_color); border: 1px solid var(--DC_seccion_color); background: transparent;
}
.DC_seccion_btn:hover { background: var(--DC_seccion_color); color: #fff; }
.DC_seccion_otros   { --DC_seccion_color: #94a3b8; }
/* Nivel, presión y frecuencia: el punto principal de la sección */
.DC_principal_tag { color: #0d6efd; font-weight: 600; font-size: 0.72rem; }
.DC_fila_fija td { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(148,163,184,0.08) 8px 16px); }
[data-bs-theme="dark"] .DC_seccion td { background: #1b232c !important; color: #cbd5e1; }
[data-bs-theme="dark"] .DC_principal_tag { color: #6ea8fe; }
/* Bombas / flotantes: subtítulo por elemento (BL1, BP2...) dentro de la sección, con sus puntos debajo */
.DC_subgrupo td {
    background: rgba(148, 163, 184, 0.07) !important; font-size: 0.8rem; padding: 0.4rem 0.75rem 0.4rem 1.5rem;
    border-left: 4px solid var(--DC_seccion_color, #94a3b8);
}
[data-bs-theme="dark"] .DC_subgrupo td { background: rgba(148, 163, 184, 0.06) !important; }
/* Puntos de una bomba: con sangría y la línea de color de la sección, debajo del subtítulo (BL1, BP2...) */
.DC_en_grupo td:first-child { padding-left: 1.75rem; border-left: 4px solid var(--DC_seccion_color, #94a3b8); }
/* Agrupación por bomba más marcada: encabezado teñido con el color de la sección y sus puntos con un fondo suave.
   La tabla es "striped": Bootstrap pinta el fondo de las celdas con box-shadow, por eso se pisa ese. */
.DC_subgrupo td {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--DC_seccion_color, #94a3b8) 14%, transparent) !important;
    border-left: 6px solid var(--DC_seccion_color, #94a3b8);
    border-top: 2px solid color-mix(in srgb, var(--DC_seccion_color, #94a3b8) 40%, transparent);
    font-size: 0.85rem; padding: 0.5rem 0.75rem 0.5rem 1rem;
}
.DC_subgrupo .Admin_chip { background: var(--DC_seccion_color, #94a3b8); color: #fff; border-color: transparent; font-weight: 700; }
.DC_en_grupo > td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--DC_seccion_color, #94a3b8) 5%, transparent) !important; }
.DC_en_grupo > td:first-child { padding-left: 2.25rem; border-left: 6px solid color-mix(in srgb, var(--DC_seccion_color, #94a3b8) 45%, transparent); }
.DC_en_grupo:hover > td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--DC_seccion_color, #94a3b8) 11%, transparent) !important; }

/* Antenas sin conexión (habilitadas): fila en rojo, borde a la izquierda y estado resaltado.
   La tabla es table-striped / table-hover: se pisan las variables de Bootstrap para que el rojo gane al rayado y al hover. */
.table > tbody > tr.DC_antena_sin > * {
    --bs-table-bg-type: rgba(220, 53, 69, 0.10);
    --bs-table-bg-state: rgba(220, 53, 69, 0.16);
    --bs-table-color-type: #842029;
    --bs-table-color-state: #842029;
}
.table > tbody > tr.DC_antena_sin > td:first-child { box-shadow: inset 4px 0 0 #dc3545, inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type)); }
.DC_antena_sin strong { color: #b02a37; }
.DC_antena_sinBadge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: #dc3545;
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55);
    animation: DC_antena_latido 2s ease-out infinite;
}
.DC_antena_sinHace { color: #b02a37; font-weight: 600; }
.DC_antena_sinResumen {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #b02a37;
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.45);
}
@keyframes DC_antena_latido {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
@media (prefers-reduced-motion: reduce) { .DC_antena_sinBadge { animation: none; } }
[data-bs-theme="dark"] .table > tbody > tr.DC_antena_sin > * {
    --bs-table-bg-type: rgba(220, 53, 69, 0.18);
    --bs-table-bg-state: rgba(220, 53, 69, 0.26);
    --bs-table-color-type: #f1aeb5;
    --bs-table-color-state: #f1aeb5;
}
[data-bs-theme="dark"] .DC_antena_sin strong,
[data-bs-theme="dark"] .DC_antena_sinHace,
[data-bs-theme="dark"] .DC_antena_sinResumen { color: #f1aeb5; }
[data-bs-theme="dark"] .DC_antena_sinResumen { background: rgba(220, 53, 69, 0.2); }