.logo-brand img {
  height: 60px;
}

.topbar-area {
  background-color: #000000;
}

.slider-section2 {
  background-color: #44811e;
}

.facilities-section2 {
  background-color: #44811e;
}

.heading {
  color: #000000;
}

.meta-tag span {
  color: #000000;
}

.dentus-btn-gradient {
  background: linear-gradient(-45deg, rgb(57, 117, 1) 20%, rgb(0, 112, 0) 100%);

}

.dentus-btn-gradient {
  color: white !important;
}

.dentus-btn-gradient:after {
  background: linear-gradient(-45deg, #0d9e00 20%, #337823 100%);
}

.dentus-btn {
  min-width: 150px;
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  font-weight: 500;
  padding: 10px;
  border: 1px solid rgb(65 65 65 / 40%);
  color: #565656;
  transition: 0.3s;
  transition-property: transform;
  position: relative;
}

.dentus-btn:hover {
  background: green;
  color: white;

}

.form-check-input {

  border: var(--bs-border-width) solid #505050;
}

#mensaje_error {
  color: red;
  font-weight: bold;
  font-size: 16px;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.m-b-50 {
  margin-bottom: 50px;
}

p {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.ex-content span {

  color: rgb(8, 92, 0);
}

.accordion-box .accordion-button.collapsed:after {

  background-color: #279700;
}

.footer-section {
  background: #2c2c2c;
}

.doctor-details h3 {

  color: #019100;
}

.services-details-section {
  padding-top: 40px;
}

.doctor-personal-info h1 {
  color: rgb(0, 36, 0);
  font-size: 43px;
  margin-bottom: 20px;
}

.breadcrumb-section {

  padding: 300px 0px;
}

.header-area .stellarnav ul li li a:hover {
  background-color: #137400;
}

.footer-content .schedule-question {
  background-color: rgb(0 0 0 / 79%);
}

#enviando {
  display: none;
}

#calendario {
  width: 100% !important;
  max-width: 100%;
  display: block;
}

.flatpickr-calendar {
  width: 100% !important;
  max-width: 100%;
}

.flatpickr-time {
  width: 300px;
  margin: 0 auto;
}

.flatpickr-rContainer {
  margin: 0 auto;
  max-width: 300px;
}



/* --- ESTILOS RESPONSIVOS PARA LA TABLA DE FECHAS --- */

@media (max-width: 768px) {

  /* Ocultamos los encabezados originales de la tabla en móvil */
  #tablaFechas thead {
    display: none;
  }

  /* Convertimos la tabla, cuerpo, filas y celdas en bloques */
  #tablaFechas,
  #tablaFechas tbody,
  #tablaFechas tr,
  #tablaFechas td {
    display: block;
    width: 100%;
  }

  /* Le damos a cada fila la apariencia de una "tarjeta" */
  #tablaFechas tr {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  /* Posicionamos las celdas y les damos espacio */
  #tablaFechas td {
    text-align: right;
    /* Alineamos el contenido a la derecha */
    padding-left: 50%;
    /* Creamos espacio a la izquierda para la etiqueta */
    position: relative;
    border: none;
    margin-bottom: 10px;
  }

  /* Usamos el pseudo-elemento ::before para crear las etiquetas */
  #tablaFechas td::before {
    content: attr(data-label);
    /* Usaremos un atributo que añadiremos con JS */
    position: absolute;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    font-weight: bold;
    text-align: left;
  }

  /* Estilos específicos para la celda de dirección */
  #tablaFechas td:nth-of-type(3) {
    padding-left: 10px;
    /* Quitamos el padding para que ocupe todo el ancho */
    text-align: left;
  }

  #tablaFechas td:nth-of-type(3)::before {
    content: '';
    /* No necesitamos etiqueta para la dirección, los inputs son claros */
  }

  /* Centramos el botón de eliminar */
  #tablaFechas td:last-child {
    text-align: center;
    padding-left: 0;
  }

  #tablaFechas td:last-child::before {
    content: '';
    /* Sin etiqueta para el botón */
  }
}

#contacto {
  scroll-margin-top: 180px;
}

/* --- ESTILOS MODERNOS PANEL ADMIN --- */
/* Margen 50px respecto al menú para no verse pegado */
.page-section {
  padding-top: 50px !important;
}

.admin-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

.admin-header-icon {
  background-color: #f8fafc;
  color: #2563eb;
  border-radius: 14px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  margin-right: 1.25rem !important;
}
.admin-header-icon i {
  font-size: 24px;
}

.admin-header-icon-green {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-radius: 12px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-header-icon-orange {
  background-color: #fff3e0;
  color: #e65100;
  border-radius: 12px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-header-icon i,
.admin-header-icon-green i,
.admin-header-icon-orange i {
  font-size: 1.8rem;
  line-height: 1;
}

.admin-title {
  color: #0f172a;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 2px 0;
}

.admin-subtitle {
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 400;
  margin: 0;
}

.admin-btn {
  border-radius: 8px;
  font-weight: 500;
}

.admin-btn-outline {
  border-radius: 8px;
  color: #4a5568 !important;
  border-color: #cbd5e0 !important;
  font-weight: 500;
}

.admin-btn-outline:hover {
  background: #f8f9fa;
}

.admin-filter-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #6c757d;
  display: block;
  margin-bottom: 0.5rem;
}

.admin-input-group {
  display: flex;
}

.admin-input-group>.input-group-prepend>.input-group-text {
  border-radius: 8px 0 0 8px;
  color: #a0aec0;
  background-color: #fff;
  border-right: none;
}

.admin-input-group>.form-control {
  border-radius: 0 8px 8px 0;
  box-shadow: none !important;
  border-left: none;
}

.admin-input-group>.form-control:focus {
  border-color: #ced4da;
}

.admin-checkbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 0.9rem;
  color: #4a5568;
}

.admin-custom-check {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0;
}

.admin-custom-check input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin: 0;
}

.admin-select {
  border-radius: 8px;
  box-shadow: none !important;
}