/* AURA 16_67 — estilos. Movido sin cambios desde aura_4_production_16_66.html (modularización etapa A). */
  :root{
    --black:#f8f4ec;
    --charcoal:#efe6d2;
    --white:#ffffff;
    --cream:#2b241c;
    --ink:#2b241c;
    --gold:#b8933f;
    --gold-light:#dcc077;
    --gold-dark:#8a6526;
    --font-display:'Playfair Display', serif;
    --font-sans:'Inter', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* Auditoría Sección 3: scroll-behavior:smooth nativo se quitó a propósito.
     No respeta el alto real del header fijo (el destino queda tapado) y su
     comportamiento varía entre navegadores/móvil, además de no poder
     cancelarse limpiamente si el usuario hace scroll manual mientras anima.
     Se sustituyó por AURA_smoothScrollTo/AURA_smoothScrollToY, un
     requestAnimationFrame propio más abajo en este archivo. */
  html{scroll-behavior:auto;}
  body{
    background:var(--black);
    color:var(--cream);
    font-family:var(--font-sans);
    font-weight:300;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--gold); color:var(--ink);}
  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-track{background:var(--black);}
  ::-webkit-scrollbar-thumb{background:var(--gold); border-radius:4px;}
  img{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}

  .max-w-7xl{max-width:80rem; margin:0 auto; padding:0 1.5rem;}
  .max-w-3xl{max-width:48rem; margin:0 auto; padding:0 1.5rem;}

  .section-heading{
    font-family:var(--font-display);
    font-size:2.25rem;
    letter-spacing:0.02em;
    color:var(--cream);
  }
  @media(min-width:768px){ .section-heading{font-size:3rem;} }

  .section-eyebrow{
    color:var(--gold);
    font-size:0.75rem;
    letter-spacing:0.35em;
    text-transform:uppercase;
    font-family:var(--font-sans);
    margin-bottom:1rem;
  }
  @media(min-width:768px){ .section-eyebrow{font-size:0.875rem;} }

  .gold-divider{
    width:4rem; height:1px; background:var(--gold);
    margin:1.5rem auto;
  }

  .btn-gold{
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.75rem 2rem; background:var(--gold); color:var(--ink);
    font-size:0.875rem; letter-spacing:0.35em; text-transform:uppercase;
    transition:all 0.3s ease; border:none; cursor:pointer; font-family:var(--font-sans);
  }
  .btn-gold:hover{ background:var(--gold-light); letter-spacing:0.4em; }
  .btn-gold:disabled{ opacity:0.6; cursor:not-allowed; }

  .btn-outline{
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.75rem 2rem; border:1px solid var(--gold); color:var(--gold);
    font-size:0.875rem; letter-spacing:0.35em; text-transform:uppercase;
    transition:all 0.3s ease;
  }
  .btn-outline:hover{ background:var(--gold); color:var(--ink); }

  .card-premium{
    background:var(--charcoal); border:1px solid rgba(201,162,75,0.2);
    padding:1.5rem; transition:all 0.3s ease;
  }
  .card-premium:hover{ border-color:rgba(201,162,75,0.6); transform:translateY(-4px); }

  .fade-up{ opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s ease; }
  .fade-up.visible{ opacity:1; transform:translateY(0); }
  .fade-left{ opacity:0; transform:translateX(-30px); transition:opacity 0.9s ease, transform 0.9s ease; }
  .fade-left.visible{ opacity:1; transform:translateX(0); }
  .fade-right{ opacity:0; transform:translateX(30px); transition:opacity 0.9s ease, transform 0.9s ease; }
  .fade-right.visible{ opacity:1; transform:translateX(0); }
  /* CORRECCIÓN 2026-09-29: causa real de los ~6px de scroll horizontal del sitio
     público: .fade-right arranca desplazado 30px a la derecha (translateX) hasta
     que entra en pantalla, y en las columnas pegadas al borde derecho (about-text,
     map-wrap) ese desplazamiento sobresalía del viewport. Se contiene SOLO el
     desplazamiento de la animación en el contenedor directo (overflow-x:clip no
     crea scroll ni recorta contenido real, que siempre cabe al terminar). */
  .about-grid, .location-grid{ overflow-x:clip; }
  .fade-scale{ opacity:0; transform:scale(0.95); transition:opacity 0.6s ease, transform 0.6s ease; }
  .fade-scale.visible{ opacity:1; transform:scale(1); }

  /* Header */
  header{
    position:fixed; top:0; left:0; right:0; z-index:40;
    transition:all 0.5s ease; padding:1.5rem 0; background:transparent;
  }
  header.menu-open, header.menu-open.scrolled{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; transition:none !important; }
  header.scrolled{
    background:rgba(248,244,236,0.93); backdrop-filter:blur(8px);
    padding:0.75rem 0; box-shadow:0 10px 25px rgba(43,36,28,0.08);
  }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
  .logo{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:0.35em; color:var(--gold); }
  nav.desktop-nav{ display:none; align-items:center; gap:2rem; }
  nav.desktop-nav a{
    font-size:0.75rem; letter-spacing:0.35em; text-transform:uppercase;
    color:rgba(255,252,244,0.9); transition:color 0.2s ease;
  }
  nav.desktop-nav a:hover{ color:var(--gold-light); }
  header.scrolled nav.desktop-nav a{ color:rgba(43,36,28,0.75); }
  header.scrolled nav.desktop-nav a:hover{ color:var(--gold-dark); }
  /* Fix auditoría: el menú de escritorio (logo + 7 links) necesita ~1013px
     de ancho real y antes aparecía desde 768px — en tablets (768-1023px) los
     links de más a la derecha (Ubicación, Reservar) quedaban fuera de la
     pantalla, sin scroll ni forma de darles clic. Se sube el punto de quiebre
     a 1080px (con margen) para que en tablets se sega usando el menú
     hamburguesa (ya probado y corregido arriba) en vez del nav horizontal
     que no cabe. No cambia nada en escritorio real ni en el menú móvil ya
     corregido. */
  @media(min-width:1080px){ nav.desktop-nav{ display:flex; } .menu-btn{ display:none; } }
  .menu-btn{ background:none; border:none; color:var(--gold); cursor:pointer; padding:0.25rem; }
  .mobile-menu{
    display:none; background:var(--black); border-top:1px solid rgba(201,162,75,0.2);
    margin-top:1rem; padding:1.5rem; flex-direction:column; gap:1.25rem;
  }
  /* Fix auditoría: antes .mobile-menu.open solo crecía dentro de <header>
     (position:fixed), que únicamente mide el alto de su propio contenido.
     El menú abierto quedaba como un panel corto y el contenido del hero de
     abajo se veía "sangrando" debajo/detrás de los links del menú en
     móvil. Ahora, abierto, cubre toda la pantalla como overlay (position:
     fixed; inset) con scroll propio si hace falta, y .header-inner sube a
     z-index:2 para que la barra superior (logo + botón cerrar) se siga
     viendo por encima del overlay. No cambia nada del comportamiento en
     escritorio (donde .menu-btn ya está oculto) ni la apariencia del menú
     cerrado. */
  .mobile-menu.open{
    display:flex; position:fixed; inset:0; z-index:1;
    margin-top:0; padding:6rem 1.5rem 2rem; overflow-y:auto;
  }
  .mobile-menu a{
    font-size:0.875rem; letter-spacing:0.35em; text-transform:uppercase; color:rgba(43,36,28,0.8);
  }
  .mobile-menu a:hover{ color:var(--gold); }

  /* Hero */
  #top{ position:relative; height:100vh; min-height:640px; width:100%; overflow:hidden; }
  #top .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 35%; }
  @media(min-width:768px){ #top .hero-bg{ object-position:65% 25%; } }
  #top .hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(20,15,8,0.72) 0%, rgba(20,15,8,0.32) 45%, rgba(20,15,8,0.55) 78%, var(--black) 100%);
  }
  .hero-content{
    position:relative; z-index:10; display:flex; height:100%; flex-direction:column;
    align-items:center; justify-content:center; padding:0 1.5rem; text-align:center;
  }
  .hero-content h1{
    font-family:var(--font-display); font-size:3.75rem; letter-spacing:0.02em; color:#fbf7ee;
    text-shadow:0 2px 24px rgba(0,0,0,0.35);
  }
  @media(min-width:768px){ .hero-content h1{ font-size:6rem; } }
  .hero-sub{ margin-top:1.5rem; max-width:36rem; color:rgba(255,252,244,0.85); font-size:1rem; font-weight:300; }
  @media(min-width:768px){ .hero-sub{ font-size:1.125rem; } }
  .hero-actions{ margin-top:2.5rem; display:flex; flex-direction:column; gap:1rem; }
  @media(min-width:640px){ .hero-actions{ flex-direction:row; } }
  .scroll-hint{
    position:absolute; bottom:2rem; left:0; right:0; display:flex; justify-content:center; z-index:10;
  }
  .scroll-hint span{
    height:2.5rem; width:1px; background:linear-gradient(to bottom, var(--gold), transparent);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

  section{ padding:7rem 0; }
  @media(min-width:768px){ section{ padding:9rem 0; } }
  .bg-black{ background:var(--black); }
  .bg-charcoal{ background:var(--charcoal); }
  .text-center{ text-align:center; }

  /* About */
  .about-grid{ display:grid; gap:4rem; align-items:center; }
  @media(min-width:768px){ .about-grid{ grid-template-columns:1fr 1fr; } }
  .about-img-wrap{ position:relative; height:420px; overflow:hidden; background:var(--charcoal); }
  @media(min-width:768px){ .about-img-wrap{ height:520px; } }
  .about-img-wrap img{ width:100%; height:100%; object-fit:cover; }
  .about-img-wrap img.contain{ object-fit:contain; }
  .about-img-border{ position:absolute; inset:0; border:1px solid rgba(201,162,75,0.3); margin:1rem; pointer-events:none; }
  .about-text p{ color:rgba(43,36,28,0.7); line-height:1.7; margin-bottom:1rem; }
  .about-text p:last-of-type{ margin-bottom:2rem; }
  .about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  .about-stats .stat-value{ font-family:var(--font-display); font-size:1.875rem; color:var(--gold); }
  .about-stats .stat-label{ font-size:0.75rem; color:rgba(43,36,28,0.5); text-transform:uppercase; letter-spacing:0.05em; margin-top:0.25rem; }

  /* Services / Testimonials grids */
  .grid-services{ display:grid; gap:1.5rem; }
  @media(min-width:640px){ .grid-services{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:1024px){ .grid-services{ grid-template-columns:repeat(3,1fr); } }
  .grid-services .card-premium h3{ font-family:var(--font-display); font-size:1.25rem; color:var(--cream); margin-bottom:0.5rem; }
  .grid-services .card-premium p.desc{ color:rgba(43,36,28,0.6); font-size:0.875rem; line-height:1.6; margin-bottom:1rem; }
  .grid-services .card-premium p.price{ color:var(--gold); font-size:0.875rem; letter-spacing:0.03em; }
  .service-icon{ color:var(--gold); margin-bottom:1rem; }

  /* Gallery */
  .grid-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
  @media(min-width:768px){ .grid-gallery{ grid-template-columns:repeat(3,1fr); } }
  .gallery-item{ position:relative; overflow:hidden; height:200px; cursor:pointer; }
  .gallery-item.big{ grid-column:span 2; grid-row:span 2; height:420px; }
  .gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform 0.7s ease; }
  .gallery-item:hover img{ transform:scale(1.1); }
  .gallery-overlay{ position:absolute; inset:0; background:rgba(10,10,10,0); transition:background 0.5s ease; }
  .gallery-item:hover .gallery-overlay{ background:rgba(10,10,10,0.2); }

  /* Places / Espacios */
  .grid-places{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.85rem; }
  @media(min-width:640px){ .grid-places{ gap:1.25rem; } }
  @media(min-width:768px){ .grid-places{ grid-template-columns:repeat(4,1fr); gap:1.5rem; } }
  .place-item{ position:relative; overflow:hidden; height:190px; border:1px solid rgba(184,147,63,0.2); }
  @media(min-width:640px){ .place-item{ height:260px; } }
  @media(min-width:768px){ .place-item{ height:380px; } }
  .place-item img{ width:100%; height:100%; object-fit:cover; transition:transform 0.7s ease; }
  .place-item:hover img{ transform:scale(1.08); }
  .place-overlay{
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(20,15,8,0.85) 0%, rgba(20,15,8,0.15) 45%, rgba(20,15,8,0) 65%);
  }
  .place-label{
    position:absolute; left:0; right:0; bottom:0.6rem; text-align:center;
    font-family:var(--font-display); font-size:0.85rem; letter-spacing:0.02em; color:#fbf7ee;
    padding:0 0.5rem; text-shadow:0 2px 12px rgba(0,0,0,0.4);
  }
  @media(min-width:640px){ .place-label{ bottom:1.1rem; font-size:1.05rem; letter-spacing:0.04em; padding:0 0.75rem; } }

  /* Team */
  .grid-team{ display:grid; gap:2rem; }
  @media(min-width:640px){ .grid-team{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:1024px){ .grid-team{ grid-template-columns:repeat(4,1fr); } }
  .team-card{ text-align:center; }
  .team-photo{ position:relative; height:16rem; width:100%; overflow:hidden; margin-bottom:1rem; }
  .team-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter 0.7s ease; }
  .team-card:hover .team-photo img{ filter:grayscale(0); }
  .team-card h3{ font-family:var(--font-display); font-size:1.25rem; color:var(--cream); }
  .team-card .role{ color:var(--gold); font-size:0.75rem; letter-spacing:0.35em; text-transform:uppercase; margin:0.25rem 0 0.75rem; }
  .team-card .social{ display:inline-flex; align-items:center; justify-content:center; color:rgba(43,36,28,0.5); transition:color 0.2s ease; }
  .team-card .social:hover{ color:var(--gold); }

  /* Testimonials / Reseñas de Google (carrusel) */
  .reviews-rating{ display:flex; flex-direction:column; align-items:center; gap:0.4rem; margin-top:1.4rem; }
  .reviews-stars-big{ display:flex; gap:0.2rem; color:var(--gold); }
  .reviews-rating-text{ font-size:0.8rem; color:rgba(43,36,28,0.55); letter-spacing:0.02em; }
  .reviews-carousel-wrap{ position:relative; display:flex; align-items:center; gap:0.9rem; }
  .reviews-track{
    display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    padding:0.5rem 0.25rem 1.5rem; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .reviews-track::-webkit-scrollbar{ height:0; display:none; }
  .review-card{
    flex:0 0 82vw; scroll-snap-align:start; background:var(--charcoal); border:1px solid rgba(201,162,75,0.2);
    padding:1.75rem 1.5rem; display:flex; flex-direction:column; transition:all 0.3s ease;
  }
  @media(min-width:640px){ .review-card{ flex-basis:320px; } }
  .review-card:hover{ border-color:rgba(201,162,75,0.55); transform:translateY(-3px); }
  .review-card-top{ display:flex; align-items:center; gap:0.85rem; margin-bottom:1.1rem; }
  .review-avatar{
    width:2.75rem; height:2.75rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff8ec; flex-shrink:0;
  }
  .review-source{ display:flex; align-items:center; gap:0.4rem; font-size:0.75rem; color:rgba(43,36,28,0.55); letter-spacing:0.01em; }
  .review-stars{ display:flex; gap:0.15rem; color:var(--gold); margin-top:0.3rem; }
  .review-quote{ color:rgba(43,36,28,0.75); line-height:1.65; font-size:0.92rem; flex:1; }
  .review-time{ margin-top:1.1rem; font-size:0.7rem; color:rgba(43,36,28,0.4); text-transform:uppercase; letter-spacing:0.07em; }
  .reviews-nav{
    flex-shrink:0; width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid rgba(201,162,75,0.35);
    background:none; color:var(--gold); cursor:pointer; align-items:center; justify-content:center;
    transition:all 0.2s ease; display:flex;
  }
  .reviews-nav svg{ pointer-events:none; }
  .reviews-nav:hover{ background:var(--gold); color:var(--ink); }
  @media(max-width:767px){ .reviews-nav{ display:none; } }
  .reviews-dots{ display:flex; justify-content:center; gap:0.5rem; margin-top:0.25rem; }
  .reviews-dot{ width:0.45rem; height:0.45rem; border-radius:50%; background:rgba(184,147,63,0.3); border:none; cursor:pointer; padding:0; transition:all 0.25s ease; }
  .reviews-dot.active{ background:var(--gold); width:1.5rem; border-radius:999px; }
  .reviews-cta-wrap{ display:flex; justify-content:center; margin-top:2.25rem; }

  /* Redes sociales (preview visual) */
  .social-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.85rem; }
  @media(min-width:640px){ .social-grid{ grid-template-columns:repeat(4,1fr); gap:1.1rem; } }
  .social-tile{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; border:1px solid rgba(184,147,63,0.2); }
  .social-tile img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
  .social-tile:hover img{ transform:scale(1.08); }
  .social-tile-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(20,15,8,0); color:#fbf7ee; opacity:0; transition:all 0.35s ease;
  }
  .social-tile:hover .social-tile-overlay{ background:rgba(20,15,8,0.45); opacity:1; }
  .social-cta-wrap{ display:flex; flex-direction:column; align-items:center; gap:0.65rem; margin-top:2.5rem; }
  .social-handle{ font-size:0.78rem; letter-spacing:0.15em; color:rgba(43,36,28,0.45); text-transform:uppercase; }

  /* Location */
  .location-grid{ display:grid; gap:3rem; align-items:center; }
  @media(min-width:768px){ .location-grid{ grid-template-columns:1fr 1fr; } }
  .location-item{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
  .location-item svg{ color:var(--gold); flex-shrink:0; margin-top:0.25rem; }
  .location-item p{ color:rgba(43,36,28,0.7); }
  .location-phones{ display:flex; flex-direction:column; gap:0.35rem; }
  .location-phones a{ transition:color 0.2s ease; }
  .location-phones a:hover{ color:var(--gold-dark); text-decoration:underline; }
  .location-phone-tag{ color:rgba(43,36,28,0.45); font-size:0.82em; }
  .map-wrap{ height:380px; width:100%; overflow:hidden; border:1px solid rgba(201,162,75,0.2); }
  .map-wrap iframe{ border:0; width:100%; height:100%; filter:grayscale(0.15) contrast(0.97); }

  /* Booking form */
  .booking-form{
    display:grid; gap:1.5rem; background:var(--charcoal); padding:2rem;
    border:1px solid rgba(201,162,75,0.2);
  }
  @media(min-width:640px){ .booking-form{ grid-template-columns:1fr 1fr; padding:2.5rem; } }
  .col-span-2{ grid-column: span 2 / span 2; }
  .field label{
    display:block; font-size:0.75rem; letter-spacing:0.35em; text-transform:uppercase;
    color:rgba(43,36,28,0.6); margin-bottom:0.5rem;
  }
  .field input, .field select, .field textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid rgba(201,162,75,0.3);
    padding:0.5rem 0; color:var(--cream); font-family:var(--font-sans); font-size:1rem;
  }
  .field select{ background:var(--black); }
  .field select:disabled{ color:rgba(43,36,28,0.4); cursor:not-allowed; }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-bottom-color:var(--gold);
  }
  .field textarea{ resize:none; }
  .field-hint{ font-size:0.72rem; color:rgba(43,36,28,0.5); margin-top:0.4rem; }
  .form-submit{ display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:1rem; }

  /* Servicios & Profesionales (selector compacto en Reservar) */
  .pros-intro{ text-align:center; color:rgba(43,36,28,0.65); max-width:36rem; margin:0 auto 2rem; line-height:1.6; font-size:0.95rem; }
  .pro-picker{ margin-bottom:2.5rem; }
  .pro-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem; }
  .chip-pro{
    display:inline-flex; align-items:center; gap:0.4rem; background:var(--charcoal);
    border:1px solid rgba(184,147,63,0.35); color:var(--ink); padding:0.5rem 1.15rem;
    font-size:0.82rem; letter-spacing:0.02em; cursor:pointer; transition:all 0.2s ease;
    border-radius:999px; font-family:var(--font-sans);
  }
  .chip-pro:hover{ border-color:var(--gold); background:rgba(184,147,63,0.1); }
  .chip-pro.active{ background:var(--gold); border-color:var(--gold); color:#fbf7ee; }
  .pro-services{ margin-top:1.5rem; display:none; flex-wrap:wrap; justify-content:center; gap:0.6rem; }
  .pro-services.show{ display:flex; }
  .pro-services-title{
    text-align:center; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--gold-dark); width:100%; margin-bottom:0.35rem;
  }
  .pro-service-pill{
    display:inline-flex; align-items:center; gap:0.55rem; background:var(--black);
    border:1px solid rgba(184,147,63,0.3); padding:0.55rem 1rem; font-size:0.8rem;
    color:var(--ink); cursor:pointer; transition:all 0.2s ease; font-family:var(--font-sans);
  }
  .pro-service-pill:hover{ border-color:var(--gold); transform:translateY(-2px); }
  .pro-service-pill .pill-price{ color:var(--gold-dark); font-weight:600; white-space:nowrap; }
  .pros-selection{
    display:none; align-items:center; justify-content:center; gap:0.6rem; text-align:center;
    background:rgba(184,147,63,0.1); border:1px solid rgba(184,147,63,0.35); color:var(--ink);
    font-size:0.85rem; padding:0.7rem 1rem; margin:0 auto 1.5rem; max-width:34rem;
  }
  .pros-selection.show{ display:flex; flex-wrap:wrap; }
  .pros-selection strong{ color:var(--gold-dark); }
  .pros-selection button{
    background:none; border:none; color:var(--gold-dark); text-decoration:underline; cursor:pointer;
    font-size:0.8rem; font-family:var(--font-sans); padding:0;
  }
  .form-msg-success{ color:var(--gold); font-size:0.875rem; }
  .form-msg-error{ color:#f87171; font-size:0.875rem; }

  /* ===== Servicios destacados (Home) ===== */
  .services-cta-wrap{ display:flex; justify-content:center; margin-top:3rem; }

  /* ===== Página completa de Servicios ===== */
  #services-page{
    position:fixed; inset:0; z-index:92; background:var(--black); overflow-y:auto; display:none;
  }
  #services-page.open{ display:block; }
  .svc-topbar{
    position:sticky; top:0; z-index:15; background:rgba(248,244,236,0.95); backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(201,162,75,0.2); padding:1rem 1.5rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  .svc-topbar .logo{ font-size:1.25rem; }

  .svc-hero{ padding:4rem 1.5rem 1.5rem; text-align:center; }
  .svc-hero h1{ font-family:var(--font-display); font-size:2.25rem; color:var(--cream); letter-spacing:0.01em; }
  @media(min-width:768px){ .svc-hero h1{ font-size:3rem; } }
  .svc-hero .svc-intro{ max-width:38rem; margin:1.1rem auto 0; color:rgba(43,36,28,0.65); line-height:1.7; }

  .svc-controls{
    position:sticky; top:65px; z-index:14; background:rgba(248,244,236,0.97); backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(201,162,75,0.15); padding:1.1rem 1.5rem;
  }
  .svc-search-wrap{ max-width:26rem; margin:0 auto 1rem; position:relative; }
  .svc-search-wrap input{
    width:100%; background:var(--charcoal); border:1px solid rgba(201,162,75,0.3); color:var(--cream);
    padding:0.7rem 1rem 0.7rem 2.6rem; font-family:var(--font-sans); font-size:0.88rem; border-radius:999px;
  }
  .svc-search-wrap input:focus{ outline:none; border-color:var(--gold); }
  .svc-search-wrap svg{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:rgba(184,147,63,0.7); pointer-events:none; }
  .svc-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.55rem; }
  .svc-chip{
    background:none; border:1px solid rgba(184,147,63,0.35); color:rgba(43,36,28,0.65);
    padding:0.45rem 1.05rem; font-size:0.76rem; letter-spacing:0.03em; cursor:pointer; border-radius:999px;
    transition:all 0.2s ease; font-family:var(--font-sans);
  }
  .svc-chip:hover{ border-color:var(--gold); color:var(--gold-dark); }
  .svc-chip.active{ background:var(--gold); border-color:var(--gold); color:#fff8ec; }

  .svc-body{ max-width:60rem; margin:0 auto; padding:3rem 1.5rem 1rem; }
  .svc-category{ margin-bottom:4rem; scroll-margin-top:170px; }
  .svc-category-head{ text-align:center; margin-bottom:1.75rem; }
  .svc-category-head h2{ font-family:var(--font-display); font-size:1.75rem; color:var(--cream); }
  .svc-category-head p{ color:rgba(43,36,28,0.55); font-size:0.88rem; margin-top:0.35rem; }
  .svc-empty{ display:none; text-align:center; color:rgba(43,36,28,0.4); padding:4rem 1.5rem; }

  .svc-group{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); margin-bottom:1.1rem; }
  .svc-group-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.1rem 1.4rem;
    cursor:pointer; user-select:none;
  }
  .svc-group-head h3{ font-family:var(--font-display); font-size:1.08rem; color:var(--ink); }
  .svc-group-head .svc-note{ font-size:0.74rem; color:rgba(43,36,28,0.5); margin-top:0.25rem; }
  .svc-group-toggle{ color:var(--gold); flex-shrink:0; transition:transform 0.3s ease; margin-top:0.15rem; }
  .svc-group.open .svc-group-toggle{ transform:rotate(180deg); }
  .svc-group-body{ display:none; padding:0 1.4rem 1.4rem; }
  .svc-group.open .svc-group-body{ display:block; }

  .svc-items-list{ display:grid; gap:0.6rem; }
  @media(min-width:640px){ .svc-items-list{ grid-template-columns:repeat(2,1fr); } }
  .svc-item-row{
    display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.65rem 0.9rem;
    background:var(--black); border:1px solid rgba(201,162,75,0.1); font-size:0.87rem; color:rgba(43,36,28,0.85);
  }
  .svc-item-row .svc-item-name{ color:var(--ink); }
  .svc-item-row .svc-item-price{ color:var(--gold-dark); font-weight:600; white-space:nowrap; text-align:right; }
  .svc-item-row .svc-item-price small{ display:block; font-weight:400; font-size:0.68rem; color:rgba(43,36,28,0.45); }

  .svc-table-wrap{ overflow-x:auto; }
  table.svc-table{ width:100%; border-collapse:collapse; font-size:0.82rem; min-width:460px; }
  .svc-table th{ text-align:left; padding:0.55rem 0.7rem; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; color:rgba(43,36,28,0.5); border-bottom:1px solid rgba(201,162,75,0.25); }
  .svc-table th:not(:first-child), .svc-table td:not(:first-child){ text-align:right; }
  .svc-table td{ padding:0.55rem 0.7rem; border-bottom:1px solid rgba(201,162,75,0.08); color:rgba(43,36,28,0.8); }
  .svc-table td:first-child{ color:var(--ink); font-weight:500; }
  .svc-table tr:hover td{ background:rgba(201,162,75,0.06); }

  .svc-cards-grid{ display:grid; gap:1rem; }
  @media(min-width:640px){ .svc-cards-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:1024px){ .svc-cards-grid{ grid-template-columns:repeat(3,1fr); } }
  .svc-card{ background:var(--black); border:1px solid rgba(201,162,75,0.18); padding:1.1rem 1.25rem; transition:all 0.25s ease; }
  .svc-card:hover{ border-color:rgba(201,162,75,0.55); transform:translateY(-2px); }
  .svc-card h4{ font-family:var(--font-display); font-size:1.02rem; color:var(--ink); margin-bottom:0.35rem; }
  .svc-card p{ font-size:0.78rem; color:rgba(43,36,28,0.55); line-height:1.5; margin-bottom:0.6rem; }
  .svc-card .svc-card-price{ color:var(--gold-dark); font-size:0.92rem; font-weight:600; letter-spacing:0.02em; }

  .svc-cta{ text-align:center; padding:5rem 1.5rem 6rem; background:var(--charcoal); }
  .svc-cta h2{ font-family:var(--font-display); font-size:2rem; color:var(--ink); }
  .svc-cta p{ color:rgba(43,36,28,0.6); max-width:30rem; margin:1rem auto 2rem; line-height:1.6; }
  .svc-cta-actions{ display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:center; }
  @media(min-width:540px){ .svc-cta-actions{ flex-direction:row; } }

  /* Footer */
  footer{ background:var(--black); border-top:1px solid rgba(201,162,75,0.15); padding:4rem 0 2rem; }
  .footer-grid{ display:grid; gap:2.5rem; text-align:center; margin-bottom:3rem; }
  @media(min-width:640px){ .footer-grid{ grid-template-columns:repeat(3,1fr); text-align:left; } }
  .footer-brand{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:0.35em; color:var(--gold); margin-bottom:0.75rem; }
  .footer-desc{ color:rgba(43,36,28,0.5); font-size:0.875rem; line-height:1.6; }
  .footer-col-title{ font-size:0.75rem; letter-spacing:0.35em; text-transform:uppercase; color:rgba(43,36,28,0.6); margin-bottom:0.75rem; }
  .footer-links{ list-style:none; display:flex; flex-direction:column; gap:0.5rem; font-size:0.875rem; color:rgba(43,36,28,0.5); }
  .footer-links a:hover{ color:var(--gold); }
  .footer-social{ display:flex; justify-content:center; gap:1rem; }
  @media(min-width:640px){ .footer-social{ justify-content:flex-start; } }
  .footer-social a{ color:rgba(43,36,28,0.5); transition:color 0.2s ease; }
  .footer-social a:hover{ color:var(--gold); }
  .footer-bottom{
    border-top:1px solid rgba(201,162,75,0.1); padding-top:1.5rem;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem;
  }
  @media(min-width:640px){ .footer-bottom{ flex-direction:row; } }
  .footer-copy{ font-size:0.75rem; color:rgba(43,36,28,0.4); }

  /* WhatsApp button */
  .whatsapp-btn{
    position:fixed; bottom:1.5rem; right:1.5rem; z-index:40;
    display:flex; height:3.5rem; width:3.5rem; align-items:center; justify-content:center;
    border-radius:50%; background:#25D366; color:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,0.4); transition:transform 0.3s ease;
  }
  .whatsapp-btn:hover{ transform:scale(1.1); }

  /* ===== Admin ===== */
  .admin-link-btn{
    background:none; border:1px solid rgba(201,162,75,0.35); cursor:pointer; font-family:var(--font-sans);
    font-size:0.68rem; letter-spacing:0.35em; text-transform:uppercase;
    color:var(--gold); padding:0.5rem 1.25rem; transition:all 0.2s ease;
  }
  .admin-link-btn:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

  .modal-overlay{
    position:fixed; inset:0; z-index:100; background:rgba(10,10,10,0.85);
    display:none; align-items:center; justify-content:center; padding:1.5rem;
    backdrop-filter:blur(4px);
  }
  .modal-overlay.open{ display:flex; }
  /* CORRECCIÓN 2026-09-29 (QA Chrome): en pantallas bajas (laptop con barra
     de herramientas, móvil horizontal) el modal de cobro medía más que la
     ventana y el overlay no hace scroll: la firma y el botón COBRAR quedaban
     fuera de alcance. El contenido del modal ahora hace scroll interno. */
  .modal-overlay > .modal-box{ max-height:calc(100vh - 3rem); max-height:calc(100dvh - 3rem); overflow-y:auto; }
  /* CORRECCIÓN 2026-09-29 (QA Chrome): las rejillas de 4 columnas fijas dentro
     de modales (VER DETALLE de Nómina, perfil de cliente) no cabían en el ancho
     del modal y generaban scroll horizontal cortando FALTAS/AJUSTES/PAGADO.
     Mismo contenido, columnas que se acomodan al ancho disponible. */
  .modal-box .stats-grid{ grid-template-columns:repeat(auto-fit, minmax(6.5rem, 1fr)) !important; }
  .modal-box .stat-card{ min-width:0; padding:0.85rem; }
  .modal-box .stat-label{ overflow-wrap:anywhere; }
  /* CORRECCIÓN 2026-09-29 (QA Chrome): "Otros accesos" (Personal) tenía scroll
     horizontal desde tablet por los 3 botones en una sola línea. Los botones
     ahora se acomodan en varias líneas y en pantallas angostas cada fila se
     muestra como tarjeta vertical (mismos datos, mismos botones). */
  #other-access-table .oa-btns{ display:flex; flex-wrap:wrap; gap:0.35rem; }
  @media (max-width:900px){
    #other-access-table{ min-width:0 !important; }
    #other-access-table thead{ display:none; }
    #other-access-table, #other-access-table tbody, #other-access-table tr, #other-access-table td{ display:block; width:100%; }
    #other-access-table tr{ padding:0.6rem 0; border-bottom:1px solid rgba(201,162,75,0.2); }
    #other-access-table td{ padding:0.25rem 0.75rem; border-bottom:0; }
    #other-access-table td[data-label]::before{ content:attr(data-label); display:inline-block; min-width:5.5rem; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.05em; color:rgba(43,36,28,0.5); }
  }
  /* Corrección 2026-09-24: showConfirm()/showAlert() (usados por ejemplo en
     "Eliminar personal" y "Eliminar acceso") pueden invocarse mientras OTRO
     modal ya está abierto (p.ej. el de editar profesional). Como ambos
     comparten el mismo z-index (100), el orden en el DOM decidía cuál queda
     encima — y #confirm-overlay se definía antes en el HTML, así que
     terminaba oculto detrás del modal que lo abrió, sin poder hacer clic en
     "Confirmar"/"Aceptar". Se le da aquí un z-index mayor para que el
     diálogo de confirmación SIEMPRE quede visible y clickeable por encima
     de cualquier otro modal abierto, sin tocar el diseño de ningún modal. */
  #confirm-overlay{ z-index:150; }
  .modal-box{
    background:var(--charcoal); border:1px solid rgba(201,162,75,0.3);
    padding:2.5rem 2rem; max-width:24rem; width:100%; text-align:center; position:relative;
  }
  .modal-close{
    position:absolute; top:0.75rem; right:0.75rem; background:none; border:none;
    color:rgba(43,36,28,0.5); cursor:pointer;
  }
  .modal-close:hover{ color:var(--gold); }
  .modal-box .logo{ display:block; margin-bottom:0.5rem; }
  .modal-box p.subtitle{ color:rgba(43,36,28,0.5); font-size:0.8rem; margin-bottom:1.5rem; }
  .modal-box .field{ text-align:left; margin-bottom:1.25rem; }
  .modal-error{ color:#f87171; font-size:0.8rem; margin-top:0.5rem; display:none; }

  /* Admin panel overlay */
  #admin-panel{
    position:fixed; inset:0; z-index:90; background:var(--black); overflow-y:auto;
    display:none; font-family:var(--font-sans);
  }
  #admin-panel.open{ display:block; }
  .admin-topbar{
    position:sticky; top:0; z-index:10; background:rgba(248,244,236,0.95); backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(201,162,75,0.2); padding:1rem 1.5rem;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  }
  .admin-topbar .logo{ font-size:1.25rem; }
  .admin-topbar-right{ display:flex; align-items:center; gap:1rem; }
  /* CORRECCIÓN 2026-09-29 (QA Chrome, 360px): los 3 botones del encabezado no cabían y generaban scroll horizontal. */
  @media (max-width:420px){ .admin-topbar-right{ flex-wrap:wrap; gap:0.5rem; justify-content:flex-end; } }
  /* CORRECCIÓN 2026-09-29 (QA Chrome, 360px): NÓMINA TOTAL desbordaba 1px-40px a la derecha (columnas al ancho mínimo del contenido). */
  #nomina-total-grid .stat-card{ min-width:0; }
  /* CORRECCIÓN 2026-09-29 (QA Chrome 360px, Corte de Caja): las tarjetas de
     cualquier .stats-grid tomaban el ancho mínimo de su contenido (160px) y
     rebasaban 10px la pantalla. Mismo contenido, tarjetas que sí caben. */
  .stats-grid > .stat-card, .stats-grid > .caja-card{ min-width:0; }
  .stats-grid .stat-label{ overflow-wrap:anywhere; }
  @media (max-width:420px){ .stats-grid > .stat-card, .stats-grid > .caja-card{ padding:0.8rem; } .stats-grid .stat-value{ font-size:1.1rem; overflow-wrap:anywhere; } }
  /* CORRECCIÓN 2026-09-29 (regla global: cero scroll horizontal). Cuando una
     tabla no cabe en su contenedor, auraApplyResponsiveTables() le pone la
     clase .aura-cards y cada fila se muestra como tarjeta vertical
     ETIQUETA / VALOR (misma información, mismas columnas, mismos botones).
     Si la tabla sí cabe (desktop), se conserva como tabla. */
  .table-wrap, .svc-table-wrap{ overflow-x:visible; }
  table.aura-cards{ min-width:0 !important; width:100% !important; }
  table.aura-cards thead{ display:none; }
  table.aura-cards tbody, table.aura-cards tfoot, table.aura-cards tr{ display:block; width:100%; }
  table.aura-cards tr{ padding:0.55rem 0; border-bottom:1px solid rgba(201,162,75,0.25); }
  table.aura-cards td{ display:grid; grid-template-columns:minmax(5.5rem, 38%) minmax(0, 1fr); gap:0.25rem 0.75rem; align-items:start; width:100%; padding:0.3rem 0.85rem; border:0 !important; text-align:left !important; white-space:normal !important; overflow-wrap:anywhere; }
  table.aura-cards td::before{ content:attr(data-label); font-size:0.65rem; letter-spacing:0.05em; text-transform:uppercase; color:rgba(43,36,28,0.5); padding-top:0.15rem; }
  table.aura-cards td[data-label=""], table.aura-cards td:not([data-label]), table.aura-cards td[colspan]{ grid-template-columns:minmax(0,1fr); }
  table.aura-cards td[data-label=""]::before, table.aura-cards td:not([data-label])::before, table.aura-cards td[colspan]::before{ content:none; display:none; }
  table.aura-cards td > *{ min-width:0; max-width:100%; }
  table.aura-cards td button, table.aura-cards td .btn-ghost{ white-space:normal; }
  @media (max-width:420px){ #nomina-total-grid .stat-card{ padding:0.8rem; } #nomina-total-grid .stat-value{ font-size:1.1rem; white-space:nowrap; } }
  /* En móvil (<600px) los 3 botones ("Cambiar contraseña", "Cerrar sesión",
     "Volver al sitio") no caben en una sola línea y su texto se parte en
     2-3 líneas cada uno; como la barra es position:sticky, esa altura
     inflada queda clavada arriba de forma PERMANENTE en cada pantalla del
     panel admin, ocupando hasta ~1/3 de la pantalla en un teléfono normal.
     Aquí solo se deja de fijar la barra en ese rango — sigue mostrándose
     igual (mismos botones, mismo estilo, mismo orden) y sigue siendo
     accesible con solo subir el scroll, pero ya no le roba espacio
     permanente al contenido real (Agenda, Contabilidad, etc.). No cambia
     nada del diseño ni del comportamiento en tablet/escritorio. */
  @media(max-width:600px){
    .admin-topbar{ position:static; }
  }
  .btn-ghost{
    background:none; border:1px solid rgba(201,162,75,0.3); color:var(--cream);
    padding:0.5rem 1rem; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
    cursor:pointer; transition:all 0.2s ease; font-family:var(--font-sans);
  }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
  .btn-small-gold{
    background:var(--gold); color:var(--ink); border:none; padding:0.5rem 1rem;
    font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
    font-family:var(--font-sans); transition:background 0.2s ease;
  }
  .btn-small-gold:hover{ background:var(--gold-light); }
  .btn-small-gold:disabled{ opacity:0.45; cursor:not-allowed; }
  .btn-small-outline{
    background:none; color:var(--ink); border:1px solid rgba(43,36,28,0.35); padding:0.5rem 1rem;
    font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
    font-family:var(--font-sans); transition:all 0.2s ease;
  }
  .btn-small-outline:hover{ border-color:var(--gold); color:var(--gold-light); background:rgba(43,36,28,0.04); }

  .admin-tabs{
    display:flex; flex-wrap:wrap; gap:0.25rem; overflow-x:visible; padding:0 1.5rem; background:var(--black);
    border-bottom:1px solid rgba(201,162,75,0.1);
  }
  .admin-tab{
    background:none; border:none; color:rgba(43,36,28,0.5); padding:0.9rem 1rem;
    font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer;
    white-space:nowrap; border-bottom:2px solid transparent; transition:all 0.2s ease;
    font-family:var(--font-sans);
  }
  .admin-tab:hover{ color:var(--cream); }
  .admin-tab.active{ color:var(--gold); border-bottom-color:var(--gold); }

  .admin-content{ padding:2rem 1.5rem 4rem; max-width:90rem; margin:0 auto; }
  .admin-view{ display:none; }
  .admin-view.active{ display:block; }

  .admin-section-title{ font-family:var(--font-display); font-size:1.5rem; color:var(--cream); margin-bottom:1.5rem; }

  .stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:2rem; }
  @media(min-width:768px){ .stats-grid{ grid-template-columns:repeat(5,1fr); } }
  .stat-card{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:1.25rem; }
  .stat-card .stat-label{ font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(43,36,28,0.5); margin-bottom:0.5rem; }
  .stat-card .stat-value{ font-family:var(--font-display); font-size:1.7rem; color:var(--gold); }

  .charts-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-bottom:2rem; }
  @media(min-width:900px){ .charts-grid{ grid-template-columns:1fr 1fr; } }
  .chart-card{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:1.25rem; }
  .chart-card h4{ font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; color:rgba(43,36,28,0.7); margin-bottom:1rem; }
  .chart-card .chart-wrap{ position:relative; height:260px; }

  .admin-form{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:1.5rem; max-width:44rem; margin-bottom:2rem; }
  @media(max-width:640px){ .admin-form{ grid-template-columns:1fr; } }
  .admin-form .full{ grid-column:1/-1; }
  .admin-label{ display:block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(43,36,28,0.5); margin-bottom:0.4rem; }
  .admin-input{
    width:100%; background:var(--black); border:1px solid rgba(201,162,75,0.25); padding:0.6rem 0.75rem;
    color:var(--cream); font-size:0.9rem; font-family:var(--font-sans); border-radius:2px;
  }
  .admin-input:focus{ outline:none; border-color:var(--gold); }

  /* Selector de fecha en formato DD/MM/AAAA (ver wireDmyDateDisplay): Chrome/
     Edge renderizan <input type="date"> según el locale del sistema
     operativo, no según el idioma de la página — confirmado que ni lang="es-MX"
     lo cambia. wireDmyDateDisplay envuelve cada input de fecha real (que
     sigue siendo el único que guarda el valor real y el que abre el
     calendario nativo) en este wrap, y superpone un campo de texto idéntico
     visualmente que siempre muestra DD/MM/AAAA. No es un rediseño: el campo
     de texto usa las mismas clases .admin-input que ya existían. */
  .dmy-date-wrap{ position:relative; }
  /* Corrección 2026-09-24: el input[type=date] real, al ser position:absolute,
     pintaba por encima del input[type=text] visible (las reglas de stacking de
     CSS pintan el contenido posicionado después del contenido en flujo normal,
     sin importar el orden en el DOM) y se quedaba con TODOS los clics, dejando
     inutilizable el <input type="text" readonly> que el usuario realmente ve.
     pointer-events:none aquí obliga a que el clic caiga siempre en el campo de
     texto visible, cuyo listener (ver wireDmyDateDisplay) abre el selector
     nativo explícitamente vía JS (showPicker/focus/click) — el navegador sigue
     abriendo el calendario nativo real, solo que ahora se dispara de forma
     determinística sin depender de en qué capa cae el clic. No cambia nada
     visual ni el formato DD/MM/AAAA. */
  .dmy-date-wrap input[type="date"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; padding:0; border:0; pointer-events:none; }
  .dmy-date-wrap input[type="text"]{ cursor:pointer; }
  .admin-form-actions{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
  .save-msg{ color:var(--gold); font-size:0.85rem; display:none; }

  /* Buscador de cliente (Nueva Cita) — filtra por nombre o teléfono en vez de
     un <select> con cientos de opciones que obliga a hacer scroll largo. */
  .apt-customer-search-wrap{ position:relative; }
  .aura-upper{ text-transform:uppercase; }
  /* 16_44: TODO lo que se escribe en el sistema va en MAYÚSCULAS (buscadores,
     formularios, notas, motivos…). Excepciones: usuario, correo, contraseña,
     archivos y campos numéricos/fecha (ver auraShouldUppercase en JS). */
  input:not([type="password"]):not([type="email"]):not([type="url"]):not([type="number"]):not([type="date"]):not([type="time"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([id*="username"]):not([id*="email"]):not([id*="usuario"]):not(.no-upper),
  textarea:not(.no-upper){ text-transform:uppercase; }
  .rc-caja-strip{ display:flex; flex-wrap:wrap; gap:0.75rem; align-items:stretch; margin-top:1rem; }
  .rc-caja-strip .rc-expected-card{ flex:1 1 14rem; min-width:0; border-color:rgba(201,162,75,0.6); }
  .rc-expected-note{ font-size:0.68rem; color:rgba(43,36,28,0.55); margin-top:0.25rem; overflow-wrap:anywhere; }
  .rc-caja-actions{ flex:1 1 12rem; display:flex; flex-direction:column; gap:0.5rem; justify-content:center; min-width:0; }
  .rc-caja-actions button{ width:100%; }
  #reception-panel.rc-agenda-wide .staff-wrap{ max-width:none !important; }
  #reception-panel .role-tabs{ flex-wrap:wrap; }
  #reception-panel .role-tab{ flex:1 1 7.5rem; min-width:0; overflow-wrap:anywhere; letter-spacing:0.06em; }
  #reception-view-agenda > #view-agenda{ display:block; }
  .pro-confirm-btn{ white-space:nowrap; }
  @media (max-width:420px){
    #pro-confirm-overlay .modal-box, #charge-sign-overlay .modal-box{ padding:2.4rem 0.75rem 1rem; }
    #pro-confirm-overlay .modal-box > div, #charge-sign-block{ padding:0.7rem !important; }
  }
  .sig-readonly svg{ background:#f4efe4 !important; border:1px dashed rgba(43,36,28,0.35) !important; max-width:240px !important; }
  /* 16_44 INVENTARIO */
  .inv-filters{ display:flex; gap:0.35rem; flex-wrap:wrap; }
  .inv-filters button{ background:transparent; border:1px solid rgba(201,162,75,0.35); color:rgba(43,36,28,0.75); padding:0.4rem 0.75rem; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer; border-radius:999px; font-family:inherit; }
  .inv-filters button:hover, .inv-filters button.active{ border-color:var(--gold); color:var(--gold-dark); background:rgba(201,162,75,0.10); }
  .inv-status{ display:inline-block; font-size:0.62rem; font-weight:700; letter-spacing:0.05em; padding:0.2rem 0.55rem; border-radius:999px; white-space:nowrap; }
  .inv-status.ok{ background:rgba(47,107,82,0.12); color:#2f6b52; }
  .inv-status.low{ background:rgba(242,184,75,0.22); color:#7a5c17; }
  .inv-status.out{ background:rgba(180,60,60,0.12); color:#b43c3c; }
  .inv-actions{ display:flex; flex-wrap:wrap; gap:0.3rem; }
  .inv-actions button{ padding:0.3rem 0.55rem; font-size:0.62rem; }
  .inv-empty{ text-align:center; padding:2.5rem 1rem; border:1px dashed rgba(201,162,75,0.45); background:var(--charcoal); border-radius:10px; }
  .inv-empty p{ color:rgba(43,36,28,0.65); margin-bottom:1rem; }
  .inv-row-name{ font-weight:600; overflow-wrap:anywhere; }
  .inv-row-sub{ font-size:0.7rem; color:rgba(43,36,28,0.55); overflow-wrap:anywhere; }
  .inv-preview{ font-size:0.85rem; background:rgba(201,162,75,0.10); border-radius:8px; padding:0.6rem 0.75rem; }
  .conf-badge{ font-size:0.62rem; font-weight:700; letter-spacing:0.05em; padding:0.2rem 0.5rem; border-radius:999px; white-space:normal; }
  .conf-badge.ok{ background:rgba(47,107,82,0.12); color:#2f6b52; }
  .conf-badge.warn{ background:rgba(180,60,60,0.12); color:#b43c3c; }
  .conf-badge.pend{ background:rgba(242,184,75,0.18); color:#7a5c17; }
  .apt-customer-dropdown{
    position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:40;
    background:var(--black); border:1px solid rgba(201,162,75,0.35);
    max-height:230px; overflow-y:auto; border-radius:2px;
    box-shadow:0 10px 24px rgba(43,36,28,0.18);
  }
  .apt-customer-dropdown-item{
    padding:0.55rem 0.75rem; font-size:0.85rem; cursor:pointer; color:var(--cream);
    border-bottom:1px solid rgba(201,162,75,0.15);
  }
  .apt-customer-dropdown-item:last-child{ border-bottom:none; }
  .apt-customer-dropdown-item:hover,
  .apt-customer-dropdown-item.active{ background:rgba(184,147,63,0.15); }
  .apt-customer-dropdown-item .phone{ color:rgba(43,36,28,0.5); font-size:0.78rem; margin-left:0.35rem; }
  .apt-customer-dropdown-empty{ padding:0.6rem 0.75rem; font-size:0.8rem; color:rgba(43,36,28,0.5); }

  .filters-bar{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; align-items:flex-end; }
  .filters-bar .field-sm{ min-width:150px; }
  .filters-bar label{ display:block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(43,36,28,0.5); margin-bottom:0.4rem; }

  .table-wrap{ overflow-x:auto; background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); }
  table.admin-table{ width:100%; border-collapse:collapse; font-size:0.85rem; min-width:700px; }
  .admin-table th{ text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(43,36,28,0.5); font-weight:400; padding:0.75rem; border-bottom:1px solid rgba(201,162,75,0.2); }
  .admin-table td{ padding:0.75rem; border-bottom:1px solid rgba(201,162,75,0.08); color:rgba(43,36,28,0.85); }
  .admin-table tr:hover td{ background:rgba(201,162,75,0.04); }
  .badge{ display:inline-block; padding:0.15rem 0.6rem; font-size:0.7rem; border-radius:20px; border:1px solid rgba(201,162,75,0.4); color:var(--gold); }
  .badge.access-on{ border-color:rgba(74,158,110,0.5); color:#2f7a52; }
  .badge.access-off{ border-color:rgba(217,90,90,0.5); color:#b5453f; }
  .badge.access-none{ border-color:rgba(43,36,28,0.25); color:rgba(43,36,28,0.5); }
  .row-del{ background:none; border:none; color:rgba(43,36,28,0.4); cursor:pointer; }
  .row-del:hover{ color:#f87171; }

  .export-bar{ display:flex; gap:0.75rem; margin-bottom:1.5rem; flex-wrap:wrap; }

  .stylist-grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin-bottom:2rem; }
  @media(min-width:640px){ .stylist-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:1100px){ .stylist-grid{ grid-template-columns:repeat(3,1fr); } }
  .stylist-card{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:1.5rem; }
  .stylist-card.inactive{ opacity:0.5; }
  .stylist-card h3{ font-family:var(--font-display); font-size:1.3rem; color:var(--cream); margin-bottom:1rem; }
  .stylist-card .row{ display:flex; justify-content:space-between; font-size:0.85rem; padding:0.4rem 0; border-bottom:1px solid rgba(201,162,75,0.08); color:rgba(43,36,28,0.75); }
  .stylist-card .row span:last-child{ color:var(--gold); }
  .empty-state{ color:rgba(43,36,28,0.4); font-size:0.9rem; padding:2rem; text-align:center; }

  /* ===== FASE 12: tarjeta de nómina por profesional — sin scroll horizontal
     en ningún ancho: los datos se apilan verticalmente en filas etiqueta/valor
     (nunca una tabla ancha), y los botones se envuelven en móvil. ===== */
  .nomina-pro-card{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:1.25rem; display:flex; flex-direction:column; gap:0.15rem; }
  .nomina-pro-card.confirmada{ border-color:rgba(143,174,158,0.5); }
  .nomina-pro-card h3{ font-family:var(--font-display); font-size:1.15rem; color:var(--cream); margin:0 0 0.5rem; }
  .nomina-pro-card .npc-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.25rem 0.75rem; font-size:0.78rem; padding:0.32rem 0; border-bottom:1px solid rgba(201,162,75,0.08); color:rgba(43,36,28,0.75); }
  .nomina-pro-card .npc-row span:first-child{ flex-shrink:0; }
  .nomina-pro-card .npc-row span:last-child{ color:var(--gold); text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .nomina-pro-card .npc-row.total span:last-child{ font-weight:600; }
  .nomina-pro-card .npc-row.pendiente span:last-child{ color:#c0392b; font-weight:600; }
  .nomina-pro-card .npc-actions{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.85rem; }
  .nomina-pro-card .npc-actions button{ flex:1; min-width:7rem; }
  .nomina-status-pill{ display:inline-block; padding:0.15rem 0.6rem; font-size:0.65rem; letter-spacing:0.06em; text-transform:uppercase; border-radius:20px; margin-left:0.5rem; }
  .nomina-status-pill.estimada{ border:1px solid rgba(201,162,75,0.4); color:var(--gold); }
  .nomina-status-pill.confirmada{ border:1px solid rgba(143,174,158,0.5); color:#8fae9e; }
  .nomina-status-pill.inactivo{ border:1px solid rgba(220,120,120,0.6); color:#e09a9a; }

  /* ===== FASE 13: modal de detalle de reporte (drill-down) reutilizable ===== */
  .report-detail-table{ width:100%; border-collapse:collapse; font-size:0.78rem; }
  .report-detail-table th{ text-align:left; padding:0.5rem 0.6rem; border-bottom:1px solid rgba(201,162,75,0.3); color:rgba(43,36,28,0.55); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; }
  .report-detail-table td{ padding:0.5rem 0.6rem; border-bottom:1px solid rgba(201,162,75,0.08); }
  .report-detail-summary{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.75rem; margin-bottom:1rem; padding:0.85rem 1rem; background:rgba(201,162,75,0.06); border:1px dashed rgba(201,162,75,0.3); }
  .report-detail-pager{ display:flex; justify-content:center; align-items:center; gap:0.75rem; margin-top:1rem; font-size:0.78rem; }
  .report-card-clickable{ cursor:pointer; transition:transform 0.15s ease, border-color 0.15s ease; }
  .report-card-clickable:hover{ transform:translateY(-2px); border-color:var(--gold); }

  .fin-grid{ display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:2rem; }
  @media(min-width:768px){ .fin-grid{ grid-template-columns:repeat(3,1fr); } }
  .fin-card{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:1.5rem; text-align:center; }
  .fin-card .stat-value{ font-size:2rem; }
  .fin-card.positive .stat-value{ color:var(--gold); }
  .fin-card.negative .stat-value{ color:#f87171; }

  /* ===== Role tabs in login modal ===== */
  .role-tabs{ display:flex; background:var(--black); border:1px solid rgba(201,162,75,0.25); margin-bottom:1.75rem; }
  .role-tab{
    flex:1 1 0; min-width:0; overflow-wrap:anywhere; background:none; border:none; cursor:pointer; padding:0.75rem 0.4rem;
    font-family:var(--font-sans); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(43,36,28,0.5); transition:all 0.2s ease; border-bottom:2px solid transparent;
  }
  .role-tab.active{ color:var(--gold); background:rgba(201,162,75,0.08); border-bottom-color:var(--gold); }
  .login-panel{ display:none; }
  .login-panel.active{ display:block; }
  .demo-hint{
    margin-top:1.5rem; padding:0.85rem 1rem; background:rgba(201,162,75,0.06);
    border:1px dashed rgba(201,162,75,0.3); text-align:left; font-size:0.72rem;
    color:rgba(43,36,28,0.55); line-height:1.6;
  }
  .demo-hint strong{ color:var(--gold-light); font-weight:500; }
  .demo-hint .demo-row{ display:flex; justify-content:space-between; gap:0.5rem; }

  /* ===== Filters bar (admin, sticky) ===== */
  .global-filters{
    display:flex; flex-wrap:wrap; gap:0.9rem; align-items:flex-end;
    background:var(--charcoal); border:1px solid rgba(201,162,75,0.2);
    padding:1.1rem 1.25rem; margin:1.5rem 0 2rem;
  }
  .global-filters .field-sm{ min-width:150px; flex:1; }
  .global-filters label{ display:block; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(43,36,28,0.45); margin-bottom:0.4rem; }
  .quick-range{ display:flex; gap:0.4rem; flex-wrap:wrap; }
  .quick-range button{
    background:none; border:1px solid rgba(201,162,75,0.25); color:rgba(43,36,28,0.6);
    padding:0.45rem 0.7rem; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase;
    cursor:pointer; transition:all 0.2s ease; font-family:var(--font-sans);
  }
  .quick-range button:hover, .quick-range button.active{ border-color:var(--gold); color:var(--gold); }
  .staff-quick-range{ display:flex; gap:0.35rem; flex-wrap:wrap; justify-content:center; }
  .staff-quick-range button{
    background:none; border:1px solid rgba(201,162,75,0.25); color:rgba(43,36,28,0.6);
    padding:0.3rem 0.55rem; font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase;
    cursor:pointer; transition:all 0.2s ease; font-family:var(--font-sans);
  }
  .staff-quick-range button:hover, .staff-quick-range button.active{ border-color:var(--gold); color:var(--gold); }
  /* Normalización visual a mayúsculas — SOLO campos de nombre/búsqueda de
     personas (clientes, profesionales, contadores). Nunca en email,
     contraseña o URL: esos deben conservar su capitalización real. */
  .uc-name{ text-transform:uppercase; }
  .apt-customer-dropdown-item, .agenda-apt-block .apt-client, #apt-customer-readonly{ text-transform:uppercase; }
  .apt-customer-dropdown-item .phone{ text-transform:none; }
  .agenda-client-link{ background:none; border:none; padding:0; margin:0; color:inherit; text-decoration:underline; text-decoration-color:rgba(184,147,63,0.5); cursor:pointer; font:inherit; text-align:left; }
  .agenda-client-link:hover{ color:var(--gold); }

  /* ===== Sucursal badge ===== */
  .badge-branch{
    display:inline-block; padding:0.15rem 0.6rem; font-size:0.7rem; border-radius:20px;
    border:1px solid rgba(143,174,158,0.4); color:#8fae9e;
  }

  /* ===== Employee management ===== */
  .staff-grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin-bottom:2rem; }
  @media(min-width:640px){ .staff-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:1100px){ .staff-grid{ grid-template-columns:repeat(3,1fr); } }
  .staff-card{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:1.5rem; position:relative; min-width:0; }
  .staff-card.inactive{ opacity:0.45; }
  .staff-card h3{ font-family:var(--font-display); font-size:1.2rem; color:var(--cream); margin-bottom:0.25rem; }
  .staff-card .staff-branch{ color:var(--gold); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.9rem; }
  .staff-card .row{ display:flex; justify-content:space-between; font-size:0.82rem; padding:0.35rem 0; border-bottom:1px solid rgba(201,162,75,0.08); color:rgba(43,36,28,0.7); }
  .staff-card .row span:last-child{ color:var(--cream); }
  /* Corrección 2026-09-24: con 5 botones (Editar/Desactivar/Crear o
     Restablecer/Eliminar acceso/Eliminar personal), la fila sin flex-wrap no
     cabía en el ancho de la tarjeta y empujaba toda la cuadrícula de
     Personal más ancha que la pantalla, forzando scroll horizontal. Ahora
     los botones envuelven en 2 columnas dentro de la misma tarjeta. */
  .staff-card-actions{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1rem; }
  .staff-card-actions button{
    flex:1 1 calc(50% - 0.3rem); min-width:0; background:none; border:1px solid rgba(201,162,75,0.3); color:rgba(43,36,28,0.7);
    padding:0.4rem; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer;
    font-family:var(--font-sans); transition:all 0.2s ease;
  }
  .staff-card-actions button:hover{ border-color:var(--gold); color:var(--gold); }
  .staff-card-actions button.danger:hover{ border-color:#f87171; color:#f87171; }

  /* ===== Edit modal ===== */
  /* CORRECCIÓN scroll-bug: .edit-modal-box es el contenedor REAL que debe
     scrollear (no #staff-form-overlay, que solo centra con flex). Se le da
     una altura máxima y overflow-y:auto propios para que el crecimiento del
     contenido (p.ej. al cargar "Servicios que realiza") nunca fuerce un
     recentrado del overlay que empuje los campos generales fuera del
     viewport. Esto es puramente visual/estructural: no cambia el diseño
     salvo aparecer una barra de scroll interna cuando el contenido excede
     el 90% del alto de la ventana. */
  .edit-modal-box{ max-width:32rem; text-align:left; max-height:90vh; overflow-y:auto; }
  .edit-modal-box .admin-form{ max-width:none; background:none; border:none; padding:0; margin-bottom:0; }
  /* Mejora secundaria solicitada: la lista de "Servicios que realiza" puede
     ser muy larga; se le da su propio contenedor con scroll interno para
     que editar los datos generales del profesional no obligue a desplazar
     todo el modal. Se aplica solo por ID para no afectar otros .chip-row
     (por ejemplo cfg-days-row / cfg-payments-row). */
  #stf-services-row{ max-height:14rem; overflow-y:auto; padding-right:0.4rem; }

  /* ===== Employee (barbero) simple panel ===== */
  #staff-panel{
    position:fixed; inset:0; z-index:95; background:var(--black); overflow-y:auto; display:none;
  }
  #staff-panel.open{ display:block; }
  #reception-panel{
    position:fixed; inset:0; z-index:95; background:var(--black); overflow-y:auto; display:none;
  }
  #reception-panel.open{ display:block; }
  .reception-apt-actions{ margin-top:1rem; text-align:right; }
  .staff-topbar{
    position:sticky; top:0; z-index:10; background:rgba(248,244,236,0.95); backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(201,162,75,0.2); padding:1.1rem 1.5rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  .staff-whoami{ display:flex; flex-direction:column; }
  .staff-whoami .name{ font-family:var(--font-display); font-size:1.1rem; color:var(--cream); }
  .staff-whoami .branch{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); }
  .staff-wrap{ max-width:36rem; margin:0 auto; padding:2.5rem 1.5rem 4rem; }
  .staff-clock{ text-align:center; margin-bottom:2rem; }
  .staff-clock .time{ font-family:var(--font-display); font-size:2.5rem; color:var(--gold); letter-spacing:0.05em; }
  .staff-clock .date{ font-size:0.8rem; color:rgba(43,36,28,0.5); text-transform:uppercase; letter-spacing:0.1em; margin-top:0.25rem; }

  .quick-form{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:2rem; display:flex; flex-direction:column; gap:1.5rem; }
  .quick-form .admin-label{ font-size:0.75rem; margin-bottom:0.6rem; }
  .quick-form .admin-input{ padding:0.9rem 1rem; font-size:1.05rem; }
  .service-type-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; }
  @media(min-width:480px){ .service-type-grid{ grid-template-columns:repeat(3,1fr); } }
  .service-type-opt{
    background:var(--black); border:1px solid rgba(201,162,75,0.25); color:rgba(43,36,28,0.7);
    padding:0.75rem 0.5rem; font-size:0.78rem; text-align:center; cursor:pointer; transition:all 0.2s ease;
  }
  .service-type-opt.selected{ border-color:var(--gold); color:var(--gold); background:rgba(201,162,75,0.08); }

  .price-input-wrap{ position:relative; }
  .price-input-wrap span{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--gold); font-size:1.1rem; }
  .price-input-wrap input{ padding-left:2.2rem !important; font-size:1.4rem !important; font-family:var(--font-display); }

  .payment-method-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; }
  .payment-opt{
    background:var(--black); border:1px solid rgba(201,162,75,0.25); color:rgba(43,36,28,0.7);
    padding:0.9rem 0.5rem; font-size:0.78rem; text-align:center; cursor:pointer; transition:all 0.2s ease;
    display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  }
  .payment-opt.selected{ border-color:var(--gold); color:var(--gold); background:rgba(201,162,75,0.08); }

  .btn-register-huge{
    background:var(--gold); color:var(--ink); border:none; padding:1.25rem; width:100%;
    font-size:1rem; letter-spacing:0.15em; text-transform:uppercase; cursor:pointer; font-weight:500;
    font-family:var(--font-sans); transition:all 0.25s ease;
  }
  .btn-register-huge:hover{ background:var(--gold-light); transform:translateY(-2px); }
  .btn-register-huge:active{ transform:translateY(0); }
  .btn-register-huge:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

  .confirm-flash{
    display:none; text-align:center; padding:1.25rem; background:rgba(201,162,75,0.1);
    border:1px solid rgba(201,162,75,0.4); color:var(--gold-light); margin-top:1.25rem;
    font-size:0.9rem; animation:flashIn 0.3s ease;
  }
  @keyframes flashIn{ from{opacity:0; transform:scale(0.96);} to{opacity:1; transform:scale(1);} }

  .staff-history{ margin-top:2.5rem; }
  .staff-history h4{ font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(43,36,28,0.5); margin-bottom:1rem; }
  .staff-history-item{
    display:flex; justify-content:space-between; align-items:center; padding:0.85rem 1rem;
    background:var(--charcoal); border:1px solid rgba(201,162,75,0.12); margin-bottom:0.5rem; font-size:0.85rem;
  }
  .staff-history-item .meta{ color:rgba(43,36,28,0.5); font-size:0.72rem; margin-top:0.15rem; }
  .staff-history-item .amount{ color:var(--gold); font-family:var(--font-display); font-size:1.1rem; }
  .staff-today-total{
    display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem;
    background:rgba(201,162,75,0.06); border:1px solid rgba(201,162,75,0.25); margin-bottom:1rem;
  }
  .staff-today-total .label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(43,36,28,0.6); }
  .staff-today-total .value{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold); }

  /* Caja cerrada: banner de bloqueo en el panel de Recepción — ver
     sql_cash_register_enforcement.sql (assert_open_cash_register). Los
     RPC de cobro son quienes realmente bloquean; esto es solo UX. */
  .cash-register-banner{
    display:flex; align-items:center; gap:0.6rem; padding:0.85rem 1.1rem; margin-bottom:1rem;
    background:rgba(248,113,113,0.08); border:1px solid rgba(248,113,113,0.4); border-radius:0.4rem;
    color:#b3261e; font-size:0.85rem; line-height:1.4;
  }

  /* ===== Admin panel extensions: Agenda / Catálogo / Caja / Barberos / Reportes / Configuración ===== */
  .admin-section-sub{ font-size:0.95rem; color:rgba(43,36,28,0.6); margin:-0.75rem 0 1.5rem; max-width:48rem; }
  .admin-subtitle{ font-family:var(--font-display); font-size:1.15rem; color:var(--cream); margin:2rem 0 1rem; }
  .admin-subtitle:first-child{ margin-top:0; }

  .local-filters{
    display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; background:var(--charcoal);
    border:1px solid rgba(201,162,75,0.15); padding:1.1rem 1.25rem; margin-bottom:1.5rem;
  }
  .local-filters .field-sm{ min-width:150px; }
  .local-filters label{ display:block; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(43,36,28,0.45); margin-bottom:0.4rem; }

  /* Toggle "Un día" / "Rango de fechas" en Corte de Caja — mismo lenguaje
     visual que .btn-ghost/.admin-tab.active, sin agregar un sistema de
     componentes nuevo. */
  .caja-mode-toggle{ display:flex; gap:0.4rem; }
  .caja-mode-btn{
    background:none; border:1px solid rgba(201,162,75,0.3); color:var(--cream);
    padding:0.5rem 0.85rem; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
    cursor:pointer; transition:all 0.2s ease; font-family:var(--font-sans); white-space:nowrap;
  }
  .caja-mode-btn:hover{ border-color:var(--gold); color:var(--gold); }
  .caja-mode-btn.active{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

  /* Status badges (citas) */
  .status-badge{ display:inline-block; padding:0.2rem 0.65rem; font-size:0.68rem; border-radius:20px; letter-spacing:0.03em; border:1px solid; white-space:nowrap; }
  .status-badge.pendiente{ color:#f2b84b; border-color:rgba(242,184,75,0.45); background:rgba(242,184,75,0.08); }
  .status-badge.confirmada{ color:#6c8ebf; border-color:rgba(108,142,191,0.45); background:rgba(108,142,191,0.08); }
  .status-badge.completada{ color:#8fae9e; border-color:rgba(143,174,158,0.45); background:rgba(143,174,158,0.08); }
  .status-badge.cancelada{ color:#f87171; border-color:rgba(248,113,113,0.45); background:rgba(248,113,113,0.08); }

  .row-actions{ display:flex; gap:0.5rem; flex-wrap:wrap; }
  .row-actions button{
    background:none; border:1px solid rgba(201,162,75,0.3); color:rgba(43,36,28,0.65);
    padding:0.3rem 0.6rem; font-size:0.68rem; cursor:pointer; transition:all 0.2s ease; white-space:nowrap;
  }
  .row-actions button:hover{ border-color:var(--gold); color:var(--gold); }
  .row-actions button.danger:hover{ border-color:#f87171; color:#f87171; }
  .row-actions button.positive:hover{ border-color:#8fae9e; color:#8fae9e; }

  /* Avatars */
  .avatar-circle{
    width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--gold-dark), var(--gold)); color:var(--ink); font-family:var(--font-display);
    font-size:1.1rem; flex-shrink:0; overflow:hidden;
  }
  .avatar-circle img{ width:100%; height:100%; object-fit:cover; }
  .avatar-circle.sm{ width:34px; height:34px; font-size:0.8rem; }
  .barber-card-head{ display:flex; align-items:center; gap:0.9rem; margin-bottom:1rem; }
  .barber-card-head h3{ font-family:var(--font-display); font-size:1.2rem; color:var(--cream); margin:0; }
  .barber-card-head .staff-branch{ color:var(--gold); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; margin-top:0.15rem; }
  .barber-commission-row{ display:flex; justify-content:space-between; padding:0.6rem 0.9rem; background:rgba(201,162,75,0.06); border:1px solid rgba(201,162,75,0.25); margin-top:0.75rem; }
  .barber-commission-row .label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(43,36,28,0.6); }
  .barber-commission-row .value{ font-family:var(--font-display); color:var(--gold); font-size:1.05rem; }

  /* Cash register (corte de caja) */
  .caja-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-bottom:2rem; }
  .caja-card{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:1.5rem; }
  .caja-card .icon{ font-size:1.5rem; margin-bottom:0.6rem; display:block; }
  .caja-card .stat-label{ font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(43,36,28,0.5); margin-bottom:0.5rem; }
  .caja-card .stat-value{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold); }
  .caja-card.total{ border-color:var(--gold); background:rgba(201,162,75,0.08); }
  .caja-card.total .stat-value{ font-size:1.9rem; }
  .caja-note{ font-size:0.72rem; color:rgba(43,36,28,0.4); margin-top:0.5rem; line-height:1.5; }

  /* Toggle chips (config: payment methods, days) */
  .chip-row{ display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; }
  .chip{
    display:inline-flex; align-items:center; gap:0.5rem; background:var(--black); border:1px solid rgba(201,162,75,0.3);
    color:rgba(43,36,28,0.75); padding:0.45rem 0.5rem 0.45rem 0.9rem; font-size:0.78rem; border-radius:20px;
  }
  .chip button{ background:none; border:none; color:rgba(43,36,28,0.4); cursor:pointer; font-size:0.9rem; line-height:1; padding:0 0.3rem; }
  .chip button:hover{ color:#f87171; }
  .chip-add{ display:flex; gap:0.5rem; align-items:center; margin-top:0.75rem; }
  .chip-add input{ max-width:12rem; }
  .day-toggle{
    background:var(--black); border:1px solid rgba(201,162,75,0.25); color:rgba(43,36,28,0.6);
    padding:0.5rem 0.9rem; font-size:0.75rem; cursor:pointer; transition:all 0.2s ease;
  }
  .day-toggle.active{ border-color:var(--gold); color:var(--gold); background:rgba(201,162,75,0.08); }

  .logo-preview-row{ display:flex; align-items:center; gap:1.25rem; }
  .logo-preview{
    width:64px; height:64px; border-radius:10px; border:1px solid rgba(201,162,75,0.3); background:var(--black);
    display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  }
  .logo-preview img{ width:100%; height:100%; object-fit:cover; }
  .logo-preview span{ font-family:var(--font-display); color:var(--gold); font-size:1.4rem; }

  .report-table-card{ background:var(--charcoal); border:1px solid rgba(201,162,75,0.2); padding:1.5rem; margin-bottom:2rem; }
  .report-table-card h4{ font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; color:rgba(43,36,28,0.7); margin-bottom:1rem; }

  @media(max-width:640px){
    .stats-grid{ grid-template-columns:repeat(2,1fr) !important; }
    .admin-tabs{ overflow-x:visible; flex-wrap:wrap; padding:0 0.75rem; }
    .admin-tab{ padding:0.7rem 0.6rem; }
  }

  /* Promociones: horizontal scroll */
  .promo-scroll{
    display:flex; gap:1.5rem; overflow-x:auto; padding:0.5rem 0.25rem 1.5rem;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  .promo-scroll::-webkit-scrollbar{ height:8px; }
  .promo-card{
    flex:0 0 auto; scroll-snap-align:start; width:280px;
    background:var(--charcoal); border:1px solid rgba(201,162,75,0.25);
    padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:0.5rem;
    transition:all 0.3s ease;
  }
  .promo-card:hover{ border-color:var(--gold); transform:translateY(-4px); }
  .promo-card-mega{ border-color:var(--gold); background:rgba(201,162,75,0.08); }
  .promo-title{ font-family:var(--font-display); font-size:1.15rem; color:var(--cream); line-height:1.3; }
  .promo-price{ font-family:var(--font-display); font-size:1.9rem; color:var(--gold); margin-top:0.25rem; }
  .promo-note{ font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:rgba(43,36,28,0.5); }
  .promo-desc{ font-size:0.85rem; color:rgba(43,36,28,0.65); line-height:1.5; margin-top:0.25rem; }
  @media(min-width:768px){ .promo-card{ width:300px; } }

  /* Promo flip cards (click to reveal benefits) */
  .promo-flip{
    flex:0 0 auto; scroll-snap-align:start; width:280px; min-height:400px;
    perspective:1600px; cursor:pointer;
  }
  @media(min-width:768px){ .promo-flip{ width:300px; } }
  .promo-flip-inner{
    position:relative; width:100%; height:100%; min-height:400px;
    transition:transform 0.7s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;
  }
  .promo-flip.flipped .promo-flip-inner{ transform:rotateY(180deg); }
  .promo-flip-face{
    position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
    background:var(--charcoal); border:1px solid rgba(184,147,63,0.35);
    box-shadow:0 4px 18px rgba(43,36,28,0.06);
    display:flex; flex-direction:column;
    transition:border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .promo-flip:hover .promo-flip-face{ border-color:var(--gold); box-shadow:0 10px 28px rgba(43,36,28,0.12); }
  .promo-flip-face.back{ transform:rotateY(180deg); background:var(--ink); border-color:rgba(220,192,119,0.4); }

  /* Front face */
  .promo-flip-face.front{ padding:1.85rem 1.5rem 1.35rem; }
  .promo-flip-icon{
    width:2.5rem; height:2.5rem; border-radius:50%; background:rgba(184,147,63,0.12);
    border:1px solid rgba(184,147,63,0.4); display:flex; align-items:center; justify-content:center;
    color:var(--gold-dark); margin-bottom:1rem; flex:0 0 auto;
  }
  .promo-flip-icon svg{ width:19px; height:19px; }
  .promo-flip-face .promo-title{ color:var(--ink); }
  .promo-flip-face .promo-price{ color:var(--gold-dark); }
  .promo-flip-face .promo-note{ color:rgba(43,36,28,0.55); }
  .promo-flip-face .promo-desc{ color:rgba(43,36,28,0.72); flex:1 1 auto; }
  .promo-flip-divider{ width:2.25rem; height:2px; background:var(--gold); margin:0.6rem 0 0.9rem; flex:0 0 auto; }
  .promo-flip-hint{
    margin-top:1rem; padding-top:0.9rem; border-top:1px solid rgba(184,147,63,0.25);
    font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase;
    color:var(--gold-dark); display:flex; align-items:center; justify-content:space-between; gap:0.4rem;
    flex:0 0 auto;
  }
  .promo-flip-hint svg{ width:14px; height:14px; flex:0 0 auto; }

  /* Back face */
  .promo-flip-face.back{ padding:1.85rem 1.5rem 1.35rem; }
  .promo-benefits-head{ display:flex; align-items:center; gap:0.6rem; margin-bottom:0.35rem; flex:0 0 auto; }
  .promo-benefits-head svg{ width:16px; height:16px; color:var(--gold-light); flex:0 0 auto; }
  .promo-benefits-title{
    font-family:var(--font-display); font-size:1.05rem; color:#fbf7ee; letter-spacing:0.02em;
  }
  .promo-benefits-list{
    list-style:none; padding:0; margin:0.9rem 0 0; display:flex; flex-direction:column; gap:0.7rem;
    flex:1 1 auto; overflow-y:auto;
  }
  .promo-benefits-list li{
    font-size:0.82rem; color:rgba(255,252,244,0.92); line-height:1.4;
    display:flex; align-items:flex-start; gap:0.55rem;
  }
  .promo-benefits-check{
    flex:0 0 auto; width:16px; height:16px; border-radius:50%; background:var(--gold);
    display:flex; align-items:center; justify-content:center; margin-top:0.1rem;
  }
  .promo-benefits-check svg{ width:9px; height:9px; color:var(--ink); }
  .promo-flip-hint.back-hint{
    color:var(--gold-light); border-top-color:rgba(220,192,119,0.25);
  }

  /* ===== Ticket de venta (impresión térmica 58mm / 80mm) =====
     #print-ticket-root vive fuera del flujo normal (display:none) y solo se
     muestra dentro de un modal de vista previa en pantalla, o durante la
     impresión real (@media print oculta todo lo demás y solo deja este
     contenedor visible). No sustituye ningún sistema de impresión previo
     porque no existía ninguno en el proyecto: esta es la primera
     implementación. */
  #print-ticket-root{ display:none; }
  .ticket-preview-overlay{
    position:fixed; inset:0; z-index:120; background:rgba(10,10,10,0.85);
    display:none; align-items:center; justify-content:center; padding:1.5rem;
  }
  .ticket-preview-overlay.open{ display:flex; }
  .ticket-preview-box{
    background:var(--charcoal); border:1px solid rgba(201,162,75,0.3);
    padding:1.5rem; max-height:85vh; overflow-y:auto; position:relative;
  }
  .ticket-preview-actions{ display:flex; gap:0.6rem; margin-top:1rem; flex-wrap:wrap; justify-content:center; }
  .ticket-paper{
    background:#fff; color:#111; font-family:'Courier New', Consolas, monospace;
    width:80mm; max-width:100%; padding:3mm; box-sizing:border-box; font-size:11px; line-height:1.4;
  }
  .ticket-paper.ticket-58mm{ width:58mm; font-size:9.5px; }
  .ticket-paper .ticket-center{ text-align:center; }
  .ticket-paper .ticket-title{ font-size:14px; font-weight:bold; text-transform:uppercase; }
  .ticket-paper .ticket-sep{ border-top:1px dashed #111; margin:2mm 0; }
  .ticket-paper table{ width:100%; border-collapse:collapse; }
  .ticket-paper td{ padding:0.5mm 0; vertical-align:top; }
  .ticket-paper .ticket-item-name{ width:100%; }
  .ticket-paper .ticket-num{ text-align:right; white-space:nowrap; }
  .ticket-paper .ticket-total-row td{ font-weight:bold; font-size:13px; padding-top:1mm; }
  .ticket-paper .ticket-small{ font-size:9px; color:#333; }
  @media print{
    @page{ size:80mm auto; margin:0; }
    body > *:not(#print-ticket-root){ display:none !important; }
    #print-ticket-root, #print-ticket-root *{ visibility:visible; }
    #print-ticket-root{ display:block; position:absolute; top:0; left:0; width:100%; }
    .ticket-preview-overlay, .ticket-preview-actions{ display:none !important; }
  }

  /* ============================================================================
     AGENDA — REDISEÑO VISUAL (calendario tipo agenda profesional). Solo
     estilos/estructura nueva; no afecta ninguna otra vista del panel salvo
     que reutiliza las variables de color ya existentes (--gold, --charcoal,
     etc.) y las clases de estado .pendiente/.confirmada/.completada/
     .cancelada, ya definidas para .status-badge, para que combine con el
     resto del panel.
     ============================================================================ */
  :root{ --agenda-slot-h:28px; --agenda-time-col-w:52px; --agenda-col-w:190px; }

  /* Agenda más compacta: reduce SOLO el espacio sobrante entre la barra de
     vista/fecha, los filtros locales y la rejilla — no toca .local-filters
     ni .export-bar globalmente (esas clases se reutilizan en Caja, Historial,
     etc.), así que este ajuste queda scoped a #view-agenda. */
  #view-agenda .local-filters{ padding:0.75rem 1rem; margin-bottom:0.75rem; }
  #view-agenda .export-bar{ margin-bottom:0.85rem; }

  .agenda-toolbar{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:0.75rem; margin-bottom:0.75rem;
  }
  .agenda-view-toggle{
    display:inline-flex; border:1px solid rgba(201,162,75,0.3); border-radius:8px; overflow:hidden;
  }
  .agenda-view-btn{
    background:none; border:none; padding:0.5rem 1rem; font-family:var(--font-sans);
    font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer;
    color:rgba(43,36,28,0.55); transition:all 0.15s ease; border-right:1px solid rgba(201,162,75,0.2);
  }
  .agenda-view-btn:last-child{ border-right:none; }
  .agenda-view-btn:hover{ color:var(--gold-dark); background:rgba(201,162,75,0.08); }
  .agenda-view-btn.active{ background:var(--gold); color:var(--ink); font-weight:600; }
  /* CORRECCIÓN 2026-09-27 (ronda post-QA manual, punto 4): esta barra se
     reutiliza en Agenda/Nómina/Financiero/Reportes. Sin flex-wrap, en
     Nómina el botón "Hoy / Periodo actual" (más largo que el simple "Hoy"
     de Agenda) podía no caber en anchos angostos y forzar scroll horizontal
     de toda la página — nunca de un elemento aislado, sino de la barra
     completa. Con flex-wrap, en desktop no cambia nada (todo cabe en una
     fila); en móvil los botones simplemente bajan de línea. */
  .agenda-date-nav{ display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
  .agenda-nav-btn{
    width:2rem; height:2rem; border-radius:50%; border:1px solid rgba(201,162,75,0.3); background:none;
    color:rgba(43,36,28,0.7); cursor:pointer; font-size:1rem; line-height:1; transition:all 0.15s ease;
  }
  .agenda-nav-btn:hover{ border-color:var(--gold); color:var(--gold-dark); background:rgba(201,162,75,0.08); }
  .agenda-nav-today{
    border:1px solid rgba(201,162,75,0.3); background:none; color:rgba(43,36,28,0.7);
    padding:0.4rem 0.85rem; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase;
    border-radius:20px; cursor:pointer; font-family:var(--font-sans); transition:all 0.15s ease;
  }
  .agenda-nav-today:hover{ border-color:var(--gold); color:var(--gold-dark); }
  .agenda-date-label{ font-size:0.85rem; color:rgba(43,36,28,0.75); font-weight:600; margin-left:0.25rem; text-transform:capitalize; }
  /* CORRECCIÓN 2026-09-27 (ronda post-QA manual, punto 2): chip "HOY" junto
     al selector de fecha de Agenda — visible SOLO cuando el día mostrado es
     exactamente el día real de hoy (America/Mexico_City), oculto en
     cualquier otro día. Se recalcula en cada render vía updateAgendaDateLabel(),
     siempre contra todayStr() en vivo (nunca un valor cacheado). */
  .agenda-today-chip{ display:none; font-size:0.65rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; background:var(--gold); color:var(--ink); border-radius:12px; padding:0.15rem 0.55rem; margin-left:0.4rem; }
  .agenda-today-chip.visible{ display:inline-block; }
  .date-nav-viewing{ font-size:0.75rem; font-weight:600; letter-spacing:0.04em; color:rgba(43,36,28,0.75); align-self:center; overflow-wrap:anywhere; }

  .agenda-legend{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-left:auto; }
  .agenda-legend-item{ display:flex; align-items:center; gap:0.35rem; font-size:0.68rem; color:rgba(43,36,28,0.55); text-transform:uppercase; letter-spacing:0.04em; }
  .agenda-legend-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
  .agenda-legend-dot.pendiente{ background:#f2b84b; }
  .agenda-legend-dot.confirmada{ background:#6c8ebf; }
  .agenda-legend-dot.completada{ background:#8fae9e; }
  .agenda-legend-dot.cancelada{ background:#f87171; }

  .agenda-grid-empty{ text-align:center; color:rgba(43,36,28,0.4); padding:3rem 1rem; font-size:0.85rem; }
  /* overflow:auto en AMBOS ejes (antes: overflow-x:auto; overflow-y:hidden)
     a propósito: con overflow-y:hidden este contenedor sigue contando como
     "scroll container" para efectos de position:sticky (cualquier valor de
     overflow distinto de visible lo activa), pero como él mismo nunca
     desplaza verticalmente (overflow-y:hidden ⇒ scrollTop siempre 0), la fila
     de nombres de profesionales (.agenda-grid-headrow, sticky) quedaba
     "pegada" a un contenedor que jamás se mueve — es decir, nunca se
     activaba, y la fila terminaba desplazándose junto con el resto de la
     página en vez de quedarse fija. Al dejar que ESTE contenedor sea el que
     de verdad se desplaza (ambos ejes) y limitarle una altura máxima, el
     sticky vuelve a funcionar de forma nativa y correcta en los dos ejes, y
     de paso se logra exactamente lo pedido: scroll vertical INTERNO del
     calendario (solo si el día no cabe) en vez de alargar toda la página. */
  .agenda-grid-scroll{
    overflow:auto; border:1px solid rgba(201,162,75,0.2); background:var(--charcoal);
    border-radius:10px; max-height:min(620px, 70vh);
  }
  .agenda-grid{ display:flex; flex-direction:column; min-width:fit-content; }
  .agenda-col-pager{ display:none; align-items:center; justify-content:space-between; gap:0.5rem; margin:0 0 0.5rem; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; }
  .agenda-col-pager .btn-ghost{ min-width:2.75rem; padding:0.4rem 0.8rem; font-size:1rem; }
  .agenda-col-pager .btn-ghost:disabled{ opacity:0.35; }
  /* CORRECCIÓN 2026-09-29 (QA Chrome): el encabezado de columna era un flex-item con
     min-width:auto y nombres largos (ESTEFANÍA) en nowrap lo ensanchaban por encima de
     --agenda-col-w (66px -> 80px), empujando la rejilla fuera del contenedor.
     Con min-width:0 el nombre usa la elipsis que ya tenía definida. */
  .agenda-col-head{ min-width:0; overflow:hidden; }

  .agenda-grid-headrow{
    display:flex; position:sticky; top:0; z-index:6; background:var(--charcoal);
    border-bottom:1px solid rgba(201,162,75,0.25);
  }
  /* --agenda-col-w ya NO es un ancho fijo en px: renderAgendaGrid() lo
     recalcula en JS (updateAgendaColWidth) para que el ancho disponible del
     contenedor se reparta entre TODOS los profesionales visibles y quepan
     sin scroll horizontal (igual que AgendaPro). Solo si el ancho resultante
     caería por debajo de un mínimo legible (viewport muy angosto con muchos
     profesionales) se usa ese mínimo y el contenedor conserva su scroll
     horizontal como respaldo — por eso la celda-esquina y la columna de
     horas siguen con position:sticky;left:0: si ese respaldo llega a
     activarse, la hora de cada fila no se pierde de vista al desplazarse. */
  .agenda-grid-corner{
    flex:0 0 var(--agenda-time-col-w); border-right:1px solid rgba(201,162,75,0.28);
    position:sticky; left:0; z-index:8; background:var(--charcoal);
  }
  .agenda-col-head{
    flex:0 0 var(--agenda-col-w); padding:0.45rem 0.5rem; border-right:1px solid rgba(201,162,75,0.28);
    text-align:center;
  }
  .agenda-col-head .name{
    font-size:0.78rem; font-weight:600; color:rgba(43,36,28,0.85); white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; text-transform:uppercase;
  }
  .agenda-col-head .sub{ font-size:0.65rem; color:rgba(43,36,28,0.45); text-transform:uppercase; letter-spacing:0.04em; margin-top:0.15rem; }
  .agenda-col-head.is-today{ background:rgba(201,162,75,0.1); }

  .agenda-grid-body{ display:flex; position:relative; }
  .agenda-time-col{
    flex:0 0 var(--agenda-time-col-w); border-right:1px solid rgba(201,162,75,0.28);
    position:sticky; left:0; z-index:5; background:var(--charcoal);
  }
  .agenda-time-cell{
    height:var(--agenda-slot-h); font-size:0.6rem; color:rgba(43,36,28,0.4); text-align:right;
    padding-right:0.4rem; box-sizing:border-box; position:relative; top:-0.5em;
  }
  .agenda-time-cell.is-hour{ color:rgba(43,36,28,0.65); font-weight:700; }
  /* La celda de hora "flota" 0.5em hacia arriba (top:-0.5em) para quedar
     alineada justo sobre la línea de su hora — se ve bien en todas las filas
     porque ese espacio lo absorbe la fila anterior. La PRIMERA celda de la
     columna (típicamente "08:00", el inicio por defecto de la rejilla) no
     tiene fila anterior: ese mismo -0.5em la empuja por debajo del encabezado
     sticky (.agenda-grid-headrow) y se ve cortada arriba. Se anula el
     desplazamiento solo para esa primera celda. */
  .agenda-time-cell.first-cell{ top:0; }

  .agenda-columns{ display:flex; position:relative; }
  .agenda-col{
    flex:0 0 var(--agenda-col-w); position:relative; border-right:1px solid rgba(201,162,75,0.28);
    background-image:repeating-linear-gradient(to bottom, rgba(201,162,75,0.12) 0, rgba(201,162,75,0.12) 1px, transparent 1px, transparent var(--agenda-slot-h));
  }
  .agenda-slot{
    height:var(--agenda-slot-h); box-sizing:border-box; cursor:pointer; transition:background 0.12s ease;
  }
  .agenda-slot:hover{ background:rgba(201,162,75,0.12); }
  .agenda-slot.is-hour-start{ border-top:1.5px solid rgba(201,162,75,0.4); }

  .agenda-now-line{
    position:absolute; left:0; right:0; height:2px; background:#e0524d; z-index:4; pointer-events:none;
  }
  .agenda-now-line::before{
    content:''; position:absolute; left:-4px; top:-4px; width:9px; height:9px; border-radius:50%; background:#e0524d;
  }

  .agenda-apt-block{
    position:absolute; border-radius:6px; padding:0.22rem 0.45rem; overflow:hidden; cursor:grab;
    border-left:3px solid; box-shadow:0 1px 3px rgba(0,0,0,0.08); transition:box-shadow 0.15s ease, transform 0.1s ease;
    font-size:0.68rem; line-height:1.2; z-index:2;
  }
  .agenda-apt-block:hover{ box-shadow:0 3px 10px rgba(0,0,0,0.16); z-index:3; transform:translateY(-1px); }
  .agenda-apt-block:active{ cursor:grabbing; }
  .agenda-apt-block.dragging{ opacity:0.5; }
  .agenda-apt-block .apt-time{ font-weight:700; font-size:0.66rem; }
  .agenda-apt-block .apt-client{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .agenda-apt-block .apt-service{ opacity:0.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .agenda-apt-block .apt-pro-tag{ opacity:0.75; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.03em; }
  .agenda-apt-block.short .apt-service, .agenda-apt-block.short .apt-pro-tag{ display:none; }
  /* 16_44: los empalmes de un mismo profesional están PERMITIDOS — ya no se marcan en rojo;
     cada cita va en su propio carril (columna interna) con un separador sutil. */
  .agenda-apt-block.overlap{ box-shadow:0 0 0 1px rgba(255,255,255,0.85), 0 1px 3px rgba(0,0,0,0.10); }

  /* FASE 4 (auditoría 2026-09-27): manija de resize vertical — arrastrar el
     CUERPO del bloque sigue siendo "mover" (drag-and-drop nativo, sin
     cambios); arrastrar esta manija (solo la franja inferior) cambia la
     duración. draggable="false" explícito + el propio dragstart del bloque
     aborta si el origen fue la manija (ver JS), para que nunca se disparen
     los dos gestos a la vez. */
  .agenda-apt-resize-handle{
    /* CORRECCIÓN 2026-09-27 (ronda post-QA manual, punto 3): 7px era
       prácticamente imposible de acertar con el dedo/mouse en bloques
       cortos (por eso en la práctica el arrastre casi siempre terminaba
       moviendo la cita completa) — se amplía a 10px de alto visual, y
       además el JS acepta un mousedown dentro de los últimos ~12px reales
       en pantalla del bloque aunque el target exacto sea el cuerpo (ver
       listener de mousedown más abajo), para un área de agarre más
       generosa sin agrandar visualmente el bloque. */
    position:absolute; left:0; right:0; bottom:0; height:10px; cursor:ns-resize; z-index:4; touch-action:none;
  }
  .agenda-apt-resize-handle::after{
    content:''; position:absolute; left:50%; bottom:2px; width:22px; height:4px; border-radius:2px;
    background:rgba(0,0,0,0.22); transform:translateX(-50%);
  }
  .agenda-apt-block:hover .agenda-apt-resize-handle::after{ background:rgba(0,0,0,0.32); }
  .agenda-apt-block.resizing{ opacity:0.85; box-shadow:0 4px 14px rgba(0,0,0,0.22); z-index:5; }
  .agenda-resize-endlabel{
    position:absolute; z-index:6; background:var(--charcoal); color:#fff; font-size:0.66rem; font-weight:600;
    padding:0.15rem 0.45rem; border-radius:4px; white-space:nowrap; pointer-events:none;
    box-shadow:0 2px 8px rgba(0,0,0,0.25);
  }

  .agenda-apt-complete-btn{
    display:none; position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%;
    align-items:center; justify-content:center; border:none; background:rgba(255,255,255,0.75);
    color:#33513f; font-size:0.6rem; line-height:1; cursor:pointer; z-index:3; padding:0;
  }
  .agenda-apt-block:hover .agenda-apt-complete-btn{ display:flex; }
  /* CORRECCIÓN 2026-09-29: en pantallas táctiles (sin hover real) "Completar y cobrar" queda siempre visible. */
  @media (hover: none){ .agenda-apt-block .agenda-apt-complete-btn{ display:flex; } }
  .agenda-apt-complete-btn:hover{ background:#8fae9e; color:#fff; }

  /* Selector rápido de estado en el modal de cita (2026-09-30) */
  .apt-status-chip-row{ display:flex; flex-wrap:wrap; gap:0.4rem; }
  .apt-status-chip{
    display:inline-flex; align-items:center; gap:0.4rem; min-width:0;
    padding:0.4rem 0.65rem; border:1px solid rgba(43,36,28,0.2); border-radius:999px;
    background:transparent; color:rgba(43,36,28,0.8); font-size:0.66rem; letter-spacing:0.06em;
    cursor:pointer; font-family:inherit; line-height:1.2;
  }
  .apt-status-chip .dot{ width:0.7rem; height:0.7rem; border-radius:50%; border:2px solid var(--c); flex:0 0 auto; box-sizing:border-box; }
  .apt-status-chip.current{ border-color:var(--c-cur, rgba(43,36,28,0.5)); font-weight:700; color:#2b241c; background:rgba(201,162,75,0.12); }
  .apt-status-chip.current .dot{ background:var(--c); }
  .apt-status-chip:disabled{ opacity:0.4; cursor:not-allowed; }
  .apt-status-chip.saving{ opacity:0.6; }
  .agenda-apt-block.pendiente{ background:rgba(242,184,75,0.16); border-left-color:#f2b84b; color:#7a5c17; }
  .agenda-apt-block.confirmada{ background:rgba(108,142,191,0.16); border-left-color:#6c8ebf; color:#2d4566; }
  .agenda-apt-block.completada{ background:rgba(143,174,158,0.18); border-left-color:#8fae9e; color:#33513f; }
  .agenda-apt-block.cancelada{ background:rgba(248,113,113,0.13); border-left-color:#f87171; color:#8a3232; text-decoration:line-through; opacity:0.65; }

  .agenda-drop-target{ background:rgba(184,147,63,0.22) !important; }

  .agenda-slot-popover{
    position:absolute; z-index:10; background:var(--charcoal); border:1px solid rgba(201,162,75,0.35);
    border-radius:8px; padding:0.5rem; box-shadow:0 6px 18px rgba(0,0,0,0.18); font-size:0.72rem;
  }

  @media (max-width: 860px){
    :root{ --agenda-col-w:150px; --agenda-time-col-w:42px; --agenda-slot-h:26px; }
    .agenda-toolbar{ flex-direction:column; align-items:stretch; }
    .agenda-legend{ margin-left:0; }
    .agenda-apt-block{ font-size:0.62rem; }
    #view-agenda .local-filters{ padding:0.65rem 0.85rem; }
  }
  .cap-prod-results{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid rgba(43,36,28,0.18);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.12);max-height:240px;overflow:auto;margin-top:2px;}
  .cap-prod-opt{display:flex;justify-content:space-between;gap:0.5rem;width:100%;text-align:left;padding:0.5rem 0.65rem;border:0;border-bottom:1px solid rgba(43,36,28,0.07);background:#fff;font:inherit;font-size:0.76rem;cursor:pointer;color:#2b241c;}
  .cap-prod-opt:hover,.cap-prod-opt:focus{background:rgba(201,162,75,0.12);outline:none;}
  .cap-prod-opt[disabled]{opacity:0.5;cursor:not-allowed;}
  .cap-prod-row{display:grid;grid-template-columns:1fr auto;gap:0.35rem 0.6rem;align-items:center;padding:0.45rem 0;border-bottom:1px solid rgba(43,36,28,0.08);font-size:0.76rem;text-align:left;}
  .cap-prod-qty{display:inline-flex;align-items:center;gap:0.3rem;}
  .cap-prod-qty button{width:28px;height:28px;border-radius:6px;border:1px solid rgba(43,36,28,0.25);background:#fff;font-weight:700;cursor:pointer;line-height:1;}
  .cap-prod-qty .cap-prod-del{border-color:rgba(180,60,60,0.45);color:#b43c3c;}

  /* ===== 16_70: horas en 12 h ===== */
  .time12{ display:flex; align-items:center; gap:0.35rem; width:100%; }
  .time12 .time12-sel{ flex:1 1 0; min-width:0; width:auto; }
  .time12 .time12-p{ flex:1.3 1 0; }
  .time12-native{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
    overflow:hidden !important; clip:rect(0 0 0 0) !important; border:0 !important; opacity:0 !important; pointer-events:none !important; }
  /* columna de horas de la agenda: cabe "12:00 p. m." */
  :root{ --agenda-time-col-w:70px; }
  .agenda-time-cell{ white-space:nowrap; }
  @media (max-width: 860px){
    :root{ --agenda-time-col-w:60px; }
    .agenda-time-cell{ font-size:0.56rem; padding-right:0.25rem; }
  }
  /* nombres largos (MARÍA JOSÉ) en dos renglones en vez de cortarse con "…" */
  .agenda-col-head{ padding-left:0.25rem; padding-right:0.25rem; }
  .agenda-col-head .name{ white-space:normal; overflow-wrap:break-word; word-break:normal; hyphens:none; font-size:0.7rem; line-height:1.15; text-overflow:clip;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .hora12{ text-transform:none; }
  .field .time12 .time12-sel{ padding-left:0.3rem; padding-right:0.1rem; }
  /* formulario público en celular: una sola columna a todo lo ancho (antes los campos quedaban
     en 2 columnas angostas de tamaño irregular y la fecha/hora se cortaban) */
  @media (max-width: 639px){ .booking-form{ grid-template-columns:minmax(0,1fr); } .booking-form .col-span-2{ grid-column:1 / -1; } }

  /* ===== 16_71: paquetes del cliente en "Nueva cita" ===== */
  .apt-pkg-box{ border:1px solid rgba(201,162,75,0.45); border-radius:10px; padding:0.75rem; background:rgba(201,162,75,0.07); }
  .apt-pkg-box.apt-pkg-none{ font-size:0.72rem; letter-spacing:0.04em; color:rgba(43,36,28,0.6); }
  .apt-pkg-title{ font-size:0.72rem; font-weight:700; letter-spacing:0.06em; margin-bottom:0.5rem; }
  .apt-pkg-card{ display:flex; gap:0.5rem; align-items:flex-start; padding:0.45rem 0.5rem; border-radius:8px; cursor:pointer; border:1px solid transparent; }
  .apt-pkg-card.on{ border-color:rgba(201,162,75,0.7); background:rgba(255,255,255,0.55); }
  .apt-pkg-card input{ margin-top:0.2rem; }
  .apt-pkg-body{ display:flex; flex-direction:column; gap:0.1rem; min-width:0; }
  .apt-pkg-name{ font-size:0.75rem; font-weight:700; overflow-wrap:anywhere; }
  .apt-pkg-line{ font-size:0.72rem; color:rgba(43,36,28,0.75); }
  .apt-pkg-debt{ color:#b04a3a; } .apt-pkg-paid{ color:#2f6b52; }
  .apt-pkg-warn{ font-size:0.7rem; color:#b04a3a; font-weight:600; }
  .apt-pkg-muted{ font-size:0.7rem; color:rgba(43,36,28,0.55); }
  .apt-pkg-sessions{ margin-top:0.6rem; padding-top:0.6rem; border-top:1px dashed rgba(43,36,28,0.15); display:flex; flex-direction:column; gap:0.3rem; }
  .pkg-chip{ display:inline-block; font-size:0.62rem; font-weight:700; letter-spacing:0.05em; padding:0.1rem 0.45rem; border-radius:999px; margin-left:0.3rem; background:#e4d9c5; }
  .pkg-chip.debt{ background:#f3d9d3; color:#8a3426; } .pkg-chip.ok{ background:#d6eadf; color:#2f6b52; }