@charset "iso-8859-1";
/* CSS Document */
html, body{
    height:100%;
    margin:0;
}

/* El body ocupa toda la altura y organiza el layout en columna:
   header arriba, contenido al centro y footer abajo */
body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ================= HEADER ================= */
/* Barra superior con fondo azul oscuro y texto blanco */
.panel.vl{
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color:#2A3057;
    
}

.card table tr td {
    padding-left: 25px; /* sangr�a hacia la derecha */
}

.fila-indentada {
            /* espacio entre texto y borde */
}

.panel.vl .panel-body{
    display:flex;
    justify-content:flex-end;
    width:1100px;      /* mismo ancho visual que tu contenido */
    margin:8px auto;  /* centra el contenedor */
}

/* ================= HEADER INFO ================= */
/* Direcci�n y tel�fono en el header */
.info{
    text-align:right;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.direccion,
.telefono{
    display:flex;
    /* justify-content:flex-end; */
    align-items:flex-start;
    gap:8px;
    color:white;
    font-family:sans-serif;
    font-size:13px;
}

/* ================= CONTENIDO ================= */
/* Bloque principal centrado en pantalla */
.main-content{
    flex:1;
    display:flex;
    justify-content:center;   /* centra horizontalmente */
    align-items:center;       /* centra verticalmente */
    padding:40px 20px;
}



.card .row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 150px;;
}

.col-6{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ================= TITULO Y ENCABEZADO ================= */
/* Estilos de t�tulos y encabezados */
.titulo{
    font-family:sans-serif;
    color:#6b7280;
    font-size:17px;
    font-weight:bold;
}



.mi-texto{
    font-size: .85rem;      /* text-xs = 12px */
    line-height: 1rem;
    font-weight: 600;        /* font-semibold */
    color: #0e0e0e;          /* text-gray-500 */
    font-family: 'Novecento', sans-serif; /* Fuente Novecento */
    letter-spacing: 0.05em;  /* tracking-wide */
}


.encabezado {
    color: #0e0e0e;              /* Azul primario */
    font-size: 1.075rem;         /* Tama�o peque�o (�14px) */
    font-weight: bold;           /* Negrita */
    font-family: 'Novecento', sans-serif; /* Fuente Novecento */
    text-transform: uppercase;   /* May�sculas */
    letter-spacing: 0.05em;      /* Espaciado entre letras */
}
    
/* ================= Estilo de las celdas de la tabla de apoyo ================= */
/* .card table td{
    padding:5px;
    border-bottom:1.5px solid #e5e7eb;
    margin-left: 25px;  
} */

.fila-indentada {
  /* sangr�a hacia la derecha */
    border-bottom: 2.5px solid #e5e7eb; /* borde alineado con la sangr�a */
    padding-bottom: 5px;              /* espacio entre texto y borde */
    /* margin-left: 15px; */
}
   
/* ================= PARA EFECTOS DE IMAGEN CENTRAL ================= */


.logo-ser{
    width:750px;
    height:auto;
    position: relative;
    left: 110px; /* mueve solo la imagen a la derecha */
}


    
.logo-apoyo
{
   width:70px;
   height:auto; 
}

.logo-superior{
    width:1153px;      /* mismo ancho visual que tu contenido */
    margin:20px auto;  /* centra el contenedor */
}

.logo-superior img{
    margin-left:0;
}


.secretaria-logo{
    width:170px;
    height:auto;
}


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

.tooltip .tooltip-text {
    font-family:sans-serif;
    visibility: hidden;
    background: #ffffff;  
    color: #2e2d2d;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    position: absolute;
    bottom: 150%;          /* aparece arriba */
    left: 70%;
    transform: translateX(-60%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ================= FOOTER ================= */
/* Pie de p�gina con fondo azul oscuro y texto blanco */
.footer{
    background:#2A3057;
    color:white;
    padding:25px 60px;
    margin-top:auto;
    font-family:sans-serif;
    font-size:16px;
}

.footer-text
{
    color:white;
    font-family:sans-serif;
    font-size:14px;
    font-weight:400; 
    
}
.footer-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:800px;
    margin:auto;
}

.footer-left{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.footer-left h4{
    margin:0;
    letter-spacing:1px;
}

.footer .direccion,
.footer .telefono{
    justify-content:flex-start;
    gap:10px;
}

.footer-logo{
    width:250px;
    height:auto;
}

a {
  color: inherit; /* Hereda el color del texto normal */
  text-decoration: none; /* Quita el subrayado */
  cursor: pointer;
}

/* ================= CLASE PARA DAR EFECTO DE ZOOM ================= */
.zoom-img{
    transition: transform 0.3s;
    transform-origin: center center;  /* zoom desde la izquierda */
}

.zoom-img:hover{
    transform: scale(1.15);
}


/* ================= RESPONSIVE ================= */
/* Ajustes para pantallas peque�as (menos de 768px) */
@media(max-width:768px){
    .card .row,
    .footer-content{
        flex-direction:column;
        text-align:center;
    }

    .footer .direccion,
    .footer .telefono{
        justify-content:center;
    }
}