/* =====================================================
   gobmx-bs5.css
   Tema institucional del Gobierno de México sobre
   Bootstrap 5 nativo.

   El markup del navbar y el footer lo genera
   Scripts/gobmx-bs5.js con clases propias de BS5, así que
   aquí NO hay ningún shim de Bootstrap 3: solo tema.
   ===================================================== */

/* --- Fuentes institucionales --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'Patria';
    font-style: normal;
    font-weight: 400;
    src: url("https://framework-gb.cdn.gob.mx/applications/cms/fonts/Patria_Regular.otf") format("opentype");
}

/* Fuente de iconos institucional. No es un resto de Bootstrap 3: el markup
   propio la usa (<i class="icon icon-home"> en los 64 breadcrumbs) y de ella
   sale tambien la flecha separadora del rastro de navegacion. */
@font-face {
    font-family: 'icogobmx';
    src: url("https://framework-gb.cdn.gob.mx/assets/styles/fonts/icogobmx.woff") format("woff"),
         url("https://framework-gb.cdn.gob.mx/assets/styles/fonts/icogobmx.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: 'icogobmx';
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow:before    { content: "\e600"; }
.icon-home:before     { content: "\e601"; }
.icon-printing:before { content: "\e602"; }
.icon-search:before   { content: "\e606"; }

/* --- Paleta institucional --- */
:root {
    --gob-guinda:       #611232;
    --gob-guinda-dark:  #3A0B1F;
    --gob-guinda-hover: #4A111C;
    --gob-gold:         #c39326;
    --gob-gold-soft:    #D4C19C;
    --gob-text:         #404041;
    --gob-link:         #7B9CF0;
    --gob-navbar-alto:  80px;
}

/* =====================================================
   Tipografía y cuerpo
   ===================================================== */
/* El framework del gobierno no usaba los tamanos por defecto de Bootstrap.
   Al retirar su main.css todo el texto encogio (body 18->16px, h1 54->40px),
   asi que la escala se reproduce aqui. */
body {
    font-family: "Noto Sans", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--gob-text);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.428571429;
    /* deja espacio a la barra institucional fija */
    padding-top: var(--gob-navbar-alto);
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: "Patria", "Noto Sans", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
}

h1, .h1 { font-size: 54px; }
h2, .h2 { font-size: 38px; }
h3, .h3 { font-size: 28px; }
h4, .h4 { font-size: 24px; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }

h1, h2, h3, .h1, .h2, .h3 { margin-top: 25px;   margin-bottom: 12.5px; }
h4, h5, h6, .h4, .h5, .h6 { margin-top: 12.5px; margin-bottom: 12.5px; }

p  { margin: 0 0 12.5px; }
hr { margin-top: 25px; margin-bottom: 25px; }

/* Bootstrap 3 ponia las etiquetas en negrita; BS5 las deja en peso normal.
   Solo afecta a los <label> reales: los <asp:Label> se renderizan como
   <span> y en BS3 tampoco iban en negrita. */
label {
    font-weight: 700;
}

a:hover,
a:focus {
    color: var(--gob-link);
}

/* =====================================================
   Anchos de contenedor institucionales
   BS5 agrega un escalon xxl de 1320px que BS3 no tenia;
   sin topar aqui, el contenido se ensancha 150px en
   pantallas grandes respecto al diseno original.
   ===================================================== */
@media (min-width: 768px)  { .container { max-width: 750px;  } }
@media (min-width: 992px)  { .container { max-width: 970px;  } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }
@media (min-width: 1400px) { .container { max-width: 1170px; } }

/* Alto de control de formulario institucional.
   BS3 lo fijaba en 39px EXACTOS, no como minimo. La diferencia importa: hay
   56 <ig:WebDatePicker> de Infragistics que llevan .form-control en su
   contenedor, y ese contenedor envuelve el input y el boton de calendario.
   Con min-height la caja crece segun su contenido y el control se descuadra;
   con height fija queda como en el diseno original. Se replican tambien las
   dos excepciones que traia BS3. */
.form-control,
.form-select {
    height: 39px;
}

textarea.form-control {
    height: auto;
    min-height: 130px;
}

select[multiple],
select[size] {
    height: auto;
}

/* BS5 aplica appearance:none en .form-control, lo que borra la flecha nativa
   del desplegable. Los <asp:DropDownList> del proyecto usan .form-control
   (no .form-select), asi que se le devuelve la apariencia del sistema, como
   la tenian con Bootstrap 3. */
select.form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* =====================================================
   Controles en linea sueltos dentro de .row
   BS5 aplica .row > * { width: 100% }, asi que un control que cuelgue
   directamente de una fila sin clase col-* pasa a ocupar todo el ancho y se
   apila. En Bootstrap 3 la fila era flotante y estos elementos quedaban en
   linea: es lo que pasaba con los <asp:Button> que hacen de pestanas en
   ServiciosSeguimiento.aspx.

   La regla se limita a elementos de nivel en linea. Aplicarla a cualquier
   hijo rompia los <asp:GridView>, que cuelgan de la fila como <table> y
   dependen del width:100% para no desbordar el ancho de la pagina.
   ===================================================== */
.row > input:not([class*="col-"]),
.row > button:not([class*="col-"]),
.row > select:not([class*="col-"]),
.row > a:not([class*="col-"]),
.row > label:not([class*="col-"]):not([class~="col"]),
.row > span:not([class*="col-"]),
.row > img:not([class*="col-"]) {
    width: auto;
    max-width: none;
}

/* =====================================================
   Modales
   El encabezado institucional es una barra oscura con el titulo centrado en
   blanco; aplica a cualquier modal del sistema.
   ===================================================== */
.modal-header {
    padding: 15px;
    background-color: #393C3E;
    color: #fff;
    border-bottom: 1px solid transparent;
}

.modal-header h4 {
    margin-top: 0;
    margin-bottom: 0 !important;
}

/* La X de BS5 es oscura; sobre la barra oscura hay que aclararla */
.modal-header .btn-close {
    filter: var(--bs-btn-close-white-filter, invert(1) grayscale(100%) brightness(200%));
    opacity: .8;
}

.modal-title {
    margin: 0;
    line-height: 1.428571429;
    color: #fff;
    font-weight: 300;
    text-align: center;
}

.modal-body {
    position: relative;
    padding: 40px 40px 20px;
}

.modal-footer {
    padding: 15px;
}

/* --- Modales de AjaxControlToolkit (ModalPopupExtender) ---
   86 paginas los abren a traves de 45 controles de Controles/. Su div
   externo NO lleva la clase .modal, porque quien los posiciona y les pone el
   fondo oscuro es el extender, no Bootstrap.
   El problema: en BS5 .modal-content toma fondo, borde y sombra de variables
   --bs-modal-* que se declaran en .modal. Sin ese ancestro las variables no
   existen, la caja queda transparente y el contenido aparece suelto sobre la
   pagina. Se les da caja propia, con las medidas que tenian en BS3. */
:not(.modal) > .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
    pointer-events: auto;
}

:not(.modal) > .modal-dialog > .modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    outline: 0;
}

/* En BS5 .modal-header es flex con justify-content:space-between; en BS3 era
   un bloque. Los 44 controles de busqueda arman su cabecera con una fila de
   tres columnas (lupa a la izquierda, titulo al centro, cerrar a la derecha)
   dentro de un div envolvente: como flex-item ese div se encoge al contenido
   y las columnas colapsan, dejando la X pegada al titulo. Se les devuelve el
   comportamiento de bloque; los modales nativos de BS5 conservan el suyo. */
:not(.modal) > .modal-dialog .modal-header {
    display: block;
}

/* Hace falta fijar tambien max-width: BS5 lo ata a --bs-modal-width (800px
   en .modal-lg) y sin esto topa el ancho por debajo del original. */
@media (min-width: 768px) {
    :not(.modal) > .modal-dialog          { width: 600px; max-width: 600px; margin: 30px auto; }
    :not(.modal) > .modal-dialog.modal-sm { width: 300px; max-width: 300px; }
}

@media (min-width: 992px) {
    :not(.modal) > .modal-dialog.modal-lg { width: 900px; max-width: 900px; }
}

/* =====================================================
   Cuadriculas de GridView
   Un <asp:GridView> sin GridLines usa el valor por defecto "Both" y emite
   border="1" en la tabla. El reboot de BS5 pone border-width:0 en th y td, y
   como el CSS gana a los atributos de presentacion, las lineas divisorias
   desaparecen. Se les devuelve el grosor.
   ===================================================== */
table[border="1"] > tr > th,
table[border="1"] > tr > td,
table[border="1"] > :not(caption) > tr > th,
table[border="1"] > :not(caption) > tr > td {
    border-width: 1px;
}

/* =====================================================
   Navbar institucional (.gob-navbar)
   Markup BS5 nativo generado por Scripts/gobmx-bs5.js
   ===================================================== */
.gob-navbar {
    background-color: var(--gob-guinda);
    min-height: var(--gob-navbar-alto);
    padding-top: 0;
    padding-bottom: 0;
    font-size: 16px;
    font-weight: 300;
}

.gob-navbar .container {
    min-height: var(--gob-navbar-alto);
}

.gob-navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.gob-navbar-brand > img {
    height: 60px;
    width: auto;
}

.gob-navbar .nav-link {
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.gob-navbar .nav-link:hover,
.gob-navbar .nav-link:focus {
    background-color: rgba(255, 255, 255, .15);
    color: var(--gob-gold-soft);
}

.gob-navbar .nav-link.active,
.gob-navbar .nav-item.active > .nav-link {
    background-color: var(--gob-gold);
    color: #fff;
}

.gob-navbar .bi-search {
    font-size: 18px;
}

/* Hamburguesa en móvil */
.gob-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .3);
    padding: 6px 10px;
}

.gob-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.gob-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* El desplegable de móvil se pinta guinda para no partir la barra */
@media (max-width: 767.98px) {
    .gob-navbar .navbar-collapse {
        background-color: var(--gob-guinda);
        padding-bottom: 10px;
    }
}

/* =====================================================
   Barra secundaria del sistema (.gob-subnavbar)
   La dibujan los propios masters (MasterPageTramites,
   tableroCCTM), debajo de la barra institucional.
   ===================================================== */
.gob-subnavbar {
    background-color: var(--gob-guinda-dark);
    top: var(--gob-navbar-alto);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 60px;
}

.gob-subnavbar .nav-link,
.gob-subnavbar .navbar-text,
.gob-subnavbar .dropdown-toggle {
    color: #fff;
}

.gob-subnavbar .nav-link:hover,
.gob-subnavbar .nav-link:focus {
    background-color: rgba(255, 255, 255, .15);
    color: var(--gob-gold-soft);
}

.gob-subnavbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .3);
    padding: 6px 10px;
}

.gob-subnavbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Las páginas con barra secundaria necesitan hueco para las dos barras */
body:has(.gob-subnavbar) {
    padding-top: calc(var(--gob-navbar-alto) + 60px);
}

@media (max-width: 767.98px) {
    .gob-subnavbar .navbar-collapse {
        background-color: var(--gob-guinda-dark);
        padding-bottom: 10px;
    }
}

/* =====================================================
   Footer institucional (.gob-footer)
   ===================================================== */
.gob-footer {
    background-color: var(--gob-guinda);
    color: #fff;
    font-weight: 300;
    min-height: 56px;
    margin-top: 15px;
    padding: 30px 0 20px;
}

.gob-footer a {
    color: #fff;
    text-decoration: none;
}

.gob-footer a:hover,
.gob-footer a:focus {
    color: #fff;
    text-decoration: underline;
}

.gob-footer-logo > img {
    height: 60px;
    width: auto;
}

.gob-footer-titulo {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 18px;
}

/* En escritorio el título es fijo y el contenido siempre visible;
   en móvil se convierte en botón de acordeón. */
.gob-footer-toggle {
    display: none;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    color: #fff;
    font: inherit;
    padding: 0;
}

.gob-footer-toggle::after {
    content: "";
    float: right;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform .3s ease;
    margin-top: 6px;
}

.gob-footer-toggle:not(.collapsed)::after {
    transform: rotate(-135deg);
}

.gob-footer-lista li {
    margin-bottom: 6px;
    line-height: 1.35;
}

.gob-footer-lista a,
.gob-footer p {
    font-size: 14px;
}

.gob-footer p {
    line-height: 1.4;
    margin-bottom: 12px;
}

.gob-footer-denuncia {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px;
}

.gob-footer-denuncia a {
    text-decoration: underline;
}

.gob-footer-siguenos {
    font-weight: 600;
    margin-bottom: 8px;
}

.gob-footer-redes {
    margin-bottom: 18px;
}

.gob-footer-redes .list-inline-item {
    margin-right: 10px;
}

.gob-footer-redes img {
    height: 20px;
    width: auto;
}

.gob-footer-redes a:hover img {
    opacity: .6;
}

.gob-footer-079 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gob-footer-079 img {
    height: 38px;
    width: auto;
}

.gob-footer-079 span {
    font-size: 13px;
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .gob-footer-toggle       { display: block; }
    .gob-footer-titulo-fijo  { display: none; }
    .gob-footer-logo         { text-align: left; margin-bottom: 15px; }
    .gob-footer-row > div    { margin-bottom: 10px; }
}

@media (min-width: 768px) {
    /* En escritorio el contenido colapsable siempre va abierto */
    .gob-footer-cuerpo.collapse:not(.show) {
        display: block;
    }
}

/* =====================================================
   Botones institucionales
   Se ajustan por variables de BS5 para no romper el
   sistema de .btn-sm / .btn-lg ni los .btn-outline-*
   ===================================================== */
.btn {
    --bs-btn-padding-y:     10px;
    --bs-btn-padding-x:     25px;
    --bs-btn-font-size:     18px;
    --bs-btn-border-width:  2px;
    --bs-btn-border-radius: 3px;
}

.btn-lg { --bs-btn-padding-y: 20px; --bs-btn-padding-x: 50px; }
.btn-sm { --bs-btn-padding-y:  5px; --bs-btn-padding-x: 15px; --bs-btn-font-size: 16px; }

/* .btn a secas, sin variante de color. En BS3 no fijaba fondo y se veia la
   apariencia nativa del boton (gris claro); BS5 le pone fondo transparente y
   borde transparente, con lo que queda solo el texto. Se reproduce el gris.
   Son pocos casos, como el boton Buscar de EstadoCuenta.aspx. */
.btn:not([class*="btn-"]) {
    --bs-btn-color:              #212529;
    --bs-btn-bg:                 #EFEFEF;
    --bs-btn-border-color:       #767676;
    --bs-btn-border-width:       1px;
    --bs-btn-hover-color:        #212529;
    --bs-btn-hover-bg:           #E5E5E5;
    --bs-btn-hover-border-color: #767676;
    --bs-btn-active-color:       #212529;
    --bs-btn-active-bg:          #DCDCDC;
    --bs-btn-active-border-color:#767676;
}

/* Guinda institucional (BS5 trae azul #0d6efd) */
.btn-primary {
    --bs-btn-color:                 #611232;
    --bs-btn-bg:                    #fff;
    --bs-btn-border-color:          #611232;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              #611232;
    --bs-btn-hover-border-color:    #611232;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #3A0B1F;
    --bs-btn-active-border-color:   #3A0B1F;
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           #9e4a64;
    --bs-btn-disabled-border-color: #9e4a64;
}

/* Equivalente institucional del antiguo .btn-default (gris #6F7271) */
.btn-outline-secondary {
    --bs-btn-color:               #6F7271;
    --bs-btn-border-color:        #6F7271;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #6F7271;
    --bs-btn-hover-border-color:  #6F7271;
    --bs-btn-active-bg:           #6F7271;
    --bs-btn-active-border-color: #6F7271;
}

/* Blanco con borde y texto café, relleno café al hover */
.btn-danger {
    --bs-btn-color:                 #8a6d3b;
    --bs-btn-bg:                    #fff;
    --bs-btn-border-color:          #b38e5d;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              #b38e5d;
    --bs-btn-hover-border-color:    #b38e5d;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #b38e5d;
    --bs-btn-active-border-color:   #b38e5d;
    --bs-btn-disabled-color:        #8a6d3b;
    --bs-btn-disabled-bg:           #fff;
    --bs-btn-disabled-border-color: #b38e5d;
}

/* =====================================================
   Navegación y paginación institucionales
   ===================================================== */
/* Pestañas institucionales: la inactiva va gris con texto oscuro y la
   activa en guinda. Sin esto BS5 las pinta en azul de enlace y sin fondo. */
.nav-tabs .nav-link {
    background-color: #EEE;
    color: #404041;
    font-size: 16px;
    text-decoration: none;
    margin-right: 0;
    border: 1px solid #FFF;
    border-radius: 0;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: #eee #eee #ddd;
    color: #404041;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
    color: #FFF;
    background-color: var(--gob-guinda);
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    cursor: default;
}

.pagination {
    --bs-pagination-hover-bg:           #611232;
    --bs-pagination-hover-border-color: #611232;
    --bs-pagination-hover-color:        #fff;
    --bs-pagination-active-bg:          #4A90E2;
    --bs-pagination-active-border-color:#4A90E2;
}

/* =====================================================
   Rastro de navegacion (breadcrumb)
   El markup propio usa <ol class="breadcrumb"><li>, sin la clase
   breadcrumb-item que espera BS5, y el separador es la flecha de
   icogobmx. Se estiliza sobre la estructura existente.
   ===================================================== */
.breadcrumb {
    padding: 35px 0;
    margin-bottom: 25px;
    list-style: none;
    background-color: transparent;
}

.breadcrumb > li {
    display: inline-block;
}

.breadcrumb > li + li:before {
    content: "\e600";
    font-family: 'icogobmx';
    font-size: 10px;
    color: #545454;
    padding: 0 8px;
    vertical-align: middle;
}

/* Los enlaces del rastro van en gris oscuro, no en el azul de enlace */
.breadcrumb a {
    color: #393C3E;
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: #393C3E;
    text-decoration: underline;
}

.breadcrumb > .active {
    font-weight: 700;
    color: #545454;
}

/* El icono de casa hereda el color del enlace que lo contiene */
.breadcrumb .icon {
    font-size: 14px;
    color: inherit;
}

/* =====================================================
   Encabezado de pagina y filete dorado institucional
   ===================================================== */
.page-header {
    padding-bottom: 11.5px;
    margin: 50px 0 25px;
    border-bottom: 1px solid #eee;
}

/* <hr class="red" />: el filete corto dorado bajo el titulo */
hr.red {
    margin: 10px 0 70px;
    border-top-color: #DCE0E0;
    /* BS5 aplica opacity:.25 a todos los <hr>, y eso despinta tambien el
       filete dorado que dibuja el ::before */
    opacity: 1;
}

hr.red:before {
    content: " ";
    display: block;
    position: absolute;
    width: 35px;
    height: 5px;
    background-color: #B38E5D;
}

/* =====================================================
   Utilidades de espaciado institucionales
   ===================================================== */
.top-buffer          { margin-top: 64px; }
.bottom-buffer       { margin-bottom: 64px; }
.vertical-buffer     { margin-top: 64px; margin-bottom: 64px; }
.small-bottom-buffer { margin-bottom: 26px; }