/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

.modal.fade .modal-dialog {
    transform: translate(0, 0) !important;
}

.modal-dialog {
    width: 90%;
    max-width: 900px;
}
.modal {
    transition: opacity .15s ease-in-out;
}

/* Ocultar barra de progreso upload */
.fileupload-progress,
.progress,
.progress-bar {
    display: none !important;
}

/* Mata el menú superior de opciones */
#surveymenu-container {
    display: none !important;
}
/* 🔥 Ocultar Survey Options (fruity_twentythree) */
.ls-survey-menu,
#survey-nav,
#survey-menu,
.survey-menu-container,
.offcanvas#survey-nav {
    display: none !important;
}

/* 🔥 Ocultar los tres puntitos */
.carousel-indicators,
.ls-carousel-indicators {
    display: none !important;
}

/* ============================= */
/* 🇲🇽 HEADER ROJO SEP */
/* ============================= */

/* Barra superior */
.navbar,
.navbar-default,
.navbar-inverse {
    background-color: #7A0C2E !important;
    border-color: #7A0C2E !important;
}

/* Links del header */
.navbar a,
.navbar-nav > li > a {
    color: #ffffff !important;
}

/* Hover header */
.navbar a:hover,
.navbar-nav > li > a:hover {
    color: #f2f2f2 !important;
}

/* Logo spacing */
.navbar-brand img {
    max-height: 50px;
}

/* ============================= */
/* 🇲🇽 FOOTER ROJO SEP */
/* ============================= */

footer,
#footer,
.ls-footer,
.footer {
    background-color: #7A0C2E !important;
    color: #ffffff !important;
}

/* Links footer */
footer a,
.ls-footer a {
    color: #ffffff !important;
}

footer a:hover,
.ls-footer a:hover {
    color: #e6e6e6 !important;
}

/* ============================= */
/* 🔧 FULL WIDTH LIMPIO */
/* ============================= */

#outerframeContainer,
.group-container {
    max-width: 1200px;
    margin: 0 auto;
}



/* ===================================== */
/* ⚪ FOOTER TEXTO BLANCO */
/* ===================================== */

/* Títulos del footer */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.ls-footer h1,
.ls-footer h2,
.ls-footer h3,
.ls-footer h4,
.ls-footer h5,
.ls-footer h6 {
    color: #ffffff !important;
}

/* Links del footer */
footer a,
.ls-footer a {
    color: #ffffff !important;
}

/* Hover links footer */
footer a:hover,
.ls-footer a:hover {
    color: #e6e6e6 !important;
}

/* Texto general footer */
footer,
.ls-footer {
    color: #ffffff !important;
}


/* ===================================== */
/* 🔤 TIPOGRAFÍA MONTSERRAT */
/* ===================================== */

/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Aplicar global */
body,
button,
input,
select,
textarea,
.navbar,
.footer {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
}


/* ===================================== */
/* ✨ MEJORA VISUAL GENERAL */
/* ===================================== */

/* Inputs más suaves */
.form-control {
    border-radius: 8px !important;
}

/* Botones más elegantes */
.btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
}

/* Títulos más limpios */
h1, h2, h3, h4, h5 {
    font-weight: 600 !important;
}






body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #E9EDF2 !important;
}

#outerframeContainer {
  flex: 1 0 auto;
}

footer,
#footer {
  flex-shrink: 0;
}

/* Contenedor del form */
.form-token {
  position: relative;
}




/* =========================================================
   🎓 TEMA UNADM — VERSIÓN ELEGANTE SUAVE
   ========================================================= */

/* 🎨 Fondo general gris limpio */
body {
  background-color: #f3f5f6 !important;
}

/* =========================================================
   🎓 ALERT INFO — verde elegante con texto gris delgado
   ========================================================= */
p.alert.alert-info {
  background: #2f6f5e !important; /* verde más fino */
  color: #e6eaed !important;      /* gris claro elegante */
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12) !important;
  font-weight: 400 !important;    /* ⬅️ letra más delgada */
  letter-spacing: 0.2px;
  padding: 14px 18px !important;
}

/* =========================================================
   🚨 ALERT ERROR — rojo suave con texto gris
   ========================================================= */
.alert.alert-danger {
  background: #d84a4a !important; /* rojo sobrio */
  color: #f1f3f5 !important;      /* gris claro */
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.10) !important;
  font-weight: 400 !important;    /* ⬅️ letra delgada */
  letter-spacing: 0.2px;
  padding: 14px 18px !important;
}

/* ---------------------------------------------------------
   🔘 Botón principal (verde elegante)
   --------------------------------------------------------- */
.btn-primary,
.btn-success,
button[type="submit"] {
  background: #1f5e49 !important;
  border-color: #1f5e49 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  transition: all .2s ease;
}

/* Hover botón */
.btn-primary:hover,
button[type="submit"]:hover {
  background: #2f7a60 !important;
  border-color: #2f7a60 !important;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   👁️ Botón ojito elegante
   --------------------------------------------------------- */
#ls-toggle-token-show {
  background: #2f7a60 !important;
  border-color: #2f7a60 !important;
  color: #ffffff !important;
  border-radius: 0 10px 10px 0 !important;
  transition: all .2s ease;
}

#ls-toggle-token-show:hover {
  background: #1f5e49 !important;
  border-color: #1f5e49 !important;
}

/* ---------------------------------------------------------
   🧾 Focus del input institucional
   --------------------------------------------------------- */
.form-control:focus {
  border-color: #2f7a60 !important;
  box-shadow: 0 0 0 0.2rem rgba(47,122,96,0.25) !important;
}


/* ===================================== */
/* 🔴 FOOTER PEGADO ABAJO */
/* ===================================== */

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

article {
    flex: 1;
}

/* Footer sin espacio blanco abajo */
footer,
.main-footer,
.ls-footer {
    margin: 0 !important;
    padding-bottom: 40px !important;
}

/* Quitar cualquier espacio después del footer */
footer::after,
.main-footer::after {
    display: none !important;
}

/* ===================================== */
/* 🔴 ELIMINAR FRANJA BLANCA DEBAJO */
/* ===================================== */

body {
    background-color: #7A0C2E !important;
}

/* Pero mantener fondo blanco en el contenido */
article {
    background-color: #ffffff;
}

/* ===================================== */
/* 🟢 ELIMINAR PIXEL VERDE ARRIBA */
/* ===================================== */

/* Puede ser un borde o pseudo-elemento */
.navbar::before,
.navbar::after,
.navbar-brand::before,
.navbar-brand::after {
    display: none !important;
}

/* Quitar posibles bordes */
.navbar {
    border: none !important;
}

/* Si el pixel viene de una imagen */
.navbar img {
    border: none !important;
}

/* ===================================== */
/* 🟢 Quitar botón hamburguesa (pixel verde) */
/* ===================================== */

.navbar-toggle {
    display: none !important;
}

/* Quitar cualquier borde residual */
.navbar-header button {
    border: none !important;
    background: transparent !important;
}

/* Seguridad extra */
.navbar-header {
    position: relative;
}

.navbar-header::before,
.navbar-header::after {
    display: none !important;
}

/* ===================================== */
/* 🎯 MODAL PROFESIONAL GOB.MX STYLE */
/* ===================================== */

/* Fondo oscuro real */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.65) !important;
}

/* Contenedor del modal */
.modal-content {
    border-radius: 12px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35) !important;
    border: none !important;
    overflow: hidden;
}

/* Header del modal */
.modal-header {
    background-color: #7A0C2E !important; /* rojo institucional */
    color: white !important;
    border-bottom: none !important;
}

.modal-header h4,
.modal-header h3,
.modal-header .modal-title {
    color: white !important;
    font-weight: 600;
}

/* Botón cerrar (X) */
.modal-header .close {
    color: white !important;
    opacity: 0.9;
}

/* Cuerpo del modal */
.modal-body {
    background-color: #ffffff;
    padding: 25px;
}

/* Footer del modal */
.modal-footer {
    background-color: #f8f8f8;
    border-top: none;
}

/* ===================================== */
/* ✨ FUENTE GLOBAL LEXEND */
/* ===================================== */

html, body {
    font-family: 'Lexend', sans-serif !important;
}

/* Títulos */
h1, h2, h3, h4, h5 {
    font-family: 'Lexend', sans-serif !important;
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* Texto general */
p, label, span, div, input, textarea, button {
    font-family: 'Lexend', sans-serif !important;
}

/* Botones */
.btn {
    font-weight: 500;
    letter-spacing: 0.3px;
}

body {
    font-weight: 400;
    line-height: 1.6;
    color: #2b2b2b;
}

h1 {
    font-size: 2.2rem;
}

/* ===================================== */
/* ✨ FOOTER MÁS DELGADO Y LIMPIO */
/* ===================================== */

.main-footer {
    font-size: 14px !important;
    font-weight: 300 !important;
    letter-spacing: 0.3px;
}

.main-footer h3,
.main-footer h4,
.main-footer strong {
    font-weight: 500 !important;
    font-size: 16px !important;
}

.main-footer p,
.main-footer li,
.main-footer a {
    font-weight: 300 !important;
    font-size: 13px !important;
}

.main-footer ul {
    padding-left: 18px;
}

.main-footer a {
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.main-footer a:hover {
    opacity: 1;
}

.main-footer {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}