/* estilos_perfil.css */

/* -------------  PALETA Y RESET  ------------- */
:root {
  --c-principal: #0097b2;       /* azul corporativo */
  --c-secundario: #5d6d7e;      /* gris secundario  */
  --c-texto-principal: #333;
  --c-texto-secundario: #666;
  --c-fondo: #f5f6f7;
  --c-blanco: #fff;
  --c-borde-suave: #e1e4e8;
  --c-sombra-suave: rgba(0,0,0,.06);
  --c-estrella-llena: #f1c40f;
  --c-estrella-vacia: #ccc;
  --c-verde-exito: #28a745;
  --c-rojo-error: #e32636;
  --c-azul-info: #17a2b8;
  --c-amarillo-advertencia: #ffc107;

  --font-principal: 'Roboto', Arial, sans-serif;
  --radio-borde-general: 12px; /* Bordes redondeados más consistentes */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-principal);
  background-color: var(--c-fondo);
  color: var(--c-texto-principal);
  line-height: 1.6;
}

h1, h2, h3 {
  color: var(--c-secundario);
  margin-bottom: 0.5em;
}
h1 { font-size: 2rem; font-weight: 700;}
h2 { font-size: 1.5rem; font-weight: 500;}
h3 { font-size: 1.2rem; font-weight: 500;}


a {
  color: var(--c-principal);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1000px;
  margin: 1.5rem auto; /* Espacio arriba/abajo reducido */
  padding: 0 1rem;
}

/* -------------  ENCABEZADO  ------------- */
.header {
  height: 280px; /* Ligeramente menos alto */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.header::after { /* Sutil gradiente oscuro arriba */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.1) 40%, transparent 70%);
}

/* -------------  SECCIÓN DE PERFIL  ------------- */
.profile-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  transform: translateY(-70px); /* Ajuste para que el avatar sobresalga más */
}
.profile-inner {
  display: flex;
  align-items: flex-end; /* Alinea avatar e info */
  gap: 1.5rem; /* Espacio entre avatar e info */
  background-color: var(--c-blanco);
  padding: 1.5rem;
  border-radius: var(--radio-borde-general);
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
}
.profile-avatar {
  width: 150px; /* Avatar más grande */
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--c-blanco);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  background-color: var(--c-blanco); /* Fondo por si la imagen no carga */
}
.profile-data {
  flex: 1;
}
.profile-name {
  font-size: 2rem; /* Más grande */
  font-weight: 700;
  color: var(--c-texto-principal);
  margin-bottom: 0.1em;
}
.profile-user {
  font-size: 1rem;
  color: var(--c-texto-secundario);
  margin-bottom: 0.5rem;
}
.info-block {
  margin-top: 0.5rem;
}
.star {
  font-size: 1.1rem;
  color: var(--c-estrella-llena);
  margin-right: 2px;
}
.star.empty {
  color: var(--c-estrella-vacia);
}
.address {
  font-size: 0.9rem;
  color: var(--c-texto-secundario);
  margin: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.address i { /* Icono de pin */
  color: var(--c-principal);
  font-size: 1rem;
}

.contact-actions {
  display: flex;
  gap: 12px;
  margin-top: 0.8rem;
}
.action-btn {
  width: 40px; /* Botones de contacto más grandes */
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--c-blanco);
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}
.action-btn.whatsapp { background-color: #25D366; }
.action-btn.phone { background-color: var(--c-principal); }
.contact-actions .action-btn.waze { background-color: #33ccff; }

.action-btn i { font-size: 1.2rem; }


.biz-desc {
  font-size: 0.9rem;
  color: var(--c-texto-secundario);
  margin-top: 0.5rem;
  line-height: 1.5;
  max-height: 4.5em; /* Muestra 3 líneas por defecto */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.biz-desc.expanded {
    max-height: 1000px; /* Un valor grande para mostrar todo */
}
.read-more {
  color: var(--c-principal);
  font-weight: 600;
  cursor: pointer;
  margin-left: 6px;
  display: inline-block; /* Para que no salte de línea innecesariamente */
}

/* Pestañas de Navegación del Perfil */
.profile-tabs {
  margin-top: 2rem; /* Más espacio después del bloque de perfil */
  border-bottom: 2px solid var(--c-borde-suave);
  overflow-x: auto; /* Para móviles si hay muchas pestañas */
  background-color: var(--c-blanco);
  border-radius: var(--radio-borde-general) var(--radio-borde-general) 0 0;
  padding: 0 1rem;
}
.profile-tabs ul {
  display: flex;
  list-style: none;
}
.profile-tabs li {
  margin-right: 1.8rem;
}
.profile-tabs a {
  display: inline-block;
  padding: 0.8rem 0.2rem; /* Más padding vertical */
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-texto-secundario);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.profile-tabs .active a,
.profile-tabs a:hover {
  color: var(--c-principal);
  border-color: var(--c-principal);
}

/* Ajustes responsivos para perfil */
@media(max-width: 768px){
  .profile-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .profile-avatar{
    margin-bottom: 1rem; /* Espacio debajo del avatar en móvil */
  }
  .profile-data{
    margin-top: 0;
  }
  .profile-name, .profile-user{
    text-align: center;
  }
  .contact-actions {
    justify-content: center;
  }
}

/* -------------  SERVICIOS / TARJETAS  ------------- */
.services-grid { /* Cambiado de .services a .services-grid para evitar colisión */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Tarjetas un poco más anchas */
  gap: 25px;
}
.card.service-card { /* Estilo específico para tarjetas de servicio */
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-suave);
  border-radius: var(--radio-borde-general);
  box-shadow: 0 3px 10px var(--c-sombra-suave);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,.08);
}
.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--c-borde-suave);
    padding-bottom: 10px;
}
.service-card-header h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-principal);
  margin-bottom: 0;
}
.service-description {
  font-size: 0.88rem;
  color: var(--c-texto-secundario);
  margin-bottom: 15px;
  flex-grow: 1; /* Para que ocupe espacio y empuje el precio abajo si es necesario */
}
.price {
  font-size: 1.1rem; /* Precio más destacado */
  font-weight: 700;
  color: var(--c-texto-principal);
  margin-top: auto; /* Empuja el precio al final de la tarjeta */
  margin-bottom: 12px;
  text-align: right;
}

/* -------------  PROFESIONALES & CALENDARIO DENTRO DE TARJETA DE SERVICIO  ------------- */
.professionals-carousel {
    /* Podrías implementar un carrusel real con JS si hay muchos profesionales.
       Por ahora, se mostrarán en bloque o con scroll si es necesario. */
    display: flex;
    flex-direction: column; /* O row si prefieres horizontal con scroll */
    gap: 20px;
    margin-top: 15px;
}
.pro-card {
  background: #f9f9f9; /* Un fondo sutil para la tarjeta del profesional */
  border: 1px solid #eee;
  border-radius: 10px;
  text-align: center;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.pro-avatar {
  width: 70px; /* Avatar del profesional */
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
  border: 2px solid var(--c-borde-suave);
}
.pro-name {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.pro-rating { /* Si decides añadirlo */
  font-size: 0.8rem;
  color: var(--c-estrella-llena);
  margin-bottom: 8px;
}

.week-cal {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
  gap: 3px; /* Pequeño espacio entre días */
}
.day-box {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  font-size: 0.78rem;
  cursor: pointer;
  border: 1px solid #ddd;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  background-color: var(--c-blanco);
}
.day-box .day-number {
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 2px;
}
.day-box.has-slots { /* Día con disponibilidad */
  background: var(--c-principal);
  color: var(--c-blanco);
  border-color: var(--c-principal);
  font-weight: 500;
}
.day-box.has-slots:hover {
  background: #00748b; /* Un poco más oscuro al pasar el mouse */
  border-color: #00748b;
}
.day-box.disabled { /* Día sin disponibilidad */
  background: #ebebeb;
  color: #aaa;
  cursor: not-allowed;
  border-color: #ddd;
}
.day-box.active-day { /* Día seleccionado para mostrar slots */
    background-color: #005f73; /* Un color más oscuro para el día activo */
    color: var(--c-blanco);
    border-color: #005f73;
    box-shadow: 0 0 5px rgba(0, 95, 115, 0.5);
}


.slots-container-for-pro { /* Contenedor general de listas de slots para un profesional */
    margin-top: 10px;
}
.slots-list { /* Lista específica de slots para una fecha */
  margin-top: 10px;
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-suave);
  border-radius: 10px;
  padding: 12px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.04);
  font-size: 0.85rem;
  display: grid; /* Para mostrar slots en columnas */
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* Ajusta 70px según necesidad */
  gap: 8px;
}
.slots-list.hidden {
  display: none;
}
.slot {
  border: 1px solid var(--c-principal);
  color: var(--c-principal);
  background-color: var(--c-blanco);
  font-weight: 500;
  border-radius: 8px;
  padding: 10px; /* Más padding para mejor toque */
  text-align: center;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.slot:hover {
  background: var(--c-principal);
  color: var(--c-blanco);
}

/* -------------  MENSAJES CENTRADOS (Éxito, Error, Info)  ------------- */
.result-message-container {
    padding: 1rem; /* Para que no esté pegado a los bordes */
}
.center-msg {
  text-align: center;
  margin: 1.5rem 0;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.center-msg i { font-size: 1.2rem; }
.center-msg.ok { color: var(--c-verde-exito); background-color: #e6f7e9; border: 1px solid var(--c-verde-exito); }
.center-msg.err { color: var(--c-rojo-error); background-color: #fdeaed; border: 1px solid var(--c-rojo-error); }
.center-msg.info { color: var(--c-azul-info); background-color: #e1f5fe; border: 1px solid var(--c-azul-info); }
.center-msg.warning { color: #856404; background-color: #fff3cd; border: 1px solid var(--c-amarillo-advertencia); }


/* -------------  BOTÓN UBICACIÓN Y HORARIO  ------------- */
.btn-location {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem; /* Más padding */
  background: var(--c-secundario);
  color: var(--c-blanco);
  border: none;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}
.btn-location:hover {
  background: #4a5969; /* Un poco más oscuro */
}
.btn-location i { font-size: 0.9rem; }

/* -------------  MODALES (Ubicación y Reserva)  ------------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65); /* Fondo más oscuro */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Asegurar que esté por encima de todo */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal:not(.hidden) { /* Cuando el modal NO tiene la clase hidden */
  opacity: 1;
  visibility: visible;
}
.modal-content {
  background: var(--c-blanco);
  width: 90%;
  max-width: 550px; /* Un poco más ancho */
  border-radius: var(--radio-borde-general);
  padding: 1.5rem 2rem; /* Más padding interno */
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 5px 20px rgba(0,0,0,.2);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.modal:not(.hidden) .modal-content {
    transform: scale(1);
}

.close-modal {
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 1.8rem; /* Más grande */
  font-weight: 700;
  cursor: pointer;
  color: var(--c-texto-secundario); /* Color de la "X" del modal */
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
}
.close-modal:hover {
  color: var(--c-rojo-error);
  transform: rotate(90deg);
}

/* Contenido específico del modal de ubicación */
#map {
  width: 100%;
  height: 280px; /* Mapa un poco más alto */
  border-radius: 10px;
  margin-bottom: 1rem;
  background-color: #f0f0f0; /* Fondo mientras carga */
}
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 1rem;
}
.hours-table td {
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.hours-table td:first-child { font-weight: 500; }

/* Contenido específico del modal de reserva */
#bookingModal .modal-content h3 {
    color: var(--c-principal);
    margin-bottom: 1.5rem;
    text-align: center;
}
#bookingForm p {
    font-size: 0.95rem;
    color: var(--c-texto-secundario);
    margin-bottom: 0.6rem;
}
#bookingForm p strong {
    color: var(--c-texto-principal);
    min-width: 90px;
    display: inline-block;
}
.form-group {
  margin-bottom: 1rem;
  text-align: left;
}
.form-group label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--c-texto-secundario);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus {
  border-color: var(--c-principal);
  box-shadow: 0 0 0 2px rgba(0, 151, 178, 0.2);
}
.btn-book {
  width: 100%;
  padding: 0.8rem 0;
  font-size: 1rem;
  font-weight: 500;
  background: var(--c-principal);
  color: var(--c-blanco);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 1rem;
}
.btn-book:hover {
  background: #00748b; /* Más oscuro */
}

/* -------------  FOOTER  ------------- */
.footer {
    text-align: center;
    padding: 2rem 1rem;
    background-color: #e9ecef; /* Un fondo sutil para el footer */
    color: var(--c-texto-secundario);
    font-size: 0.85rem;
    margin-top: 3rem;
}

/* Media queries para responsividad general */
@media(max-width:600px){
  .profile-inner{
    align-items: center;
    text-align:center;
  }
  .profile-avatar{
    margin-bottom:1rem;
  }
  .profile-name, .profile-user{
    text-align:center;
  }
  .services-grid {
    grid-template-columns: 1fr; /* Una columna en móviles */
  }
  .modal-content {
    padding: 1.5rem 1rem;
  }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }
}