/*============================ESTO MOSTRA SUCURSAL*/
#contenedor_explorarN{
    display: flex;
    flex-direction: column; /* Esto alinea los hijos verticalmente */
    gap: 10px; 
    overflow-y: auto;
/* 2. Configuración del Snap */
    scroll-snap-type: y mandatory; 
    scroll-behavior: smooth;
    
    /* Limpieza visual */
    scrollbar-width: thin;
    
    
}

 
/*============================BUSACR CON FILTROS */
        :root { --busc_color: #008b8b; --busc_gris: #f1f3f4; }


        /* 1. POSICIÓN INICIAL (Esquina derecha) */
        #busc_contenedor {
            position: fixed;
            top: 20px; right: 20px;
            width: 300px;
            z-index: 1000;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 2. ESTADO ACTIVO (Al hacer click: Superior Centro) */
        #busc_contenedor.busc_active {
            top: 15px;
            right: 50%;
            transform: translateX(50%);
            width: 95%;
            max-width: 650px;
        }

        .busc_caja {
            background: white; padding: 12px; border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        .busc_fila_input { display: flex; align-items: center; gap: 10px; }

        .busc_input_wrapper {
            flex: 1; background: var(--busc_gris);
            border-radius: 8px; padding: 2px 12px; display: flex;
        }

        #busc_input_texto {
            width: 100%; border: none; background: transparent;
            padding: 10px 0; outline: none; font-size: 16px;
        }

        /* Botón BUSCAR (Oculto al inicio) */
        #busc_btn_accion {
            display: none; background: var(--busc_color);
            color: white; border: none; padding: 10px 18px;
            border-radius: 8px; cursor: pointer; font-weight: bold;
        }

        /* FILTROS EN FILA (Ocultos al inicio) */
        #busc_filtros_fila {
            display: none; gap: 8px; margin-top: 12px;
        }

        .busc_filtro_check {
            flex: 1; padding: 9px; border: 1.5px solid #eee;
            border-radius: 8px; cursor: pointer; text-align: center;
            font-size: 13px; display: flex; align-items: center;
            justify-content: center; gap: 6px; transition: 0.2s;
        }

        .busc_filtro_check.busc_seleccionado {
            border-color: var(--busc_color); background: rgba(0, 139, 139, 0.08);
            color: var(--busc_color); font-weight: bold;
        }

        /* LISTA DE RESULTADOS (DROPDOWN) */
        #busc_resultados_lista {
            display: none; background: white; margin-top: 8px;
            border-radius: 10px; max-height: 200px; overflow-y: auto;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .busc_item_res {
            padding: 12px 15px; border-bottom: 1px solid #f9f9f9;
            cursor: pointer; font-size: 14px;
        }
        .busc_item_res:hover { background: var(--busc_gris); }

        .busc_notif { color: var(--busc_color); font-size: 22px; cursor: pointer; position: relative; }
        .busc_badge { position: absolute; top: -5px; right: -5px; background: #ff4444; color: white; font-size: 10px; padding: 2px 5px; border-radius: 50%; }
        
        #busc_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: none; z-index: 900; }
/*================================================MODELO ANTIGUO*/
#Cprincipal {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        height: 100vh;
    }
    
    #loader{
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: white;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
        }
         #loader_Grupo{
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #000000c9;
            z-index: 9999;
            display: none;
            justify-content: center;
            align-items: center;
        }
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #ddd;
            border-top-color: #666;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
/*====================================================================*/
 /**inicio de la publicaciones///////////////////////////////////////*/
        #publicaciones {
            margin-top: 10px;
            width: 50px;
            height: 50px;
            background: #0b949a;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            cursor: pointer;
            position: relative;
            transition: background-color 0.3s;
            
            position: fixed; /* posición fija en la pantalla */
            right: 20px; /* distancia desde la derecha */
        }
        
        #publicaciones:hover {
            background: darkred; /* cambia el color al pasar el mouse */
        }
        #publicaciones .notificacion {
            position: absolute;
            top: -5px;
            right: -5px;
            background: yellow;
            color: black;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid red; /* para que combine con el fondo */
        }
        /*final de publicaciones ////////////////////////////////////////////////*/
        #inicio {
          position: relative;
        }
            #sty_buscado {
              position: fixed;
              top: 10px;
              right: 10px;
              z-index: 10; /* asegúrate de que esté por encima */
            }
            #buscador {
              width: 250px;
              padding: 12px 20px;
              font-size: 16px;
              border: none;
              border-radius: 10px;
              color: #000;
              backdrop-filter: blur(10px);
              box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
              outline: none;
            }
/*===========================================================================*/
              /* Tamaño por defecto (PC o pantallas grandes) */
                #svg2 {
                  width: 230px;
                  height: 500px;
                }
                
                /* Tablets (pantallas medianas) */
                @media (max-width: 1024px) {
                  #svg2 {
                    width: 190px;
                    height: 430px;
                  }
                }
                
                /* Celulares (pantallas pequeñas) */
                @media (max-width: 768px) {
                  #svg2 {
                    width: 142px;
                    height: 400px;
                  }
                }