/* Limpieza básica de márgenes */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Contenedor principal */
.flex-contenedor {
    width: 100%;
    padding: 10px 20px; /* Margen interno para que no toque los bordes de la pantalla */
    box-sizing: border-box;
}

/* Alineación adaptable (Imagen Izquierda - Fecha Derecha) */
.bloque-cabecera {
    display: flex;
    justify-content: space-between; /* Empuja los elementos a los extremos */
    align-items: center; /* Los centra verticalmente */
    flex-wrap: wrap; /* PERMITE RESPONSIVIDAD: salta de línea en pantallas chicas */
    gap: 15px; /* Espacio mínimo entre imagen y texto al apilarse */
    width: 100%;
}

/* Control automático del tamaño de la imagen */
.img-responsiva {
    max-width: 100%; /* No permite que la imagen sea más grande que la pantalla */
    height: auto; /* Mantiene la proporción original */
}



/* Estilo para la fecha con fondo desvanecido y contorno */
.fecha-texto {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #1B5E20; /* Verde oscuro institucional */
    background: linear-gradient(to right, #E8F5E9, #F1F8E9); /* Fondo con degradado verde claro desvanecido */
    border: 2px solid #1B5E20; /* contorno verde oscuro */
    padding: 10px 24px; /* Espacio interno para que luzca el diseño */
    border-radius: 6px; /* Bordes redondeados sutiles */
    white-space: nowrap; /* Evita que el renglón se rompa */
    box-sizing: border-box;
    display: inline-block; /* Ajusta el recuadro estrictamente al tamaño del texto */
}




/* Franja verde responsiva de lado a lado */
.FranjaVerde {
    height: 15px;
    background: linear-gradient(to right, #C8E6C9, #F1F8E9);
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* AJUSTE PARA PANTALLAS MÓVILES (Menores a 576px) */
@media (max-width: 576px) {
    .bloque-cabecera {
        flex-direction: column; /* Cambia la alineación a vertical en celulares */
        text-align: center; /* Centra la fecha debajo de la imagen */
    }
}

.EncabezadoCentrado {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #8B0000;
    
}
.EncabezadoCentrado30 {
    display: flex;
    justify-content: center; /* Centra el bloque horizontalmente */
    text-align: center; /* Centra el texto por dentro */
    width: 100%; /* Asegura que ocupe todo el ancho */
    margin: 20px auto; /* Margen arriba y abajo */
    box-sizing: border-box;
}

    /* Aplicamos el color negro y bold directamente al párrafo */
    .EncabezadoCentrado30 p {
        color: #000000; /* Color negro puro */
        font-weight: bold; /* Texto en negrita */
        font-size: 16px; /* Tamaño de letra legible (puedes cambiarlo) */
        margin: 0;
        max-width: 800px; /* Evita que el texto se estire demasiado a lo ancho */
        width: 100%;
    }

/* Convierte la sección en un contenedor horizontal */
.contenedor-columnas {
    display: flex;
    flex-direction: row; /* Alinea los hijos de izquierda a derecha */
    justify-content: space-between; /* Distribuye el espacio entre ellas uniformemente */
    align-items: center; /* Centra los contenidos verticalmente */
    width: 100%;
    gap: 20px; /* Añade espacio de separación entre columnas */
    margin: 20px 0;
    box-sizing: border-box;
}

/* Define el comportamiento de cada columna */
.columna-item {
    flex: 1; /* Fuerza a las 3 columnas a medir exactamente lo mismo */
    text-align: center; /* Centra el texto por dentro */
    font-weight: bold; /* Aplica negrita */
    color: #1B5E20; /* MODIFICADO: Verde institucional muy oscuro */
    font-size: 16px; /* Tamaño de letra */
    padding: 15px; /* Espaciado interno */
}

/* Responsivo: Si se ve en un celular, se vuelven a acomodar en renglones para que no se amontonen */
@media (max-width: 768px) {
    .contenedor-columnas {
        flex-direction: column;
        gap: 10px;
    }
}
/* Botón con contorno y ancho más estilizado */
.boton-contorno {
    display: inline-block; /* Permite controlar el ancho de forma exacta */
    max-width: 300px; /* MODIFICADO: Límite de ancho para que no se estire de más */
    width: 100%; /* Se adapta de forma responsiva hasta los 280px */
    background-color: #ffffff;
    color: #1B5E20;
    border: 2px solid #1B5E20;
    font-weight: bold;
    font-size: 16px;
    padding: 8px 30px; /* Proporciones cómodas de alto y ancho interno */
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    /* Efecto al pasar el cursor (Hover) */
    .boton-contorno:hover {
        background-color: #F1F8E9;
        border-color: #2E7D32;
        color: #2E7D32;
    }


.grupo-busqueda {
    display: flex;
    width: 100%;
    max-width: 420px; /* MODIFICADO: Aumentado de 320px a 420px para dar más espacio */
    margin: 0 auto; /* Centra el grupo dentro de la columna */
}

/* Estilo para el cuadro de texto (TextBox) */
.input-busqueda {
    flex: 1; /* Toma automáticamente todo el espacio extra del contenedor */
    padding: 12px;
    font-size: 15px;
    border: 2px solid #1B5E20;
    border-right: none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    outline: none;
    box-sizing: border-box;
}

/* Botón ASP.NET pegado con contorno */
.boton-contorno-pegado {
    background-color: #ffffff;
    color: #1B5E20;
    border: 2px solid #1B5E20;
    font-weight: bold;
    font-size: 15px;
    padding: 12px 20px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap; /* Asegura que la palabra "Buscar" nunca se corte */
}

    /* Efecto al pasar el cursor (Hover) */
    .boton-contorno-pegado:hover {
        background-color: #F1F8E9;
        border-color: #2E7D32;
        color: #2E7D32;
    }

/* ================================================================================================================================*/
/*                    S   E   C   C   I   O   N                C  A   L   E   N   D   A   R   I   O                               */
/* ================================================================================================================================*/
/* Contenedor principal alineado verticalmente */
.contenedor-calendario-limpio {
    display: flex;
    flex-direction: column; /* Alinea el letrero arriba y el input abajo */
    align-items: center; /* Centrado horizontal absoluto */
    justify-content: center;
    gap: 10px; /* Espaciado corto entre el letrero y el cuadro de fecha */
    width: 100%;
    margin: 25px 0;
    box-sizing: border-box;
}

/* Estilo para el letrero superior */
.letrero-indicador {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #1B5E20; /* Verde oscuro institucional */
    letter-spacing: 0.5px; /* Espaciado sutil entre letras */
    text-align: center;
}

/* Selector de fecha ASPX con contorno verde oscuro */
.selector-fecha-aspx {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #1B5E20;
    border: 2px solid #1B5E20;
    padding: 12px 20px;
    border-radius: 6px;
    background-color: #ffffff;
    outline: none;
    max-width: 260px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}



/* ================================================================================================================================*/
/*                    S   E   C   C   I   O   N               G  R   I   D   V   I   E   W                           */
/* ================================================================================================================================*/

/* Contenedor principal que mantiene el centrado en la página */
.seccion-grid-centrada {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 50px 0;
}

/* Contenedor con Scroll para el GridView */
.contenedor-con-scroll {
    width: 100%;
    max-width: 1300px; /* 🔥 Aumentado de 900px a 1300px para que la foto de 1200px quepa perfectamente */
    max-height: 850px; /* Aumentamos un poco la altura para que no requiera tanto scroll vertical */
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #e0e0e0;
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
}

/* Limpieza de la tabla */
.grid-personas-ajustado {
    border-collapse: separate !important; /* Permite espaciados entre bloques */
    border-spacing: 0 20px !important; /* Crea una separación física en blanco de 20px entre filas */
    border: none !important;
    width: 100%;
}

    /* 🔥 ESTILO EN LA CELDA PARA DISTINGUIR SEPARACIÓN */
    .grid-personas-ajustado td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* Fondo, bordes y bordes redondeados tipo tarjeta */
        background-color: #ffffff !important;
        border: 1px solid #dddddd !important;
        border-radius: 20px !important;
        /* Espacio interno para que los textos no toquen los bordes */
        padding: 15px !important;
        /* Sombra ligera que hace flotar la celda y marca la diferencia */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
        /* Transición suave para cuando pasas el mouse */
        transition: all 0.3s ease !important;
    }

    /* Filas alternadas: Renglones impares tendrán un fondo ligeramente gris para contrastar */
    .grid-personas-ajustado tr:nth-child(odd) td {
        background-color: #f9f9f9 !important;
    }

    /* Efecto visual interactivo al pasar el cursor sobre la celda */
    .grid-personas-ajustado tr:hover td {
        transform: translateY(-3px); /* Levanta sutilmente la tarjeta */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important; /* Oscurece la sombra */
        border-color: #aaaaaa !important; /* Destaca el borde */
    }

/* Estilo de la imagen */
.imagen-alerta {
    object-fit: contain;
    border: 1px solid #ccc;
    padding: 5px;
    display: inline-block;
    max-width: 100%;
    height: auto;
}


/* ================================================================================================================================*/
/*                    S   E   C   C   I   O   N               M  A  R  C  A     D  E     A  G  U  A                        */
/* ================================================================================================================================*/



/* Contenedor Grid compatible con entornos IIS de producción */
.watermark-grid-container {
    display: grid !important;
    place-items: center !important; /* Centra horizontal y verticalmente todo lo que esté adentro */
    position: relative;
}

/* Sello de texto real renderizado en producción */
.sello-texto-produccion {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(2rem, 5vw, 4.5rem) !important; /* Escalable dinámicamente según el tamaño de la foto */
    letter-spacing: 4px !important;
    padding: 15px 40px !important;
    border: 8px solid !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    opacity: 0.22 !important; /* Se mantiene tenue como lo solicitaste */
    transform: rotate(-25deg) !important; /* Solo rotación, el centrado lo hace el grid automáticamente */
    pointer-events: none !important; /* Ignora interacción del mouse */
    white-space: nowrap !important;
    z-index: 999 !important; /* Fuerza la superposición por encima de la imagen en IIS */
}

/* --- Variación de Color: LOCALIZADO --- */
.status-localizada .sello-texto-produccion {
    color: #4caf50 !important;
    border-color: #4caf50 !important;
    background-color: rgba(76, 175, 80, 0.04) !important;
}

/* --- Variación de Color: DESAPARECIDO --- */
.status-desaparecido .sello-texto-produccion {
    color: #f44336 !important;
    border-color: #f44336 !important;
    background-color: rgba(244, 67, 54, 0.04) !important;
}



Usa el código con preca
/* Estilo base para el sello físico de la marca de agua */
.marca-agua-sello {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(-25deg) !important; /* Centrado y rotado */
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 3.5rem !important; /* Tamaño grande y legible */
    letter-spacing: 3px !important;
    padding: 15px 35px !important;
    border: 8px solid !important; /* Borde grueso estilo sello */
    border-radius: 12px !important;
    text-transform: uppercase !important;
    opacity: 0.25 !important; /* Color tenue al 25% */
    pointer-events: none !important; /* Permite hacer clics a través del texto */
    white-space: nowrap !important;
    z-index: 999 !important; /* Asegura estar por encima de la foto en IIS */
}

/* --- Estado: LOCALIZADO (Verde Tenue) --- */
.sello-localizado {
    color: #4caf50 !important;
    border-color: #4caf50 !important;
    background-color: rgba(76, 175, 80, 0.03) !important;
}

/* --- Estado: DESAPARECIDO (Rojo Tenue) --- */
.sello-desaparecido {
    color: #f44336 !important;
    border-color: #f44336 !important;
    background-color: rgba(244, 67, 54, 0.03) !important;
}