/* ==========================
   Estilos Responsivos - móviles (máx. 768px)
   Poder Judicial Yucatán (rescate UX)
   ========================== */

@media screen and (max-width: 768px) {

  /* =============================
     GENERAL
  ============================== */

  body {
    font-size: 15px;
  }

  #header{
    position: fixed;
    top: 0px;
    z-index: 1001;
    width: 100%;
  }
  
  #page-container > nav.navbar.navbar-expand-lg.sticky-top.navbar-dark{
     top: 4.1rem !important;
     margin-bottom: 4.1rem;
  }

  .section-title {
    font-size: 1.3rem !important;
    text-align: center;
  }

  .note h3,
  .note h4,
  .note h5 {
    font-size: 16px !important;
  }
  
  /* ============================
    Swipers - Carrusel
  ============================ */

  .container-xl.swiperContainer{
    display: none !important;
  }

  .categories-area.section-padding30 > .container{
    padding-top: 10px !important;
    padding-bottom: 0rem !important;
  }

  /* =============================
     INICIO
  ============================== */

  .texto_sitio,
  .back_tramites {
    font-size: 14px !important;
    padding: 1rem !important;
    line-height: 1.4;
  }

  .tramites_servicios {
    height: 8rem;
  }

  .cat-cap {
    font-size: 13px !important;
    text-align: center;
  }

  .flip-container > .card {
    height: 9rem !important;
  }

  /* IMÁGENES / ÍCONOS */
  .fa-4x {
    font-size: 2.5em !important;
  }

  .fa-3x {
    font-size: 2em !important;
  }

  .categories-area  .ver_mas_t {
      height: auto !important;
      padding: 1rem !important;
      font-size: 15px !important;
      text-align: center;
      background: #7D7D7D !important;
      color: white !important;
      box-shadow: 1px 1px 5px #000;
      border-radius: 15px;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  /* NOTES */
  .categories-area .note {
    flex-direction: column;
    padding: 10px !important;
    min-height: auto !important;
  }

  .categories-area .note > .note-content {
    margin-left: 0 !important;
    text-align: center;
  }

  .categories-area .note > .note-content .btn.btn-tramites{
	  padding: 0.4rem 0.8rem 0.4rem 0.8rem;
  }

  /* Sitios de Interés  */

  #mobile-list .container_foto,
  #mobile-list .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    margin: 0 auto;
    display: block !important;
    position: relative !important;
  }

  #mobile-list .main > a >.front,
  #mobile-list .main > a > .back {
    width: 100% !important;
    height: auto !important;
    padding: 1rem;
    box-shadow: 1px 1px 5px #000;
    border-radius: 15px;
    position: relative;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  #mobile-list > .divMicrositios .main .icon {
    font-size: 2.2em !important;
    margin-bottom: 0.5rem;
    color: white !important;
    text-align: center;
  }
  #mobile-list .container_foto .main .ver_mas_boton_micrositios {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 1rem !important;
    font-size: 15px !important;
    text-align: center;
    background: #7D7D7D !important;
    color: white !important;
    box-shadow: 1px 1px 5px #000;
    border-radius: 15px;
  }

  .note-sitio > .note-sitio-content{
    padding-left: 1rem !important;
  }


  /* =============================
     VALORES INSTITUCIONALES
  ============================== */

  /* Aplica solo a las tarjetas dentro de #about-us-content */
  
  #about-us-content .valores {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
  }

  #about-us-content .valores .card-body {
    padding: 1rem 0.5rem;
  }

  #about-us-content .valores h6.card-title {
    font-size: 1rem;
  }

  #about-us-content .valores i {
    font-size: 1.5rem;
  }

  /* Fuerza las columnas a ocupar todo el ancho */

 #about-us-content .row > .col-sm-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #about-us-content .card {
    height: auto !important;
  }

  #about-us-content > .container > .about-us-content > .row.row-space-10 > .col-lg-6.col-md-6.col-sm-6.col-xs-6 {
    margin-bottom: 2rem;
  }

   /* =============================
     VALORES INSTITUCIONALES
  ============================== */

  #about-us-content .card-body .btn.btn-dark.btn-tramites {
    padding: 0.4rem 0.8rem 0.4rem 0.8rem;
  }

  #about-us-content .tarjetas_tramites_servicios{
	  padding-left: 1rem;
  }
  
  #about-us-content .tarjetas_tramites_servicios > .row > .col-12 > .card{
	  width: 21rem !important;
  }

  #resultado_tramites_servicios .card > .card-body .form-group.row > .col-sm-6 {
    margin-bottom: 1rem;
    text-align: center !important;
  }

  .texto_sitio:hover {
    background-color: #fff !important;
  }

  .tab button{
    width: 100%;
    text-align: left;
  }

  .tab button:hover{
    width: 100%;
  }

  /* ============================
    Consultas
  ============================ */
  
  #divRegistro > .col-2.mb-2.text-center.campo-consulta{
    padding-right: 14rem;
    padding-left: 2rem;
  }

  #resultado_tramites_servicios .card > .card-body .form-group.row > .col-sm-6{
      margin-bottom: 1rem;
      text-align: center !important;
  }

    /* ============================
    Citas
  ============================ */

  #page-container.fade.show > .content > #content #formulario_citas{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

 /* ============================
    Informes de Actividades
  ============================ */
  
  .table.table-striped.table-bordered{
    width: 100% !important; 
    height: auto ;
    object-fit: cover;
    object-position: center top; 
    display: block;
  }

  /* ============================
    Comunicados de Prensa
  ============================ */

  #divListaComunicados .card-body .card-title{
      text-align: justify;
  }

  #divListaComunicados .card-body .card-text{
      text-align: justify;
  }

  /* ============================
    prensa_comunicado
  ============================ */

  .section-container > .container > .about-us-content > p > img{
    max-width: 100%;
  }

}