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

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

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

  body {
    font-size: 15px;
  }

  .section-title {
    font-size: 20px !important;
    text-align: center;
  }

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

  .container.row.note-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #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;
  }

  /* =============================
     TARJETAS / FLIPBOXES
  ============================== */
  
  .divMicrositios.main.flip-container.container_foto.card {
    width: 100% !important;
    max-width: 100% !important;
    height: 12rem !important;
    display: block !important;
    margin: 0 auto 1rem auto !important;
  }

  .flip-container > .card {
    height: 9rem !important;
  }
  
  .divMicrositios .main .front,
  .divMicrositios .main .back {
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
	margin-bottom: 2rem !important;
  }

  .divMicrositios > .row >  .container_foto{
	  margin-bottom: 0rem !important;
  }
  
  .texto_sitio,
  .back_tramites {
    font-size: 14px !important;
    padding: 1rem !important;
    line-height: 1.4;
  }

  .ver_mas_boton_micrositios {
    max-width: 100% !important;
    height: auto !important;
  }

  .divMicrositios .main .icon {
    font-size: 2.5em;
    margin: 0.5rem 0;
  }

  .skills h5 {
    font-size: 14px !important;
    text-align: center;
  }
  
  .tramites_servicios {
    height: 8rem;
  }

  /* =============================
     BOTONES Y NOTAS
  ============================== */

  .btn-tramites.btn-acceso_registro.btn-dark.btn-lg {
    width: 100% !important;
    margin-top: 10px !important;
    font-size: 16px !important;
  }

  .note {
    flex-direction: column;
    padding: 10px !important;
    min-height: auto !important;
  }

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

  .note h3,
  .note h4,
  .note h5 {
    font-size: 16px !important;
  }

  /* =============================
     IMÁGENES / ÍCONOS
  ============================== */

  .fa-4x {
    font-size: 2.5em !important;
  }

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

  /* =============================
     FIXES VARIOS
  ============================== */

  .front_tramites {
    position: relative !important;
    text-align: center;
  }

  .back_tramites {
    text-align: center;
    padding: 1rem;
  }

  #mobile-list {
    padding-top: 10px !important;
  }

  /* Oculta hover flip para móviles (mal soporte en touch) */
  .flip-container:hover .card {
    transform: none !important;
  }

  /* Quita líneas absurdas */
  #h1, #h5 {
    font-size: 1.2rem !important;
  }

  /* Ajuste de iconos para que no deformen */
  .card span.icon {
    display: block;
    text-align: center;
  }

  .note-sitio > .note-sitio-content{
    padding-left: 1rem !important;
  }
  
  .tarjetas_tramites_servicios{
	  padding-left: 1rem;
  }
  
  .tarjetas_tramites_servicios > .row > .col-12 > .card{
	  width: 21rem !important;
  }
  
  .btn.btn-dark.btn-tramites{
	  padding: 0.4rem 0.8rem 0.4rem 0.8rem;
  }
  
  .texto_sitio:hover {
    background-color: #fff !important;
  }

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

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

  #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;;
  }

  /* ============================
    Sitios de Interés - Estilos Responsivos
  ============================ */

  #mobile-list.row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1rem;
    padding: 0 12px;
  }

  #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 {
    display: block !important;
    height: auto !important;
    text-decoration: none;
  }

  /* RESTAURAR ESTILO OSCURO ORIGINAL */
  #mobile-list .main .front,
  #mobile-list .main .back {
    background: #0e1826 !important;
    color: white !important;
    width: 100% !important;
    height: auto !important;
    padding: 1rem;
    box-shadow: 1px 1px 5px #000;
    border-radius: 15px;
    position: relative;
    transform: none !important;
    display: block !important;
  }

  /* TEXTO INTERNO BLANCO */
  #mobile-list .main .icon {
    font-size: 2.2em !important;
    margin-bottom: 0.5rem;
    color: white !important;
    text-align: center;
  }

  #mobile-list .main .skills,
  #mobile-list .main .skills h5,
  #mobile-list .main .front .data-wrapper .data,
  #mobile-list .main .back .data-wrapper .data {
    color: white !important;
    text-align: center;
    font-size: 14px;
  }

  #mobile-list .main .skills {
    position: static !important;
    transform: none !important;
    padding: 0.5rem 0;
  }

  /* BOTÓN VER MÁS */
  .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;
  }

  .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;
  }

  /* ============================
    Swipers - Carrusel
  ============================ */

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

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

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

  .section-container > .container > .about-us-content > p > img{
    max-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;
  }

  /* ============================
    Consultas
  ============================ */

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

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

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

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

  /* ============================
    poder judicial -> nosotros -> que_es_el_poder_judicial.php
  ============================ */

  /* 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;
  }

  /* ============================
  INICIO->Publicaciones Tabla
  ============================ */
  .table.table-striped.table-bordered{

  width: 100% !important; 
    height: auto ;
    object-fit: cover;
    object-position: center top; 
    display: block;
  }


}