.topbar {
    height: 40px;
}

#titulo_ayuda {
    float: left;
}

.toggle-btn {
    float: right;
    padding-top: 5px;
}

.class_h3 {
    text-align: left;
    padding-left: 5px;
    font-size: 12px;
    color: #95AFCF;
    font-family: 'Verdana';
}

.class_titulo_menu {
    /* --- Tus propiedades base originales --- */
    color: #6A82B3;
    text-align: left;
    padding-left: 5px;
    font-size: 12px;
    font-family: 'Verdana';
    /* font-weight: bold; */

    /* --- Nuevas propiedades para comportamiento de Enlace / Desplegable --- */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Espacio entre el texto y la flecha */
    text-decoration: none;
    border-bottom: 1px dashed rgba(106, 130, 179, 0.5);
    /* Subrayado sutil discontinuo */
    padding-bottom: 1px;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

/* Flechita desplegable (▾) agregada automáticamente vía CSS sin tocar el HTML */
.class_titulo_menu::after {
    content: "▾";
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* --- Estado Hover (Al pasar el mouse por encima) --- */
.class_titulo_menu:hover {
    color: #00e5ff;
    /* Cambia a un azul neón brillante */
    border-bottom-color: #00e5ff;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
    /* Resplandor sutil estilo app */
}

/* La flechita baje 1px y se vuelva 100% visible al pasar el mouse */
.class_titulo_menu:hover::after {
    opacity: 1;
    transform: translateY(1px);
}

/* --- Estado Active (Al hacer clic) --- */
.class_titulo_menu:active {
    opacity: 0.8;
    transform: scale(0.98);
}

.tooltip {
    position: relative;
    display: inline-block;
    float: none;
}


/* Tooltip text */
.tooltip .tooltiptext,
.tooltiptext_bottom,
.tooltiptext_up {
    visibility: hidden;
    width: 200px;
    background-color: #07264C;
    font-size: 11px;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    opacity: 0.9;
}

.tooltiptext {
    left: 30px;
}

.tooltiptext_bottom {
    top: 60px;
    left: 0px;
}

.tooltiptext_up {
    top: -35px;
    left: 0px;
}

.tooltip:hover .tooltiptext,
.tooltip:hover .tooltiptext_bottom,
.tooltip:hover .tooltiptext_up {
    visibility: visible;
}

.filtros {
    width: auto;
    text-align: left;

    background: #061528;
    /* Nota de fidelidad (2026-09-28, hallazgo 48 de plan-migracion-mvc.md):
       el fondo navy oscuro (#061528) no tenia un color de texto propio, asi
       que el texto plano dentro de .filtros (por ejemplo "VIDEO 1:"/"VIDEO 2:"
       en patrullaje/templates/ver_video_patrullaje.html) heredaba el negro
       por defecto del navegador -- practicamente ilegible sobre un fondo tan
       oscuro. Mismo tono claro (#e0e6ed) ya usado para texto sobre fondos
       oscuros en #popup_submodulo, mas abajo en este mismo archivo. */
    color: #e0e6ed;

    /*border: 1px solid #1B4E85;*/
    border-radius: 6px;

    box-shadow:
        inset 0 1px 0 rgba(120, 180, 255, 0.20),
        /* brillo superior */
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        /* sombra inferior */
        0 0 6px rgba(40, 120, 220, 0.35);
    /* resplandor exterior */
}

.filtros table td {
    font-size: 10px;
    /* Nota de fidelidad (2026-09-28, hallazgo 48 de plan-migracion-mvc.md):
       la plataforma no tiene <!DOCTYPE> (document.compatMode confirmado como
       'BackCompat', modo quirks) -- en ese modo los navegadores NO propagan
       'color' desde un contenedor hacia <table>/<tr>/<td> descendientes (a
       diferencia de modo estandar, donde 'color' se hereda normalmente). Por
       eso agregar 'color' solo en .filtros (arriba) no alcanzaba: aca se
       repite explicitamente sobre el <td>, que es donde el modo quirks
       reinicia el color por defecto (negro) del navegador. */
    color: #e0e6ed;
}



input.recargar {
    /* 
      Icono de "recargar" 100% CSS - Versión Blanca Brillante (Círculo reducido un 10%)
    */
    /* Color único del ícono: antes repetido 4 veces como #ffffff en background-image
       (punto 32 de la lista de optimización) -- ahora una sola fuente de verdad. */
    --recargar-color: #ffffff;

    /* Tamaño base de referencia (punto 34 de la lista de optimización): el botón
       real mide 34x34 (definido en botones.css, regla compartida .agregar/.recargar/
       .excel/.descargar). Todas las posiciones/tamaños/radios de abajo quedan
       expresados como calc(var(--recargar-size) / 34 * N), donde N es el valor
       original en px a 34x34 -- a ese tamaño el resultado es idéntico (34/34*N = N,
       sin redondeo), pero si el botón cambia de tamaño (acá o en botones.css) basta
       ajustar esta variable para que el ícono escale con él, en vez de recalcular
       cada número mágico a mano. */
    --recargar-size: 34px;

    /* background-color: se quitó, era redundante -- la regla compartida
       .agregar/.recargar/.excel/.descargar en botones.css ya pone
       "background-color: transparent" sobre el mismo elemento (punto 35 de la
       lista de optimización). */
    background-repeat: no-repeat;
    
    /* Ajustamos posiciones un 10% más hacia adentro para el nuevo radio */
    background-position: 
        calc(50% + (var(--recargar-size) / 34 * 8)) calc(var(--recargar-size) / 34 * 5),  /* Punta de flecha superior/derecha */
        calc(50% - (var(--recargar-size) / 34 * 8)) calc(var(--recargar-size) / 34 * 23), /* Punta de flecha inferior/izquierda */
        center;               /* Anillo circular central */
        
    background-size: 
        calc(var(--recargar-size) / 34 * 9) calc(var(--recargar-size) / 34 * 9), 
        calc(var(--recargar-size) / 34 * 9) calc(var(--recargar-size) / 34 * 9), 
        100% 100%;
        
    background-image:
        linear-gradient(220deg, transparent 50%, var(--recargar-color) 50%),
        linear-gradient(40deg, transparent 50%, var(--recargar-color) 50%),
        conic-gradient(from -25deg,
            transparent 0deg 45deg,
            var(--recargar-color) 45deg 175deg,
            transparent 175deg 225deg,
            var(--recargar-color) 225deg 360deg
        );
        
    box-sizing: border-box;
    border: none;
    
    /* Radio de la máscara, ~10% menos que el círculo completo del botón
       (12px-17px -> 10.5px-15.5px a 34x34; ver --recargar-size arriba) */
    -webkit-mask-image: radial-gradient(circle at center, transparent calc(var(--recargar-size) / 34 * 10), #000 calc(var(--recargar-size) / 34 * 10.5), #000 calc(var(--recargar-size) / 34 * 15.5), transparent calc(var(--recargar-size) / 34 * 16));
    mask-image: radial-gradient(circle at center, transparent calc(var(--recargar-size) / 34 * 10), #000 calc(var(--recargar-size) / 34 * 10.5), #000 calc(var(--recargar-size) / 34 * 15.5), transparent calc(var(--recargar-size) / 34 * 16));
    
    /* Efecto de brillo (glow) blanco */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
    
    /* Transiciones fluidas -- cubren también :hover y :active (que solo cambian
       transform/filter y no redeclaran transition): esto ya estaba resuelto desde
       este rediseño, punto 35 de la lista de optimización no necesitó agregar nada
       acá, solo confirmarlo. */
    transition: transform 0.3s ease, filter 0.2s ease;
    cursor: pointer;
}

input.recargar:hover {
    transform: rotate(90deg);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)) brightness(1.2);
}

input.recargar:active {
    transform: rotate(180deg);
}



.filtros table {
    width: auto;
    border-collapse: collapse;
}

.filtros table tr {
    display: table-row !important;
}

.filtros table td {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap;
    vertical-align: middle;
}

/*************************************************************
*******************MEENU SUB***************************
*************************************************************/

.logo_menu {
    height: 100px;
    background-image: url(../img/logo_main.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 190px 77px;
}

/* ==========================================================================
   Estructura interna del menú (HTML devuelto por PHP)
   ========================================================================== */
/* ==========================================================================
   Contenedor jQuery UI para el Menú (#popup_submodulo)
   ========================================================================== */
.ui-dialog.menu {
    padding: 0 !important;
    border: 1px solid #282c30 !important;
    border-radius: 8px !important;
    background-color: #151719 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 138, 210, 0.2) !important;
    overflow: hidden;
    z-index: 9999 !important;

    /* EFECTO FADE-IN CSS */
    animation: popupFadeIn 0.15s ease-out forwards;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
        /* Aparece bajando ligeramente 4px */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ocultar barra de título por completo */
.ui-dialog.menu .ui-dialog-titlebar {
    display: none !important;
}

/* Interior del popup */
#popup_submodulo {
    padding: 8px 0 !important;
    background-color: #151719 !important;
    color: #e0e6ed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    box-sizing: border-box;
    text-align: left !important;
}

/* Encabezado o Logo del menú */
#popup_submodulo .logo_menu {
    height: 30px;
    margin: 0 10px 6px 10px;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: contain;
    border-bottom: 1px solid #23272b;
}

/* Reset de la lista de submódulos */
#popup_submodulo .menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 5px !important;
}

/* Opciones de la lista */
#popup_submodulo .menu ul li {
    padding: 8px 12px;
    margin: 2px 0;
    color: #c5d1de;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    user-select: none;
    font-weight: 500;
}

/* Efecto al pasar el cursor (Hover) */
#popup_submodulo .menu ul li:hover {
    background-color: #008ad2;
    color: #ffffff;
    padding-left: 16px;
    box-shadow: 0 2px 8px rgba(0, 138, 210, 0.4);
}

/* Clic en opción */
#popup_submodulo .menu ul li:active {
    background-color: #0073b1;
    transform: scale(0.98);
}


/* ==========================================================================
   Popup de PERFIL (personas/templates/ver_prs.html, #contenido_detalle)
   -- rediseño visual: antes era una <table class="formulario"> genérica
   (compartida con decenas de otros formularios de la plataforma, por eso
   este bloque va con selectores scoped bajo #contenido_detalle en vez de
   tocar .formulario/.bg_verde/.bg_rojo/.bg_gris globales, que ya se usan en
   muchos otros lados y no deben cambiar de aspecto por este rediseño).
   ========================================================================== */

#contenido_detalle {
    padding: 4px 2px 2px 2px;
    animation: perfilFadeIn 0.18s ease-out;
}

@keyframes perfilFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.perfil_kicker {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #6A82B3;
    margin: 0 0 8px 4px;
}

.perfil_card {
    width: 300px;
    max-width: 100%;
    background: #151719;
    border: 1px solid #23272b;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.perfil_card_header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    background: linear-gradient(135deg, #0b1a2e 0%, #10233d 100%);
    border-bottom: 1px solid #23272b;
}

.perfil_avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #0b1a2e;
    border: 2px solid #1C4377;
    flex-shrink: 0;
}

.perfil_header_info {
    min-width: 0;
}

.perfil_nombre {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.perfil_rut {
    color: #95AFCF;
    font-size: 11px;
    margin-top: 2px;
    margin-bottom: 8px;
}

.perfil_estado {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    color: #ffffff;
}

/* Colores de estado -- scoped acá a propósito: .bg_verde/.bg_rojo no tienen
   ningún estilo cargado en el shell de inicio.html (solo existen en
   style.css, que no se carga ahí -- ver hallazgo 35 de plan-migracion-mvc.md),
   y .bg_gris sí existe en init.css pero para un elemento completamente
   distinto ("mensaje sin servicios"), así que reusar esas clases sin scope
   habría chocado con ese otro estilo. */
.perfil_estado.bg_verde,
.perfil_estado.bg_rojo,
.perfil_estado.bg_gris {
    /* Reset defensivo: .bg_gris global (css/init.css, "mensaje sin
       servicios") declara width/margin/text-align/line-height propios; sin
       este reset, esas 4 propiedades se "filtran" igual aunque el color de
       fondo de acá gane por especificidad (0,2,0 > 0,1,0), porque el color
       es la única propiedad que este selector pisa. Confirmado visualmente:
       sin el reset el badge "gris" salía estirado a 230px con margin:auto. */
    width: auto;
    height: auto;
    margin: 0;
    text-align: center;
    line-height: normal;
}

.perfil_estado.bg_verde {
    background-color: #1c8a4c;
}

.perfil_estado.bg_rojo {
    background-color: #c23b3b;
}

.perfil_estado.bg_gris {
    background-color: #545e6b;
}

.perfil_card_body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px 16px 16px 16px;
}

.perfil_campo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.perfil_campo_label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6A82B3;
}

.perfil_campo_valor {
    font-size: 12px;
    color: #e0e6ed;
    overflow-wrap: break-word;
}


/* Estilo para el enlace sutil del submódulo */
.submodulo-link {
    color: #00e5ff;
    /* Color cian/azul que resalta suavemente */
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 229, 255, 0.4);
    /* Línea punteada sutil abajo */
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

/* Efecto al pasar el mouse (Hover) */
.submodulo-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
    /* Sutil resplandor brillante */
}

/* Flecha sutil lateral */
.flecha-sutil {
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.submodulo-link:hover .flecha-sutil {
    opacity: 1;
    transform: translateY(1px);
}


/********************************************************
******************  FILTROS ****************************
***********************************************************/

.filtro_no_apl,
.filtro_apl {
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-size: 28px 28px;
    background-position: center;
    background-repeat: no-repeat;

    /* -- Cambios para transparencia total -- */
    background-color: transparent;
    /* Asegura que el fondo sea transparente */
    border: none;
    /* Elimina cualquier borde predeterminado */
    outline: none;
    /* Elimina el contorno de enfoque (opcional, bueno para estética) */
    /* ------------------------------------ */

    border-radius: 5px;
    /* Mantenemos las esquinas redondeadas por si acaso */
}

.filtro_no_apl {
    background-image: url(../img/no_filtrado.png);
}

.filtro_apl {
    background-image: url(../img/filtrado.png);
}


/********************************************************
******************  ALERTAS ****************************
***********************************************************/

.alerta_roja_td {
    width: 30px;
    height: 30px;
    background: transparent url('../img/alerta_roja.png') center center / 30px 30px no-repeat;
}

.alerta_amarilla_td {
    width: 30px;
    height: 30px;
    background: transparent url('../img/alerta_amarilla.png') center center / 30px 30px no-repeat;

}

.alerta_verde_td {
    width: 30px;
    height: 30px;
    background: transparent url('../img/alerta_verde.png') center center / 30px 30px no-repeat;

}