@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&display=swap');

/* 1. RESET CRÍTICO PARA IFRAME */
header, .header, #header, nav, .navbar, .gobmx-header, .navbar-inverse,
footer, .footer, #footer, .site-footer, .gobmx-footer, .main-footer {
    display: none !important;
}

/* 1. Resetear márgenes del body para evitar barras de scroll innecesarias */
html, body {
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: transparent; /* Útil si quieres que tome el fondo del padre */
}

/* 2. Hacer que todas las cajas calculen el padding hacia adentro */
*, *:before, *:after {
    box-sizing: inherit;
}
.gob-card {
    width: 100%;
    max-width: 440px;      /* 1. Reducimos el ancho máximo (estaba en ~600px) */
    margin: 0 auto;        /* Centra la tarjeta dentro del iframe */
    padding: 16px 20px;    /* 2. Menos espacio interno (arriba/abajo e izquierda/derecha) */
    /* Si tienes un borde o fondo, asegúrate de mantenerlo */
    background: #FFFFFF;
    /* --- LÍNEAS NUEVAS PARA TRAERLO AL FRENTE --- */
    position: relative !important; /* Necesario para que el z-index funcione */
    z-index: 99999 !important; /* Lo pone por encima de cualquier capa invisible */
}

/* 4. Asegurar que inputs y botones no rompan la tarjeta */
.gob-card input,
.gob-card button,
.gob-card .form-group,
.gob-card .b1r {
    max-width: 100%;
    box-sizing: border-box;
}

.gob-auth-selector {
    margin-bottom: 24px;
}

.gob-auth-selector label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #161A1D;
    margin-right: 0; /* Lo cambiamos a 0 porque el separador dará el espacio */
    line-height: 100%;
    cursor: pointer;
}

.gob-auth-separator {
    display: inline-block;
    width: 1px;              /* Grosor de la línea */
    height: 20px;            /* Altura de la línea */
    background-color: #DDDDDD; /* Color gris claro */
    margin: 0 20px;          /* Espacio a la izquierda y derecha de la línea */
    vertical-align: middle;  /* Lo alinea con el centro del texto */
}

.form-group {
    margin-bottom: 16px;
}

.gob-label,
.sh0b {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #161A1D;
    display: block;
    margin-bottom: 8px;
    line-height: 100%;
}

.required {
    color: #9B0F15;
}

.form-control,
.gob-input {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #161A1D;
    border: 1px solid #DDDDDD;
    padding: 10px 12px;
    height: 40px;
    width: 314px;
    box-sizing: border-box;
    border-radius: 0;
}

.gob-input::placeholder {
    font-family: 'Noto Sans', sans-serif;
    color: #999999;
    font-size: 14px;
}

.input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-group .form-control {
    flex: 1;
    margin: 0;
}

.input-group-btn {
    flex-shrink: 0;
}

.input-group-btn button {
    font-family: 'Noto Sans', sans-serif;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #161A1D;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    cursor: pointer;
    height: 40px;
    border-radius: 0;
    white-space: nowrap;
}

.input-group-btn button:hover {
    background: #F5F5F5;
}

.gob-btn-primary {
    font-family: 'Noto Sans', sans-serif;
    width: 100%;
    padding: 10px 16px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    background: #004D40;
    border: none;
    border-radius: 0;
    cursor: pointer;
    line-height: 100%;
}

.gob-btn-primary:hover {
    background: #003D32;
}

.gob-btn-outline {
    font-family: 'Noto Sans', sans-serif;
    width: 100%;
    padding: 10px 16px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    color: #161A1D;
    background: #FFFFFF;
    border: 1px solid #002F2A;
    border-radius: 0;
    cursor: pointer;
    line-height: 100%;
}

.gob-btn-outline:hover {
    background: #F5F5F5;
}

.text-center {
    font-family: 'Noto Sans', sans-serif;
    text-align: center;
    color: #002F2A;
}

.text-center a {
    font-family: 'Noto Sans', sans-serif;
    color: #004D40;
    font-size: 14px;
    text-decoration: none;
    font-weight: 400;
}

.text-center a:hover {
    text-decoration: underline;
}

.hidden-backend-radios {
    display: none;
}

.btn-outline-gob {
    /* Disposición y dimensiones */
    display: flex;
    flex-direction: row; /* Flujo horizontal */
    justify-content: center; /* Alineación horizontal centro */
    align-items: center; /* Alineación vertical medio */
    width:160px; /* Ancho fijo */
    min-width: 40px;
    height: 40px; /* Altura fija */
    padding: 8px 24px; /* Margen interior: Arriba/Abajo 8px, Izquierda/Derecha 24px */
    gap: 8px; /* Espacio */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */

    /* Colores y bordes */
    background-color: #FFFFFF;
    border: 1px solid #002F2A;
    border-radius: 8px; /* Radio */
    box-shadow: 0px 2px 4px 0px #00000026; /* Sombras y desenfoques */

    /* Tipografía */
    font-family: 'Noto Sans', sans-serif;
    color: #002F2A;
    font-size: 12px;
    font-weight: 600; /* SemiBold */
    line-height: 22px;
    text-align: center;

    /* Estilos de interacción recomendados */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

/* Efecto opcional al pasar el mouse */
.btn-outline-gob:hover {
    background-color: #E6ECEB;
}

.btn-outline-gob-big-principal {
    /* Disposición y dimensiones */
    display: flex;
    flex-direction: row; /* Flujo horizontal */
    justify-content: center; /* Alineación horizontal centro */
    align-items: center; /* Alineación vertical medio */
    width:213px; /* Ancho fijo */
    min-width: 40px;
    height: 40px; /* Altura fija */
    padding: 8px 24px; /* Margen interior: Arriba/Abajo 8px, Izquierda/Derecha 24px */
    gap: 8px; /* Espacio */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */

    /* Colores y bordes */
    background-color: #002F2A;
    border: 1px solid #002F2A;
    border-radius: 8px; /* Radio */
    box-shadow: 0px 2px 4px 0px #00000026; /* Sombras y desenfoques */

    /* Tipografía */
    font-family: 'Noto Sans', sans-serif;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600; /* SemiBold */
    line-height: 22px;
    text-align: center;

    /* Estilos de interacción recomendados */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

/* Efecto opcional al pasar el mouse */
.btn-outline-gob-big-principal:hover {
    background-color: #004D40;
}

.btn-outline-gob-big-secundario{
    /* Disposición y dimensiones */
    display: flex;
    flex-direction: row; /* Flujo horizontal */
    justify-content: center; /* Alineación horizontal centro */
    align-items: center; /* Alineación vertical medio */
    width:213px; /* Ancho fijo */
    min-width: 40px;
    height: 40px; /* Altura fija */
    padding: 8px 24px; /* Margen interior: Arriba/Abajo 8px, Izquierda/Derecha 24px */
    gap: 8px; /* Espacio */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */

    /* Colores y bordes */
    background-color: #FFFFFF;
    border: 1px solid #002F2A;
    border-radius: 8px; /* Radio */
    box-shadow: 0px 2px 4px 0px #00000026; /* Sombras y desenfoques */

    /* Tipografía */
    font-family: 'Noto Sans', sans-serif;
    color: #002F2A;
    font-size: 12px;
    font-weight: 600; /* SemiBold */
    line-height: 22px;
    text-align: center;

    /* Estilos de interacción recomendados */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

/* Efecto opcional al pasar el mouse */
.btn-outline-gob-big-secundario:hover {
    background-color: #E6ECEB;
}

/* Reduce el margen inferior del contenedor de cada campo */
.gob-card .form-group {
    margin-bottom: 8px !important; /* El valor por defecto suele ser 15px o 20px. Bájalo a tu gusto. */
}

/* Elimina cualquier margen inferior extra que tengan tus inputs o el contenedor flex */
.gob-card .b1r,
.gob-card .gob-input {
    margin-bottom: 0 !important;
}

/* Reduce el espacio que hay encima de las etiquetas (labels) si es que lo tienen */
.gob-card label.b1sb {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.gob-input-readonly {
    /* Disposición y Dimensiones */
    flex: 1;               /* Ancho: Relleno (ocupa el espacio disponible) */
    height: 40px;          /* Altura fija/adaptable */
    min-width: 48px;       /* Ancho mínimo */
    min-height: 40px;      /* Altura mínima */
    padding: 8px;          /* Margen interior (arriba, derecha, abajo, izquierda) */
    box-sizing: border-box;

    /* Colores y Bordes */
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD; /* Borde gris claro */
    border-radius: 8px;        /* Radio (Ojo: en tu HTML tenías 4px, Figma pide 8px) */
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15); /* Sombra equivalente a #00000026 */

    /* Tipografía */
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px !important;
    font-weight: 400;      /* Estilo Regular */
    line-height: 1;        /* Altura de línea 100% */
    color: #767676;        /* Color del texto (Texto/Deshabilitado) */
}

/* Para asegurar que el texto de "Ubica tu certificado" se vea del mismo color */
.gob-input-readonly::placeholder {
    font-family: 'Noto Sans', sans-serif;
    color: #767676;
}

/* Evitar que al hacer clic (focus) cambie agresivamente el diseño por Bootstrap */
.gob-input-readonly:focus {
    outline: none;
    border-color: #DDDDDD;
}


.b1sb {
    /* Tipografía */
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;      /* Equivalente a SemiBold */
    line-height: 22px;     /* Asegura la altura exacta de 22px que pide el diseño */
    color: #161A1D;        /* Color Texto/Negro - Body */

    /* Disposición */
    display: block;        /* Asegura que el label ocupe su propia línea arriba del input */
    margin-bottom: 4px;    /* Espacio ligero entre el label y el input (ajústalo según veas tu diseño) */
}

/* Opcional: Estilo para el asterisco rojo de "Campo obligatorio" */
.b1sb .required {
    font-family: 'Noto Sans', sans-serif;
    color: #D9281C;        /* Rojo estándar usado comúnmente para alertas/obligatorios */
    font-weight: 600;
}

.b1it {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-style: oblique
}

.gob-radio {
    accent-color: #004D40; /* Aplica el color verde oscuro al seleccionar */
    width: 14px;           /* Ajusta el tamaño si lo ves muy pequeño */
    height: 14px;          /* Ajusta el tamaño si lo ves muy pequeño */
    cursor: pointer;
    vertical-align: middle; /* Ayuda a alinear el círculo con el texto */
    margin-right: 8px;     /* Espacio entre el círculo y el texto */
}

/* Opcional: Estilo para el texto del label para que combine bien */
.gob-auth-selector .radio-inline {
    font-family: 'Noto Sans', sans-serif;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #161A1D; /* Usa el color oscuro que aplicamos en pasos anteriores */
    display: inline-flex;
    align-items: center;
}

.b1r {
    /* Tipografía */
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;      /* Equivalente a Regular */
    line-height: 1;        /* Altura de la línea al 100% (igual a 16px) */
    color: #161A1D;        /* Color Texto/Negro - Body */

    /* Disposición opcional para mantener la altura que pide el diseño */
    display: inline-block; /* Permite que el texto respete márgenes y alturas sin romper la línea */
    vertical-align: middle;
}

.ui-dialog {
    top: 50px !important;
    position: fixed !important;
    left: 50% !important; /* Lo manda a la mitad de la pantalla */
    transform: translateX(-50%) !important; /* Lo centra exactamente en su propio eje */
    margin: 0 !important;
    /* --- LÍNEAS NUEVAS PARA EVITAR EL SALTO --- */
    width: 300px !important; /* Fija el ancho desde el milisegundo cero */
    height: 241px !important; /* Fija la altura desde el milisegundo cero */
    box-sizing: border-box !important; /* Evita que el padding modifique el ancho total */
    animation: none !important; /* Apaga cualquier animación por defecto de jQuery UI */
    transition: none !important; /* Apaga las transiciones de redimensionamiento */
    z-index: 99999 !important;
    overflow: hidden !important;
}

/* Estilo exclusivo para los botones de las alertas (jqalert / jQuery UI) */
.ui-dialog .ui-dialog-buttonpane button {
    background-color: #002F2A !important; /* Verde institucional */
    color: #FFFFFF !important;            /* Texto blanco */
    border-radius: 8px !important;        /* Bordes redondeados */
    font-family: 'Noto Sans', sans-serif !important; /* Tipografía exacta */
    border: none !important;              /* Quita el borde por defecto (como el rojo) */
    padding: 8px 24px !important;         /* Espaciado para que se vea como un botón real */
    font-size: 14px !important;
    font-weight: 600 !important;          /* SemiBold */
    cursor: pointer !important;
    outline: none !important;
}

/* Efecto al pasar el mouse por encima del botón */
.ui-dialog .ui-dialog-buttonpane button:hover {
    background-color: #004D40 !important; /* Se pone un poco más claro al pasar el cursor */
}

/* Estilo para el texto del mensaje de error dentro de la alerta */
.ui-dialog .ui-dialog-content {
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 16px !important; /* Ajusta el tamaño si lo necesitas más chico, ej. 14px */
    color: #161A1D !important;  /* Aplica el mismo color oscuro de tus otros textos */
    line-height: 1.4 !important;
    overflow: hidden !important;
}

#imageFake {
    display: none !important;
}

#loginIframe {
    display: none !important;
}

/* Neutralizar el contenedor fantasma del Applet para que no bloquee inputs */
#appletContainerLogin {
    position: absolute !important;     /* Lo sacamos del flujo normal del diseño */
    z-index: -10 !important;           /* Lo mandamos detrás de todo tu formulario */
    pointer-events: none !important;   /* OBLIGA a que los clics lo traspasen */
    width: 0px !important;             /* Le quitamos cualquier ancho residual */
    height: 0px !important;            /* Le quitamos cualquier alto residual */
    overflow: hidden !important;
    opacity: 0 !important;             /* Lo hacemos 100% invisible */
}