/* PerseFone360 — Peluquería: DECORACIONES de cabecera de los temas (data-decor) y la MINIATURA de la galería
   del panel (.tm). Todo en CSS/SVG en línea, sin imágenes externas. Los colores salen de las variables del
   tema (SalonTemas::variables), así que cada decoración sirve para cualquier paleta.
   Las reglas cubren la cabecera real (.cab) y la de la miniatura (.tm-cab). */

/* ── Formas ─────────────────────────────────────────────────────── */
[data-forma="suave"]    { --radio: 18px; --radio-ctl: 12px; --borde: 0; --sombra-tarjeta: var(--sombra); }
[data-forma="contorno"] { --radio: 10px; --radio-ctl: 8px; --borde: 1.5px solid var(--linea); --sombra-tarjeta: none; }
[data-forma="recto"]    { --radio: 0; --radio-ctl: 0; --borde: 1px solid var(--linea); --sombra-tarjeta: none; }
[data-forma="pildora"]  { --radio: 28px; --radio-ctl: 999px; --borde: 0; --sombra-tarjeta: var(--sombra); }
[data-forma="plano"]    { --radio: 0; --radio-ctl: 6px; --borde: 0; --sombra-tarjeta: none; }
[data-forma="duro"]     { --radio: 0; --radio-ctl: 0; --borde: 2.5px solid var(--texto); --sombra-tarjeta: 6px 6px 0 var(--texto); }

/* rayas: franja del poste de barbero arriba */
[data-decor="rayas"] :is(.cab, .tm-cab)::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; z-index: 2;
    background: repeating-linear-gradient(-45deg, #b3261e 0 11px, #f7f3ea 11px 22px, #1f3a7a 22px 33px, #f7f3ea 33px 44px);
}
[data-decor="rayas"] .cab .cab-in { padding-top: 22px; }

/* puntos */
[data-decor="puntos"] :is(.cab, .tm-cab) {
    background-image: radial-gradient(color-mix(in srgb, var(--hero-texto) 20%, transparent) 1.6px, transparent 1.8px);
    background-size: 18px 18px;
}

/* grano de papel */
[data-decor="grano"] :is(.cab, .tm-cab) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* líneas finas horizontales */
[data-decor="lineas"] :is(.cab, .tm-cab) {
    background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--hero-btn) 16%, transparent) 0 1px, transparent 1px 11px);
}

/* cuadrícula */
[data-decor="cuadricula"] :is(.cab, .tm-cab) {
    background-image:
        linear-gradient(color-mix(in srgb, var(--acento2) 22%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--acento2) 22%, transparent) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: -1px -1px;
}

/* onda bajo la cabecera (recorte con máscara: sirve para cualquier color de página) */
[data-decor="ondas"] .cab {
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 36px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v14c-160 26-320 30-480 14S400 2 240 8 60 34 0 24z'/%3E%3C/svg%3E") bottom / 100% 36px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 36px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v14c-160 26-320 30-480 14S400 2 240 8 60 34 0 24z'/%3E%3C/svg%3E") bottom / 100% 36px no-repeat;
}
[data-decor="ondas"] .cab .hero { padding-bottom: 64px; }
[data-decor="ondas"][data-layout="superpuesto"] .cab .hero { padding-bottom: 120px; }
[data-decor="ondas"] .tm-cab { border-radius: 0 0 50% 50% / 0 0 14px 14px; }

/* arcos: dos círculos grandes de fondo */
[data-decor="arco"] :is(.cab, .tm-cab) {
    background-image:
        radial-gradient(circle at 92% -8%, color-mix(in srgb, var(--hero-btn) 20%, transparent) 0 30%, transparent 30.4%),
        radial-gradient(circle at -6% 112%, color-mix(in srgb, var(--hero-btn) 14%, transparent) 0 24%, transparent 24.4%);
}

/* degradado de aurora */
[data-decor="degradado"] :is(.cab, .tm-cab) {
    background-image:
        radial-gradient(at 12% 8%, color-mix(in srgb, var(--acento2) 75%, transparent), transparent 55%),
        radial-gradient(at 92% 22%, color-mix(in srgb, var(--marca) 45%, transparent), transparent 48%),
        radial-gradient(at 55% 115%, color-mix(in srgb, var(--acento2) 45%, transparent), transparent 60%);
}

/* vetas de mármol */
[data-decor="marmol"] :is(.cab, .tm-cab) {
    background-image:
        linear-gradient(112deg, transparent 38%, rgba(60,50,40,.07) 40%, transparent 42.5%),
        linear-gradient(158deg, transparent 58%, rgba(60,50,40,.06) 59.5%, transparent 61.5%),
        linear-gradient(76deg, transparent 18%, rgba(60,50,40,.05) 20%, transparent 23%),
        linear-gradient(130deg, transparent 70%, rgba(122,92,46,.10) 71%, transparent 72%),
        radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.9), transparent 60%);
}

/* abanico art déco: rayos desde abajo */
[data-decor="abanico"] :is(.cab, .tm-cab) {
    background-image:
        repeating-conic-gradient(from 270deg at 50% 100%, color-mix(in srgb, var(--hero-btn) 20%, transparent) 0 1.4deg, transparent 1.4deg 7.5deg),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--hero-btn) 22%, transparent) 0 18%, transparent 18.4%);
}

/* rayas diagonales deportivas a la derecha */
[data-decor="diagonal"] :is(.cab, .tm-cab) {
    background-image: repeating-linear-gradient(120deg, color-mix(in srgb, var(--hero-btn) 40%, transparent) 0 16px, transparent 16px 40px);
    background-size: 46% 100%;
    background-position: right top;
    background-repeat: no-repeat;
}

/* arco iris setentero en la esquina */
[data-decor="franjas"] :is(.cab, .tm-cab) {
    background-image: radial-gradient(circle at 100% 0, transparent 0 34%, var(--franja3) 34% 41%, var(--franja2) 41% 48%, var(--franja1) 48% 55%, transparent 55%);
    background-size: min(560px, 120%) min(560px, 120%);
    background-position: right top;
    background-repeat: no-repeat;
}

/* ══ Miniatura de la galería del panel ══════════════════════════ */
.tm { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; border-radius: 14px; overflow: hidden; background: var(--fondo); color: var(--texto);
    font-family: var(--f-texto); font-size: 11px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s; }
.tm:hover { transform: translateY(-2px); }
.tm:focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; }
.tm * { box-sizing: border-box; }
.tm-lienzo { position: relative; height: 230px; overflow: hidden; display: flex; flex-direction: column; }
.tm-cab { position: relative; flex: none; background-color: var(--hero-fondo); color: var(--hero-texto); padding: 18px 14px 14px; overflow: hidden; container-type: inline-size; }
.tm-cab > * { position: relative; z-index: 1; }
.tm-sup { display: flex; justify-content: space-between; align-items: center; font-size: 9px; opacity: .85; margin-bottom: 10px; }
.tm-sup i { display: inline-block; width: 26px; height: 11px; border-radius: 999px; border: 1px solid currentColor; opacity: .7; }
.tm-logo { max-height: 26px; max-width: 90px; object-fit: contain; display: block; margin-bottom: 6px; }
.tm-h1 { display: block; font-family: var(--f-titulo); font-weight: var(--peso-titulo); text-transform: var(--tt-titulo); letter-spacing: var(--ls-titulo);
    font-size: min(calc(21px * var(--escala-h1)), calc(100cqi / (var(--largo, 9) * var(--ancho-letra, .6)))); line-height: 1.02; margin-bottom: 6px; overflow-wrap: anywhere; }
.tm-estado { display: inline-block; font-size: 8.5px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--hero-texto) 14%, transparent); }
.tm-btn { display: inline-block; margin-top: 8px; padding: 5px 10px; font-weight: 700; font-size: 9.5px; background: var(--hero-btn); color: var(--hero-btn-texto); border-radius: var(--radio-ctl); }
[data-forma="duro"] .tm-btn { box-shadow: 2px 2px 0 var(--hero-texto); border: 1.5px solid var(--hero-texto); }
.tm-cuerpo { padding: 10px 12px; flex: 1; display: grid; gap: 8px; align-content: start; }
.tm-bloque { background: var(--tarjeta); border-radius: min(var(--radio), 12px); border: var(--borde); box-shadow: var(--sombra-tarjeta); padding: 9px 10px; }
[data-forma="duro"] .tm-bloque { box-shadow: 3px 3px 0 var(--texto); border-width: 1.5px; }
[data-forma="plano"] .tm-bloque { background: transparent; box-shadow: none; border-top: 1px solid var(--linea); border-radius: 0; padding-left: 0; padding-right: 0; }
.tm-h2 { display: block; font-family: var(--f-titulo); font-weight: var(--peso-titulo); text-transform: var(--tt-titulo); letter-spacing: var(--ls-titulo); font-size: 13px; margin-bottom: 5px; }
.tm-h2::before { content: var(--ornamento); color: var(--marca); margin-right: 4px; font-size: .8em; }
.tm-sv { display: flex; align-items: baseline; gap: 4px; padding: 2px 0; }
.tm-sv b { font-weight: 600; }
.tm-sv i { flex: 1; }
[data-servicios="carta"] .tm-sv i { border-bottom: 1.5px dotted color-mix(in srgb, var(--texto) 40%, transparent); }
[data-servicios="carta"] .tm-sv b { font-family: var(--f-titulo); font-weight: var(--peso-titulo); }
[data-servicios="numerada"] .tm-sv::before { content: attr(data-n); font-family: var(--f-titulo); color: var(--enlace); font-size: 14px; margin-right: 4px; }
[data-servicios="tarjetas"] .tm-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
[data-servicios="tarjetas"] .tm-sv { display: block; background: var(--tarjeta2); border-radius: min(var(--radio), 8px); padding: 5px 6px; }
[data-servicios="tarjetas"] .tm-sv span { display: block; color: var(--enlace); font-weight: 700; }
.tm-sv span { font-weight: 700; white-space: nowrap; }
.tm-logo.placa, .hero-logo.placa { background: var(--hero-texto); padding: 6px 10px; border-radius: 10px; }
.tm-chip { display: inline-block; padding: 3px 7px; margin: 4px 3px 0 0; border-radius: min(var(--radio-ctl), 8px); border: 1px solid var(--linea); background: var(--campo); font-weight: 600; font-size: 9px; }
.tm-chip.sel { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }

/* La miniatura también enseña la maquetación */
[data-layout="centrado"] .tm-cab, [data-layout="marco"] .tm-cab { text-align: center; }
[data-layout="centrado"] .tm-logo, [data-layout="marco"] .tm-logo { margin-left: auto; margin-right: auto; }
[data-layout="centrado"] .tm-h2 { text-align: center; }
[data-layout="poster"] .tm-cab { min-height: 128px; display: flex; flex-direction: column; justify-content: flex-end; }
[data-layout="poster"] .tm-sup { margin-bottom: auto; }
[data-layout="poster"] .tm-h1 { font-size: min(calc(30px * var(--escala-h1)), calc(100cqi / (var(--largo, 9) * var(--ancho-letra, .6)))); line-height: .9; }
[data-layout="revista"] .tm-cab { border-bottom: 3px solid var(--hero-texto); }
[data-layout="revista"] .tm-h1 { font-size: min(calc(27px * var(--escala-h1)), calc(100cqi / (var(--largo, 9) * var(--ancho-letra, .6)))); }
[data-layout="revista"] .tm-cuerpo { grid-template-columns: 1fr 1fr; }
[data-layout="revista"] .tm-h2::before { content: '01'; color: var(--enlace); }
[data-layout="superpuesto"] .tm-cab { padding-bottom: 34px; }
[data-layout="superpuesto"] .tm-cuerpo { margin-top: -26px; position: relative; z-index: 1; }
[data-layout="marco"] .tm-lienzo { margin: 5px; border: 1.5px solid var(--texto); outline: 1px solid var(--texto); outline-offset: 2px; height: 220px; }
[data-layout="mosaico"] .tm-cuerpo { grid-template-columns: 1.2fr 1fr; }
[data-layout="mosaico"] .tm-bloque + .tm-bloque { background: var(--tarjeta2); }
[data-layout="dividido"] .tm-lienzo { flex-direction: row; }
[data-layout="dividido"] .tm-cab { width: 46%; display: flex; flex-direction: column; justify-content: center; }
[data-layout="dividido"] .tm-sup { position: absolute; top: 10px; left: 14px; right: 14px; }
[data-layout="dividido"] .tm-cuerpo { width: 54%; }