/* El contenedor maestro del switch */
    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
        }

    /* Oculta el checkbox nativo del navegador */
    .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* El fondo de la píldora (La clase que hacía falta) */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #cf4545ff;
        transition: .3s;
        border-radius: 24px;
    }

    /* El círculo blanco interior que se desliza */
    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

    /* Color de fondo azul cuando el control se activa (checked) */
    input:checked + .slider {
        /* background-color: #2196F3; /* Azul estándar W3 */
        background-color: #4CAF50!important; /* Azul estándar W3 */
    }

    /* Animación: Desplaza el círculo blanco a la derecha al activarse */
    input:checked + .slider:before {
        transform: translateX(26px);
    }
    
/*  listado de predios sugerencia d ebusqueda */
    .dropdown-sugerencias {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 250px; /* 👈 Esto le da estabilidad al ancho sin importar el input */
        max-height: 200px;        
        z-index: 9999;
        width: 100%;
        background-color: #f8f8f8;
        /*border: 1px solid #ccc;*/
        border-radius: 4px;
        list-style: none;
        padding: 0;
        margin: 2px 0 0 0;
        overflow-y: auto;
        box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
    }

    .dropdown-sugerencias li {
        padding: 10px;
        cursor: pointer;
        color: #000;
        font-family: Verdana, sans-serif;
        font-size: 10px;   
    }

    .dropdown-sugerencias li:hover {
        background-color: #727d9b;
    }    

    /* Congelar la primera columna (ID Predio) */
    .col-fija {
      position: sticky;
      left: 0;
      z-index: 2; /* Garantiza que quede sobre las demás celdas al hacer scroll */
      background-color: #2196f3; /* Evita que el texto de las celdas de atrás se traslape */
    }
    
    /* Para el encabezado fijado (th) le damos un z-index más alto para la esquina */
    th.col-fija {
      z-index: 3;
      background-color: #2196f3; /* O el color del encabezado w3-teal / w3-theme */
      color: white;
    }
    
    /* 1. Contenedor con scroll (importante para que el sticky funcione) */
    .contenedor-tabla-scroll {
      max-height: 70vh; /* Ajusta esto según el alto de tu modal (ej: si el modal es 80vh, esto puede ser 70vh) */
      overflow-y: auto; /* Scroll vertical */
      overflow-x: auto; /* Scroll horizontal */
      border: 1px solid #ddd; /* Opcional, para delimitar */
    }
    
    /* 2. Fijar todos los encabezados (th) en la parte superior */
    .contenedor-tabla-scroll table thead th {
      position: sticky;
      top: 0;
      background-color: #2196f3; /* O tu color w3-teal / w3-theme */
      color: white;
      z-index: 5; /* Alto para estar sobre el cuerpo de la tabla */
      box-shadow: 0 2px 2px rgba(0,0,0,0.1); /* Opcional, sombrita para dar efecto de elevación */
    }
    
    /* 3. ¡IMPORTANTE! Manejo de la esquina (Columna Fija + Encabezado Fijo) */
    /* Debemos asegurar que la celda de la esquina (ej: ID Predio) se fije en ambos ejes */
    .contenedor-tabla-scroll table thead th.col-fija {
      position: sticky;
      top: 0;
      left: 0;
      z-index: 10; /* El z-index más alto de todos, para que no lo tape nada */
      background-color: #2196f3; /* Un tono un poco más oscuro o igual, pero sólido */
    }
    
    /* 4. Tu estilo previo para la columna fija en el cuerpo (td) */
    .col-fija {
      position: sticky;
      left: 0;
      z-index: 2;
      background-color: white; /* Indispensable que no sea transparente */
      border-right: 2px solid #ddd; /* Opcional, línea divisoria vertical */
    }