/*
Theme Name: 100 Bytes
Theme URI: https://github.com/MarcArmengou/100-bytes
Author: Marc Armengou
Author URI: https://www.marcarmengou.com/
Description: 100 Bytes is a theme that aims to look as optimal as possible to deliver your message to your audience using WordPress as a content manager. The idea is simple, make a theme that looks good everywhere, with as little CSS code as possible. In this case the limit is 100 Bytes of CSS information. Actually the compressed CSS code contains 82 bytes of information, but 100 bytes sounds better.
Idea: One day this tweet appeared on my Twitter timeline (https://twitter.com/swyx/status/1449472712720601088) and I thought it was interesting to combine it with WordPress.
Tags: blog, one-column, full-width-template
Version: 1.1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 100-bytes
Copyright: 2024 Marc Armengou
Tested up to: 6.8
Requires PHP: 5.6
*/

html {
	margin:auto;
	line-height:1.75;
	font-size:1.25em
}
.ubicacion-rating {
    font-size: 12px !important;
}

section#comments {
    padding: 20px;
}
p.logged-in-as {
    display: none !important;
}
textarea#comment {
    max-height: 150px;
}
.comment-metadata {
    display: none !important;
}
h2.title-comments {
    font-size: 18px !important;
    font-weight: 700 !important;
}
input#submit {
    width: 100%;
    border: none;
    background: black;
    color: white;
}

.bookly-col-4.bookly-js-repeat-until-wrap {
    display: none;
}
label.bookly-col-2.bookly-col-label {
    display: none;
}
label.bookly-col-1.bookly-col-label.bookly-margin-top {
    display: none;
}
.bookly-box {
    font-size: 22px;
    font-weight: bold;
        margin-left: 15px;
}

.container {
    font-family: Arial, sans-serif;
    margin: auto;
    padding: 5px;
}

.title {
    font-size: 22px;
    font-weight: bold;
}

.location {
    color: gray;
    font-size: 14px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}

.service {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.service-info {
    display: flex;
    flex-direction: column;
}

.service-name {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}

.service-details {
    margin: 2px 0;
    color: gray;
    font-size: 12px;
}

.price {
    font-weight: bold;
    color: black;
}

.btn-reserve {
    background: black;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
}

.btn-reserve:hover {
    background: #333;
}

hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 5px 0;
}

.um-account-meta.radius-1 {
    display: none !important;
}
.site-navigation ul.menu li a {
    /* display: block; */
    padding: 0px 15px !important;
    color: black;
    font-family: 'Open Sans';
}
.bookly-css-root .bookly-form .bookly-w-72 {
    width: 100% !important;
}

.bookly-css-root .bookly\:min-w-\[200px\] {
    width: 100% !important;
}

strong {
    font-size: 18px;
}

.hed-mob{
    margin-top: 50px;
}

span.elementor-button-icon.elementor-align-icon-right {
    margin-top: 8px;
}
span.elementor-button-text {
    text-align: left;
}


.um-profile.um .um-name a {
    color: #ffffff;
}
i.um-faicon-cog {
    color: #ffffff;
}

.um-name a {
    font-size: 22px;
    font-weight: 400;
}



.blockcont{
    min-height: 720px;
}


.um {
    font-size: 15px;
    margin-bottom: 0px !important;
}


a.cont-button {
    background-color: #28a745 !important;
    color: #ffffff !important;
    padding: 5px 10px 5px 10px;
    margin-top: 10px;
    border-radius: 5px;
}

.bookly-form .picker__holder {
    width: 100%!important;
}
.bookly-slot-calendar {
    margin: 10px 0!important;

}

.modal-dialog {
    padding-top: 60px;
}

.cont-button a{
    box-shadow: none;
    background-color: #46a049!important;
    color: #FFFFFF;
        padding: 8px 16px;
}
.td-container.tdc-content-wrap {
    padding-bottom: 50px;
}


.mob-menu-header-holder.mobmenu {
    border-bottom: solid 1px #e0dede;
}


.bookly-customer-appointment-list table.bookly-appointments-table td {
    font-size: 12px!important;
        text-align: center !important;
}

.bookly-customer-appointment-list .bookly-appointments-table th {
    font-size: 12px !important;
    text-align: center !important;
}

.mobmenu-content img {
    width: 100%;
    max-width: 98px;
}


.elementor-widget:not(:last-child) {
    margin-bottom: 5px !important;
}

h3.elementor-icon-box-title {
    margin-top: 0px !important;
    margin-bottom: 0px;
   
}


a.buttonizer-button.buttonizer-button-0-0-3 {
    width: 75px !important;
    height: 75px !important;
}

.picker__box {
    background: #000000 !important;
}
.picker__header {
    background: #000000 !important;
}

input#um-submit-btn {
    background-color: #000000;
    color: #ffffff;
    border-radius: 5px !important;
    width: 100% !important;
}

span.elementor-button-icon.elementor-align-icon-left {
    font-size: 55px;
}

input {
    height: 50px !important;
 
}




svg#Layer_1 {
    border-radius: 50px !important;
}


span.elementor-button-icon.elementor-align-icon-left {
    font-size: 20px;
}


#bookly-tbs .modal-dialog {
    margin-bottom: 100px !important;
}


.div-fijo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff; /* opcional: color de fondo */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* opcional: sombra */
}


h1, h2, h3 {
  font-weight: 600;
  color: #000;
  letter-spacing: -0.3px;
}
p, span {
  font-weight: 400;
  color: #000;
}

/* Párrafos y texto */
p, span, li {
  color: var(--color-secundario);
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* Enlaces */
a {
  color: var(--color-enlace);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
a:hover {
  opacity: 0.7;
}

body {
  font-family: "Inter", "Roboto", "SF Pro Text", sans-serif;
  font-size: 16px;
  color: #000;
  line-height: 1.6;
}

.imagen-destacada-single img {
    display: block;
    width: 100%;
    height: auto;           /* 🔹 mantiene proporción */
    object-fit: contain;    /* 🔹 muestra toda la imagen sin recortar */
    object-position: center;
    margin: 0 auto;
	
    border-radius: 0;       /* opcional */
}


.titulo-post {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.6em;
    margin: 15px 0;
    color: #111;
}

/* === FILTROS === */
.drivi-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.drivi-filtros select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  flex: 1 1 48%;
  background: #fff;
  color: #333;
}

/* === TARJETAS DE INSTRUCTORES === */
.drivi-listado {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drivi-card {
  display: grid;
  grid-template-columns: 150px 1fr 60px; /* imagen / contenido / rating */
  align-items: center;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  height: 150px;
  cursor: pointer;
  transition: transform .2s ease;
}
.drivi-card:hover { transform: translateY(-2px); }

/* === IMAGEN === */
.drivi-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* === CONTENIDO === */
.drivi-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  font-family: 'Poppins', sans-serif;
  color: #222;
  overflow: hidden;
}
.drivi-nombre {
  font-weight: 700;
  font-size: 1.05em;
  margin-bottom: 3px;
}
.drivi-zona {
  font-size: 0.85em;
  color: #777;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.drivi-precio {
  font-weight: 700;
  border-radius: 6px;
  font-size: 0.9em;
  display: inline-block;
}
.drivi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.drivi-tags span {
  background: #f3f3f3;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.75em;
  color: #444;
}

/* === RATING (columna derecha) === */
.drivi-rating {
  text-align: center;
  font-size: 0.9em;
  color: #000; /* negro */
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.drivi-rating i {
  color: #000;
  font-size: 18px;
  margin-bottom: 3px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .drivi-card {
    grid-template-columns: 120px 1fr 50px;
    height: 130px;
  }
  .drivi-img {
    width: 120px;
    height: 130px;
  }
  .drivi-content {
    padding: 10px 12px;
  }
  .drivi-nombre { font-size: 1em; }
}