/* ════════════════════════════════════════════════════════════════════
   perfil-claro.css — el PERFIL del profesional con el estilo "Claro"
   (rediseño Apple, etapa 1, noviembre 2026). Render aprobado:
   docs/redisenio-apple/etapa1-perfil.png
   Todo bajo body.to-claro: $PERFIL_CLARO = false en userProfile.php
   devuelve el perfil de siempre. Solo cambia la piel: el contacto
   (WhatsApp o chat), su registro, las pestañas, la galería y el
   formulario de opinión no se tocan. Header negro como el resto.
   Sin backdrop-filter ni animaciones nuevas.
   ════════════════════════════════════════════════════════════════════ */

body.to-claro { background: var(--c-bg); font-family: var(--to-font); -webkit-font-smoothing: antialiased; }
body.to-claro #main { background: var(--c-bg); }
body.to-claro .header { background-color: rgba(0, 0, 0, .94) !important; box-shadow: none !important; }

/* ── Fondo ──────────────────────────────────────────────────────────── */
body.to-claro .profile-section { background: var(--c-bg); }

/* ── Tarjeta principal (ficha tipo App Store) ───────────────────────── */
body.to-claro .profile-main-card {
  background: var(--c-card); border: 1px solid rgba(0,0,0,.07); border-radius: var(--to-r-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
}
/* Foto: borde blanco y sombra, sin el anillo amarillo. */
body.to-claro .profile-avatar-ring {
  background: var(--c-card); padding: 0;
  box-shadow: 0 0 0 4px var(--c-card), 0 12px 32px rgba(0,0,0,.12);
}
body.to-claro .profile-name {
  font-family: var(--to-font); font-weight: 700; letter-spacing: -.03em; color: var(--c-txt);
}
body.to-claro .profile-service-name { color: var(--c-sec); }
body.to-claro .profile-location { color: var(--c-sec); }
body.to-claro .profile-location i { color: #ff3b30; }

/* Sellos: pastillas grises; el ícono conserva su color. */
body.to-claro .profile-verified {
  background: var(--c-bg); border: 0; color: var(--c-txt); font-weight: 600; box-shadow: none;
}
body.to-claro .profile-verified i { color: var(--to-azul-link); }
body.to-claro .profile-matricula i { color: #1f9d55; }
body.to-claro .profile-esp-chip { background: var(--c-bg); border: 0; color: var(--c-txt); }

/* Franja de números. */
body.to-claro .profile-stats { background: var(--c-bg); border: 0; border-radius: var(--to-r-md); }
body.to-claro .profile-stat:hover,
body.to-claro .profile-stat:focus-visible { background: rgba(0,0,0,.04); }
body.to-claro .profile-stat:active { background: rgba(0,0,0,.07); }
body.to-claro .profile-stat .stat-value { color: var(--c-txt); letter-spacing: -.03em; }
body.to-claro .profile-stat .stat-label { color: var(--c-sec); }

/* Contacto: verde de WhatsApp, redondeado y sin sombra de color. */
body.to-claro .whatsapp-btn { background: var(--to-verde-wa); border-radius: var(--to-r-md); box-shadow: none; font-weight: 700; }
body.to-claro .whatsapp-btn:hover { background: #1fbe5a; transform: none; box-shadow: none; }
body.to-claro .whatsapp-trust { color: #1f9d55; }
body.to-claro .whatsapp-hint { color: var(--c-ter); }
body.to-claro .share-profile-btn {
  background: var(--c-bg); border: 0; border-radius: var(--to-r-md); color: var(--c-txt); box-shadow: none;
}
body.to-claro .share-profile-btn:hover { background: #e8e8ed; color: var(--c-txt); transform: none; }
body.to-claro .share-profile-btn i { color: var(--c-txt); }

/* Opinión destacada: gris en vez de amarillo. */
body.to-claro .profile-featured-review { background: var(--c-bg); border: 0; border-radius: var(--to-r-md); }
body.to-claro .profile-featured-review:hover { background: #ececf0; }
body.to-claro .profile-featured-review .pfr-text { color: var(--c-txt); }
body.to-claro .profile-featured-review .pfr-author { color: var(--c-sec); }

/* ── Pestañas: control segmentado de iPhone ─────────────────────────── */
body.to-claro .profile-tabs { background: #e3e3e8; border: 0; border-radius: 12px; padding: 3px; box-shadow: none; }
body.to-claro .ptab {
  background: transparent; border: 0; box-shadow: none; color: var(--c-sec); font-weight: 600; border-radius: 9px;
}
body.to-claro .ptab i { display: none; }
body.to-claro .ptab:hover { background: rgba(255,255,255,.5); color: var(--c-txt); transform: none; }
body.to-claro .ptab.active {
  background: var(--c-card); color: var(--c-txt); box-shadow: 0 2px 6px rgba(0,0,0,.08); border: 0;
}
body.to-claro .ptab .ptab-count { color: var(--c-ter); }

/* ── Paneles y tarjetas internas ────────────────────────────────────── */
body.to-claro .ptab-panel.active {
  background: var(--c-card); border: 1px solid rgba(0,0,0,.07); border-radius: var(--to-r-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
}
body.to-claro .ptab-empty { color: var(--c-sec); }
body.to-claro .comment-card { background: var(--c-bg); border: 0; border-radius: var(--to-r-md); box-shadow: none; }
body.to-claro .comment-form-card { background: var(--c-card); border: 1px solid rgba(0,0,0,.07); border-radius: var(--to-r-lg); box-shadow: none; }

/* ── Barra fija de contacto del celular ─────────────────────────────── */
body.to-claro .wpp-sticky-bar .whatsapp-sticky { border-radius: var(--to-r-md); box-shadow: 0 10px 28px rgba(0,0,0,.18); }

/* ── Footer: gris claro ─────────────────────────────────────────────── */
body.to-claro .footer {
  background-color: var(--c-bg) !important; color: var(--c-sec) !important;
  border-top: 1px solid var(--c-borde) !important; margin-top: 0 !important;
}
body.to-claro .footer h4 { color: var(--c-txt); letter-spacing: .02em; }
body.to-claro .footer a { color: var(--c-sec); }
body.to-claro .footer a:hover { color: var(--c-txt); }

/* Ajustes tras la primera pasada: sin tarjeta dentro de tarjeta ni halo amarillo. */
body.to-claro .ptab-panel .info-card { background: transparent; border: 0; box-shadow: none; }
body.to-claro .info-card-title { font-family: var(--to-font); font-weight: 700; letter-spacing: -.02em; color: var(--c-txt); }
body.to-claro .info-card-title i { color: var(--c-ter); }
body.to-claro .profile-featured-review,
body.to-claro .profile-featured-review:hover,
body.to-claro .profile-featured-review:focus { box-shadow: none; }
body.to-claro .comment-author { font-family: var(--to-font); font-weight: 600; letter-spacing: -.01em; }
body.to-claro .comment-date { color: var(--c-ter); }

/* ══ Más contraste (pedido del dueño, nov. 2026: "lo veo muy plano") ══
   Jerarquía por color y peso, no solo por gris: tarjetas con sombra
   marcada, sellos con su color, números sobre franja oscura, botones
   sólidos, pestaña activa en negro y reseñas en tarjetas blancas. */
body.to-claro .profile-main-card,
body.to-claro .ptab-panel.active { border-color: var(--c-borde-fuerte); box-shadow: var(--c-sombra); }
body.to-claro .profile-name { color: #000; font-weight: 800; }
body.to-claro .profile-service-name { color: var(--c-txt); font-weight: 600; }

body.to-claro .profile-verified { background: var(--to-azul-tinte); color: var(--to-azul-fuerte); font-weight: 700; }
body.to-claro .profile-verified i { color: var(--to-azul-fuerte); }
body.to-claro .profile-matricula { background: var(--to-verde-tinte); color: var(--to-verde-fuerte); }
body.to-claro .profile-matricula i { color: var(--to-verde-fuerte); }
body.to-claro .profile-esp-chip { background: #fff6cc; color: #5c4a00; font-weight: 600; }

body.to-claro .profile-stats { background: var(--c-txt); }
body.to-claro .profile-stat .stat-value { color: #fff; }
body.to-claro .profile-stat .stat-label { color: #a1a1a6; }
body.to-claro .profile-stat + .profile-stat::before { background: rgba(255,255,255,.14); }
body.to-claro .profile-stat:hover,
body.to-claro .profile-stat:focus-visible { background: rgba(255,255,255,.08); }
body.to-claro .profile-stat:active { background: rgba(255,255,255,.14); }

body.to-claro .whatsapp-btn { box-shadow: 0 8px 22px rgba(37,211,102,.38); font-size: 1.08rem; }
body.to-claro .whatsapp-btn:hover { box-shadow: 0 10px 26px rgba(37,211,102,.45); }
body.to-claro .share-profile-btn { background: var(--c-card); border: 1.5px solid var(--c-txt); font-weight: 700; }
body.to-claro .share-profile-btn:hover { background: var(--c-txt); color: #fff; }
body.to-claro .share-profile-btn:hover i { color: #fff; }

body.to-claro .profile-featured-review {
  background: #fffbea; border: 1px solid #f3e3a1; border-left: 4px solid var(--to-amarillo);
}
body.to-claro .profile-featured-review:hover { background: #fff6d6; }
body.to-claro .profile-featured-review .pfr-stars i { color: var(--to-estrella); font-size: 15px; }
body.to-claro .profile-featured-review .pfr-text { color: #000; font-weight: 600; }

body.to-claro .profile-tabs { background: #dcdce2; }
body.to-claro .ptab { color: #3a3a3c; }
body.to-claro .ptab.active { background: var(--c-txt); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
body.to-claro .ptab.active .ptab-count { color: #c7c7cc; }

body.to-claro .info-card-title { color: #000; font-weight: 800; }
body.to-claro .info-card-title i { color: var(--to-amarillo); }
body.to-claro .comment-card {
  background: var(--c-card); border: 1px solid var(--c-borde-fuerte); box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
body.to-claro .comment-author { color: #000; font-weight: 700; }
body.to-claro .comment-stars i { color: var(--to-estrella); font-size: 15px; }
body.to-claro .comment-text { color: var(--c-txt); }

/* ── Vidrio amarillo (nov. 2026): el recuadro de números y la pestaña activa
   dejan el negro y usan el mismo efecto que la burbuja del bottom-nav
   (bottomnav.css .bn-bubble): degradé con luz arriba + borde interior. ── */
body.to-claro .profile-stats,
body.to-claro .ptab.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(255,226,96,.98) 0%, #FFD11A 52%, rgba(238,188,0,.96) 100%);
  box-shadow:
    0 2px 10px rgba(255,209,26,.35),
    0 8px 22px rgba(255,209,26,.22),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(120,80,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.22);
}
body.to-claro .profile-stat .stat-value { color: #1d1d1f; }
body.to-claro .profile-stat .stat-label { color: #5c4a00; }
body.to-claro .profile-stat + .profile-stat::before { background: rgba(92,74,0,.18); }
body.to-claro .profile-stat:hover,
body.to-claro .profile-stat:focus-visible { background: rgba(255,255,255,.28); }
body.to-claro .profile-stat:active { background: rgba(255,255,255,.4); }
body.to-claro .ptab.active { color: #1d1d1f; }
body.to-claro .ptab.active .ptab-count { color: #5c4a00; }