/* ========================================================
   Design Tokens - Colores Nativos
   ======================================================== */
:root {
    /* Brand Colors - Naturgy */
    --color-primary: #004571;
    --color-primary-dark: #0c2847;
    --color-primary-light: #336784;
    --color-secondary: #ff7900;
    --color-secondary-dark: #e57200;

    /* Neutrals */
    --color-white: #ffffff;
    --color-bg: #f8fafc;
    --color-bg-alt: #f4f7fb;
    --color-border: #e2e8f0;
    --color-border-dark: #cbd5e1;

    /* Text Colors */
    --color-text-main: #0f172a;
    --color-text-dark: #1e293b;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;

    /* Semantic / States */
    --color-success: #10b981;
    --color-success-dark: #059669;
    --color-success-bg: #ecfdf5;
    
    --color-info: #0284c7;
    --color-info-dark: #0369a1;
    --color-info-bg: #e0f2fe;

    --color-warning: orange;
    
    --color-danger: red;
    --color-danger-dark: #a92525;
}

/* EXPLICACIÓN DEL IMPORT COMENTADO:
  Esta línea está comentada, lo que significa que el navegador la ignora. 
  La directiva @import se utiliza para cargar una hoja de estilos externa dentro de otra. 
  En este caso, "spacing.css" probablemente contenía clases de utilidad globales para márgenes y rellenos (espaciado). 
  Se suele comentar para evitar peticiones HTTP adicionales (mejorando el rendimiento), o porque esos estilos 
  se han integrado en otro archivo o estaban causando conflictos de diseño.
*/
/* import-disabled url("../css/spacing.css"); */

/* import-disabled url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap'); */






/* Marcadores de vanos en el mapa */
.map-vano-marker {
    color: white;
    padding: 0px 6px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 3px solid white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Map Locate Control Styles */
.map-popup-container {
    min-width: 175px;
    font-family: 'MiSans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.map-popup-title {
    font-size: 14px;
    font-weight: bold;
    color: #334e68;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 8px;
    margin-bottom: 12px;
    text-align: center;
}

.map-popup-title-highlight {
    color: #102a43;
}

.map-popup-observations {
    margin-bottom: 12px;
    font-size: 13px;
    color: #4a5568;
    background: #f7fafc;
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 3px solid #cbd5e0;
    line-height: 1.4;
}

.map-popup-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-popup-button {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.map-popup-button-icon {
    font-size: 15px;
    margin-right: 4px;
}

/* Map Container States */
.map-container-normal {
    height: 700px;
    width: 100%;
    position: relative;
}

.map-container-fullscreen {
    height: 100vh;
    width: 100%;
    position: static;
}










/*Botones Mapa leaflet descarga*/
.leaflet-control-locate a .leaflet-control-locate-location-arrow {
    width: 24px !important;
    height: 24px !important;
    margin: 8px !important;
}

.savetiles.leaflet-bar.leaflet-control {
    font-size: 24px !important;
}

.rmtiles {
    display: none;
}

.leaflet-touch .leaflet-bar a {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
}

.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
    font-size: 36px !important;
}

.easy-button-button.leaflet-bar-part.leaflet-interactive.unnamed-state-active {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    padding-top: 2px !important;
    padding-left: 3px !important;
}




#MapaInicioRecorrido2 .easy-button-button.disabled {
    height: 0;
}





/*Ajustar mapa*/
.leaflet-container {
    /*background: #072534 !important;*/
    /*margin: 5px 17px 0px 17px !important;*/
}




/*
	Estilos para el mapa

*/

.my_polyline_main {
    /*stroke: green;*/
    fill: none;
    stroke-dasharray: 10, 10;
    stroke-width: 8;
}

.my_polyline_bt {
    /*stroke: green;*/
    fill: none;
    stroke-dasharray: 2, 25;
    stroke-width: 10;
}






/* Excepción para que los iconos recuperen su fuente original en el mapa*/
.fa {
    font-family: 'FontAwesome' !important;
}




/* control de fotos */

/* --- 1. Estilos de iconos y botones principales --- */
/* Aplica a cualquier contenedor cuyo ID empiece por "Foto" */
div[id^="Foto"] .fa {
    color: #004571;
    font-size: 1.5rem;
}

div[id^="Foto"] button {
    background: none;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 30%);
}

/* --- 2. Interfaz de la Cámara (Fondo y Alineación) --- */
/* Aplica a cualquier div interno de un ID que empiece por "AppCamaraFoto" */
div[id^="AppCamaraFoto"] div {
    /*display: flex;*/
    justify-content: space-around;
    background: black;
    width: 100%;
    align-items: center;
}

/* --- 3. Iconos blancos y Contenedores de Texto --- */
div[id^="AppCamaraFoto"] button .fa {
    color: #fff;
}

/* Mantiene el color blanco específico que tenías para el fin de recorrido */
div#ResultadoCamaraFotoFinRecorrido1 {
    color: #fff;
}

/* Aplica el centrado y padding a todos los contenedores de Abrir y Resultado */
div[id^="AbrirCamaraFoto"],
div[id^="ResultadoCamaraFoto"] {
    text-align: center;
    padding: 15px;
}

/* --- 4. Otros ajustes (Progreso y Fullscreen) --- */
/* Oculta las barras de progreso de cualquier contenedor de fotos */
div[id^="contenedorFoto"] #progress-wrapper {
    display: none;
}

/* Ajustes de pantalla completa para cualquier cámara */
div[id^="AppCamaraFoto"] .fullscreen {
    /*position: absolute;*/
    /*bottom: 0px;*/
    padding-bottom: 20px;
    padding-top: 30px;
    margin-top: -7px;
}

/* --- 5. Estilos del disparador (Take Photo) --- */
/* Busca botones cuyo atributo name empiece por "take_photoFoto" dentro de la app cámara */
div[id^="AppCamaraFoto"] button[name^="take_photoFoto"] {
    background: #fff;
    border-radius: 60%;
    width: 75px;
    height: 75px;
}

    div[id^="AppCamaraFoto"] button[name^="take_photoFoto"] .fa {
        color: #004571;
        font-size: 2rem;
    }





/* Forzar la fuente V4 directamente en el pseudo-elemento que dibuja el icono */
.fa.fa-trash-o::before {
    font-family: 'FontAwesome' !important;
    content: "\f014" !important;
}


/* Import Mi Sans Local */
/* Mi Sans Local */


/*[117]*/@font-face{font-family:MiSans;font-style:normal;font-weight:380;font-display:swap;src: url('../../fonts/MiSans-Medium.117.woff2') format('woff2');unicode-range:U+4e,U+201c-201d,U+3010-3011,U+4e07,U+4e1c,U+4e24,U+4e3e,U+4e48,U+4e50,U+4e5f,U+4e8b-4e8c,U+4ea4,U+4eab-4eac,U+4ecb,U+4ece,U+4ed6,U+4ee3,U+4ef6-4ef7,U+4efb,U+4f20,U+4f55,U+4f7f,U+4fdd,U+505a,U+5143,U+5149,U+514d,U+5171,U+5177,U+518c,U+51fb,U+521b,U+5229,U+522b,U+52a9,U+5305,U+5317,U+534e,U+5355,U+5357,U+535a,U+5373,U+539f,U+53bb,U+53ca,U+53cd,U+53d6,U+53e3,U+53f0,U+5458,U+5546,U+56db,U+573a,U+578b,U+57ce,U+58f0,U+590d,U+5934,U+5973,U+5b57,U+5b8c,U+5b98,U+5bb9,U+5bfc,U+5c06,U+5c11,U+5c31,U+5c55,U+5df2,U+5e03,U+5e38,U+5e76,U+5e94,U+5efa,U+5f71,U+5f97,U+5feb,U+6001,U+603b,U+60f3,U+611f,U+6216,U+624d,U+6253,U+6295,U+6301,U+6392,U+641c,U+652f,U+653e,U+6559,U+6599,U+661f,U+671f,U+672f,U+6761,U+67e5,U+6807,U+6837,U+683c,U+6848,U+6b22,U+6b64,U+6bd4,U+6c14,U+6c34,U+6c42,U+6ca1,U+6d41,U+6d77,U+6d88,U+6e05,U+6e38,U+6e90,U+7136,U+7231,U+7531,U+767e,U+76ee,U+76f4,U+771f,U+7801,U+793a,U+79cd,U+7a0b,U+7a7a,U+7acb,U+7ae0,U+7b2c,U+7b80,U+7ba1,U+7cbe,U+7d22,U+7ea7,U+7ed3,U+7ed9,U+7edf,U+7f16,U+7f6e,U+8001,U+800c,U+8272,U+8282,U+82b1,U+8350,U+88ab,U+88c5,U+897f,U+89c1,U+89c4,U+89e3,U+8a00,U+8ba1,U+8ba4,U+8bae-8bb0,U+8bbe,U+8bc1,U+8bc4,U+8bfb,U+8d28,U+8d39,U+8d77,U+8d85,U+8def,U+8eab,U+8f66,U+8f6c,U+8f7d,U+8fd0,U+9009,U+90ae,U+90fd,U+91cc-91cd,U+91cf,U+95fb,U+9650,U+96c6,U+9891,U+98ce,U+ff1f;}
/*[119]*/@font-face{font-family:MiSans;font-style:normal;font-weight:380;font-display:swap;src: url('../../fonts/MiSans-Medium.119.woff2') format('woff2');unicode-range:U+20-22,U+27-2a,U+2c-3b,U+3f,U+41-4d,U+4f-5d,U+61-7b,U+7d,U+ab,U+ae,U+b2,U+b7,U+bb,U+df-e5,U+e7-ea,U+ec-ed,U+f1-f4,U+f6,U+f9-fa,U+fc,U+101,U+103,U+113,U+12b,U+148,U+14d,U+16b,U+1ce,U+1d0,U+300-301,U+1ebf,U+1ec7,U+2013-2014,U+2022,U+2039-203a,U+2122,U+3001-3002,U+3042,U+3044,U+3046,U+3048,U+304a-3055,U+3057,U+3059-305b,U+305d,U+305f-3061,U+3063-306b,U+306d-3073,U+3075-3076,U+3078-3079,U+307b,U+307e-307f,U+3081-308d,U+308f,U+3092-3093,U+30a1-30a4,U+30a6-30bb,U+30bd,U+30bf-30c1,U+30c3-30c4,U+30c6-30cb,U+30cd-30d7,U+30d9-30e1,U+30e3-30e7,U+30e9-30ed,U+30ef,U+30f3,U+30fc,U+3127,U+4e00,U+4e2d,U+65b0,U+65e5,U+6708-6709,U+70b9,U+7684,U+7f51,U+ff0c,U+ff0e,U+ff1a;}
/*[latin]*/@font-face{font-family:MiSans;font-style:normal;font-weight:380;font-display:swap;src: url('../../fonts/MiSans-Medium.latin.woff2') format('woff2');unicode-range:U+1,U+a,U+d,U+20-7f,U+a0-ff,U+152-153,U+2bb-2bc,U+2004-2006,U+2009-200a,U+2010,U+2013-2016,U+2018-201a,U+201c-201e,U+2020-2022,U+2025-2026,U+2028-2029,U+2030-2037,U+2039-203c,U+203e,U+2042-2044,U+2047-2049,U+204e,U+2051,U+2055,U+2060-2064,U+2066-2069,U+2122,U+2191,U+2193,U+2212,U+2215;}


/*[99]*/@font-face{font-family:MiSans;font-style:normal;font-weight:630;font-display:swap;src: url('../../fonts/MiSans-Bold.99.woff2') format('woff2');unicode-range:U+a1-a4,U+a6-a8,U+aa,U+ac,U+af,U+b1,U+b3-b6,U+b8-ba,U+bc-d6,U+d8-de,U+e6,U+eb,U+ee-f0,U+f5,U+f7-f8,U+fb,U+fd-100,U+102,U+104-107,U+10d,U+10f-112,U+115,U+117,U+119,U+11b,U+11e-11f,U+121,U+123,U+125-127,U+129-12a,U+12d,U+12f-13f,U+141-142,U+144,U+146,U+14b-14c,U+14f-153,U+158-15b,U+15e-160,U+163-165,U+168-16a,U+16d-175;}
/*[119]*/@font-face{font-family:MiSans;font-style:normal;font-weight:630;font-display:swap;src: url('../../fonts/MiSans-Bold.119.woff2') format('woff2');unicode-range:U+20-22,U+27-2a,U+2c-3b,U+3f,U+41-4d,U+4f-5d,U+61-7b,U+7d,U+ab,U+ae,U+b2,U+b7,U+bb,U+df-e5,U+e7-ea,U+ec-ed,U+f1-f4,U+f6,U+f9-fa,U+fc,U+101,U+103,U+113,U+12b,U+148,U+14d,U+16b,U+1ce,U+1d0,U+300-301,U+1ebf,U+1ec7,U+2013-2014,U+2022,U+2039-203a,U+2122,U+3001-3002,U+3042,U+3044,U+3046,U+3048,U+304a-3055,U+3057,U+3059-305b,U+305d,U+305f-3061,U+3063-306b,U+306d-3073,U+3075-3076,U+3078-3079,U+307b,U+307e-307f,U+3081-308d,U+308f,U+3092-3093,U+30a1-30a4,U+30a6-30bb,U+30bd,U+30bf-30c1,U+30c3-30c4,U+30c6-30cb,U+30cd-30d7,U+30d9-30e1,U+30e3-30e7,U+30e9-30ed,U+30ef,U+30f3,U+30fc,U+3127,U+4e00,U+4e2d,U+65b0,U+65e5,U+6708-6709,U+70b9,U+7684,U+7f51,U+ff0c,U+ff0e,U+ff1a;}
/*[latin]*/@font-face{font-family:MiSans;font-style:normal;font-weight:630;font-display:swap;src: url('../../fonts/MiSans-Bold.latin.woff2') format('woff2');unicode-range:U+1,U+a,U+d,U+20-7f,U+a0-ff,U+152-153,U+2bb-2bc,U+2004-2006,U+2009-200a,U+2010,U+2013-2016,U+2018-201a,U+201c-201e,U+2020-2022,U+2025-2026,U+2028-2029,U+2030-2037,U+2039-203c,U+203e,U+2042-2044,U+2047-2049,U+204e,U+2051,U+2055,U+2060-2064,U+2066-2069,U+2122,U+2191,U+2193,U+2212,U+2215;}




/* Apply to all elements */
body, input, textarea, select, button,
.ui-btn, .ui-input-text, .ui-header, .ui-footer,
span, div, p, h1, h2, h3, h4, h5, h6, label, a {
    font-family: 'MiSans', sans-serif !important;
}

/* ========================================================
   MGA Movilidad - Rediseño Exclusivo para Pantalla de Inicio
   ESTRICTAMENTE AISLADO A #app-sitemap / body.HomePage
   ======================================================== */

/* 1. Fondo de Home y contenedor */
body.HomePage {
    background-color: var(--color-bg) !important;
}

body.HomePage #app-sitemap {
    background-color: var(--color-bg) !important;
    padding-bottom: 24px !important;
}

/* Ocultar elementos heredados obsoletos de TableOfContents */
body.HomePage .ParaInfo,
body.HomePage .ParaHeader,
body.HomePage #bannerestado,
body.HomePage #app-sitemap > hr {
    display: none !important;
}

/* 2. Tarjeta moderna y responsiva de sincronización */
#app-sitemap .mga-sync-card {
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 12px 14px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
    box-sizing: border-box !important;
}

#app-sitemap .mga-sync-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

#app-sitemap .mga-sync-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#app-sitemap .mga-sync-icon-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
    background: #e0f2fe !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#app-sitemap .mga-sync-icon-box i {
    font-size: 21px !important;
    color: var(--color-info) !important;
    line-height: 1 !important;
}

#app-sitemap .mga-sync-title {
    font-family: 'MiSans', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--color-text-main) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}

#app-sitemap .mga-sync-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: var(--color-success-dark) !important;
    font-weight: 600 !important;
    margin-top: 1px !important;
}

#app-sitemap .mga-sync-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--color-success) !important;
    display: inline-block !important;
}

/* Botón interactivo de sincronización */
#app-sitemap .mga-sync-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 13px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, var(--color-info) 0%, #0369a1 100%) !important;
    border: none !important;
    color: var(--color-white) !important;
    font-family: 'MiSans', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.32) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#app-sitemap .mga-sync-btn:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.42) !important;
}

#app-sitemap .mga-sync-btn:hover i {
    transform: rotate(180deg) !important;
}

#app-sitemap .mga-sync-btn:active {
    transform: scale(0.96) !important;
}

#app-sitemap .mga-sync-btn i {
    font-family: 'Material Icons' !important;
    font-size: 16px !important;
    color: var(--color-white) !important;
    line-height: 1 !important;
    display: inline-block !important;
    transition: transform 0.4s ease !important;
}

/* Fila de almacenamiento / última sincronización */
#app-sitemap .mga-sync-storage-row,
#app-sitemap #bannerfechaultimasync {
    font-family: 'MiSans', sans-serif !important;
    font-size: 11.5px !important;
    color: var(--color-text-muted) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    background: var(--color-bg) !important;
    border-radius: 8px !important;
    border: 1px solid #f1f5f9 !important;
    word-break: break-word !important;
    display: block !important;
}

/* 3. Cabecera de sección de actividades */
#app-sitemap .mga-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 16px 14px 8px 14px !important;
    padding: 0 !important;
}

#app-sitemap .mga-section-title {
    font-family: 'MiSans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-text-dark) !important;
    letter-spacing: -0.01em !important;
}

#app-sitemap .mga-section-counter {
    background: var(--color-border) !important;
    color: #475569 !important;
    font-family: 'MiSans', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
}

/* 4. Lista de actividades y Encabezados de categorías */
#app-sitemap ul.ui-listview {
    padding: 0 12px 30px 12px !important;
    margin: 0 !important;
    list-style: none !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#app-sitemap ul.ui-listview > li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Encabezados de categorías automáticos */
#app-sitemap ul.ui-listview > li:has(a[href*="nuevainspeccionpoda"])::before {
    content: "Poda y Vegetación";
    display: block;
    font-family: 'MiSans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--color-success-dark) !important;
    margin: 4px 0 6px 4px !important;
}

#app-sitemap ul.ui-listview > li:has(a[href*="nuevafichatecnicamt"])::before {
    content: "Líneas de MBT";
    display: block;
    font-family: 'MiSans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--color-info) !important;
    margin: 16px 0 6px 4px !important;
}

#app-sitemap ul.ui-listview > li:has(a[href*="cache"])::before {
    content: "Utilidades del Sistema";
    display: block;
    font-family: 'MiSans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #7c3aed !important;
    margin: 16px 0 6px 4px !important;
}

/* 5. Tarjetas individuales de actividad */
#app-sitemap ul.ui-listview > li a {
    font-family: 'MiSans', sans-serif !important;
    margin: 7px 0 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 13px !important;
    padding: 12px 36px 12px 54px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    color: var(--color-text-main) !important;
    background: var(--color-white) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Iconos de cabecera de tarjeta (pseudo-elemento ::before) */
#app-sitemap ul.ui-listview > li a::before {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Material Icons' !important;
    font-size: 20px !important;
    line-height: 36px !important;
    text-align: center !important;
    transition: transform 0.2s ease !important;
}

/* Categoría PODA */
#app-sitemap ul.ui-listview > li a[href*="poda"] {
    border-left: 4.5px solid var(--color-success) !important;
}
#app-sitemap ul.ui-listview > li a[href*="nuevainspeccionpoda"]::before {
    content: "park" !important;
    background: var(--color-success-bg) !important;
    color: var(--color-success-dark) !important;
}
#app-sitemap ul.ui-listview > li a[href*="inspeccionpodarealizadas"]::before {
    content: "task_alt" !important;
    background: var(--color-success-bg) !important;
    color: #16a34a !important;
}
#app-sitemap ul.ui-listview > li a[href*="inspeccionpodaborradas"]::before {
    content: "delete_outline" !important;
    background: var(--color-bg) !important;
    color: var(--color-text-muted) !important;
}

/* Categoría MBT */
#app-sitemap ul.ui-listview > li a[href*="mt"] {
    border-left: 4.5px solid var(--color-info) !important;
}
#app-sitemap ul.ui-listview > li a[href*="nuevafichatecnicamt"]::before {
    content: "bolt" !important;
    background: var(--color-info-bg) !important;
    color: var(--color-info) !important;
}
#app-sitemap ul.ui-listview > li a[href*="fichatecnicamtrealizadas"]::before {
    content: "playlist_add_check" !important;
    background: #ecfeff !important;
    color: #0891b2 !important;
}
#app-sitemap ul.ui-listview > li a[href*="fichatecnicamtborradas"]::before {
    content: "delete_outline" !important;
    background: var(--color-bg) !important;
    color: var(--color-text-muted) !important;
}

/* Categoría UTILIDADES Y SISTEMA */
#app-sitemap ul.ui-listview > li a[href*="cache"] {
    border-left: 4.5px solid #8b5cf6 !important;
}
#app-sitemap ul.ui-listview > li a[href*="cache"]::before {
    content: "photo_library" !important;
    background: #f5f3ff !important;
    color: #7c3aed !important;
}

#app-sitemap ul.ui-listview > li a[href*="configuracion"] {
    border-left: 4.5px solid var(--color-text-muted) !important;
}
#app-sitemap ul.ui-listview > li a[href*="configuracion"]::before {
    content: "tune" !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
}

#app-sitemap ul.ui-listview > li a[href*="sistema"] {
    border-left: 4.5px solid #475569 !important;
}
#app-sitemap ul.ui-listview > li a[href*="sistema"]::before {
    content: "dns" !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
}

#app-sitemap ul.ui-listview > li a[href*="logout"],
#app-sitemap ul.ui-listview > li a[href*="login"],
#app-sitemap ul.ui-listview > li a[href*="salir"] {
    border-left: 4.5px solid #f43f5e !important;
}
#app-sitemap ul.ui-listview > li a[href*="logout"]::before,
#app-sitemap ul.ui-listview > li a[href*="login"]::before,
#app-sitemap ul.ui-listview > li a[href*="salir"]::before {
    content: "logout" !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
}

/* Chevron derecho estilizado */
#app-sitemap ul.ui-listview > li a.ui-btn-icon-right::after {
    content: "\e5cc" !important;
    font-family: 'Material Icons' !important;
    font-size: 20px !important;
    font-weight: normal !important;
    color: var(--color-text-light) !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

/* Hover y Touch Feedback */
#app-sitemap ul.ui-listview > li a:hover {
    background: var(--color-white) !important;
    border-color: var(--color-border-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

#app-sitemap ul.ui-listview > li a:hover::after {
    color: var(--color-info) !important;
    transform: translateY(-50%) translateX(3px) !important;
}

#app-sitemap ul.ui-listview > li a:hover::before {
    transform: translateY(-50%) scale(1.08) !important;
}

#app-sitemap ul.ui-listview > li a:active {
    transform: scale(0.985) !important;
    background: var(--color-bg) !important;
}

.HomePage:not(.LoginPage) article.app-page-content {
    background: none !important;
}

.HomePage #app-btn-context,
.HomePage:not(.LoginPage) .app-page-header,
.HomePage .ui-filterable {
    display: none !important;
}


/* ========================================================
   MGA Movilidad - Diseño Naturgy para páginas de sección
   Aplica el mismo header oscuro del home al resto de páginas.
   NO modifica botones de navegación (back, menú, acciones).
   ======================================================== */

/* 1. Header Naturgy en páginas de sección */
body.seccion .app-bar-toolbar {
    background-color: #0c2847 !important;
    border-bottom: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Detalle decorativo naranja Naturgy (esquina superior derecha) */
body.seccion .app-bar-toolbar::after {
    content: "" !important;
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    width: 90px !important;
    height: 90px !important;
    background: radial-gradient(circle at 100% 0%, #ff7900 0%, #e57200 65%, transparent 66%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Texto del logo / título de página en blanco */
body.seccion .app-bar-toolbar .app-logo {
    color: var(--color-white) !important;
    text-shadow: none !important;
}

body.seccion .app-bar-toolbar .app-logo img {
    content: url(../../../images/mariposa.svg) !important;
    width: 28px !important;
    height: 28px !important;
    margin-right: 6px !important;
}

/* Título de la página (app-back-text / app-menu-strip) en blanco */
body.seccion .app-bar-toolbar .app-back-text,
body.seccion .app-bar-toolbar .app-menu-strip,
body.seccion .app-bar-toolbar .app-title {
    color: var(--color-white) !important;
    text-shadow: none !important;
}

/* Iconos de los botones del header en blanco (sin cambiar su visibilidad ni posición) */
body.seccion .app-bar-toolbar .app-btn i,
body.seccion .app-bar-toolbar .app-btn::after,
body.seccion .app-bar-toolbar .app-btn-cluster-right .app-btn i,
body.seccion .app-bar-toolbar #app-btn-menu::after,
body.seccion .app-bar-toolbar #app-btn-context::after {
    color: var(--color-white) !important;
}

/* 2. Tipografía consistente con el home */
body.seccion .app-page-content,
body.seccion .app-wrapper,
body.seccion article.app-page-content {
    font-family: 'MiSans', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: antialiased !important;
}

/* Títulos de sección */
body.seccion .app-bar-actions h3 {
    font-family: 'MiSans', sans-serif !important;
}

.LoginPage .app-bootstrap.app-page-content {
    background: none !important;
}

.LoginPage div[data-role="page"]:not(.app-page-modal) {
    background: url(../../images/bg-login.jpg) center/cover;
    padding-top: 0 !important;
    min-height: 100vh !important;
}

.LoginPage img.logo {
    max-width: 150px;
}

.login {
    padding: 2rem;
}

body.LoginPage:not(.app-has-sidebar-left):not(.app-hosted) .app-bar-toolbar .app-logo {
    display: flex;
    align-items: center;
}

body.LoginPage:not(.app-has-sidebar-left):not(.app-hosted) .app-bar-toolbar .app-logo img {
    margin-right: 10px !important;
}

body.LoginPage .texto-titulo {
    display: inline;
}

.LoginPage #app-btn-context,
.LoginPage #app-bar-toolbar {
    display: none !important;
}

body:not(.app-hosted).LoginPage .ui-page > .ui-content::before {
    background: transparent;
}


/* ========================================================
   MGA Movilidad - Formularios, Controles e Inputs
   ======================================================== */

/* Títulos y secciones de formulario */
h3.titulo-apartado {
    padding-left: 12px;
    color: #004571;
}

span.app-field-label-after {
    font-weight: bold;
    color: #A1A9C3;
    display: block;
    clear: both;
}

.seccion [data-wrap="true"] [data-container="row"] [data-control="label"],
.seccion [data-wrap="true"] [data-container="content"] [data-control="label"],
.seccion [data-state="write"] [data-control="label"] {
    font-weight: bold !important;
    font-size: 1.0em !important;
    color: #000000;
}

/* Alinear texto del título del mapa / Ficha */
.seccion [data-wrap="true"] [data-container="content"] [data-control="label"] {
    padding-left: 16px;
}

/* Campos de entrada en modo edición */
[data-state="write"] [data-control="field"]:not([data-input="radiobuttonlist"]):not([data-input="checkbox"])[data-input="text"],
[data-state="write"] [data-control].app-has-helper,
[data-state="write"] [data-control] .app-data-input-placeholder,
[data-state="write"] [data-control="field"][data-input="autocomplete"] {
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #e5e5e5;
    margin-bottom: 9px;
    padding: 5px 0;
}

[data-state="write"] [data-control].app-null[class*="app-field-Foto"] {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

.app-data-input-container .app-data-input {
    width: auto !important;
}

/* Desplegables */
.seleccionable .app-data-input-button {
    width: 100%;
    left: 0;
}

.seleccionable .app-caret::before {
    left: auto;
    right: 0;
}

.app-data-input-button {
    margin-top: 0 !important;
}

/* Desplegables y paneles colapsables */
[data-container="collapsible"] [data-container="toggle"] .app-collapsible-toggle-text {
    color: #004571;
    display: block;
    font-size: 1.17em;
    font-weight: bold;
    margin: 5px 0;
    text-transform: none !important;
    max-width: 90% !important;
    white-space: normal !important;
}

/* Indicadores de foco en dataview */
[data-control="dataview"][data-field].app-focus::before {
    outline: none !important;
}

/* Textos de ayuda y validación */
.textoAyuda [data-wrap="true"] [data-container="row"] [data-control="label"],
.textoAyuda [data-wrap="true"] [data-container="content"] [data-control="label"],
.textoAyuda [data-state="write"] [data-control="label"],
.textoAyudaWarning {
    font-size: 1.0em !important;
    color: red !important;
}

.textoAyuda {
    color: #004571 !important;
}

[data-input="listbox"] .app-control-inner,
[data-input="radiobuttonlist"] .app-control-inner,
[data-input="checkboxlist"] .app-control-inner {
    font-weight: 400 !important;
}

/* Botones de selección radial SVG */
.btn-radio {
    cursor: pointer;
    display: inline-block;
    user-select: none;
}

.btn-radio:not(:first-child) {
    margin-left: 20px;
}

@media screen and (max-width: 480px) {
    .btn-radio {
        display: block;
        float: none;
    }

    .btn-radio:not(:first-child) {
        margin-left: 0;
        margin-top: 15px;
    }
}

.btn-radio svg {
    fill: none;
    vertical-align: middle;
}

.btn-radio svg circle {
    stroke-width: 2;
    stroke: #C8CCD4;
}

.btn-radio svg path {
    stroke: #008FFF;
}

.btn-radio svg path.inner {
    stroke-width: 6;
    stroke-dasharray: 19;
    stroke-dashoffset: 19;
}

.btn-radio svg path.outer {
    stroke-width: 2;
    stroke-dasharray: 57;
    stroke-dashoffset: 57;
}

.btn-radio input {
    display: none;
}

.btn-radio input:checked+svg path {
    transition: all 0.4s ease;
}

.btn-radio input:checked+svg path.inner {
    stroke-dashoffset: 38;
    transition-delay: 0.3s;
}

.btn-radio input:checked+svg path.outer {
    stroke-dashoffset: 0;
}

.btn-radio span {
    display: inline-block;
    vertical-align: middle;
}

/* Estados en edición del formulario */
div[data-layout="form"].Resuelto .app-field-EstadoNombre .app-field-data,
div[data-layout="form"].Inspeccionado .app-field-EstadoNombre .app-field-data {
    color: white !important;
    padding: 2px 10px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 0 0 6px;
    font-weight: 1000;
}

div[data-layout="form"].Resuelto .app-field-EstadoNombre .app-field-data {
    background-color: green !important;
}

div[data-layout="form"].Inspeccionado .app-field-EstadoNombre .app-field-data {
    background-color: #7D9AAA !important;
}

.PdteInspeccionar .estado.app-field-EstadoNombre .app-field-data {
    background-color: #86a1af;
    border-radius: 6px;
    padding: 4px 8px;
    display: inline-block;
    font-weight: bold;
}

.Inspeccionado .estado.app-field-EstadoNombre .app-field-data {
    background-color: #5a6e79;
    border-radius: 6px;
    padding: 4px 8px;
    display: inline-block;
    font-weight: bold;
}

.Resuelto .estado.app-field-EstadoNombre .app-field-data {
    background-color: green;
    border-radius: 6px;
    padding: 4px 8px;
    display: inline-block;
    font-weight: bold;
}

/* Fotos y previsualizaciones en formularios */
.previewFoto {
    width: 100%;
    border-radius: 5px;
}

.app-had-blob span.app-drop-text {
    font-size: 0 !important;
}

.app-had-blob span.app-drop-text::after {
    content: "Toque para reemplazar esta foto";
    display: block;
    font-size: 20pt;
}

[data-container="row"] {
    border-top: none !important;
}
/* ========================================================
   MGA Movilidad - Tarjetas, Listas y Vistas de Datos (Echo/DataView)
   ======================================================== */

/* Contenedores Echo y tarjetas */
.app-echo .app-echo-inner ul {
    display: block !important;
    margin-right: 2px !important;
    min-width: 99% !important;
}

.app-echo-see-all,
.app-btn-more,
.ui-btn .ui-btn-inline .ui-corner-all .ui-icon-dots .ui-btn-icon-notext .app-btn-more,
.app-echo-see-all .app-has-icon .app-has-material-icon {
    visibility: hidden;
}

.app-echo-controls {
    float: right;
}

.app-cardview .app-field-data {
    white-space: break-spaces;
}

.categoria {
    border: 1px solid #eeeeee;
    border-radius: 5px;
    /* margin: 7px; */
    box-shadow: 0 3px 6px rgb(0 0 0 / 30%);
}

.categoriaSeccionamiento {
    border: 1px solid #afadad;
    border-radius: 1px;
    margin: 300px 10px 10px 10px;
    box-shadow: 0 0 8px #504f4f;
}

/* Badges y contadores numéricos */
.app-echo-toolbar h3,
.app-bar-actions h3 {
    visibility: hidden !important;
    font-size: 0px !important;
}

span.app-echo-count {
    visibility: visible;
    background: #004571;
    padding: 2px 20px !important;
    border-radius: 10rem;
    color: white;
    font-size: 14px;
}

.app-echo .app-echo-toolbar h3.app-hidden,
.app-bar-actions h3.app-hidden {
    display: inline-block !important;
}

.app-echo .app-echo-toolbar h3,
.app-bar-actions h3 {
    padding: 7px 16px 7px 10px !important;
}

/* Alineación de contadores y texto en listas */
.app-density-compact .app-listview.ui-listview>li .ui-li-aside,
.app-density-compact .app-listview.ui-listview>li .ui-li-count {
    top: 18px;
}

.app-listview.app-onecolumnview li.ui-li-has-count .ui-li-count,
.app-listview.app-cardview li.ui-li-has-count .ui-li-count {
    top: 20% !important;
}

.ui-listview>.ui-li-has-count>.ui-btn,
.ui-listview>.ui-li-static.ui-li-has-count,
.ui-listview>.ui-li-divider.ui-li-has-count {
    padding-right: 0em;
}

.app-density-compact .ui-listview>.ui-li-has-thumb>.ui-btn,
.app-density-compact .ui-listview>.ui-li-static.ui-li-has-thumb {
    padding-left: 100px !important;
}

.app-listview li .ui-btn:not(.ui-btn-icon-notext):not(.ui-mini) {
    line-height: normal;
}

/* Encabezados y campos de tarjeta */
li h3.app-field .app-field-data {
    font-size: 16px !important;
}

.app-listview.ui-listview>li h1.app-field,
.app-listview.ui-listview>li h2.app-field,
.app-listview.ui-listview>li h3.app-field,
.app-listview.ui-listview>li h4.app-field,
.app-listview.ui-listview>li h5.app-field,
.app-listview.ui-listview>li h6.app-field {
    margin: 0;
    text-shadow: none;
    white-space: wrap !important;
}

.app-field-data {
    display: inline-block;
    margin-bottom: 3px !important;
}

.app-item-desc {
    height: auto !important;
    min-height: min-content;
    display: block;
    padding-bottom: 2px !important;
}

/* Cabeceras de circuitos y secciones específicas */
.tituloCabeceras {
    font-weight: bold;
    padding: 3px 0em;
}

.app-field.app-field-SalidamtnombreSmt {
    float: left;
}

h3.app-field.app-field-TmpEncargootSeccionamientoSeccionadores {
    margin: 0 120px 5px 0 !important;
}

.app-item-desc.app-field.app-field-IDSeccionadornombre {
    padding-left: 5px !important;
}

/* Badges de estado en tarjeta */
.app-field-EncargootCodigoEncargoot .app-field-data,
.app-field-EstadoNombre .app-field-data {
    color: white !important;
    padding: 2px 3px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 12px;
    display: inline-block;
    width: fit-content;
    text-shadow: none !important;
}

.dv-item.FichaRepaso .app-field-EncargootCodigoEncargoot .app-field-data {
    background-color: orange !important;
}

.dv-item.Resuelto .app-field-EstadoNombre .app-field-data {
    background-color: green !important;
}

.dv-item.Inspeccionado .app-field-EstadoNombre .app-field-data {
    background-color: #5a6e79 !important;
}

.dv-item.PdteInspeccionar .app-field-EstadoNombre .app-field-data {
    background-color: #86a1af !important;
}

.dv-item.Resuelto .app-item-icon {
    color: green !important;
}

.dv-item.Inspeccionado .app-item-icon {
    color: #5a6e79 !important;
}

.dv-item.PdteInspeccionar .app-item-icon {
    color: #86a1af !important;
}

.dv-item.EstructuraInspeccionada,
li.EstructuraInspeccionada {
    background-color: #f1f8e9 !important;
}

.dv-item.EstructuraInspeccionada .app-field-EstadoNombre .app-field-data {
    color: white !important;
    padding: 0 5px !important;
    border-radius: 4px !important;
}

/* Miniaturas de imágenes (thumbnails) */
.ui-li-thumb {
    left: 11px !important;
    top: 50% !important;
    margin-top: -40px;
}

.ui-listview .ui-li-has-thumb>img:first-child,
.ui-listview .ui-li-has-thumb>.ui-btn>img:first-child,
.ui-listview .ui-li-has-thumb .ui-li-thumb {
    position: absolute;
    left: 8px !important;
    top: 0;
    max-height: 7em !important;
    max-width: 7em !important;
    border-radius: 5px;
}

/* Botones de acción en Echo Toolbar (Añadir, Editar, Borrar) */
.app-echo-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: -1em 5em 5px -1em !important;
    align-items: center !important;
}

.app-echo-toolbar .app-echo-controls {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    gap: 8px !important;
}

.app-echo-toolbar .app-echo-controls a.ui-btn {
    background-color: #e0e0e0 !important;
    border-radius: 6px !important;
    margin: 0 !important;
    height: 38px !important;
    border: 1px solid #cccccc !important;
}

.app-echo-toolbar .app-echo-controls a.ui-btn.ui-btn-icon-notext {
    width: 38px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.app-echo-toolbar .app-echo-controls a.ui-btn.ui-btn-icon-notext i.app-icon {
    margin: 0 !important;
    position: static !important;
}

.app-echo-toolbar .app-echo-controls a.ui-btn.app-has-icon[title="Borrar"] i.material-icon-delete {
    color: #a92525 !important;
}

.app-echo-toolbar .app-echo-controls a.ui-btn.ui-btn-icon-notext[style*="visibility: hidden"] {
    display: none !important;
}

.app-echo-toolbar .app-echo-controls .ui-listview>.ui-li-has-count>.ui-btn,
.app-echo-toolbar .app-echo-controls .ui-listview>.ui-li-static.ui-li-has-count,
.app-echo-toolbar .app-echo-controls .ui-listview>.ui-li-divider.ui-li-has-count {
    padding-right: 0.6em !important;
}

/* Botones de acción de fila (Edición de defectos) */
.EditIcon,
.DeleteIcon,
.NewIcon,
.material-icon-upgrade {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.EditIcon::after,
.DeleteIcon::after,
.NewIcon::after,
.material-icon-upgrade::after {
    font-size: 24px !important;
}

/* ========================================================
   NUEVAS CLASES DE NEGOCIO (Preservadas del workspace actual)
   ======================================================== */
.FormularioNoValidado {
    background: url('/images/warning.png') no-repeat 99% 90% / 30px 30px;
}

.FechaCierre {
    background: url('/images/candado_cerrado.png') no-repeat 97% 86% / 24px 28px;
}

.FechaNoCierre {
    background: url('/images/candado_abierto.png') no-repeat 97% 86% / 24px 28px;
}

/* Cambio de texto en la elección de fotos para cuando hay archivo */
.app-had-blob span.app-drop-text,
.app-echo-inner .app-echo-empty {
    font-size: 0 !important;
}

.app-echo-inner .app-echo-empty {
    margin-bottom: 20px;
}

.app-had-blob span.app-drop-text::after {
    content: "Toque para reemplazar esta foto";
    display: block;
    font-size: 20pt;
}

.app-echo-inner .app-echo-empty::after {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #004571;
    animation: spin 1s ease infinite;
    margin: 0 auto;
    display: block;
    content: "";
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.dataview-busy-indicator.dataview-busy-indicator-animate {
    height: 7px !important;
}
/* snackbar.css migrado */

.snackbar {
    visibility: hidden;
    background-color: #004571;
    color: #fff;
    text-align: left;
    padding: 20px;
    position: fixed;
    z-index: 10;
    bottom: 20px;
    font-size: 16px;
    margin: 0 10px;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 20%);
}

    .snackbar .btn {
        display: block;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
        user-select: none;
        margin: 0 auto;
    }

    .snackbar .btn-default {
        color: #004571;
        background-color: #fff;
        border-color: #fff;
    }

    .snackbar .app-btn:after {
        background-color: transparent;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -12px 0 0 -12px;
        line-height: 24px;
        height: 24px;
        width: 24px;
        font-family: 'Material Icons' !important;
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        vertical-align: middle;
        text-transform: none;
        white-space: nowrap;
        direction: ltr;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    .snackbar.show {
        visibility: visible;
        animation: fadein 0.5s;
    }

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}




body, .app-bootstrap, input, select, textarea, button, .ui-btn {
    /*font-family: 'Poppins', sans-serif !important;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

    /*Botones*/
    .app-bootstrap .btn-primary,
    .app-bootstrap .btn-primary:visited,
    body:not(.app-desktop) .app-bootstrap .btn-primary:hover {
        color: var(--color-white);
        background-color: #004571;
        border-color: #004571;
    }

.app-acc-man-switch .app-acc-inner,
.seccion [data-layout="form"],
.categoria-principal li {
    background: none !important;
}

.app-acc-man-switch {
    background: url(../../images/bg-login.jpg) center/cover;
    padding-top: 0 !important;
    min-height: 100vh !important;
}

.app-bootstrap footer {
    display: none;
}

span.app-field-label-after {
    font-weight: bold;
    color: #A1A9C3;
    display: block;
    clear: both;
}

/*LOGIN EXTRAIDO*/
.app-bar-toolbar .app-logo {
    display: flex;
    align-items: center;
}

    .app-logo img {
        margin-right: 10px !important;
    }

.texto-titulo {
    display: none;
}

/* LoginPage title moved */

.app-menu-strip.app-menu-strip-has-title {
    left: 90px !important;
    top: 2px !important;
}

.app-echo-footer,
.app-wrapper .app-bar-buttons,
.ui-btn.app-selected > .app-para,
.ui-btn > .app-para,
.app-site-map li.ui-first-child {
    display: none !important;
}

/*Estilo para eliminar la flecha del contador. Se complementa con lo comentado en el js (9601 a 9627)*/
body:not(.app-has-sidebar-left) .app-bar-actions h3:after,
body:not(.app-has-sidebar-left) .app-echo-toolbar h3:after {
    display: none !important;
}

/* Página de inicio styles movidos y modernizados al final del archivo */

/*Ficha técnica*/
body.seccion:not(.app-has-sidebar-left) .ui-page:not([data-page-header='false']) .app-bar-actions {
    background: #336784;
}

.seccion .app-wrapper {
    /*background: #F1F2F6 !important;*/
}

/*formularios migrados*/

.app-logo img {
    max-width: 24px;
}

/* 1. Hide "hamburger" button when the toolbar does not have the "Back' button  */
/*.app-bar-toolbar:not(.app-has-back) #app-btn-menu { visibility: hidden; }*/
/* 2. Hide the context button with "more" icon*/
.app-bar-toolbar #app-btn-context {
    visibility: hidden;
}

/* 3. Align the logo area of the page with the content when there is no sidebar on the left side */
/*body:not(.app-has-sidebar-left) .app-bar-toolbar .app-logo { left: 16px; }*/

/* 4. Shift the logo text more to the left in the expanded sidebar */
/*body.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-bar-toolbar .app-logo { left: 20px; }*/

/* migrado a cards.css */

.app-bar-actions.ui-header.ui-bar-inherit.ui-header-fixed {
    box-shadow: 0 3px 6px rgb(0 0 0 / 30%);
}

body:not(.app-has-sidebar-left) .app-bar-toolbar {
    border-bottom: 2px solid #004571;
}

/* migrado a cards.css */

/* migrado a cards.css */

/* migrado a snackbar.css */

/* migrado a cards.css */

.leaflet-container {
    background: #072534 !important;
}

/* migrado a cards.css */

.highlightVersion {
    background-color: red;
    border-radius: 3px;
    padding: 0 5px;
    margin: 6px 30px 8px 10px;
}

/* listbox etc migrado */

/* migrado a cards.css */

/*Clase para el valor del volumen del árbol*/
.ValorNumero {
    font-size: 28px;
    font-weight: 600;
}

.manImg {
    width: 36px;
    margin: 0 -8px 0 -6px;
}

.fa-spin-reverse {
    animation: fa-spin 2s infinite linear reverse;
}

.jumbotron {
    padding: 15px !important;
    margin-bottom: 30px;
    color: inherit;
    background-color: #eee;
}

/* data input migrado */

/*spiner de confituracion*/
.spinner-border-sm {
    width: 30px !important;
    height: 30px !important;
}

/*icono de fullscreen*/
.leaflet-touch .leaflet-control-fullscreen a {
    background: url("") 5px 5px / 30px no-repeat !important;
}

.leaflet-touch .leaflet-bar button {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
}

.easy-button-button .button-state {
    font-size: 24px !important;
}

/* Banners compartidos */
.bannerlogMostrando,
.bannerlogConfiguracion,
.bannerlogFinSincronizacion,
.bannerlogLastChanceSincronizacion {
    width: auto;
    height: auto;
    z-index: 9999;
    position: absolute;
    left: 0;
    right: auto;
    overflow-wrap: break-word;
    font-size: 11px;
    color: white;
    display: block;
    border-radius: 5px;
    padding: 0 10px;
}

.bannerlogMostrando {
    background-color: orange;
    margin: 40px 10px 0 19px;
}

.bannerlogConfiguracion {
    background-color: orange;
    margin: 5px 10px 0 19px;
}

.bannerlogFinSincronizacion {
    background-color: green;
    margin: 40px 10px 0 19px;
}

.bannerlogLastChanceSincronizacion {
    background-color: red;
    margin: 40px 10px 0 19px;
}

body {
    background: url(../../images/cargando.svg) center / 25px no-repeat !important;
    background-size: 250px !important;
}

.cntr {
    margin: auto;
}

/*posicion del logo*/
.app-logo {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 5px !important;
}

    .app-logo img {
        max-width: 28px;
        margin-right: 5px;
    }

/* titulo de la aplicación en las páginas*/
.app-bar-toolbar .app-logo,
.app-kiosk .app-logo {
    text-overflow: unset !important;
    max-width: 75% !important;
    overflow: visible !important;
    text-transform: none !important;
    font-size: 17px !important;
}

/*posicion del boton esquina izquierda arriba*/
#app-btn-menu, .ui-btn-left.app-btn-search-cancel {
    top: 32px !important;
}

/* titulo del formulario que se solapa*/
#app-bar-toolbar > span.app-back-text {
    visibility: hidden;
}

/* 5. Move the "icon" buttons of the toolbar to the right */
.app-bar-toolbar .app-btn-cluster-right .app-btn {
    margin-right: -28px;
    margin-top: -8px;
}

/* ========================================================
   MGA Movilidad - Rediseño Exclusivo para Pantalla de Inicio
   ESTRICTAMENTE AISLADO A #app-sitemap / body.HomePage
   ======================================================== */

/* 1. Fondo de Home y contenedor */
body.HomePage {
    background-color: #f4f7fb !important;
}

body.HomePage #app-sitemap {
    background-color: #f4f7fb !important;
    padding: 12px 16px 36px 16px !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Ocultar elementos obsoletos de TableOfContents y banners bloqueantes */
body.HomePage .ParaInfo,
body.HomePage .ParaHeader,
body.HomePage #bannerestado,
body.HomePage #snackbar,
body.HomePage #snackbarlogin,
body.HomePage #app-sitemap > hr {
    display: none !important;
}

/* 2. Header Naturgy en HomePage */
body.HomePage .app-bar-toolbar {
    background-color: #0c2847 !important;
    border-bottom: none !important;
    position: relative !important;
    overflow: hidden !important;
}

body.HomePage .app-bar-toolbar::after {
    content: "" !important;
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    width: 90px !important;
    height: 90px !important;
    background: radial-gradient(circle at 100% 0%, #ff7900 0%, #e57200 65%, transparent 66%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.HomePage .app-bar-toolbar::before {
    content: "Versión 8.9.13.68" !important;
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    font-family: 'MiSans', sans-serif !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 400 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

body.HomePage .app-bar-toolbar .app-logo {
    color: var(--color-white) !important;
    text-shadow: none !important;
    font-size: 0 !important; /* Oculta texto por defecto */
}

body.HomePage .app-bar-toolbar .app-logo::after {
    content: "naturgy" !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    color: var(--color-white) !important;
    margin-left: 2px !important;
}

body.HomePage .app-bar-toolbar .app-logo img {
    content: url(../../images/mariposa.svg) !important;
    width: 32px !important;
    height: 32px !important;
    margin-right: 6px !important;
}

/* 3. Tarjeta moderna de sincronización */
#app-sitemap .mga-sync-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px;
    margin: 4px 0 16px 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
    box-sizing: border-box;
}

#app-sitemap .mga-sync-card-body {
    display: flex;
    align-items: center;
    gap: 12px;
}

#app-sitemap .mga-sync-icon-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #e0f2fe;
    display: flex;
    align-items: center;
    justify-content: center;
}

#app-sitemap .mga-sync-icon-circle i {
    font-size: 22px;
    color: var(--color-info);
    line-height: 1;
}

#app-sitemap .mga-sync-info {
    flex: 1;
    min-width: 0;
}

#app-sitemap .mga-sync-title {
    font-family: 'MiSans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.2;
}

#app-sitemap .mga-sync-sub {
    font-family: 'MiSans', sans-serif;
    font-size: 11.5px;
    color: var(--color-text-muted);
    margin-top: 3px;
    line-height: 1.2;
}

#app-sitemap .mga-sync-date {
    font-family: 'MiSans', sans-serif;
    font-size: 11.5px;
    color: #334155;
    font-weight: 500;
    line-height: 1.2;
}

#app-sitemap #bannerfechaultimasync {
    font-family: 'MiSans', sans-serif;
    font-size: 10.5px;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: 4px;
    white-space: normal;
    background: none;
    padding: 0;
}

#app-sitemap .mga-sync-btn-orange {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: var(--color-white);
    font-family: 'MiSans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#app-sitemap .mga-sync-btn-orange:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.45);
}

#app-sitemap .mga-sync-btn-orange:active {
    transform: scale(0.96);
}

#app-sitemap .mga-sync-btn-orange i {
    font-size: 17px;
    color: var(--color-white);
}

/* 4. Etiquetas de sección (RESUMEN, INSPECCIONES, GESTIÓN) */
#app-sitemap .mga-section-label {
    font-family: 'MiSans', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a6e85;
    margin: 20px 0 8px 2px;
}

/* 5. Grid RESUMEN (2 columnas) */
#app-sitemap .mga-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

#app-sitemap .mga-summary-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 14px 10px 14px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.16s ease;
    box-sizing: border-box;
}

#app-sitemap .mga-summary-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

#app-sitemap .mga-summary-card:active {
    transform: scale(0.98);
}

#app-sitemap .mga-summary-poda {
    border-left: 4.5px solid var(--color-success);
    background: linear-gradient(135deg, var(--color-success-bg) 0%, var(--color-white) 50%);
}

#app-sitemap .mga-summary-mbt {
    border-left: 4.5px solid var(--color-info);
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-white) 50%);
}

#app-sitemap .mga-summary-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

#app-sitemap .mga-summary-icon-circle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#app-sitemap .mga-summary-text-block {
    display: flex;
    flex-direction: column;
}

#app-sitemap .mga-summary-title {
    font-family: 'MiSans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-dark);
    line-height: 1.1;
}

#app-sitemap .mga-summary-number {
    font-family: 'MiSans', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--color-text-main);
    line-height: 1.1;
    margin: 2px 0;
}

#app-sitemap .mga-summary-sub {
    font-family: 'MiSans', sans-serif;
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 400;
    line-height: 1;
}

#app-sitemap .mga-summary-arrow {
    font-size: 18px;
    color: var(--color-text-light);
}

/* Colores de badges de iconos */
#app-sitemap .mga-icon-green {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}

#app-sitemap .mga-icon-blue {
    background: #e0f2fe;
    color: var(--color-info);
}

#app-sitemap .mga-icon-slate {
    background: #f1f5f9;
    color: #334155;
}

#app-sitemap .mga-icon-peach {
    background: #fff7ed;
    color: #ea580c;
}

/* 6. Listas de tarjetas de acción (INSPECCIONES & GESTIÓN) */
#app-sitemap .mga-action-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

#app-sitemap .mga-action-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 13px 16px;
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.16s ease;
    box-sizing: border-box;
}

#app-sitemap .mga-action-card:hover {
    background: var(--color-white);
    border-color: var(--color-border-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

#app-sitemap .mga-action-card:active {
    transform: scale(0.985);
}

#app-sitemap .mga-action-icon-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#app-sitemap .mga-action-icon-circle i {
    font-size: 22px;
}

#app-sitemap .mga-action-info {
    flex: 1;
    min-width: 0;
}

#app-sitemap .mga-action-title {
    font-family: 'MiSans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.25;
    margin-bottom: 2px;
}

#app-sitemap .mga-action-subtitle {
    font-family: 'MiSans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.3;
}

#app-sitemap .mga-action-chevron {
    font-size: 20px;
    color: var(--color-text-light);
    margin-left: auto;
}

/* 7. Footer Naturgy */
#app-sitemap .mga-home-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 4px 28px 4px;
}

#app-sitemap .mga-footer-butterfly {
    width: 26px;
    height: 25px;
    flex-shrink: 0;
}

#app-sitemap .mga-footer-line {
    width: 1px;
    height: 24px;
    background-color: var(--color-border-dark);
}

#app-sitemap .mga-footer-text {
    font-family: 'MiSans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-info);
    line-height: 1.3;
}

/* Fix: loading overlay must not cover the navigation toolbar on subpages.
   The glass pane (app-glass-pane-active) is a full-screen overlay injected by
   CodeOnTime JS during data fetch. On subpages the toolbar height is 58px, so
   we offset the pane downward so the toolbar is always reachable. */
body.seccion .app-glass-pane {
    top: 58px !important;
    height: calc(100% - 58px) !important;
}