/* ==========================================================================
    Proyecto: Buscador fuse JS
    Autor: Pablo Andrés Escalona Villagrán
    Descripción: Estilos base y componentes reutilizables del buscador de trámites
    Fecha: 2025-07-03
    ========================================================================== */

    /* ------------------------------
    Variables CSS
    --------------------------------- */

hr{
display: none;
}

#buscadortg-interior input {
width: 100% !important;
}

#buscadortg-interior #tgr-lista-menu-buscador-abajo {
width: 100% !important;
}

    #tgr-label-input-buscador-tramites-abajo {
      /* Modificado según propuesta de diseño*/
      width: 324px !important;
      height: 23px;
      color: #2F3C89 !important;
      font-family: "Roboto", sans-serif !important;
      font-weight: 400 !important;
      font-size: 18px !important;
      line-height: 1.3 !important;
      text-align: left !important;
    }

    #tgr-input-buscador-tramites-abajo {
     /* Modificado según propuesta de diseño*/
      width: 611px !important;
      height: 60px !important;
      padding: 8px 8px 8px 40px !important;
      /*background: #FFFFFF !important;*/
      border-color: #C0C0C0!important;
      border-width: 1px !important;
      border-style: solid !important;
      border-radius: 4px !important;
      background-image: url('/wp-content/uploads/2025/10/icono-search.svg') !important;
      background-repeat: no-repeat !important;
      background-position: 8px center;
      font-size: 16px;
    }

    #tgr-input-buscador-tramites-abajo::placeholder {
      color: #2f3c89;
      opacity: 1;
      font-weight: 400;
    }

    #tgr-input-buscador-tramites-abajo:-ms-input-placeholder {
      color: #2f3c89;
      font-weight: 400;
    }

    #tgr-input-buscador-tramites-abajo::-ms-input-placeholder {
      color: #2f3c89;
      font-weight: 400;
    }
  
/* X buscador */
    #tgr-input-buscador-tramites-abajo::-webkit-search-cancel-button {
        position: relative;
        right: 5px;
        display: block;
        -webkit-appearance: none;
        height: 24px;
        width: 24px;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzJGM0M4OTt9DQoJLnN0MXtmaWxsOm5vbmU7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOSw2LjRMMTcuNiw1TDEyLDEwLjZMNi40LDVMNSw2LjRsNS42LDUuNkw1LDE3LjZMNi40LDE5bDUuNi01LjZsNS42LDUuNmwxLjQtMS40TDEzLjQsMTJMMTksNi40eiIvPg0KPHBhdGggY2xhc3M9InN0MSIgZD0iTTAsMGgyNHYyNEgwVjB6Ii8+DQo8L3N2Zz4NCg==);
      background-repeat: no-repeat;
      background-position: center;
    }

    

    #tgr-input-buscador-tramites-abajo::-webkit-search-cancel-button:hover {
        cursor: pointer;
    }



    #tgr-input-buscador-tramites-abajo:focus {
        outline: 2px solid #FF7A00;
        display: inline-block;
        /*box-shadow: 0 0 0 2px #FF7A00;*/
        border-radius: 2px;
    }

    
    #tgr-lista-menu-buscador-abajo {
        width: 611px !important;
        min-height: fit-content;
        background-color: #FFFFFF;
        margin-top: 1px;   /* espacio por arriba del párrafo */
        margin-bottom: 1px; /* espacio por debajo del párrafo */
        -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.4);
        box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.4);
        /*padding-left: 20px !important;*/ /*borrar*/
        color: #444444 !important;
        font-family: "Roboto", sans-serif !important;
        font-weight: 400 !important;
        font-size: 16px !important;
z-index: 100 !important; /*revisar si es necesario*/
 
    } 

   
    #tgr-lista-menu-buscador-abajo.open-search {
        width: 611px;
        /*max-height: 450px;*/
        overflow: auto;
    }

    .open-search {
        position: absolute !important;
        z-index: 1 !important;
    }

    #tgr-lista-menu-tramites-abajo {
        list-style-type: none;
        padding: 10px 6px;
    }

    #tgr-lista-menu-tramites-abajo li {
        padding: 10px 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    #tgr-lista-menu-tramites-abajo li:last-of-type {
        border-bottom: none;
    }

    #tgr-lista-menu-tramites-abajo li:hover, #tgr-lista-menu-tramites-abajo li:focus, #tgr-lista-menu-tramites-abajo li:active {
        background-color: #f0f0f0;
    }

    #tgr-lista-menu-tramites-abajo li a {
        color: #444444;
    }

    
    #tgr-lista-menu-tramites-abajo li span {
        color: #6f6f6f;
        font-size: 14px;
        margin-left: 5px;
    }

    #tgr-lista-menu-tramites-abajo li a:hover, #tgr-lista-menu-tramites-abajo li a:focus, #tgr-lista-menu-tramites-abajo li a:active {
        color: #2f3c89;
    }

    #tgr-lista-menu-tramites-sin-res {
        padding-bottom: 10px;
    }

    #tgr-lista-menu-tramites-sin-res span {
        font-size: 1rem !important;
        color: #444444 !important;
    }

    #tgr-menu-search-list-to-centro-ayuda {
        color: #3d8af7 !important;
        text-decoration: underline !important;
    }

    #tgr-lista-menu-tramites-sin-res:hover {
        background-color: #FFFFFF !important;
    }

    #tgr-lista-menu-tramites-sin-res hr {
        margin: 10px 0;
    }
    
    #tgr-lista-menu-tramites-sin-res-enviar label {
        font-weight: 400;
        margin-right: 12px;
    }

    
    #tgr-lista-menu-tramites-sin-res-enviar #tgr-input-comentario-buscador {
        min-width: 300px;
        border-radius: 4px;
        box-shadow: none;
        border: 1px solid #ccc;
        padding: 10px;
        margin-right: 12px;
    }


    #tgr-lista-menu-tramites-sin-res-enviar #tgr-input-comentario-buscador:focus {

        outline: 1px solid #99c0f6;

    }



    #tgr-lista-menu-tramites-sin-res-enviar #tgr-input-comentario-buscador::placeholder {

      font-style: italic;

    }

    #tgr-lista-menu-tramites-sin-res-enviar #tgr-input-comentario-buscador:-ms-input-placeholder {

      font-style: italic;

    }

    #tgr-lista-menu-tramites-sin-res-enviar #tgr-input-comentario-buscador::-ms-input-placeholder {

      font-style: italic;

    }

    

    #tgr-lista-menu-tramites-sin-res-enviar #tgr-boton-comentario-buscador {

        box-shadow: none;

        border: none;

        padding: 8px 28px;

        border-radius: 4px;

        background-color: #3d8af7;

        color: #FFFFFF;

        font-size: 14px;

    }

    

    #tgr-lista-menu-tramites-sin-res-enviar #tgr-boton-comentario-buscador:hover {

        background-color: #4a85d8;

    }

    

    #tgr-lista-menu-tramites-sin-res-enviar-gracias {

        text-align: center;

    }

    

    #tgr-lista-menu-tramites-sin-res-enviar-gracias span {
        font-size: 16px !important;
        font-weight: 400;
        color: #444444 !important;
    }

    .floatingNav {
        -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3) !important;
        -moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3) !important;
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3) !important;

    }
     mark {
        background-color: transparent !important;
        color: #1162EE !important;
        font-weight: bold !important;
        padding: 0px !important;
    }
   

   /*Nuevo buscador*/

    #tgr-contador-resultados{
        width: 611px !important;
        height: 21px !important;
        color: #444444 !important;
        background-color: #ffffff !important;
        font-family: "Roboto", sans-serif !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        text-align: left !important;
        padding-left: 20px !important;
        border: none !important;
    }

    #searchResults{
        /*width: 590px !important;*/ /*borrar*/
        max-height: 400px;       /* Altura máxima visible */
        overflow-y: auto;        /* Scroll vertical cuando sea necesario */
        padding: 0px 0px 0px 0px !important; 
        margin: 0;
        list-style: none;
    }
    #searchResults li:first-child {
        border-bottom: transparent !important;
    }

    #searchResults li {
        padding-top: 20px !important;   /* espacio por arriba del párrafo */
        padding-bottom: 20px !important; /* espacio por debajo del párrafo */
        border-bottom: 1px solid #C0C0C0;
        padding-left: 20px;
    }

    #searchResults li:hover {
        background-color: #F5F5F5;
        cursor: pointer;
    }

    #searchResults li:focus {
        background-color: #E3F2FD !important; /* azul clarito */
        outline: none; /* opcional, para quitar el contorno predeterminado */
    }

    .texto-lector-pantalla{
        clip: rect(1px, 1px, 1px, 1px);
        word-wrap: normal !important;
        border: 0;
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        overflow-wrap: normal !important;
        padding: 0;
        position: absolute !important;
        width: 1px;
    }

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

    #tgr-input-buscador-tramites-abajo,
    #tgr-lista-menu-buscador-abajo.open-search,
    #searchResults {
        width: 100% !important;
    }

    #tgr-lista-menu-buscador-abajo.open-search {
        position: absolute; 
        overflow: auto;
        max-height: 245px;
    }
   
    #tgr-lista-menu-tramites-abajo li a {
        /*font-size: 14px;*/
          font-size: 16px;
    }


    #tgr-lista-menu-tramites-abajo li span {
        display: block;
        margin-left: 0;
    }


    #tgr-lista-menu-tramites-sin-res span {
        /*font-size: 14px !important;*/
        font-size: 16px !important;
        color: #444444 !important;
    }

    #tgr-lista-menu-tramites-sin-res-enviar #tgr-input-comentario-buscador {
        min-width: 100%;
        margin: 2px 0 6px 0;
    }

    #tgr-lista-menu-tramites-sin-res-enviar #tgr-boton-comentario-buscador {
        float: right;
        padding: 6px 20px;
        /*font-size: 12px;*/
        font-size: 14px;
        margin-bottom: 12px;
    }

   
    #tgr-lista-menu-tramites-sin-res-enviar-gracias {
        text-align: left;
    }

    #tgr-lista-menu-tramites-sin-res-enviar-gracias span {
        /*font-size: 12px !important;*/
        font-size: 14px !important;
        color: #444444 !important;
    }

   /* mark {
        background-color: yellow !important;
        color: red !important;
        font-weight: bold !important;
    }*/
    

   /*Nuevo buscador*/

    #tgr-contador-resultados{
        width: 200px !important;
        height: 21px !important;
        color: #444444 !important;
        background-color: #ffffff !important;
        font-family: "Roboto", sans-serif !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    #searchResults{
        list-style-type: none !important;
        padding-left: 0 !important; /* Opcional: elimina el espacio reservado para las viñetas */

    }

  

}

/* Fin de los estilos para pantallas pequeñas */