/* ============================================================
   SALAS DE ENSAYO — Panel del Cliente / Usuario
   Lo compartido con panel/ y admin/ vive en shared/primitives.css.
   Acá queda lo propio: hero, favoritas, reseñas, notificaciones.
   ============================================================ */

/* ---------- Overrides sobre las primitivas ----------
   La fila del cliente apila sala y fecha en dos líneas; en el panel del negocio
   van en una sola, al lado del avatar. */
.res-row .who{flex-direction:column;align-items:stretch;gap:3px}

/* ---------- Hero card ---------- */
.hero-card{background:linear-gradient(135deg,var(--card),var(--card-2));border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px;position:relative;overflow:hidden}
.hero-card::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--amber) 20%,transparent),transparent 70%);pointer-events:none}
.hc-info{position:relative;z-index:1;max-width:520px}
.hc-hi{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--bone)}
.hc-hi b{color:var(--amber)}
.hc-lead{font-size:14px;color:var(--bone-dim);line-height:1.5;margin:8px 0 16px}
.hc-actions{display:flex;gap:10px;flex-wrap:wrap}
.hc-badge{position:relative;z-index:1;flex:none;width:120px;height:120px;border-radius:50%;background:var(--graphite-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.hcb-num{font-family:var(--font-display);font-weight:900;font-size:40px;color:var(--amber);line-height:1;letter-spacing:-.03em}
.hcb-lbl{font-size:10px;color:var(--bone-faint);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-display);text-align:center;max-width:80px}

/* ---------- KPI: variante de texto corto ---------- */
.kpi .val.sm{font-size:16px;margin-top:8px}

/* ---------- Filas de reserva ---------- */
.res-row .thumb{width:52px;height:52px;border-radius:11px;background-size:cover;background-position:center;border:1px solid var(--line);flex:none}
.res-row .who .name{font-weight:600;font-size:14px;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-row .who .meta{font-size:12px;color:var(--bone-faint);font-family:var(--font-display)}
.res-tag{font-size:11px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:20px;background:var(--graphite-2);border:1px solid var(--line);color:var(--bone-faint);white-space:nowrap}
.res-tag.proxima{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.res-tag.completada{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.res-tag.cancelada{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.res-row .res-total{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--bone)}
.icon-btn.amber:hover{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,transparent)}
.icon-btn.fav.on{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.icon-btn.fav.on svg{fill:var(--danger)}
.btn-review{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;background:var(--amber);color:var(--on-amber,#1a1a1d);font-family:var(--font-display);font-weight:700;font-size:12px;white-space:nowrap;transition:transform .12s}
.btn-review:hover{transform:translateY(-1px)}
.btn-review svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- Star display ---------- */
.stars-mini{display:inline-flex;gap:2px}
.stars-mini .s{width:14px;height:14px}
.stars-mini .s svg{width:14px;height:14px;fill:var(--line);stroke:none}
.stars-mini .s.on svg{fill:var(--amber)}

/* ---------- Favoritas grid ---------- */
.fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.fav-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s var(--glide),border-color .3s ease}
.fav-card:hover{transform:translateY(-4px);border-color:var(--amber)}
.fav-cover{height:140px;background-size:cover;background-position:center;position:relative}
.fav-cover .fav-heart{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;border:none;cursor:pointer;transition:.2s ease}
.fav-cover .fav-heart svg{width:17px;height:17px;fill:var(--danger);stroke:var(--danger);stroke-width:2}
.fav-cover .fav-heart:hover{transform:scale(1.1)}
.fav-body{padding:16px}
.fav-body .fb-name{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--bone);letter-spacing:-.01em}
.fav-body .fb-zone{font-size:12.5px;color:var(--bone-faint);margin-top:2px;display:flex;align-items:center;gap:5px}
.fav-body .fb-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.fav-body .fb-price{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--amber)}
.fav-body .fb-price small{font-size:11px;color:var(--bone-faint);font-weight:500}
.fav-body .fb-book{padding:7px 14px;border-radius:9px;background:var(--graphite-2);border:1px solid var(--line);color:var(--bone);font-size:12px;font-weight:600;text-decoration:none;transition:.2s ease}
.fav-body .fb-book:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- Reseñas list ---------- */
.review-list{display:flex;flex-direction:column}
.review-row{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);animation:row-in .4s var(--glide)}
.review-row:last-child{border-bottom:none}
.review-row .thumb{width:48px;height:48px;border-radius:11px;background-size:cover;background-position:center;border:1px solid var(--line);flex:none}
.review-row .rr-body{flex:1;min-width:0}
.review-row .rr-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.review-row .rr-name{font-weight:600;font-size:14px;color:var(--bone)}
.review-row .rr-date{font-size:11px;color:var(--bone-faint);font-family:var(--font-display)}
.review-row .rr-text{font-size:13px;color:var(--bone-dim);line-height:1.5;margin-top:6px}
.review-row .rr-actions{display:flex;gap:8px;margin-top:10px}
.rr-edit{font-size:12px;color:var(--amber);font-weight:600;cursor:pointer}
.rr-del{font-size:12px;color:var(--bone-faint);cursor:pointer}
.rr-del:hover{color:var(--danger)}

/* ---------- Form ---------- */
.form-actions{display:flex;gap:10px;padding:0 4px 24px}

/* ---------- Notif list ---------- */
.notif-list{display:flex;flex-direction:column}
.notif-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}
.notif-row:last-child{border-bottom:none}
.notif-row .nr-txt{min-width:0}
.notif-row .nr-txt b{font-size:14px;color:var(--bone);font-weight:600}
.notif-row .nr-txt span{display:block;font-size:12px;color:var(--bone-faint);margin-top:2px}
.toggle{width:46px;height:26px;padding:4px;background:var(--graphite-2);border:1px solid var(--line);border-radius:100px;cursor:pointer;flex:none;transition:background .3s ease,border-color .3s ease}
.toggle.on{background:var(--amber-deep);border-color:var(--amber)}
.toggle .tk{width:18px;height:18px;border-radius:50%;background:var(--bone-dim);transition:transform .35s var(--spring),background .3s ease}
.toggle.on .tk{transform:translateX(20px);background:var(--on-amber,#1a1a1d)}

/* ---------- Modal de reseña ---------- */
.rev-sala{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--graphite-2);border:1px solid var(--line);margin-bottom:16px}
.rev-sala .thumb{width:48px;height:48px;border-radius:10px;background-size:cover;background-position:center;flex:none;border:1px solid var(--line)}
.rev-sala .rs-name{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--bone)}
.rev-sala .rs-zone{font-size:12px;color:var(--bone-faint)}
.rev-stars{display:flex;gap:8px;justify-content:center;padding:8px 0}
.rev-stars .star{width:40px;height:40px;cursor:pointer;position:relative;background:none;transition:transform .15s var(--spring)}
.rev-stars .star::before{content:"";position:absolute;inset:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17.8 5.9 20.4l1.5-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17.8 5.9 20.4l1.5-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--line)}
.rev-stars .star.on::before,.rev-stars .star.hover::before{background:var(--amber)}
.rev-stars .star:hover{transform:scale(1.15)}
.rev-hint{text-align:center;font-size:13px;color:var(--bone-faint);font-family:var(--font-display);margin-bottom:16px}
.rev-field{display:flex;flex-direction:column;gap:7px}
.rev-field span{font-size:12px;color:var(--bone-dim);font-weight:600}
.rev-field textarea{background:var(--graphite-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--bone);font-size:14px;font-family:var(--font-body);outline:none;resize:vertical;transition:border-color .2s ease}
.rev-field textarea:focus{border-color:var(--amber)}

/* ---------- Toast ---------- */

/* ---------- Responsive propio ---------- */
@media(max-width:820px){
  .hero-card{flex-direction:column;text-align:center}
  .hc-actions{justify-content:center}
  .res-row .res-tag,.res-row .res-total{display:none}
}

/* ---------- Mi reputación ----------
   Las calificaciones que las salas le pusieron al músico. Se muestran completas y con
   derecho a réplica: es reputación compartida entre salas, no una nota interna. */
.repu-intro{padding:0 18px;margin-top:16px;font-size:13px;color:var(--bone-dim);line-height:1.5;max-width:70ch}
.repu-list{display:flex;flex-direction:column;margin-top:8px}
.repu-row{padding:16px 18px;border-bottom:1px solid var(--line);animation:row-in .4s var(--glide)}
.repu-row:last-child{border-bottom:none}
.rep-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rep-sala{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--bone)}
.rep-fecha{font-size:11px;color:var(--bone-faint);font-family:var(--font-display)}
.rep-txt{font-size:13px;color:var(--bone-dim);line-height:1.5;margin-top:8px}
.rep-txt.rep-sin{color:var(--bone-faint);font-style:italic}
.rep-reply{margin-top:10px;padding:10px 13px;border-radius:10px;background:var(--graphite-2);border-left:3px solid var(--amber);font-size:13px;color:var(--bone-dim);line-height:1.5}
.rep-reply b{color:var(--bone);font-weight:600}
.rep-actions{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.rep-input{width:100%;background:var(--graphite-2);border:1px solid var(--line);border-radius:10px;padding:10px 13px;color:var(--bone);font-size:13px;font-family:var(--font-body);outline:none;resize:vertical}
.rep-input:focus{border-color:var(--amber)}
.rep-btns{display:flex;gap:8px}
.rep-btn{padding:7px 14px;border-radius:9px;background:var(--graphite-2);border:1px solid var(--line);color:var(--bone-dim);font-size:12px;font-weight:600;cursor:pointer;transition:.18s var(--glide)}
.rep-btn:hover{border-color:var(--bone-faint);color:var(--bone)}
.rep-btn.ok{background:var(--amber);color:var(--on-amber,#1a1a1d);border-color:transparent;font-family:var(--font-display);font-weight:700}
.rep-btn.ok:hover{transform:translateY(-1px)}

/* Nota que reemplaza al botón de cancelar cuando ya no se puede: quedarse sin botón y sin
   explicación es peor que no poder cancelar. */
.cancel-nota{font-size:11px;color:var(--bone-faint);max-width:190px;text-align:right;line-height:1.35}
.icon-btn.cancel{color:var(--bone-faint)}
.icon-btn.cancel:hover{color:var(--danger,#e0605b);border-color:color-mix(in srgb,var(--danger,#e0605b) 45%,transparent)}
/* La nota de cancelación cuando lleva al chat: es un botón, tiene que parecerlo. */
.cancel-nota.como-link{border:none;background:none;font:inherit;font-size:11px;color:var(--amber);cursor:pointer;text-align:right;padding:0}
.cancel-nota.como-link:hover{text-decoration:underline}
/* "Esperando confirmación": ni verde de confirmada ni rojo de cancelada. Es un estado de
   espera y tiene que leerse como tal. */
.res-tag.pendiente{background:color-mix(in srgb,var(--amber) 14%,transparent);border-color:color-mix(in srgb,var(--amber) 45%,transparent);color:var(--amber)}

/* ---------- Foto de perfil (Datos personales) ----------
   Se previsualiza redonda porque así se muestra en el avatar de la barra lateral. */
.foto-zone{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 0 20px}
.foto-prev{flex:0 0 72px;width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line)}
.foto-prev.vacia{border-style:dashed}
.foto-prev img{width:100%;height:100%;object-fit:cover}
.foto-inicial{font-family:var(--font-display);font-weight:900;font-size:26px;color:var(--bone-faint)}
.foto-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foto-acciones .hint{flex-basis:100%;font-size:12px;color:var(--bone-faint)}
/* El avatar de la barra lateral: la foto tapa la inicial, que queda de respaldo. */
.brand .av.con-foto{position:relative;overflow:hidden}
.brand .av.con-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-acciones .btn-ghost.sm{padding:8px 14px;font-size:12.5px}