/* =====================================================================
   GLAMZ  -  Paletas por rubro y piezas nuevas del booking.
   Se carga DESPUES de estilo.css. Un salon de unas no puede vivir en
   carbon y laton de barberia: el rubro (body.rubro-*) redefine las
   variables y el resto de la hoja base se adapta solo por cascada.
   Contraste minimo medido: 4.5:1 texto normal, 3:1 texto grande/UI.
   ===================================================================== */

/* ----- Salon de unas: ciruela profundo + rosa neon + papel rosado -------- */
body.rubro-unas {
    --carbon:    #2c0f27;   /* ciruela */
    --carbon-2:  #4a1a42;
    --crema:     #fbf0f5;   /* papel rosado */
    --papel:     #fffafc;
    --oro:       #e64b8e;   /* rosa: rellenos, no texto */
    --oro-osc:   #b4306c;   /* bordes, foco */
    --oro-texto: #a4215e;   /* rosa legible sobre papel: 5.6:1 */
    --oro-claro: #ffb6d3;
    --rojo:      #c2185b;
    --rojo-osc:  #8c1041;
    --azul:      #6a3fb5;
    --tinta:     #2a1622;
    --gris:      #6f5a67;   /* 5.4:1 sobre papel */
    --linea:     #f0d6e3;
    --linea-fuerte: #c98fb0; /* 3.0:1 bordes de control */
    --poste: repeating-linear-gradient(45deg, #e64b8e 0 10px, #ffb6d3 10px 20px, #b98be6 20px 30px);
}

/* ----- Salon de trenzas: chocolate + cobre + arena ----------------------- */
body.rubro-trenzas {
    --carbon:    #24140c;
    --carbon-2:  #3d2214;
    --crema:     #f8efe4;
    --papel:     #fffaf3;
    --oro:       #d4883f;
    --oro-osc:   #9a5a1c;
    --oro-texto: #8a4f14;   /* 5.9:1 */
    --oro-claro: #f2c48f;
    --rojo:      #a8432b;
    --rojo-osc:  #7d2f1c;
    --azul:      #2f5d50;
    --tinta:     #2a1a10;
    --gris:      #6e5a48;
    --linea:     #ecd9c2;
    --linea-fuerte: #b98a5c;
    --poste: repeating-linear-gradient(45deg, #d4883f 0 10px, #f2c48f 10px 20px, #6b3d1c 20px 30px);
}

/* ----- Salon de belleza: morado noche + lila + champan ------------------- */
body.rubro-salon {
    --carbon:    #23163a;
    --carbon-2:  #3a2560;
    --crema:     #f5f1fa;
    --papel:     #fcfaff;
    --oro:       #a97ee0;
    --oro-osc:   #7548b8;
    --oro-texto: #6a3ea6;   /* 6.2:1 */
    --oro-claro: #d9c6f5;
    --rojo:      #b83c7a;
    --rojo-osc:  #86275a;
    --azul:      #2f6a8a;
    --tinta:     #201730;
    --gris:      #665a78;
    --linea:     #e6dcf3;
    --linea-fuerte: #a68fc7;
    --poste: repeating-linear-gradient(45deg, #a97ee0 0 10px, #d9c6f5 10px 20px, #f3d59a 20px 30px);
}

/* En los rubros Glamz el papel viejo de barberia no pinta nada */
body.rubro-unas, body.rubro-trenzas, body.rubro-salon {
    background-image:
        radial-gradient(rgba(180,48,108,.05) 1px, transparent 1px),
        radial-gradient(rgba(180,48,108,.035) 1px, transparent 1px);
}
body.rubro-unas    { --btn-alto: #d63c80; }   /* blanco encima: 4.2:1 */
body.rubro-trenzas { --btn-alto: #b06018; }   /* 4.5:1 */
body.rubro-salon   { --btn-alto: #8f5fd0; }   /* 4.6:1 */
body.rubro-unas .btn-acento, body.rubro-trenzas .btn-acento, body.rubro-salon .btn-acento,
body.rubro-unas .slot.sel,   body.rubro-trenzas .slot.sel,   body.rubro-salon .slot.sel {
    color: #fff;
    background: linear-gradient(180deg, var(--btn-alto), var(--oro-osc));
    text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
body.rubro-unas .book-header .avatar:not(.avatar-foto),
body.rubro-trenzas .book-header .avatar:not(.avatar-foto),
body.rubro-salon .book-header .avatar:not(.avatar-foto) { color: #fff; }

/* ----- Marca del tenant: color propio ------------------------------------
   PHP inyecta --marca, --marca-osc, --marca-claro y --marca-texto ya
   verificados (contraste calculado en el servidor). Solo se usan si existen. */
body.con-marca {
    --oro:       var(--marca);
    --oro-osc:   var(--marca-osc);
    --oro-claro: var(--marca-claro);
    --oro-texto: var(--marca-texto);
    --linea-fuerte: var(--marca-osc);
    --poste: repeating-linear-gradient(45deg, var(--marca) 0 10px, var(--marca-claro) 10px 20px, var(--marca-osc) 20px 30px);
}

/* ----- Cabecera con portada y logo --------------------------------------- */
.book-header.con-portada {
    background-image:
        linear-gradient(180deg, rgba(20,8,18,.55), rgba(20,8,18,.82)),
        var(--portada);
    background-size: cover;
    background-position: center;
}
.book-header.con-portada::after { display: none; }
.book-header .book-logo-img {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    padding: 0;
    margin-bottom: 12px;
    box-shadow: 0 0 0 3px var(--carbon), 0 0 0 6px var(--oro), 0 10px 26px rgba(0,0,0,.45);
}
.book-header .book-eslogan {
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    color: #f4e6ee;
    max-width: 34ch;
    margin: 8px auto 0;
}
.book-header .book-datos {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
    margin-top: 12px; font-size: .8rem; text-transform: none; letter-spacing: 0;
}
.book-header .book-datos a { color: #ffd6e7; text-decoration: none; border-bottom: 1px dotted rgba(255,214,231,.6); }
.book-header .book-datos a:hover { border-bottom-style: solid; }

/* ----- Galeria de trabajos ---------------------------------------------- */
.galeria-tira {
    display: flex; gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 10px;
    margin: 0 -16px 6px;
    scrollbar-width: none;
}
.galeria-tira::-webkit-scrollbar { display: none; }
.galeria-tira a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 118px; height: 118px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--papel);
    box-shadow: var(--sombra);
    border: 1px solid var(--linea);
    transition: transform .15s ease;
}
.galeria-tira a:hover { transform: translateY(-2px); }
.galeria-tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-titulo {
    font-family: 'Oswald', sans-serif;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gris);
    margin: 14px 0 8px;
}

/* ----- Servicios por categoria, con icono y varios a la vez -------------- */
.cat-titulo {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gris);
    margin: 14px 0 8px;
}
.cat-titulo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.servicio-op { gap: 12px; }
.serv-izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.serv-ico {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.45rem;
    background: var(--crema);
    border: 1px solid var(--linea);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .15s ease;
}
.servicio-op.sel .serv-ico { transform: scale(1.12) rotate(-6deg); background: var(--oro-claro); }
.serv-txt { min-width: 0; }
.serv-desc { font-size: .8rem; color: var(--gris); margin-top: 2px; line-height: 1.3; }
.serv-der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.serv-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--linea-fuerte);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; color: #fff;
    transition: background .15s ease, border-color .15s ease;
}
.servicio-op.sel .serv-check { background: var(--oro-osc); border-color: var(--oro-osc); }
.serv-deposito { font-size: .7rem; color: var(--oro-texto); text-transform: uppercase; letter-spacing: .05em; }
.resumen-detalle b { color: #fff; font-weight: 600; }

/* ----- Confirmacion: celebracion ---------------------------------------- */
.book-header.celebra { overflow: visible; }
.book-header .avatar.avatar-ok {
    font-size: 2.2rem;
    animation: ok-pop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ok-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.confeti i {
    position: absolute; top: -12px;
    width: 8px; height: 12px;
    border-radius: 2px;
    opacity: 0;
    animation: confeti-cae 2.6s ease-in forwards;
}
@keyframes confeti-cae {
    0%   { transform: translate3d(0,0,0) rotate(0); opacity: 1; }
    100% { transform: translate3d(var(--dx, 0), 300px, 0) rotate(720deg); opacity: 0; }
}
.cita-resumen { display: grid; gap: 10px; }
.cita-resumen .fila { display: flex; gap: 12px; align-items: flex-start; }
.cita-resumen .fila-ico { font-size: 1.3rem; width: 30px; text-align: center; flex: 0 0 auto; }
.cita-resumen .fila b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); font-weight: 600; }
.cal-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 12px; }
.cal-botones .btn { width: 100%; padding: 11px 8px; font-size: .9rem; }
.emoji-marca { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
    .confeti i, .book-header .avatar.avatar-ok, .servicio-op.sel .serv-ico { animation: none; transform: none; }
}

/* ----- Panel: servicios con icono y sugeridos ---------------------------- */
.icono-sugeridos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.icono-op {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--linea-fuerte);
    background: var(--papel);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
}
.icono-op:hover { border-color: var(--oro-osc); }
.item .serv-ico { width: 40px; height: 40px; font-size: 1.3rem; }

/* ----- Panel: cita con varios servicios ---------------------------------- */
.serv-check-lista { display: grid; gap: 6px; margin: 4px 0 8px; }
.serv-check-lista label {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 10px;
    background: var(--papel);
    text-transform: none; letter-spacing: 0; font-size: .95rem;
    cursor: pointer;
}
.serv-check-lista input { width: auto; margin: 0; }
.serv-check-lista .sub { margin-left: auto; white-space: nowrap; }
.serv-total { font-family: 'Oswald', sans-serif; font-size: .9rem; color: var(--oro-texto); margin-bottom: 8px; }

/* ----- Panel: galeria ----------------------------------------------------- */
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.galeria-grid figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); background: var(--papel); }
.galeria-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.galeria-grid figcaption { font-size: .75rem; padding: 6px 8px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galeria-grid form { position: absolute; top: 6px; right: 6px; }
.galeria-grid .btn-x {
    width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(20,10,16,.72); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer;
}
.marca-prev { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.marca-prev img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--linea-fuerte); background: #fff; }
.marca-prev .portada-prev { width: 120px; height: 64px; border-radius: 10px; object-fit: cover; }
input[type=color] { width: 64px; height: 40px; padding: 2px; border-radius: 8px; }

/* ----- Landing por producto ----------------------------------------------
   La landing (index.php) carga esta hoja solo en la instancia Glamz y pone
   body.rubro-unas: las variables de arriba tinen el hero, los botones y el
   pie sin tocar estilo.css. Lo de abajo es lo que estilo.css no tiene. */
.logo-texto {
    display: block;
    width: auto;
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: .14em;
    color: var(--oro-texto);
    text-decoration: none;
}
.book-logo.logo-texto { text-align: center; font-size: 2.2rem; margin: 0 auto 8px; }
.venta-cruzado { color: var(--oro-texto); text-decoration: underline; text-underline-offset: 3px; }
.venta-cruzado:hover { color: var(--oro-osc); }
/* La tijera de la lista de dolores es de barberia: en Glamz va un punto de esmalte */
body.rubro-unas .venta-dolores li::before,
body.rubro-trenzas .venta-dolores li::before,
body.rubro-salon .venta-dolores li::before { content: "\2726"; }   /* estrella de cuatro puntas */
/* Marca escrita en la barra oscura: rosa claro, 10:1 sobre ciruela */
.venta-barra .logo-texto { color: var(--oro-claro); }
/* El wordmark de Glamz es mas alto que el de Cutz (1200x408): a 34px quedaba enano */
body.rubro-unas .venta-logo { height: 38px; }