@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600;700&display=swap');

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

:root {
    /* Neutros tintados cálidos (no negro/blanco puro) */
    --fondo: #0d0b08;
    --negro: #151419;
    --negro-2: #1c1920;
    --panel: #1f1c25;
    --texto-suave: rgba(255,255,255,.66);
    --dorado: #d4af6a;
    --dorado-2: #e8c989;
    --menta: #232029;
    --claro: #f6efe5;
    --linea: rgba(255,255,255,.08);
    --sombra: 0 18px 40px rgba(0,0,0,.38);
    /* Easing curves (Emil Kowalski) */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-elegante: cubic-bezier(0.32, 0.72, 0, 1);
    /* Fuentes distintivas (anti-slop: nada de Inter) */
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --ok: #4ad97f;
    --warn: #ffb74d;
    --err: #ff5d52;
}

html, body { width: 100%; min-height: 100%; font-family: var(--font-body); background: var(--fondo); overflow: hidden; -webkit-font-smoothing: antialiased; }
body { color: #f5f0e6; }

.app { width: 100vw; height: 100vh; height: 100dvh; position: relative; overflow: hidden; background: var(--fondo); }

.pantalla { position: absolute; inset: 0; width: 100%; height: 100%; display: none; overflow: hidden; }
.pantalla.activa { display: block !important; }

.isla { display: none; }

/* SCROLL helper */
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scroll-y::-webkit-scrollbar { width: 0; }

/* ───────── BOTONES BASE ───────── */
.btn-dorado { border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--dorado), var(--dorado-2)); color: #1a1208; font-weight: 700; font-family: var(--font-body); cursor: pointer; transition: transform .14s var(--ease-out), filter .14s var(--ease-out); will-change: transform; }
.btn-dorado:active { transform: scale(0.97); }
.btn-dorado:disabled { opacity: .5; pointer-events: none; }
.btn-ghost { background: rgba(255,255,255,.06); border: 0; color: #fff; border-radius: 999px; cursor: pointer; }
.btn-icono { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; }

/* ───────── LOGIN / REGISTRO ───────── */
.pantalla-auth { background: var(--negro); padding: calc(env(safe-area-inset-top) + 50px) 22px calc(env(safe-area-inset-bottom) + 40px); overflow-y: auto; }
.auth-hero { text-align: center; margin-bottom: 28px; }
.auth-hero .logo { width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(135deg, var(--dorado), var(--dorado-2)); display: grid; place-items: center; font-size: 38px; margin: 0 auto 16px; }
.auth-hero h1 { font-family: var(--font-display); font-size: 30px; font-weight: 300; letter-spacing: .5px; }
.auth-hero p { color: var(--texto-suave); font-size: 13px; margin-top: 6px; }

.tabs-auth { display: flex; background: rgba(255,255,255,.05); border-radius: 999px; padding: 4px; margin-bottom: 22px; }
.tab-auth { flex: 1; border: 0; padding: 11px; border-radius: 999px; background: transparent; color: var(--texto-suave); font-size: 13px; font-weight: 600; cursor: pointer; }
.tab-auth.activo { background: var(--dorado); color: #1a1208; }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 11px; color: var(--texto-suave); margin-bottom: 6px; padding-left: 4px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.campo input, .campo select, .campo textarea { width: 100%; height: 50px; border: 1px solid var(--linea); border-radius: 14px; background: rgba(255,255,255,.04); color: #fff; padding: 0 16px; font-size: 14px; outline: none; transition: border-color .15s; }
.campo textarea { height: auto; padding: 12px 16px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--dorado); }
.campo select option { background: var(--negro-2); }

.auth-submit { width: 100%; height: 52px; font-size: 15px; margin-top: 8px; }
.auth-error { background: rgba(255,93,82,.12); border: 1px solid rgba(255,93,82,.3); color: #ff8a82; font-size: 12px; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; display: none; }
.auth-error.visible { display: block; }
.auth-cambiar-rol { text-align: center; margin-top: 18px; font-size: 12px; color: var(--texto-suave); }
.auth-cambiar-rol a { color: var(--dorado); text-decoration: none; cursor: pointer; }

/* ───────── INICIO (cliente) ───────── */
.pantalla-inicio { background: var(--negro); color: #fff; padding: calc(env(safe-area-inset-top) + 60px) 16px calc(env(safe-area-inset-bottom) + 104px); }
.encabezado-app { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; padding-top: calc(env(safe-area-inset-top) + 8px); }
.usuario { display: flex; gap: 10px; align-items: center; }
.usuario img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dorado); }
.usuario small { display: block; color: var(--texto-suave); margin-bottom: 2px; font-size: 12px; }
.usuario strong { font-size: 14px; }
.carrito-trigger { width: auto; min-width: 60px; border-radius: 999px; padding: 0 14px; height: 38px; display: flex; gap: 6px; align-items: center; background: rgba(255,255,255,.08); border: 0; color: #fff; cursor: pointer; }
.carrito-trigger b { color: var(--dorado); }

.buscador { display: flex; align-items: center; gap: 10px; height: 50px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 0 16px; margin-bottom: 20px; transition: border-color .2s, background .2s; }
.buscador:focus-within { border-color: var(--dorado); background: rgba(255,255,255,.1); }
.buscador svg { color: var(--texto-suave); flex-shrink: 0; width: 18px; height: 18px; }
.buscador input { flex: 1; height: 100%; border: 0; outline: none; background: transparent; color: #fff; font-size: 14px; }
.buscador input::placeholder { color: rgba(255,255,255,.4); }

.bloque-titulo { margin-bottom: 16px; }
.bloque-titulo h2 { font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 300; margin-bottom: 8px; }
.bloque-titulo h2 b { color: var(--dorado); font-weight: 600; }
.bloque-titulo p { color: var(--texto-suave); font-size: 13px; }

/* ═══════════ CARRUSEL DE FOTOS (barbería) ═══════════ */
.b-carrusel { position: relative; width: 100%; height: 210px; overflow: hidden; border-radius: 22px; margin-bottom: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.b-carrusel-track { display: flex; height: 100%; transition: transform .6s var(--ease-elegante); }
.b-carrusel-slide { min-width: 100%; height: 100%; }
.b-carrusel-slide img { width: 100%; height: 100%; object-fit: cover; }
.b-carrusel-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,11,8,.88) 0%, rgba(13,11,8,.2) 45%, transparent 70%); display: flex; align-items: flex-end; padding: 20px; pointer-events: none; }
.b-carrusel-overlay span { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); letter-spacing: .3px; }
.b-carrusel-dots { position: absolute; bottom: 14px; right: 16px; display: flex; gap: 6px; z-index: 3; }
.b-carrusel-dot { width: 7px; height: 7px; border-radius: 999px; border: 0; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; transition: all .3s var(--ease-out); }
.b-carrusel-dot.activo { width: 22px; background: linear-gradient(135deg, var(--dorado), var(--dorado-2)); }
.pantalla.activa .b-carrusel { animation: revelar .6s var(--ease-out) backwards; animation-delay: .05s; }

.seccion-label { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 12px; }
.seccion-label h3 { font-size: 16px; font-weight: 600; }
.seccion-label a { color: var(--dorado); font-size: 12px; text-decoration: none; }

/* Barberos horizontal */
.barberos-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.barberos-scroll::-webkit-scrollbar { display: none; }
.barbero-card { min-width: 120px; background: var(--panel); border-radius: 20px; padding: 14px; text-align: center; cursor: pointer; border: 1px solid transparent; transition: border-color .15s; }
.barbero-card.sel { border-color: var(--dorado); }
.barbero-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.barbero-card strong { display: block; font-size: 13px; margin-bottom: 2px; }
.barbero-card small { color: var(--texto-suave); font-size: 10px; }
.barbero-card .rating { color: var(--dorado); font-size: 11px; margin-top: 4px; }

.categorias { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: none; }
.categorias::-webkit-scrollbar { display: none; }
.categoria { border: 0; padding: 11px 16px; border-radius: 999px; white-space: nowrap; background: rgba(255,255,255,.07); color: rgba(255,255,255,.84); font-size: 12px; cursor: pointer; }
.categoria.activa { background: var(--dorado); color: #1a1208; font-weight: 700; }

.lista-productos { display: flex; flex-direction: column; gap: 16px; }
.tarjeta-producto { background: var(--menta); border-radius: 24px; padding: 16px 14px; display: grid; grid-template-columns: 1fr 116px; min-height: 170px; color: #fff; overflow: hidden; position: relative; border: 1px solid var(--linea); }
.tarjeta-info h3 { font-size: 20px; line-height: 1.05; font-weight: 600; margin-bottom: 8px; }
.tarjeta-info .meta { font-size: 11px; color: var(--texto-suave); margin-bottom: 10px; }
.tarjeta-precio { font-size: 30px; line-height: 1; margin-bottom: 12px; color: var(--dorado); font-weight: 600; font-variant-numeric: tabular-nums; }
.tarjeta-btn { border: 0; border-radius: 999px; background: var(--dorado); color: #1a1208; font-weight: 700; font-size: 12px; padding: 10px 16px; cursor: pointer; }
.tarjeta-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.tarjeta-visual img { width: 130px; height: 130px; object-fit: cover; border-radius: 18px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.4)); }
.favorito-mini { position: absolute; top: 0; right: 0; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; font-size: 15px; }
.favorito-mini.activo { color: var(--dorado); }

/* Barra inferior */
.barra-inferior { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px); background: rgba(21,20,25,.97); backdrop-filter: blur(14px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; z-index: 40; border-top: 1px solid var(--linea); }
.barra-inferior.oculta { display: none; }
.nav-btn { border: 0; height: 50px; border-radius: 12px; background: transparent; color: rgba(255,255,255,.55); font-size: 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 2px; transition: color .2s, background .2s; }
.nav-btn svg { display:block; width: 21px; height: 21px; }
.nav-btn span { font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.nav-btn.activo { background: transparent; color: var(--dorado); font-weight: 700; }
.nav-btn.activo svg { filter: drop-shadow(0 0 8px rgba(212,175,106,.4)); }

.nav-btn.activo { background: var(--dorado); color: #1a1208; font-weight: 700; }

/* ───────── DETALLE ───────── */
.pantalla-detalle { background: var(--negro-2); overflow: hidden; color: #fff; padding-top: calc(env(safe-area-inset-top) + 56px); }
.detalle-top { padding: 0 16px; }
.acciones-detalle { display: flex; justify-content: space-between; margin-bottom: 18px; }
.imagen-detalle-wrap { position: relative; min-height: 230px; display: flex; align-items: center; justify-content: center; }
.imagen-detalle-wrap img { width: 230px; height: 230px; max-width: 80%; object-fit: cover; border-radius: 26px; filter: drop-shadow(0 18px 22px rgba(0,0,0,.5)); }
.badge { position: absolute; border-radius: 999px; padding: 8px 14px; font-size: 11px; background: var(--dorado); color: #1a1208; font-weight: 700; }
.badge-top { top: 10px; right: 8px; }

.detalle-bottom { position: absolute; left: 0; right: 0; bottom: 0; top: 52%; background: var(--negro); border-radius: 28px 28px 0 0; padding: 22px 18px calc(env(safe-area-inset-bottom) + 20px); overflow-y: auto; }
.detalle-bottom h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-bottom: 4px; }
.detalle-bottom .sub { color: var(--texto-suave); font-size: 12px; margin-bottom: 14px; }
.precio-linea { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.precio-linea strong { font-size: 36px; font-weight: 600; color: var(--dorado); font-variant-numeric: tabular-nums; }
.precio-linea span { color: var(--texto-suave); font-size: 13px; }
.descripcion p { color: rgba(255,255,255,.74); font-size: 13px; line-height: 1.6; margin-bottom: 18px; }

.fila-compra { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.cantidad-box { background: rgba(255,255,255,.06); border-radius: 999px; min-width: 110px; display: flex; align-items: center; justify-content: space-between; padding: 4px; }
.cantidad-box button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 18px; cursor: pointer; }
.cantidad-box span { font-weight: 700; }
.btn-agregar { flex: 1; height: 50px; font-size: 14px; }
.btn-agendar { width: 100%; height: 52px; font-size: 15px; margin-top: 4px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--dorado); border-radius: 999px; cursor: pointer; font-weight: 600; }

/* ───────── MODAL GENÉRICO (citas, perfil, agenda) ───────── */
.panel-sheet { position: absolute; left: 0; right: 0; bottom: -100%; max-height: 88vh; background: var(--negro); border-radius: 26px 26px 0 0; z-index: 80; transition: bottom .32s var(--ease-elegante); padding: 18px 16px calc(env(safe-area-inset-bottom) + 18px); display: flex; flex-direction: column; }
.panel-sheet.abierto { bottom: 0; }
.sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sheet-header h3 { font-size: 18px; }
.sheet-body { overflow-y: auto; }

/* Slots de hora */
.slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 16px; }
.slot { border: 1px solid var(--linea); background: rgba(255,255,255,.04); color: #fff; border-radius: 12px; padding: 10px 0; font-size: 13px; cursor: pointer; text-align: center; }
.slot.libre:active { background: rgba(212,175,106,.2); }
.slot.sel { background: var(--dorado); color: #1a1208; font-weight: 700; border-color: var(--dorado); }
.slot.ocupado { opacity: .3; pointer-events: none; text-decoration: line-through; }

/* ───────── CARRITO ───────── */
.carrito-items { overflow-y: auto; max-height: 48vh; }
.item-carrito { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.item-carrito img { width: 56px; height: 56px; object-fit: cover; border-radius: 14px; }
.item-carrito strong { font-size: 14px; }
.item-carrito small { display: block; color: var(--texto-suave); margin: 4px 0 6px; }
.controles-mini { display: flex; gap: 8px; align-items: center; }
.controles-mini button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.fila-total { display: flex; justify-content: space-between; margin: 14px 0 12px; font-size: 16px; }
.fila-total strong { color: var(--dorado); }
.btn-finalizar { width: 100%; height: 50px; font-size: 15px; }

/* ───────── PERFIL / LISTAS ───────── */
.perfil-head { text-align: center; padding: 10px 0 18px; }
.perfil-head img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--dorado); margin-bottom: 12px; }
.perfil-head h3 { font-family: var(--font-display); font-size: 20px; }
.perfil-head small { color: var(--texto-suave); }
.lista-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--panel); border-radius: 16px; margin-bottom: 10px; }
.lista-item .ed { color: var(--texto-suave); font-size: 12px; }
.chip-estado { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; }
.chip-pendiente { background: rgba(255,183,77,.16); color: var(--warn); }
.chip-confirmada { background: rgba(74,217,127,.16); color: var(--ok); }
.chip-completada { background: rgba(255,255,255,.1); color: var(--texto-suave); }
.chip-cancelada { background: rgba(255,93,82,.16); color: var(--err); }

/* Overlay + toast */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: .25s; z-index: 70; }
.overlay.visible { opacity: 1; visibility: visible; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px); background: var(--negro-2); border: 1px solid var(--linea); color: #fff; padding: 12px 20px; border-radius: 14px; font-size: 13px; z-index: 200; opacity: 0; transition: .25s; box-shadow: var(--sombra); pointer-events: none; max-width: 90%; text-align: center; }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { border-color: var(--ok); }
.toast.err { border-color: var(--err); }

.vacio { text-align: center; color: var(--texto-suave); padding: 30px 10px; font-size: 13px; }

.avatar-iniciales { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--dorado),var(--dorado-2)); color:#1a1208; font-weight:800; font-size:15px; display:grid; place-items:center; border:2px solid var(--dorado); }
.avatar-iniciales.grande { width:84px; height:84px; font-size:30px; border-width:3px; margin:0 auto 12px; }

/* ───────── ESCRITORIO ───────── */
@media (min-width: 768px) {
  body { display: grid; place-items: center; background: #08070b; }
  .pantalla-auth { padding-bottom: 60px; }
  #formBarberia { padding-bottom: 20px; }
  .app { width: 430px; height: 920px; max-height: 96vh; border-radius: 38px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.08); }
  /* Todo es absolute respecto a .app, así que ya queda dentro del marco. */
  .barra-inferior { border-radius: 0 0 38px 38px; }
  .pantalla { border-radius: 38px; }
}

/* ───────── GRILLA 2x2 de cortes ───────── */
.lista-productos.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lista-productos.grid2 .tarjeta-producto { grid-template-columns: 1fr; min-height: 0; padding: 10px; }
.lista-productos.grid2 .tarjeta-visual { order: -1; margin-bottom: 8px; }
.lista-productos.grid2 .tarjeta-visual img { width: 100%; height: 110px; }
.lista-productos.grid2 .tarjeta-info h3 { font-size: 15px; }
.lista-productos.grid2 .tarjeta-precio { font-size: 22px; }
.lista-productos.grid2 .meta { font-size: 10px; }
.lista-productos.grid2 .tarjeta-btn { width: 100%; padding: 9px; }

/* ───────── SECCIONES informativas (por qué elegirnos / testimonios) ───────── */
.seccion-info { margin: 24px 0 8px; }
.seccion-info h3 { font-size: 18px; margin-bottom: 14px; }
.seccion-info h3 b { color: var(--dorado); }
.razones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.razon { background: var(--panel); border-radius: 16px; padding: 14px; text-align: center; border: 1px solid var(--linea); }
.razon .ric { width: 42px; height: 42px; margin: 0 auto 8px; display: grid; place-items: center; background: rgba(212,175,106,.12); border-radius: 12px; color: var(--dorado); }
.razon strong { display: block; font-size: 13px; margin-bottom: 4px; }
.razon small { color: var(--texto-suave); font-size: 11px; line-height: 1.4; }
.testimonios { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.testimonios::-webkit-scrollbar { display: none; }
.testi { min-width: 240px; background: var(--panel); border-radius: 16px; padding: 16px; border: 1px solid var(--linea); }
.testi p { font-size: 12px; color: rgba(255,255,255,.82); line-height: 1.5; margin-bottom: 12px; font-style: italic; }
.testi .autor { display: flex; gap: 10px; align-items: center; }
.testi .autor img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.testi .autor strong { font-size: 12px; display: block; }
.testi .autor span { font-size: 10px; color: var(--dorado); }

/* ───────── FONDO de login con imagen ───────── */
.pantalla-auth { position: relative; }
.auth-fondo { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=900&q=80') center/cover no-repeat; z-index: 0; }
.auth-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,14,19,.82), rgba(15,14,19,.96)); }
.pantalla-auth > *:not(.auth-fondo) { position: relative; z-index: 1; }

/* ───────── SPLASH / BIENVENIDA tipo app nativa ───────── */
.pantalla-splash { background: #0a0a0d; }
.splash-fondo { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=900&q=80') center/cover no-repeat; transform: scale(1.05); }
.splash-capa { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10,10,13,.96) 8%, rgba(10,10,13,.55) 55%, rgba(10,10,13,.35) 100%); }
.contenido-splash { position: relative; z-index: 2; height: 100%; padding: calc(env(safe-area-inset-top) + 56px) 30px calc(env(safe-area-inset-bottom) + 44px); display: flex; flex-direction: column; }
.splash-logo { position: absolute; top: calc(env(safe-area-inset-top) + 56px); left: 30px; }
.splash-top { margin-top: auto; margin-bottom: 30px; }
.splash-logo svg { width: 54px; height: 54px; }
.splash-logo { width: 96px; height: 96px; border-radius: 26px; background: linear-gradient(135deg, var(--dorado), var(--dorado-2)); display: grid; place-items: center; margin-bottom: 26px; box-shadow: 0 16px 44px rgba(212,175,106,.4); }
.splash-top h1 { font-family: var(--font-display); font-size: 66px; line-height: .95; font-weight: 700; color: #fff; margin-bottom: 22px; letter-spacing: -1.5px; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.splash-top p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.82); width: 90%; }
.acciones-splash { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; z-index: 3; }
.acciones-splash .btn-dorado { width: 100%; height: 56px; font-size: 16px; border-radius: 18px; }
.splash-hint { font-size: 12px; color: rgba(255,255,255,.5); }

/* ───────── FOOTER ───────── */
.app-footer { text-align: center; padding: 20px 10px 10px; margin-top: 16px; border-top: 1px solid var(--linea); }
.app-footer p { font-size: 11px; color: var(--texto-suave); line-height: 1.6; }
.app-footer strong { color: var(--dorado); }
.app-footer a { color: var(--dorado); text-decoration: none; }

/* ───────── NOTIFICACIONES ───────── */
.noti-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--err); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; display: grid; place-items: center; }
.noti-item { display: flex; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--linea); }
.noti-item.no-leida { background: rgba(212,175,106,.05); }
.noti-ic { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--texto-suave); }
.noti-cita { background: var(--ok) !important; } .noti-estado { background: var(--dorado) !important; }
.noti-txt strong { display: block; font-size: 14px; margin-bottom: 2px; }
.noti-txt small { display: block; font-size: 12px; color: var(--texto-suave); line-height: 1.4; }
.noti-fecha { font-size: 10px; color: var(--texto-suave); opacity: .7; margin-top: 4px; display: block; }

/* ═══════════ MOVIMIENTO PREMIUM (principios Emil Kowalski) ═══════════ */

/* Reveal de entrada: desde scale(0.95), nunca scale(0) */
@keyframes revelar {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Load orquestado: las tarjetas entran escalonadas */
.pantalla.activa .tarjeta-producto {
  animation: revelar .5s var(--ease-out) backwards;
}
.pantalla.activa .tarjeta-producto:nth-child(1) { animation-delay: .04s; }
.pantalla.activa .tarjeta-producto:nth-child(2) { animation-delay: .08s; }
.pantalla.activa .tarjeta-producto:nth-child(3) { animation-delay: .12s; }
.pantalla.activa .tarjeta-producto:nth-child(4) { animation-delay: .16s; }
.pantalla.activa .tarjeta-producto:nth-child(5) { animation-delay: .20s; }
.pantalla.activa .tarjeta-producto:nth-child(6) { animation-delay: .24s; }

/* Barberos entran con leve stagger */
.pantalla.activa .barbero-card { animation: revelar .45s var(--ease-out) backwards; }

/* Bloque de título entra primero */
.pantalla.activa .bloque-titulo { animation: revelar .55s var(--ease-out) backwards; }

/* Tarjeta: feedback al tocar */
.tarjeta-producto { transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.tarjeta-producto:active { transform: scale(0.985); }

/* Botones de la tarjeta y nav con scale */
.tarjeta-btn { transition: transform .14s var(--ease-out); will-change: transform; }
.tarjeta-btn:active { transform: scale(0.96); }
.nav-btn { transition: transform .14s var(--ease-out), background .2s; }
.nav-btn:active { transform: scale(0.94); }

/* Categorías con feedback */
.categoria { transition: transform .14s var(--ease-out), background .2s; }
.categoria:active { transform: scale(0.95); }

/* Hover SOLO en dispositivos con puntero fino (evita falsos toques en móvil) */
@media (hover: hover) and (pointer: fine) {
  .tarjeta-producto:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
  .barbero-card:hover { transform: translateY(-2px); }
  .btn-dorado:hover { filter: brightness(1.05); }
}

/* Splash: entrada orquestada */
.pantalla-splash.activa .splash-logo { animation: revelar .6s var(--ease-out) backwards; animation-delay: .1s; }
.pantalla-splash.activa .splash-top h1 { animation: revelar .7s var(--ease-out) backwards; animation-delay: .2s; }
.pantalla-splash.activa .splash-top p { animation: revelar .7s var(--ease-out) backwards; animation-delay: .32s; }
.pantalla-splash.activa .acciones-splash { animation: revelar .7s var(--ease-out) backwards; animation-delay: .44s; }

/* Badge de notificación con un pulso sutil al aparecer (no infinito) */
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.noti-badge { animation: pop .3s var(--ease-out); }

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ───────── INPUT DE ARCHIVO (logo/fotos) ───────── */
input[type="file"] {
  width: 100%; padding: 14px; background: rgba(212,175,106,.05);
  border: 1.5px dashed rgba(212,175,106,.4); border-radius: 14px;
  color: var(--texto-suave); font-size: 12px; font-family: var(--font-body);
  cursor: pointer; transition: border-color .2s var(--ease-out), background .2s;
}
input[type="file"]:hover { border-color: var(--dorado); background: rgba(212,175,106,.08); }
input[type="file"]::file-selector-button {
  background: linear-gradient(135deg, var(--dorado), var(--dorado-2)); color: #1a1208;
  border: 0; border-radius: 10px; padding: 8px 14px; margin-right: 12px;
  font-weight: 700; font-family: var(--font-body); cursor: pointer; font-size: 12px;
}
input[type="color"] {
  width: 100%; height: 50px; padding: 4px; border: 1px solid var(--linea);
  border-radius: 14px; background: rgba(255,255,255,.04); cursor: pointer;
}

/* ───────── VER MÁS (cortes) ───────── */
.ver-mas-wrap { display: flex; justify-content: center; margin-top: 16px; }
.btn-ver-mas { background: rgba(212,175,106,.08); border: 1px solid rgba(212,175,106,.3); color: var(--dorado); border-radius: 999px; padding: 12px 28px; font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer; transition: transform .14s var(--ease-out), background .2s; }
.btn-ver-mas:active { transform: scale(0.96); }

/* ───────── FILA DE BARBEROS + VER MÁS ───────── */
.barberos-row { display: flex; align-items: center; gap: 8px; }
.barberos-row .barberos-scroll { flex: 1; }
.ver-mas-barbero { flex-shrink: 0; }
.ver-mas-barbero button { width: 48px; height: 48px; border-radius: 50%; background: rgba(212,175,106,.1); border: 1px solid rgba(212,175,106,.35); color: var(--dorado); font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .14s var(--ease-out); }
.ver-mas-barbero button:active { transform: scale(0.92); }

/* ───────── DETALLE DEL BARBERO (sheet) ───────── */
.barbero-perfil { text-align: center; padding: 8px 4px 4px; }
.barbero-perfil img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--dorado); margin-bottom: 14px; }
.barbero-perfil h3 { font-family: var(--font-display); font-size: 24px; margin-bottom: 4px; }
.barbero-esp { color: var(--texto-suave); font-size: 13px; margin-bottom: 8px; }
.rating-grande { color: var(--dorado); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.barbero-bio { font-size: 13px; line-height: 1.6; color: rgba(245,240,230,.78); background: rgba(255,255,255,.03); border-radius: 14px; padding: 14px; text-align: left; margin-bottom: 8px; }
/* ───────── BOTÓN OJO (ver todos) ───────── */
.btn-ojo {
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(212,175,106,.1); border: 1px solid rgba(212,175,106,.3);
  color: var(--dorado); display: grid; place-items: center; cursor: pointer;
  transition: transform .14s var(--ease-out), background .2s;
}
.btn-ojo:active { transform: scale(0.92); }
@media (hover:hover){ .btn-ojo:hover { background: rgba(212,175,106,.18); } }

/* Grilla de barberos en la hoja "ver todos" */
.barberos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.barberos-grid .barbero-card { width: 100%; }

/* ═══════════ TEMAS DE BARBERÍA (3 estilos) ═══════════ */

/* CLÁSICO — el default (elegante oscuro con dorado). No requiere overrides. */

/* ═══════ MODERNO — vibrante, acentos saturados, formas marcadas ═══════ */
.tema-moderno {
  --fondo: #0b0a14;
  --negro: #12101f;
  --panel: #1a1730;
  --dorado: #8b5cf6;       /* acento morado vibrante */
  --dorado-2: #c084fc;
  --linea: rgba(139,92,246,.18);
}
.tema-moderno body, .tema-moderno { color: #f0eefc; }
.tema-moderno .seccion-label h3,
.tema-moderno .bloque-titulo h2,
.tema-moderno .hero-titulo,
.tema-moderno .splash-top h1 { font-family: var(--font-body); font-weight: 800; letter-spacing: -.03em; }
.tema-moderno .tarjeta-producto { border-radius: 22px; border: 1px solid rgba(139,92,246,.2); background: linear-gradient(160deg, rgba(139,92,246,.08), transparent); }
.tema-moderno .tarjeta-precio { color: #c084fc; }
.tema-moderno .btn-dorado { border-radius: 14px; background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
.tema-moderno .categoria.activa { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
.tema-moderno .nav-btn.activo { color: #c084fc; background: transparent; }
.tema-moderno .barbero-card img { border-color: #8b5cf6; }
.tema-moderno .rating { color: #c084fc; }
.tema-moderno .etiqueta-producto { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: #fff; }
.tema-moderno .splash-logo { background: linear-gradient(135deg, #8b5cf6, #ec4899); }

/* ═══════ MINIMAL — claro, limpio, TODOS los textos oscuros ═══════ */
.tema-minimal {
  --fondo: #f4f1ea;
  --negro: #ffffff;
  --panel: #ffffff;
  --texto: #1a1714;
  --texto-suave: #6b6358;
  --linea: rgba(0,0,0,.1);
  --dorado: #b8923f;        /* dorado más oscuro para contraste sobre blanco */
  --dorado-2: #cda85a;
}
.tema-minimal, .tema-minimal body { color: #1a1714 !important; background: #f4f1ea; }
/* Forzar textos oscuros en todos lados (arregla las letras blancas invisibles) */
.tema-minimal h1, .tema-minimal h2, .tema-minimal h3, .tema-minimal h4,
.tema-minimal strong, .tema-minimal p, .tema-minimal span, .tema-minimal small,
.tema-minimal .tarjeta-info h3, .tema-minimal .barbero-card strong,
.tema-minimal .seccion-label h3, .tema-minimal .bloque-titulo h2 { color: #1a1714; }
.tema-minimal .texto-suave, .tema-minimal small, .tema-minimal .meta,
.tema-minimal .tarjeta-producto .meta { color: #6b6358 !important; }
.tema-minimal .tarjeta-producto,
.tema-minimal .barbero-card,
.tema-minimal .seccion-info .razon,
.tema-minimal .testi { background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.tema-minimal .tarjeta-precio { color: #b8923f; }
.tema-minimal .barra-inferior { background: #fff; border-top: 1px solid rgba(0,0,0,.1); }
.tema-minimal .app-header { background: rgba(244,241,234,.92); }
.tema-minimal .nav-btn { color: #6b6358; }
.tema-minimal .nav-btn.activo { color: #b8923f; background: transparent; }
.tema-minimal .splash-top h1, .tema-minimal .hero-titulo { font-family: var(--font-display); color: #1a1714; }
.tema-minimal .buscador { background: #fff; border: 1px solid rgba(0,0,0,.1); box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.tema-minimal .buscador input { background: transparent; color: #1a1714; border: 0; }
.tema-minimal .buscador svg { color: #b8923f; }
.tema-minimal .buscador:focus-within { border-color: #b8923f; box-shadow: 0 2px 16px rgba(184,146,63,.15); }
.tema-minimal .categoria { background: #fff; color: #6b6358; border: 1px solid rgba(0,0,0,.08); }
.tema-minimal .categoria.activa { background: #b8923f; color: #fff; }
.tema-minimal .razon small, .tema-minimal .testi p { color: #6b6358; }
/* El splash en minimal mantiene fondo oscuro (foto) con texto blanco, eso está bien */
.tema-minimal .splash-top h1, .tema-minimal .splash-top p { color: #fff; }
/* El login también tiene fondo oscuro: forzar textos claros en minimal */
.tema-minimal .pantalla-auth h1, .tema-minimal .pantalla-auth h2, .tema-minimal .pantalla-auth h3,
.tema-minimal .pantalla-auth strong, .tema-minimal .pantalla-auth label,
.tema-minimal .pantalla-auth .auth-hero h1, .tema-minimal .tab-auth { color: #fff !important; }
.tema-minimal .pantalla-auth p, .tema-minimal .pantalla-auth small,
.tema-minimal .auth-hero p, .tema-minimal .pantalla-auth .tab-auth:not(.activa) { color: rgba(255,255,255,.7) !important; }
.tema-minimal .pantalla-auth input { color: #1a1714 !important; }
.tema-minimal .pantalla-auth input::placeholder { color: #999 !important; }

/* Sección Quiénes somos */
.seccion-quienes .quienes-texto { font-size: 13px; line-height: 1.7; color: var(--texto-suave); }

/* ───────── CHECKBOX ACEPTACIÓN ───────── */
.check-acepta { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 12px; color: var(--texto-suave); cursor: pointer; }
.check-acepta input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--dorado); flex-shrink: 0; }
.check-acepta a { color: var(--dorado); }

/* ───────── POPUP DE OFERTAS ───────── */
.oferta-pop { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; }
.oferta-pop.visible { display: flex; animation: revelar .3s var(--ease-out); }
.oferta-card { background: var(--panel); border: 1px solid var(--linea); border-radius: 24px; padding: 30px 24px; text-align: center; max-width: 320px; width: 100%; position: relative; }
.oferta-cerrar { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--texto-suave); font-size: 24px; cursor: pointer; }
.oferta-emoji { font-size: 48px; margin-bottom: 10px; }
.oferta-titulo { font-family: var(--font-display); font-size: 22px; margin-bottom: 8px; }
.oferta-texto { font-size: 13px; color: var(--texto-suave); line-height: 1.6; margin-bottom: 20px; }

/* ───────── TIENDA: visual de producto ───────── */
.lista-productos.grid2 .tarjeta-visual { position: relative; }

/* ═══════ NEÓN — futurista, brillante, cyberpunk ═══════ */
.tema-neon {
  --fondo: #070a14;
  --negro: #0a0e1a;
  --panel: #0f1424;
  --dorado: #00f0ff;        /* cian neón */
  --dorado-2: #ff00e5;      /* magenta neón */
  --linea: rgba(0,240,255,.2);
  --texto: #e8f4ff;
  --texto-suave: rgba(180,220,255,.6);
}
.tema-neon, .tema-neon body { color: #e8f4ff; }
.tema-neon .seccion-label h3, .tema-neon .bloque-titulo h2,
.tema-neon .hero-titulo, .tema-neon .splash-top h1 {
  font-family: var(--font-body); font-weight: 800; letter-spacing: -.02em;
  color: #00f0ff; text-shadow: 0 0 12px rgba(0,240,255,.5);
}
.tema-neon .bloque-titulo h2 b, .tema-neon .seccion-label h3 b { color: #ff00e5; text-shadow: 0 0 12px rgba(255,0,229,.5); }
.tema-neon .tarjeta-producto {
  border-radius: 18px; background: rgba(15,20,36,.8);
  border: 1px solid rgba(0,240,255,.25); box-shadow: 0 0 20px rgba(0,240,255,.06);
}
.tema-neon .tarjeta-precio { color: #00ff9d; text-shadow: 0 0 8px rgba(0,255,157,.4); }
.tema-neon .btn-dorado {
  background: linear-gradient(135deg, #00f0ff, #ff00e5); color: #0a0e1a; font-weight: 800;
  box-shadow: 0 0 20px rgba(0,240,255,.4);
}
.tema-neon .categoria.activa { background: linear-gradient(135deg, #00f0ff, #ff00e5); color: #0a0e1a; box-shadow: 0 0 14px rgba(0,240,255,.4); }
.tema-neon .nav-btn { color: rgba(0,240,255,.5); }
.tema-neon .nav-btn svg { filter: drop-shadow(0 0 4px rgba(0,240,255,.3)); }
.tema-neon .nav-btn.activo { color: #00f0ff; }
.tema-neon .nav-btn.activo svg { filter: drop-shadow(0 0 10px rgba(0,240,255,.7)); }
.tema-neon .barra-inferior { background: rgba(10,14,26,.97); border-top: 1px solid rgba(0,240,255,.35); box-shadow: 0 -2px 20px rgba(0,240,255,.08); }
.tema-neon .barbero-card img { border-color: #00f0ff; box-shadow: 0 0 14px rgba(0,240,255,.4); }
.tema-neon .rating { color: #00ff9d; }
.tema-neon .etiqueta-producto { background: linear-gradient(135deg, #00f0ff, #ff00e5); color: #0a0e1a; }
.tema-neon .splash-logo { background: linear-gradient(135deg, #00f0ff, #ff00e5); box-shadow: 0 0 26px rgba(0,240,255,.5); }
.tema-neon .buscador { background: rgba(15,20,36,.85); border: 1px solid rgba(0,240,255,.3); box-shadow: 0 0 14px rgba(0,240,255,.1) inset; }
.tema-neon .buscador input { background: transparent; border: 0; color: #e8f4ff; }
.tema-neon .buscador input::placeholder { color: rgba(0,240,255,.45); }
.tema-neon .buscador svg { color: #00f0ff; }
.tema-neon .app-header { background: rgba(7,10,20,.9); }

/* Barra de navegación en pantallas muy angostas */
@media (max-width: 360px) {
  .nav-btn { font-size: 8px; }
  .nav-btn svg { width: 19px; height: 19px; }
  .barra-inferior { gap: 2px; padding-left: 4px; padding-right: 4px; }
}

/* ───────── TIENDA: header con carrito ───────── */
.tienda-head { display: flex; align-items: center; justify-content: space-between; }
.btn-carrito-tienda { position: relative; width: 46px; height: 46px; border-radius: 14px; background: var(--panel); border: 1px solid var(--linea); color: var(--dorado); display: grid; place-items: center; cursor: pointer; }
.cart-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--dorado); color: #1a1208; font-size: 11px; font-weight: 800; border-radius: 999px; display: grid; place-items: center; }

/* Filas del carrito */
.cart-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.cart-row img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
.cart-info { flex: 1; } .cart-info strong { display: block; font-size: 14px; } .cart-info span { font-size: 12px; color: var(--dorado); }
.cart-qty { display: flex; align-items: center; gap: 10px; }
.cart-qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linea); background: rgba(255,255,255,.05); color: #fff; font-size: 16px; cursor: pointer; }
.cart-qty span { min-width: 18px; text-align: center; font-weight: 700; }
.carrito-footer { padding: 16px; border-top: 1px solid var(--linea); }
.carrito-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.carrito-total span { color: var(--texto-suave); font-size: 13px; }
.carrito-total strong { font-size: 22px; color: var(--dorado); font-variant-numeric: tabular-nums; }

/* ───────── PUBLICIDAD (carrusel) ───────── */
.publicidad-carrusel { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 10px; margin: 0 0 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.publicidad-carrusel::-webkit-scrollbar { display: none; }
.publi-card { flex: 0 0 85%; scroll-snap-align: start; display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 10px; text-decoration: none; color: inherit; }
.publi-card img { width: 70px; height: 70px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.publi-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.publi-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 999px; width: fit-content; }
.publi-info strong { font-size: 14px; }
.publi-info small { font-size: 11px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ───────── DESTACADOS ───────── */
.destacados-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 10px; scroll-snap-type: x mandatory; }
.destacados-scroll::-webkit-scrollbar { display: none; }
.destacado-card { position: relative; flex: 0 0 140px; scroll-snap-align: start; background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; cursor: pointer; }
.destacado-card img { width: 100%; height: 90px; object-fit: cover; }
.destacado-info { padding: 10px; } .destacado-info strong { display: block; font-size: 13px; }
.destacado-precio { font-size: 13px; color: var(--dorado); font-weight: 700; }
.destacado-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }

/* ───────── NOTICIAS ───────── */
.noticias-lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.noticia-card { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.noticia-card img { width: 90px; height: 90px; object-fit: cover; flex-shrink: 0; }
.noticia-info { padding: 12px 14px 12px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.noticia-card:not(:has(img)) .noticia-info { padding-left: 14px; }
.noticia-info strong { font-size: 14px; }
.noticia-info p { font-size: 12px; color: var(--texto-suave); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ───────── IA: BANNER Y SHEET ───────── */
.ia-banner { width: 100%; display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, rgba(212,175,106,.18), rgba(212,175,106,.04)); border: 1px solid rgba(212,175,106,.3); border-radius: 18px; padding: 14px; margin: 4px 0 16px; cursor: pointer; color: inherit; text-align: left; }
.ia-banner:active { transform: scale(.98); }
.ia-banner-ico { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--dorado), var(--dorado-2)); color: #1a1208; display: grid; place-items: center; flex-shrink: 0; }
.ia-banner-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ia-banner-txt strong { font-size: 15px; }
.ia-banner-txt small { font-size: 11px; color: var(--texto-suave); }
.ia-banner > svg:last-child { color: var(--dorado); flex-shrink: 0; }

.ia-preview { width: 100%; aspect-ratio: 1; max-height: 220px; border-radius: 18px; border: 2px dashed var(--linea); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--texto-suave); margin-bottom: 16px; overflow: hidden; }
.ia-preview span { font-size: 12px; }
.ia-spinner { width: 44px; height: 44px; border: 3px solid var(--linea); border-top-color: var(--dorado); border-radius: 50%; margin: 0 auto; animation: ia-spin .8s linear infinite; }
@keyframes ia-spin { to { transform: rotate(360deg); } }
.ia-analisis { background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 14px; font-size: 13px; line-height: 1.6; color: var(--texto-suave); }
.ia-rec-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; margin-bottom: 12px; }
.ia-rec-foto { width: 100%; height: 150px; overflow: hidden; }
.ia-rec-foto img { width: 100%; height: 100%; object-fit: cover; }
.ia-rec-cuerpo { padding: 12px 14px; }
.ia-rec-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.ia-rec-top strong { font-size: 15px; }
.ia-rec-precio { font-size: 14px; font-weight: 700; color: var(--dorado); flex-shrink: 0; }
.ia-rec-cuerpo small { display: block; font-size: 12px; color: var(--texto-suave); line-height: 1.5; margin-bottom: 12px; }
.ia-rec-btn { width: 100%; height: 42px; font-size: 13px; }

/* ───────── MEMBRESÍAS (cliente) ───────── */
.mem-card { background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.mem-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.mem-card-top strong { font-size: 16px; }
.mem-precio { font-size: 17px; font-weight: 800; color: var(--dorado); }
.mem-card-det { font-size: 12px; color: var(--texto-suave); margin-bottom: 8px; }
.mem-card-desc { font-size: 12px; color: var(--texto-suave); line-height: 1.5; margin-bottom: 12px; }
.mem-btn { width: 100%; height: 44px; }
.mi-mem-box { background: linear-gradient(135deg, rgba(74,217,127,.12), rgba(74,217,127,.04)); border: 1px solid rgba(74,217,127,.3); border-radius: 16px; padding: 16px; margin-bottom: 16px; }
.mi-mem-estado { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.mi-mem-estado.activa { background: rgba(74,217,127,.2); color: #4ad97f; }
.mi-mem-estado.pendiente { background: rgba(255,183,77,.2); color: #ffb74d; }
.mi-mem-box strong { display: block; font-size: 16px; margin-bottom: 4px; }
.mi-mem-det { font-size: 12px; color: var(--texto-suave); line-height: 1.6; }
.mi-mem-aviso { margin-top: 10px; font-size: 12px; color: #ffb74d; background: rgba(255,183,77,.1); padding: 8px 12px; border-radius: 10px; }

/* ───────── MEMBRESÍAS EN PERFIL (mejorado) ───────── */
.mem-empty { text-align: center; padding: 24px 16px; background: var(--panel); border: 1px dashed var(--linea); border-radius: 16px; font-size: 14px; color: var(--texto); }
.mem-empty span { font-size: 12px; color: var(--texto-suave); }
.mem-mine { background: linear-gradient(145deg, rgba(212,175,106,.14), rgba(212,175,106,.03)); border: 1px solid rgba(212,175,106,.28); border-radius: 18px; padding: 16px; margin-bottom: 12px; }
.mem-mine.pend { background: linear-gradient(145deg, rgba(255,183,77,.12), rgba(255,183,77,.02)); border-color: rgba(255,183,77,.3); }
.mem-mine-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mem-mine-head strong { font-size: 16px; display: block; margin-bottom: 5px; }
.mem-mine-head svg { color: var(--dorado); flex-shrink: 0; opacity: .8; }
.mem-mine.pend .mem-mine-head svg { color: #ffb74d; }
.mem-mine-badge { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.mem-mine-badge.activa { background: rgba(74,217,127,.2); color: #4ad97f; }
.mem-mine-badge.pendiente { background: rgba(255,183,77,.2); color: #ffb74d; }
.mem-mine-bar { height: 7px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.mem-mine-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--dorado), var(--dorado-2)); border-radius: 999px; }
.mem-mine-det { font-size: 12px; color: var(--texto-suave); }
.mem-mine-vence { font-size: 11px; color: var(--texto-suave); margin-top: 6px; opacity: .8; }
.mem-mine-aviso { margin-top: 10px; font-size: 11px; color: #ffb74d; background: rgba(255,183,77,.1); padding: 8px 12px; border-radius: 10px; text-align: center; }

/* ───────── BOTÓN VER PLANES (profesional) ───────── */
.btn-planes { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 14px; margin-top: 10px; cursor: pointer; color: inherit; text-align: left; transition: border-color .2s, transform .1s; }
.btn-planes:active { transform: scale(.98); }
.btn-planes:hover { border-color: rgba(212,175,106,.4); }
.btn-planes-ico { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--dorado), var(--dorado-2)); color: #1a1208; display: grid; place-items: center; flex-shrink: 0; }
.btn-planes-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.btn-planes-txt strong { font-size: 14px; }
.btn-planes-txt small { font-size: 11px; color: var(--texto-suave); }
.btn-planes > svg:last-child { color: var(--dorado); flex-shrink: 0; }

/* ───────── ALERTA VENCIMIENTO + PRUEBA GRATIS ───────── */
.mem-mine.vence { border-color: rgba(255,107,107,.4); }
.mem-mine-alerta { margin-top: 10px; font-size: 12px; font-weight: 600; color: #ff6b6b; background: rgba(255,107,107,.1); padding: 9px 12px; border-radius: 10px; text-align: center; }
.mem-card-prueba { border-color: rgba(74,217,127,.45); position: relative; }
.mem-prueba-badge { position: absolute; top: -9px; right: 14px; background: linear-gradient(135deg, #4ad97f, #2eb85c); color: #06210f; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 4px 12px; border-radius: 999px; }

/* ═══════════════════════════════════════════════════
   MEJORAS VISUALES iOS PREMIUM (ondulaciones, profundidad)
   ═══════════════════════════════════════════════════ */

/* Fondo con ondulaciones difuminadas (blobs) detrás del contenido */
#pantallaInicio::before {
  content: ""; position: fixed; top: -10%; left: -20%; width: 70%; height: 45%;
  background: radial-gradient(circle, var(--dorado) 0%, transparent 70%);
  opacity: .10; filter: blur(60px); pointer-events: none; z-index: 0;
  animation: blob-flota 16s ease-in-out infinite;
}
#pantallaInicio::after {
  content: ""; position: fixed; bottom: 5%; right: -25%; width: 75%; height: 50%;
  background: radial-gradient(circle, var(--dorado-2) 0%, transparent 70%);
  opacity: .08; filter: blur(70px); pointer-events: none; z-index: 0;
  animation: blob-flota 20s ease-in-out infinite reverse;
}
@keyframes blob-flota {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, 6%) scale(1.1); }
  66% { transform: translate(-6%, 10%) scale(.95); }
}
#pantallaInicio > * { position: relative; z-index: 1; }

/* Tarjetas de servicio con profundidad iOS y efecto al tocar */
.tarjeta-producto {
  box-shadow: 0 4px 20px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.tarjeta-producto:active {
  transform: scale(.97);
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.tema-minimal .tarjeta-producto:active { box-shadow: 0 2px 12px rgba(0,0,0,.1); }

/* Barra inferior: glassmorphism más marcado (iOS) */
.barra-inferior {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.nav-btn.activo { position: relative; }
.nav-btn.activo::before {
  content: ""; position: absolute; top: 4px; width: 38px; height: 38px;
  background: radial-gradient(circle, var(--dorado) 0%, transparent 70%);
  opacity: .14; border-radius: 50%; z-index: -1;
}

/* Encabezados de sección con más carácter */
.seccion-label h3 { font-size: 19px; letter-spacing: -.02em; }

/* Tarjetas de barbero con sombra suave iOS */
.barbero-card { transition: transform .2s var(--ease-out); }
.barbero-card:active { transform: scale(.96); }

/* Destacados (más pedidos) clicables con feedback */
.destacado-card { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); cursor: pointer; box-shadow: 0 3px 14px rgba(0,0,0,.15); }
.destacado-card:active { transform: scale(.96); }

/* Buscador: sombra de profundidad */
.buscador { box-shadow: 0 2px 16px rgba(0,0,0,.1); }

.tarjeta-producto { cursor: pointer; }

/* ═══════════ BOTÓN CIRCULAR COMENZAR (estilo imagen) ═══════════ */
.acciones-splash { display: flex; flex-direction: column; align-items: stretch; gap: 14px; position: relative; z-index: 3; }
.btn-comenzar-circular {
  position: relative; width: 100%; height: 76px; border: 0; cursor: pointer;
  border-radius: 999px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; padding: 10px; overflow: hidden;
  transition: transform .16s var(--ease-out);
}
.btn-comenzar-circular:active { transform: scale(.97); }
.btn-circ-glow {
  position: absolute; left: 10px; top: 10px; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, var(--dorado), var(--dorado-2));
  filter: blur(14px); opacity: .9; animation: pulso-glow 2.4s ease-in-out infinite;
}
@keyframes pulso-glow { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: 1; } }
.btn-circ-check {
  position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--dorado), var(--dorado-2)); color: #1a1208;
  display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.btn-circ-texto { flex: 1; text-align: center; color: #fff; font-weight: 700; font-size: 19px; letter-spacing: .3px; z-index: 2; }
.btn-circ-flechas { color: rgba(255,255,255,.5); font-size: 22px; font-weight: 700; padding-right: 18px; z-index: 2; animation: flechas-desliza 1.5s ease-in-out infinite; }
@keyframes flechas-desliza { 0%,100% { opacity: .4; transform: translateX(0); } 50% { opacity: 1; transform: translateX(4px); } }

/* ═══════════ TRAMA DE FONDO (textura sutil) ═══════════ */
#pantallaInicio {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size: 22px 22px;
}
.tema-minimal #pantallaInicio {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.04) 1px, transparent 0);
  background-size: 22px 22px;
}

/* ═══════════ MODALES/SHEETS ESTILO iOS (imagen) ═══════════ */
.panel-sheet { border-radius: 28px 28px 0 0 !important; }
/* Barrita superior del sheet (handle iOS) */
.sheet-header::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.25);
}
.tema-minimal .sheet-header::before { background: rgba(0,0,0,.18); }
.sheet-header { position: relative; padding-top: 20px; }

/* Trama sutil también en los sheets/modales */
.panel-sheet {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.03) 1px, transparent 0);
  background-size: 20px 20px;
}
.tema-minimal .panel-sheet {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.035) 1px, transparent 0);
  background-size: 20px 20px;
}
/* Onda decorativa difuminada en la cabecera de los sheets */
.panel-sheet { position: absolute; }
.sheet-body { position: relative; z-index: 1; }

/* ═══════════ ANIMACIÓN BOTÓN COMENZAR (flechas al presionar) ═══════════ */
.btn-comenzar-circular:active .btn-circ-flechas { transform: translateX(14px); opacity: 1; }
.btn-comenzar-circular:active .btn-circ-check { transform: translateX(4px) scale(.95); }
.btn-circ-check, .btn-circ-flechas { transition: transform .25s var(--ease-out), opacity .25s; }

/* ═══════════ PULL TO REFRESH ═══════════ */
.ptr-indicador {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-40px);
  width: 40px; height: 40px; border-radius: 50%; background: var(--panel);
  box-shadow: 0 4px 16px rgba(0,0,0,.2); display: grid; place-items: center;
  z-index: 5000; opacity: 0; transition: opacity .15s;
}
.ptr-spinner { width: 20px; height: 20px; border: 2.5px solid var(--linea); border-top-color: var(--dorado); border-radius: 50%; }
.ptr-indicador.listo .ptr-spinner { border-top-color: var(--dorado); transform: rotate(180deg); transition: transform .2s; }
.ptr-indicador.girando .ptr-spinner { animation: ptr-gira .7s linear infinite; }
@keyframes ptr-gira { to { transform: rotate(360deg); } }

/* ═══════════ LOGO MEJOR POSICIONADO (siempre) ═══════════ */
.splash-logo { margin-left: 0; margin-bottom: 34px; box-shadow: 0 14px 40px rgba(0,0,0,.4); }
.auth-hero .logo { box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.encabezado-app .logo-negocio { flex-shrink: 0; }

/* ═══════════ MODALES: ONDULACIÓN LIMPIA (consistente en todos) ═══════════ */
.panel-sheet {
  border-radius: 30px 30px 0 0 !important;
  overflow: hidden;
}
/* Handle superior (barrita) - en todos los modales */
.panel-sheet > .sheet-header { position: relative; padding-top: 22px !important; }
.panel-sheet > .sheet-header::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.25); z-index: 2;
}
.tema-minimal .panel-sheet > .sheet-header::before { background: rgba(0,0,0,.2); }
/* Brillo curvo decorativo en la parte superior del modal (no se desfasa) */
.panel-sheet::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 80px;
  background: radial-gradient(120% 80px at 50% 0, rgba(255,255,255,.07), transparent 70%);
  pointer-events: none; z-index: 1;
}
.tema-minimal .panel-sheet::before {
  background: radial-gradient(120% 80px at 50% 0, rgba(0,0,0,.05), transparent 70%);
}
.tema-neon .panel-sheet::before {
  background: radial-gradient(120% 80px at 50% 0, rgba(0,240,255,.12), transparent 70%);
}
/* Sombra del modal: clara sobre oscuro, oscura sobre claro */
.panel-sheet { box-shadow: 0 -10px 50px rgba(255,255,255,.05), 0 -3px 14px rgba(0,0,0,.45); }
.tema-minimal .panel-sheet { box-shadow: 0 -10px 50px rgba(0,0,0,.13), 0 -3px 14px rgba(0,0,0,.07); }

/* ═══════════ ICONOS HEADER VISIBLES EN TODOS LOS TEMAS ═══════════ */
.btn-icono, .carrito-trigger { color: var(--texto); }
.tema-minimal .btn-icono, .tema-minimal .carrito-trigger,
.tema-minimal #abrirNotis, .tema-minimal #abrirCarrito { color: #1a1714 !important; }
.tema-minimal .btn-icono svg, .tema-minimal .carrito-trigger svg { stroke: #1a1714 !important; }
.tema-minimal #abrirNotis svg, .tema-minimal #abrirCarrito svg { stroke: #1a1714 !important; }

/* ═══════════ BARRA NEÓN: INVERTIR ICONO ACTIVO ═══════════ */
/* Inactivos: cian tenue. Activo: fondo cian sólido con icono oscuro (invertido) */
.tema-neon .nav-btn { color: rgba(0,240,255,.55); }
.tema-neon .nav-btn.activo { color: #06121a; }
.tema-neon .nav-btn.activo::before {
  content: ""; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, #00f0ff, #00c8d4);
  box-shadow: 0 0 18px rgba(0,240,255,.6); z-index: -1;
}
.tema-neon .nav-btn.activo svg { filter: none; }

/* ═══════════ SELECCIÓN CON SOMBRA DE COLOR (sobresale) ═══════════ */
/* Cuando se selecciona un slot de hora, barbero, etc → sombra del color de marca */
.slot.activo, .slot-hora.activo, .chip.activo, .barbero-sel.activo {
  box-shadow: 0 4px 18px rgba(212,175,106,.4) !important;
  border-color: var(--dorado) !important;
  transform: translateY(-1px);
}
.tema-moderno .slot.activo, .tema-moderno .chip.activo { box-shadow: 0 4px 18px rgba(139,92,246,.4) !important; }
.tema-neon .slot.activo, .tema-neon .chip.activo { box-shadow: 0 0 18px rgba(0,240,255,.5) !important; }
/* Tarjetas seleccionables: elevación con color al tocar/activar */
.seleccionable.activo, .opcion-activa {
  box-shadow: 0 6px 22px rgba(212,175,106,.35);
  border: 1px solid var(--dorado);
}
/* Inputs enfocados: halo del color de marca */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(212,175,106,.18);
}
.tema-moderno input:focus, .tema-moderno select:focus { box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
.tema-neon input:focus, .tema-neon select:focus { box-shadow: 0 0 0 3px rgba(0,240,255,.2); }

/* ═══════════ MEJORAS GENERALES DE DISEÑO ═══════════ */
/* Avatar del header con anillo de marca */
.avatar-iniciales, #avatarUsuario {
  box-shadow: 0 2px 10px rgba(0,0,0,.2), 0 0 0 2px rgba(212,175,106,.25);
}
/* Badges (fuego, etiquetas) con más presencia */
.destacado-badge, .noti-badge { box-shadow: 0 2px 8px rgba(0,0,0,.3); }
/* Botones dorados con sombra de color sutil */
.btn-dorado { box-shadow: 0 4px 16px rgba(212,175,106,.25); }
.btn-dorado:active { box-shadow: 0 2px 8px rgba(212,175,106,.3); }
.tema-moderno .btn-dorado { box-shadow: 0 4px 16px rgba(139,92,246,.3); }
.tema-neon .btn-dorado { box-shadow: 0 0 18px rgba(0,240,255,.4); }
/* Secciones con respiración */
.seccion-label { margin-top: 6px; }
/* Transición suave global en elementos interactivos */
button, .nav-btn { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s; }

/* ═══════════ BOTÓN COMENZAR: ANIMACIÓN DE TRASLADO AL CLICK ═══════════ */
.btn-comenzar-circular.cargando { pointer-events: none; overflow: visible; }
/* Mientras el botón viaja, permitir que se vea cruzar (sin recorte de la pantalla) */
.pantalla-splash:has(.btn-comenzar-circular.cargando) { overflow: visible; }
.pantalla-splash:has(.btn-comenzar-circular.cargando) .acciones-splash { overflow: visible; }
body.animando-comenzar .pantalla,
body.animando-comenzar .pantalla-splash,
body.animando-comenzar .contenido-splash,
body.animando-comenzar .acciones-splash { overflow: visible !important; }
.btn-comenzar-circular.cargando .btn-circ-check {
  animation: check-viaja .7s var(--ease-elegante) forwards;
}
.btn-comenzar-circular.cargando .btn-circ-texto { opacity: 0; transition: opacity .2s; }
.btn-comenzar-circular.cargando .btn-circ-flechas { opacity: 0; }
@keyframes check-viaja {
  0% { transform: translateX(0) scale(1); opacity: 1; }
  15% { transform: translateX(0) scale(1.15); opacity: 1; }
  85% { transform: translateX(calc(100vw - 130px)) scale(1); opacity: 1; }
  100% { transform: translateX(calc(100vw - 130px)) scale(.4); opacity: 0; }
}
.btn-comenzar-circular.cargando .btn-circ-glow {
  animation: glow-viaja .7s var(--ease-elegante) forwards;
}
@keyframes glow-viaja {
  0% { transform: translateX(0); opacity: .9; }
  85% { transform: translateX(calc(100vw - 130px)); opacity: .9; }
  100% { transform: translateX(calc(100vw - 130px)); opacity: 0; }
}

/* ═══════════ ANIMACIONES PROFESIONALES GENERALES ═══════════ */
/* Entrada escalonada de las tarjetas al cargar */
@keyframes sube-aparece {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.tarjeta-producto, .barbero-card, .destacado-card, .noticia-card, .mem-card {
  animation: sube-aparece .5s var(--ease-out) backwards;
}
.barberos-scroll > *:nth-child(1) { animation-delay: .04s; }
.barberos-scroll > *:nth-child(2) { animation-delay: .08s; }
.barberos-scroll > *:nth-child(3) { animation-delay: .12s; }
.barberos-scroll > *:nth-child(4) { animation-delay: .16s; }
.lista-productos > *:nth-child(1) { animation-delay: .05s; }
.lista-productos > *:nth-child(2) { animation-delay: .1s; }
.lista-productos > *:nth-child(3) { animation-delay: .15s; }
.lista-productos > *:nth-child(4) { animation-delay: .2s; }

/* Transición suave al cambiar de pantalla */
.pantalla.activa { animation: pantalla-entra .35s var(--ease-out); }
@keyframes pantalla-entra { from { opacity: 0; } to { opacity: 1; } }

/* Sheets: entrada con rebote suave */
.panel-sheet { transition: bottom .42s cubic-bezier(.34,1.3,.64,1); }

/* Botones: feedback de presión consistente */
button:active { transform: scale(.96); }
.btn-dorado:active { transform: scale(.97); }

/* Badge de notificación con pulso */
.noti-badge { animation: badge-pulso 2s ease-in-out infinite; }
@keyframes badge-pulso { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Avatar y elementos circulares: hover sutil */
.avatar-iniciales { transition: transform .2s var(--ease-out); }
.usuario:active .avatar-iniciales { transform: scale(.92); }

/* Skeleton shimmer para cargas (si se usa) */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.cargando-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}

/* Galería del carrusel (admin barbería) */
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.galeria-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; }
.galeria-borrar { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center; line-height: 1; }

/* Tarjetas de usuario (admin barbería) */
.usuario-card { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.usuario-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--dorado), var(--dorado-2)); color: #1a1208; display: grid; place-items: center; font-weight: 700; font-size: 18px; flex-shrink: 0; overflow: hidden; }
.usuario-avatar img { width: 100%; height: 100%; object-fit: cover; }
.usuario-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.usuario-info strong { font-size: 15px; }
.usuario-info small { font-size: 12px; color: var(--texto-suave); }
.usuario-wa { width: 40px; height: 40px; border-radius: 50%; background: rgba(37,211,102,.15); color: #25d366; display: grid; place-items: center; flex-shrink: 0; text-decoration: none; transition: transform .15s; }
.usuario-wa:active { transform: scale(.92); }

/* Paginación (admin) */
.paginacion { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 16px 0 8px; flex-wrap: wrap; }
.pag-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--linea, rgba(255,255,255,.12)); background: var(--panel); color: var(--dorado); font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .1s; }
.pag-btn:hover:not([disabled]) { background: rgba(212,175,106,.12); }
.pag-btn:active:not([disabled]) { transform: scale(.92); }
.pag-btn[disabled] { opacity: .35; cursor: not-allowed; }
.pag-info { font-weight: 700; font-size: 14px; min-width: 54px; text-align: center; }
.pag-total { font-size: 12px; color: var(--texto-suave); margin-left: 4px; }

/* Acciones de cita del cliente (reagendar/cancelar) */
.cita-acc-cli { display: flex; gap: 8px; width: 100%; }
.cita-acc-cli button { flex: 1; height: 40px; border-radius: 10px; border: 0; font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-cita-reagendar { background: rgba(212,175,106,.16); color: var(--dorado); }
.btn-cita-cancelar { background: rgba(229,100,93,.16); color: #e5645d; }
.btn-cita-reagendar:active, .btn-cita-cancelar:active { transform: scale(.97); }
.cita-nota-cli { font-size: 12px; color: var(--texto-suave); background: rgba(255,255,255,.04); border-radius: 8px; padding: 8px 10px; width: 100%; }

/* Botón calificar */
.btn-cita-calificar { width:100%; height:40px; border-radius:10px; border:0; background:rgba(212,175,106,.16); color:var(--dorado); font-weight:700; font-size:13px; cursor:pointer; }
.btn-cita-calificar:active { transform:scale(.97); }

/* ═══════ Testimonios: botón comentar, avatar, estrellas ═══════ */
.btn-comentar {
  display: flex; align-items: center; gap: 6px;
  background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.35);
  color: var(--dorado); border-radius: 999px; padding: 7px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s;
}
.btn-comentar:hover { background: var(--dorado); color: #16130f; }
.btn-comentar:active { transform: scale(.96); }
.testi-stars { color: #d4af37; font-size: 13px; margin-bottom: 8px; letter-spacing: 1px; }
.testi-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--dorado), #a17f28); color: #16130f;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.testi-vacio { color: rgba(255,255,255,.5); font-size: 13px; padding: 20px; text-align: center; width: 100%; }

/* Comentarios del barbero en su hoja */
.coment-barbero-lista { margin-top: 16px; text-align: left; }
.coment-barbero-tit { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: rgba(255,255,255,.9); }
.coment-barbero-item { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.coment-barbero-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.coment-barbero-top strong { font-size: 13px; }
.coment-barbero-item p { font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.45; margin: 0; }

/* Botón "Ver todos" estilo texto (reemplaza el ojo) */
.btn-ver-todos { background: none; border: 0; color: var(--dorado); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; padding: 4px 2px; }
.btn-ver-todos:active { opacity: .6; }

/* ═══════════════════════════════════════════════════════
   SWEETALERT tipo iOS — diseño profesional
   ═══════════════════════════════════════════════════════ */
.swal2-popup.swal-ios {
  border-radius: 28px !important;
  padding: 26px 22px 22px !important;
  background: linear-gradient(180deg, #1e1a14, #151109) !important;
  border: 1px solid rgba(212,175,55,.18) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06) !important;
  max-width: 380px !important;
}
.swal-ios .swal2-title {
  font-size: 20px !important; font-weight: 800 !important;
  color: #fff !important; padding: 0 0 4px !important;
  letter-spacing: -.4px !important;
}
.swal-ios .swal2-html-container { margin: 10px 0 0 !important; color: rgba(255,255,255,.75) !important; font-size: 14px !important; }

/* Estrellas de calificación tipo iOS */
.swal-stars { display: flex; gap: 10px; justify-content: center; margin: 18px 0 20px; }
.swal-stars span {
  font-size: 40px; cursor: pointer; color: #3a352c;
  transition: transform .15s cubic-bezier(.16,1,.3,1), color .15s;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.swal-stars span.on { color: #f5c542; }
.swal-stars span:active { transform: scale(1.3); }

/* Inputs iOS */
.swal-ios .swal2-input, .swal-ios .swal2-textarea {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 14px !important; color: #fff !important;
  font-size: 15px !important; box-shadow: none !important;
  margin: 8px 0 !important; padding: 14px 16px !important;
  transition: border-color .2s !important;
}
.swal-ios .swal2-input::placeholder, .swal-ios .swal2-textarea::placeholder { color: rgba(255,255,255,.35) !important; }
.swal-ios .swal2-input:focus, .swal-ios .swal2-textarea:focus {
  border-color: var(--dorado) !important; outline: none !important;
  background: rgba(255,255,255,.08) !important;
}
.swal-ios .swal2-textarea { min-height: 90px !important; resize: none !important; }

/* Botones iOS */
.swal-ios .swal2-actions { gap: 10px !important; margin-top: 20px !important; width: 100% !important; display: flex !important; }
.swal-ios .swal2-confirm, .swal-ios .swal2-cancel {
  flex: 1 !important; margin: 0 !important;
  border-radius: 14px !important; height: 50px !important;
  font-size: 15px !important; font-weight: 700 !important;
  transition: transform .2s, filter .2s !important;
  box-shadow: none !important;
}
.swal-ios .swal2-confirm {
  background: linear-gradient(145deg, #e6c454, var(--dorado)) !important;
  color: #16130f !important;
}
.swal-ios .swal2-confirm:hover { filter: brightness(1.05) !important; }
.swal-ios .swal2-confirm:active, .swal-ios .swal2-cancel:active { transform: scale(.97) !important; }
.swal-ios .swal2-cancel {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.85) !important;
}
.swal2-backdrop-show { backdrop-filter: blur(6px); background: rgba(0,0,0,.55) !important; }

/* Nombre-avatar picker (para elegir anónimo/nombre) */
.swal-anon-hint { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 8px; text-align: center; }