/* ============================================================
   POGS Directorio · ficha.css
   Estilos de la ficha individual de negocio
   ============================================================ */

/* ── Variables heredadas del main.css ── */
:root {
  --azul:       #1A5EFF;
  --azul-mid:   #2D7DFF;
  --cyan:       #00D4FF;
  --navy:       #0A1628;
  --wa-green:   #25D366;
  --gold:       #F59E0B;
  --texto:      #1a1a2e;
  --muted:      #6B7280;
  --borde:      #E5E7EB;
  --fondo-alt:  #F9FAFB;
  --radio:      12px;
  --sombra:     0 2px 12px rgba(0,0,0,0.08);
  --sombra-hover: 0 8px 32px rgba(0,0,0,0.12);
}

/* ══════════════════════════════════════
   COVER / HERO
══════════════════════════════════════ */
.ficha-cover {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, #1a2d4a 100%);
  background-size: cover;
  background-position: center;
  padding: 0 0 32px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ficha-cover.has-cover { min-height: 320px; }
.ficha-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,22,40,0.3) 0%, rgba(10,22,40,0.85) 100%);
}
.ficha-cover-inner {
  position: relative; z-index: 2;
  padding-top: 20px;
}

/* Breadcrumb sobre fondo oscuro */
.breadcrumb-light { color: rgba(255,255,255,0.6); font-size: 13px; margin-bottom: 20px; }
.breadcrumb-light a { color: rgba(255,255,255,0.7); text-decoration: none; }
.breadcrumb-light a:hover { color: #fff; }
.breadcrumb-light span { color: rgba(255,255,255,0.9); }

.ficha-identity {
  display: flex; gap: 20px; align-items: flex-end;
}

/* Logo / emoji */
.ficha-logo {
  flex-shrink: 0;
  width: 80px; height: 80px;
  background: #fff;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  overflow: hidden;
}
.ficha-logo img { width: 100%; height: 100%; object-fit: cover; }
.ficha-emoji { font-size: 40px; line-height: 1; }

.ficha-identity-info { flex: 1; padding-bottom: 4px; }

.ficha-badges {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.ficha-cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.15); color: #fff;
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
}
.verificado-badge {
  background: rgba(16,185,129,0.2); color: #6EE7B7;
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  border: 1px solid rgba(16,185,129,0.3);
}

/* Plan badges */
.plan-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.badge-gray   { background: rgba(107,114,128,0.2); color: #9CA3AF; border: 1px solid rgba(107,114,128,0.3); }
.badge-blue   { background: rgba(26,94,255,0.2);   color: #93C5FD; border: 1px solid rgba(26,94,255,0.3); }
.badge-gold   { background: rgba(245,158,11,0.2);  color: #FCD34D; border: 1px solid rgba(245,158,11,0.3); }
.badge-purple { background: rgba(139,92,246,0.2);  color: #C4B5FD; border: 1px solid rgba(139,92,246,0.3); }

.ficha-nombre {
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800; color: #fff;
  letter-spacing: -0.5px; margin-bottom: 6px;
}
.ficha-zona { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.ficha-rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 14px;
}
.star.full  { color: var(--gold); }
.star.half  { color: var(--gold); opacity: 0.6; }
.star.empty { color: rgba(255,255,255,0.3); }
.rating-num { font-weight: 700; }
.ficha-reviews { color: rgba(255,255,255,0.65); font-size: 13px; }
.gmaps-link {
  color: var(--cyan); font-size: 12px; text-decoration: none;
  border-bottom: 1px solid rgba(0,212,255,0.3);
}
.gmaps-link:hover { color: #fff; }

/* ══════════════════════════════════════
   LAYOUT PRINCIPAL 2 COLUMNAS
══════════════════════════════════════ */
.ficha-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 60px;
  align-items: start;
}
.ficha-main { min-width: 0; }

/* ── Secciones generales ── */
.ficha-section {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--sombra);
}
.ficha-section-title {
  font-family: 'Syne', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--texto); margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--borde);
  display: flex; align-items: center; gap: 8px;
}
.ficha-descripcion {
  font-size: 15px; line-height: 1.75;
  color: #374151; white-space: pre-wrap;
}

/* ── Galería ── */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.galeria-item {
  position: relative; border-radius: 8px;
  overflow: hidden; cursor: zoom-in;
  aspect-ratio: 4/3; background: var(--fondo-alt);
}
.galeria-item.galeria-principal {
  grid-column: span 2; grid-row: span 2;
  aspect-ratio: auto;
}
.galeria-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.galeria-item:hover img { transform: scale(1.05); }
.galeria-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0); display: flex;
  align-items: center; justify-content: center;
  font-size: 24px; transition: background .3s; opacity: 0;
}
.galeria-item:hover .galeria-overlay { background: rgba(0,0,0,0.35); opacity: 1; }

/* ── Servicios ── */
.servicios-lista { display: flex; flex-direction: column; gap: 0; }
.servicio-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--borde);
  gap: 16px;
}
.servicio-item:last-child { border-bottom: none; }
.servicio-nombre { font-weight: 600; font-size: 15px; color: var(--texto); margin-bottom: 3px; }
.servicio-desc   { font-size: 13px; color: var(--muted); }
.servicio-duracion { font-size: 12px; color: var(--muted); margin-top: 3px; }
.servicio-derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.servicio-precio {
  font-family: 'Syne', sans-serif; font-size: 17px;
  font-weight: 800; color: var(--azul);
}
.btn-agendar-srv {
  background: var(--azul); color: #fff;
  border: none; border-radius: 7px;
  padding: 6px 14px; font-size: 13px;
  cursor: pointer; transition: background .2s;
}
.btn-agendar-srv:hover { background: var(--azul-mid); }

/* ── Agendador ── */
.agendador { }
.agendador-form { display: flex; flex-direction: column; gap: 18px; }
.agendador-servicio-sel {
  background: var(--fondo-alt); border: 1px solid var(--borde);
  border-radius: 8px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; color: var(--muted);
}
.agendador-servicio-sel select {
  border: 1px solid var(--borde); border-radius: 7px;
  padding: 8px 10px; font-size: 14px; background: #fff; cursor: pointer;
}
.agendador-campos { display: flex; flex-direction: column; gap: 14px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 13px; font-weight: 500; color: var(--texto); }
.req { color: #EF4444; }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid var(--borde); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(26,94,255,0.12);
}
.btn-agendar-submit {
  padding: 14px; font-size: 15px;
  border: none; cursor: pointer;
}
.agendador-nota { font-size: 12px; color: var(--muted); text-align: center; }
.agendador-exito {
  flex-direction: column; align-items: center;
  text-align: center; gap: 12px; padding: 32px;
}
.exito-icon { font-size: 48px; }
.agendador-exito h3 { font-size: 20px; font-weight: 700; color: var(--texto); }
.folio {
  background: var(--fondo-alt); border: 2px dashed var(--borde);
  border-radius: 8px; padding: 12px 24px;
  font-family: monospace; font-size: 20px; font-weight: 700;
  color: var(--azul); letter-spacing: 2px;
}

/* ── Reseñas ── */
.resenas-lista { display: flex; flex-direction: column; gap: 16px; }
.resena-item {
  border: 1px solid var(--borde); border-radius: 10px;
  padding: 16px;
}
.resena-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.resena-autor { display: flex; align-items: center; gap: 8px; flex: 1; }
.resena-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--azul); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.resena-fecha { font-size: 12px; color: var(--muted); margin-left: auto; }
.resena-stars .star.full  { color: var(--gold); }
.resena-stars .star.empty { color: #D1D5DB; }
.resena-texto { font-size: 14px; color: #374151; line-height: 1.65; }
.resena-respuesta {
  margin-top: 12px; padding: 12px;
  background: var(--fondo-alt); border-radius: 8px;
  font-size: 13px; color: var(--muted);
  border-left: 3px solid var(--azul);
}

/* ── Mapa ── */
.ficha-mapa-wrap { border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.ficha-mapa { width: 100%; height: 300px; border: none; display: block; }
.ficha-dir-texto { font-size: 13px; color: var(--muted); display: flex; align-items: flex-start; gap: 4px; }

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.ficha-sidebar {
  position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 16px;
}
.sidebar-card {
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 20px;
  box-shadow: var(--sombra);
}
.sidebar-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--texto); margin-bottom: 14px;
}

/* CTA sidebar */
.sidebar-cta { display: flex; flex-direction: column; gap: 10px; }
.btn-full { width: 100%; text-align: center; display: block; border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .2s; }
.btn-primary { background: var(--azul); color: #fff; border: none; }
.btn-primary:hover { background: var(--azul-mid); transform: translateY(-1px); }
.btn-wa     { background: var(--wa-green); color: #fff; }
.btn-wa:hover { background: #1fba58; transform: translateY(-1px); }
.btn-tel    { background: var(--fondo-alt); color: var(--texto); border: 1px solid var(--borde); }
.btn-tel:hover { background: #eee; }
.btn-outline { background: transparent; color: var(--azul); border: 1px solid var(--azul); }
.btn-outline:hover { background: var(--azul); color: #fff; }
.btn-sm { padding: 8px 12px; font-size: 13px; }

/* Horarios */
.horario-estado { margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.abierto { color: #10B981; }
.cerrado  { color: #EF4444; }
.horario-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.horario-tabla tr { border-bottom: 1px solid var(--borde); }
.horario-tabla tr:last-child { border-bottom: none; }
.horario-tabla td { padding: 6px 0; }
.horario-dia   { color: var(--muted); width: 36px; }
.horario-hoy td { font-weight: 700; color: var(--texto); }
.horario-hoy .horario-dia { color: var(--azul); }

/* Info list */
.sidebar-info-list {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
}
.sidebar-info-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.info-icon { flex-shrink: 0; width: 18px; text-align: center; }
.sidebar-info-list a { color: var(--azul); text-decoration: none; word-break: break-all; }
.sidebar-info-list a:hover { text-decoration: underline; }

/* Redes sociales */
.sidebar-redes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde); }
.red-social { display: flex; align-items: center; gap: 8px; font-size: 13px; text-decoration: none; color: var(--texto); padding: 6px 10px; border-radius: 7px; background: var(--fondo-alt); transition: background .2s; }
.red-social:hover { background: #eee; }

/* Google Maps score */
.gmaps-score { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.gmaps-num { font-family: 'Syne', sans-serif; font-size: 36px; font-weight: 800; color: var(--texto); }
.gmaps-stars .star.full  { color: var(--gold); font-size: 18px; }
.gmaps-stars .star.empty { color: #D1D5DB; font-size: 18px; }
.gmaps-reviews-count { font-size: 12px; color: var(--muted); margin-top: 2px; }
.gmaps-link-btn { display: block; text-align: center; font-size: 13px; color: var(--azul); text-decoration: none; border: 1px solid var(--azul); border-radius: 7px; padding: 7px; transition: all .2s; }
.gmaps-link-btn:hover { background: var(--azul); color: #fff; }

/* Similares */
.similares-lista { display: flex; flex-direction: column; gap: 0; }
.similar-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); padding: 10px 0; border-bottom: 1px solid var(--borde); transition: color .2s; }
.similar-item:last-child { border-bottom: none; }
.similar-item:hover { color: var(--azul); }
.similar-emoji { font-size: 24px; flex-shrink: 0; }
.similar-info { display: flex; flex-direction: column; gap: 2px; }
.similar-info strong { font-size: 13px; font-weight: 600; }
.similar-info span { font-size: 12px; color: var(--muted); }

/* Upgrade CTA */
.sidebar-upgrade { border: 2px dashed var(--azul); background: rgba(26,94,255,0.04); }
.upgrade-texto { font-size: 13px; color: var(--muted); margin-bottom: 12px; line-height: 1.6; }
.btn-upgrade { display: block; text-align: center; background: var(--azul); color: #fff; text-decoration: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 600; transition: background .2s; }
.btn-upgrade:hover { background: var(--azul-mid); }

/* ── Lightbox ── */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.lightbox.activo { opacity: 1; pointer-events: all; }
.lightbox img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.lightbox p { color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 12px; }
.lightbox-close {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255,255,255,0.15); color: #fff;
  border: none; border-radius: 50%; width: 40px; height: 40px;
  font-size: 18px; cursor: pointer; transition: background .2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ── Breadcrumb normal (fondo claro) ── */
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.breadcrumb a { color: var(--azul); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
  .ficha-body { grid-template-columns: 1fr; }
  .ficha-sidebar { position: static; }
  .galeria-grid { grid-template-columns: 1fr 1fr; }
  .galeria-item.galeria-principal { grid-column: span 2; }
  .form-row-2 { grid-template-columns: 1fr; }
  .ficha-identity { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 600px) {
  .ficha-cover { min-height: 200px; }
  .ficha-logo { width: 60px; height: 60px; }
  .ficha-section { padding: 18px; }
  .galeria-grid { grid-template-columns: 1fr; }
  .galeria-item.galeria-principal { grid-column: span 1; }
}