/*
Theme Name: InfoSOS
Theme URI: https://infosos.es  
Version: 1.0
Description: Tema hijo para infosos
Author: Garajedoce
Author URI: https://infosos.es
Template: Divi
*/  

:root {
  --main-color:#3f562b;
  --main-light:#a1ae50;
  --sec-color:#974663;
  --back-color: #e2e2e0;
  --azul:#516477;



  --separacion: 25px;
  --separacion-neg: -25px;
  --separacion-peq: 10px;
  --separacion-grande:      40px;
  --separacion-muy-grande:  150px;
  --separacion-celdas:      30px;
  --separacion-celdas-neg: -30px;

  --separacion-seccion: 25px;
  --separacion-cabecera: 15px;



  /*  ANCHURAS DE CONTENIDO   */
  --ancho-desktop:              80%;
  --ancho-desktop-agente:       95%;
  --ancho-tablet:               90%;
  --ancho-mobile:               90%;

}

/*    GENERAL   */
.et_social_inline_bottom
{
  margin-top:var(--separacion) !important;
}

.mensaje
{
  text-align: center;
}

.mensaje.error
{
  background-color: #ff5d5d;
  color:white;  
}

.banner-menu .et_pb_column
{
  display: flex;
  justify-content: flex-end;
  gap:5px;
}

#main-content button.boton,
#main-content form.frontend-form div:not(.mce-widget) > button
{
  background-color: var(--main-color);
  padding: .1em 1em;
  font-size: 18px;
  color: white;
  border:0px;
  height: 40px;
  text-transform: uppercase;
} 

form.frontend-form .select2-selection--single
{
  height: 40px;
  padding-top: 5px;
  border-radius: 0px;
} 

form.frontend-form .select2-selection--multiple
{
  border-radius: 0px;   
}

#main-content button.boton:hover,
#main-content form.frontend-form div:not(.mce-widget) > button:hover
{
  background-color: var(--main-light);
}

#main-content button.boton.alternativo
{
  background-color: var(--azul);
  
}

#main-content button.boton.alternativo:hover
{
  filter:brightness(1.2); 
  cursor:pointer;
}

#main-content form.entrada
{
  display: flex;
  gap:15px;
}

#main-content form.entrada input:not([type='checkbox']), 
#main-content form.entrada select, 
#main-content form.frontend-form input:not([type='checkbox']),
#main-content form.frontend-form select
{
  height: 40px;
  padding:0px 10px 0px 10px;
}

#main-content form.frontend-form input[type='number']
{
  border: 1px solid #7e8993;
}

#main-content form.frontend-form  .acf-field-true-false
{
  display: flex;
}

/*  Para maquetar el contenido del post en el generador de temas    */

.et_pb_row .et_pb_post_content .et_pb_row
{
    width:100%;
}

.et_pb_row .et_pb_post_content .et_pb_section
{
    padding:0%;
}

input[type=submit]
{
  background-color: #5f7a42;
  color: white;
  border:0px;
  padding: 0.3em 1em; 
  font-weight: 700; 
  font-size: 20px;
  text-transform: uppercase;
}

input[type=submit]:hover
{
    background-color: #7a924d;
    cursor: pointer;
}

#loginform input[type=submit]:hover
{ 
  background-color: #7a924d;
  color:white;
}

#loginform input[type=submit]
{
  background-color: white;
  color: #5f7a42;
}

.material-icon
{
  color:var(--sec-background-color) !important;
  font:normal normal normal 36px/1 "Material Design Icons";
}

.icono-favorito::before
{
  cursor: pointer;
}

.icono-favorito{
  font-size:26px !important;
}

.icono-favorito::before
{
  content:"\F02D5";
}

.icono-favorito.si-favorito::before{
    content:"\F02D1";
  }


  /*  Menu usuario  */

  #menu-menu-usuario .current-menu-item 
  {
    background-color: #3f562b;
  }

  #menu-menu-usuario .current-page-ancestor:not(.et_pb_menu_page_id-5765)
  {
    background-color: #3f562b;
  }

  #menu-menu-usuario li
  {
    align-items: center;
    margin: 0px;
    padding: 10px;
  }

  #menu-menu-usuario li a
  {
    padding:0px;
  }


  /*  Maquetacion de los contenidos */
  .listado-posts
  {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .listado-posts.en-los-medios
  {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .listado-posts .cabecera
  {
    margin-bottom:35px;
  }

  .listado-posts.horizontal
  {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 25px;
  }

  .listado-posts .item
  {
    border: 1px solid var(--azul);
    position: relative;
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    grid-row-gap: 15px;
    max-height: 250px;
    overflow: hidden;
  }

  .listado-posts .item.medios
  {
    border:0px;
    grid-template-rows: 200px auto;
    grid-template-columns: unset;
    max-height: unset;
  }

  .listado-posts .item.anuncio
  {
    border:0px;
    display: flex;
    justify-content: center;
    margin: 40px;
  }

  .listado-posts .item.cuadrado
  {
    display: flex;
    gap: 0px;
    flex-direction: column;
    max-height: unset;

  }

  .listado-posts .item.ayuda::after
  {
    content: 'OFERTA';
    position: absolute;
    background-color: var(--azul);
    color:white;
    top: 10px;
    right: 0px;
    padding: 0px 10px;
  }

  .listado-posts .item.demanda::after
  {
    content: 'DEMANDA';
    position: absolute;
    background-color: var(--azul);
    color:white;
    top: 10px;
    right: 0px;
    padding: 0px 10px;
  }

  .listado-posts .item .datos
  {
    padding: 15px;
    display: flex;
    flex-direction: column;
  }

  .listado-posts .item.medios .datos
  {
    padding: 0px;
  }

  .listado-posts .item .datos .titulo
  {
    margin-bottom:30px;
  }

  .listado-posts .item.cuadrado .datos .titulo
  {
    margin-bottom:unset;
  }

  .listado-posts .item .datos .opciones
  {
    display: flex;
    flex-direction: row;
    gap:10px;
    justify-content: flex-end;
    margin-top:auto;
  }

  .listado-posts .item .imagen img
  {
    height: 100%;
    max-height: 250px;
    width: 100%;
    object-fit: cover;
    
  }

  /*  Valoraciones  */
  .contenedor-valoraciones.seleccionable span.star:hover
  {
    color:gold;
    cursor:pointer;
  }

  .item.ayuda .datos .opciones .contenedor-valoraciones
  {
    width: 100%;
  }

  /*.contendor-valoraciones .span.star
  {
    
  }*/

  .contenedor-valoraciones span.star.seleccionado
  {
    color:gold;
  }

  /*  Fichas de ayuda/demandas  */
  .listado-posts .item .imagen.no-img
  {
    padding:25px; 
    background-color: silver;
  }

  .listado-posts .item .imagen.no-img img
  {
    object-fit: contain;
  }