:root{
  --papel:#F6F4FA; --blanco:#fff; --tinta:#20182B; --gris:#6E6478;
  --linea:#E7E2F0; --linea-fuerte:#D7D0E4;
  --fucsia:#D6246E; --fucsia-oscuro:#B01659; --agua:#0E9C9C; --sol:#F0B429;
  --tenue-fucsia:#FBEAF1;
  --sombra-sm:0 1px 2px rgba(36,27,46,.06);
  --sombra:0 1px 2px rgba(36,27,46,.05), 0 10px 30px -16px rgba(36,27,46,.22);
  --sombra-md:0 2px 6px rgba(36,27,46,.06), 0 18px 40px -20px rgba(36,27,46,.28);
  --sombra-lg:0 -2px 10px rgba(36,27,46,.05), 0 -12px 40px -24px rgba(36,27,46,.22);
  --r:12px; --r-sm:9px; --r-lg:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:16.5px; line-height:1.55;
}
h1,h2,h3,.display{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif; line-height:1.08; letter-spacing:-.02em; margin:0 0 .4em}
h1{font-size:clamp(2rem,5vw,3.1rem); font-weight:700}
h2{font-size:1.5rem; font-weight:600}
h3{font-size:1.1rem; font-weight:600}
p{margin:0 0 1em; max-width:62ch}
a{color:var(--fucsia)}
.envoltorio{max-width:1080px; margin:0 auto; padding:0 20px}
.angosto{max-width:620px}

/* barra */
.barra{background:var(--blanco); border-bottom:1px solid var(--linea)}
.barra .envoltorio{display:flex; align-items:center; gap:18px; height:62px}
.marca{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.32rem;
  letter-spacing:-.03em; color:var(--tinta); text-decoration:none}
.marca span{color:var(--fucsia)}
.barra nav{margin-left:auto; display:flex; gap:16px; align-items:center; font-size:.95rem}
.barra nav a{color:var(--gris); text-decoration:none}
.barra nav a:hover{color:var(--tinta)}
.barra nav a.boton{color:#fff; background:var(--fucsia); padding:8px 16px; border-radius:var(--r); font-weight:600}
/* Boton hamburguesa: oculto en escritorio, visible solo en mobile (media query). */
.menu-toggle{display:none; margin-left:auto; width:44px; height:44px; flex:0 0 auto;
  align-items:center; justify-content:center; background:var(--blanco);
  border:1px solid var(--linea-fuerte); border-radius:var(--r-sm); cursor:pointer}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  display:block; width:20px; height:2px; background:var(--tinta); border-radius:2px;
  transition:transform .15s ease, opacity .15s ease}
.menu-toggle span{position:relative}
.menu-toggle span::before, .menu-toggle span::after{content:''; position:absolute; left:0}
.menu-toggle span::before{top:-6px}
.menu-toggle span::after{top:6px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* botones */
.boton{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; cursor:pointer;
  background:var(--fucsia); color:#fff; font:inherit; font-weight:600; line-height:1.2;
  padding:11px 20px; border-radius:var(--r); text-decoration:none;
  box-shadow:0 1px 2px rgba(176,22,89,.25), 0 6px 16px -8px rgba(176,22,89,.5);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease}
.boton:hover{background:var(--fucsia-oscuro); transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(176,22,89,.28), 0 12px 24px -10px rgba(176,22,89,.55)}
.boton:active{transform:translateY(0)}
.boton.calmo{background:var(--blanco); color:var(--tinta); border-color:var(--linea-fuerte);
  box-shadow:var(--sombra-sm)}
.boton.calmo:hover{background:var(--papel); border-color:var(--gris); filter:none}
.boton.peligro{background:transparent; color:#B4243C; border-color:#F0CBD3; box-shadow:none}
.boton.peligro:hover{background:#FBE9EC; border-color:#E5A9B5; transform:none}
.boton.chico{padding:7px 13px; font-size:.9rem}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--agua); outline-offset:2px}

/* tarjetas y formularios */
.caja{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--sombra); margin-bottom:18px}
.campo{margin-bottom:16px}
.campo label{display:block; font-weight:600; font-size:.93rem; margin-bottom:5px}
.campo .ayuda{font-size:.85rem; color:var(--gris); margin:4px 0 0}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],
input[type=datetime-local],input[type=number],input[type=url],select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--linea-fuerte); border-radius:var(--r-sm);
  font:inherit; background:var(--blanco); color:var(--tinta);
  transition:border-color .12s ease, box-shadow .12s ease}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=tel]:focus,
input[type=date]:focus,input[type=datetime-local]:focus,input[type=number]:focus,input[type=url]:focus,
select:focus,textarea:focus{outline:none; border-color:var(--fucsia);
  box-shadow:0 0 0 3px var(--tenue-fucsia)}
input::placeholder,textarea::placeholder{color:#A79FB2}
textarea{min-height:96px; resize:vertical}
.prefijo-input{display:flex; align-items:center; border:1px solid var(--linea-fuerte);
  border-radius:var(--r-sm); overflow:hidden; background:var(--blanco);
  transition:border-color .12s ease, box-shadow .12s ease}
.prefijo-input:focus-within{border-color:var(--fucsia); box-shadow:0 0 0 3px var(--tenue-fucsia)}
.prefijo-input span{padding:0 4px 0 12px; color:var(--gris); font-size:.92rem; white-space:nowrap}
.prefijo-input input{border:0; box-shadow:none !important; border-radius:0; flex:1}
.prefijo-input input:focus{box-shadow:none}
input[type=color]{width:52px; height:38px; padding:2px; border:1px solid var(--linea); border-radius:8px; background:#fff}
.fila{display:flex; gap:14px; flex-wrap:wrap}
.fila>*{flex:1 1 200px}
.check{display:flex; gap:9px; align-items:flex-start; margin-bottom:9px; font-size:.95rem}
.check input{margin-top:4px}

/* pestanias */
/* Nav unica de la gestion del evento: SOLO scroll horizontal en mobile para que
   las secciones (incluida Fotos) sean comodas con el pulgar. overflow-y:hidden es
   clave: si se deja en visible, el spec fuerza overflow-y a auto cuando overflow-x
   es auto, y aparecia un scroll vertical raro. No es sticky. */
.pestanias{display:flex; gap:2px; border-bottom:1px solid var(--linea); margin-bottom:22px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
.pestanias::-webkit-scrollbar{display:none}
.pestanias{scrollbar-width:none}
.pestanias a{flex:0 0 auto; padding:13px 16px; min-height:44px; display:inline-flex; align-items:center;
  text-decoration:none; color:var(--gris); font-weight:600; font-size:.95rem; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px; scroll-snap-align:start}
.pestanias a.activa{color:var(--tinta); border-bottom-color:var(--fucsia)}
.pestanias a:hover{color:var(--tinta)}

/* muro de fotos: QR y grilla de moderacion */
.qr-muro{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start}
.qr-muro img{border:1px solid var(--linea); border-radius:var(--r); background:#fff; flex:0 0 auto}
.qr-muro-info{flex:1; min-width:220px}
.qr-muro-info p{margin:0 0 10px}
.qr-muro-acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.grilla-fotos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.foto-mod{margin:0; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden}
.foto-mod img{width:100%; aspect-ratio:1; object-fit:cover; display:block}
.foto-mod.oculta img{opacity:.4; filter:grayscale(1)}
.foto-mod figcaption{padding:6px 10px 0; font-size:.82rem; color:var(--gris)}
.foto-acciones{display:flex; gap:6px; padding:8px 10px}

/* datos */
.tabla{width:100%; border-collapse:collapse; font-size:.93rem}
.tabla th{text-align:left; font-weight:600; color:var(--gris); padding:8px 10px; border-bottom:1px solid var(--linea)}
.tabla td{padding:9px 10px; border-bottom:1px solid var(--linea); vertical-align:top}
.numeros{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:12px; margin-bottom:20px}
.numero{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:14px 16px}
.numero b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:2.1rem; line-height:1; font-weight:700}
.numero span{font-size:.85rem; color:var(--gris)}
.pildora{display:inline-block; background:#F2EDF7; border-radius:999px; padding:2px 10px; font-size:.85rem}
.pildora.si{background:#E2F4EC; color:#146B4C}
.pildora.no{background:#FBE9EC; color:#96223A}
.aviso{background:#FFF6E0; border:1px solid #F2DFAE; border-radius:var(--r); padding:12px 15px; margin-bottom:18px; font-size:.93rem}
.aviso.ok{background:#E7F6EF; border-color:#BFE4D2}
.codigo{font-family:ui-monospace,monospace; font-size:.85rem; background:#F2EDF7; padding:2px 6px; border-radius:5px; word-break:break-all}
.marca-envio{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap}
.enlace-chico{background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:.82rem;
  color:var(--gris); text-decoration:underline}
.enlace-chico:hover{color:var(--tinta)}
.vacio{text-align:center; padding:46px 20px; color:var(--gris)}
/* Tablas responsive (opt-in con .cards): en mobile cada fila se vuelve una
   tarjeta apilada. El encabezado de cada celda sale del atributo data-label.
   Es opt-in para no afectar otras tablas del panel que no estan etiquetadas. */
@media(max-width:640px){
  .tabla.cards{font-size:.95rem}
  .tabla.cards thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .tabla.cards, .tabla.cards tbody, .tabla.cards tr, .tabla.cards td{display:block; width:100%}
  .tabla.cards tr{border:1px solid var(--linea); border-radius:var(--r);
    background:var(--blanco); margin-bottom:12px; padding:2px 0}
  .tabla.cards td{display:flex; justify-content:space-between; align-items:flex-start;
    gap:12px; text-align:right; padding:9px 14px; border-bottom:1px solid var(--linea)}
  .tabla.cards tr td:last-child{border-bottom:0}
  .tabla.cards td[data-label]::before{content:attr(data-label); text-align:left;
    color:var(--gris); font-size:.82rem; font-weight:600; flex:0 0 auto; white-space:nowrap}
  .tabla.cards td .codigo{min-width:0}
  .tabla.cards td.celda-nombre{display:block; text-align:left; padding-top:12px}
  .tabla.cards td.celda-acciones{flex-wrap:wrap; justify-content:flex-start; white-space:normal}
  .tabla.cards td.celda-acciones .boton{flex:1 1 auto; text-align:center}
  .tabla.cards td.celda-acciones form{display:flex; flex:1 1 auto}
  .tabla.cards td.celda-acciones form .boton{width:100%}
}

/* temas: cada card es un mini-mockup con la paleta y la tipografia del tema */
.temas{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px}
.tema{position:relative; display:block; border:1px solid var(--linea); border-radius:14px; overflow:hidden;
  background:var(--blanco); text-align:left; cursor:pointer; padding:0; font:inherit; width:100%;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.tema:hover{transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(36,27,46,.35)}
.tema-preview{display:block; position:relative; height:96px; padding:14px 14px 0;
  background:var(--c-fondo); overflow:hidden}
.tema-preview .tp-titulo{font-family:var(--c-fuente),serif; color:var(--c-txt); font-size:1.5rem;
  font-weight:700; line-height:1}
.tema-preview .tp-chip{position:absolute; right:12px; top:12px; background:var(--c-ac); color:var(--c-acT);
  border-radius:var(--c-r); padding:5px 10px; font-size:.72rem; font-weight:600; max-width:60%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tema-preview .tp-swatches{position:absolute; left:14px; bottom:12px; display:flex; gap:5px}
.tema-preview .tp-swatches i{width:16px; height:16px; border-radius:5px; border:1px solid rgba(0,0,0,.12)}
.tema-info{display:block; padding:10px 12px 12px; font-size:.82rem; color:var(--gris)}
.tema-info b{display:block; color:var(--tinta); font-size:.96rem; margin-bottom:2px}
.tema.activa,.tema[aria-pressed=true]{border-color:var(--fucsia); outline:2px solid var(--fucsia); outline-offset:-2px}
.tema.activa::after{content:'✓'; position:absolute; top:8px; left:10px; z-index:2;
  background:var(--fucsia); color:#fff; width:22px; height:22px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700}
.tema.bloqueado{cursor:not-allowed}
.tema.bloqueado .tema-preview{filter:saturate(.7)}
.tema.bloqueado .tema-preview::before{content:''; position:absolute; inset:0; background:rgba(255,255,255,.28)}
.candado{display:inline-block; margin-top:6px; font-size:.74rem; font-weight:700; color:var(--fucsia)}

/* premium */
.premium-chip{display:inline-block; background:linear-gradient(90deg,#7a3cf0,#d6246e); color:#fff;
  border-radius:999px; padding:3px 11px; font-size:.78rem; font-weight:700; letter-spacing:.01em}
.premium-chip.mini{padding:2px 8px; font-size:.68rem; margin-top:6px}
.premium-aviso{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(122,60,240,.08),rgba(214,36,110,.08));
  border:1px solid #E7D9F4; border-radius:12px; padding:12px 14px; font-size:.9rem; color:var(--tinta)}
.aviso.peligro{background:#FBE9EC; border-color:#F2C0CB; color:#96223A}

/* landing de marca */
.portada{padding:72px 0 56px}
.portada p.lede{font-size:1.2rem; color:var(--gris); max-width:48ch}
.muestrario{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:38px 0 0}
.sobre{border-radius:16px; padding:26px 20px; min-height:220px; display:flex; flex-direction:column;
  justify-content:flex-end; box-shadow:var(--sombra); font-family:'Bricolage Grotesque',sans-serif}
.sobre em{font-style:normal; font-size:.78rem; opacity:.72; font-family:'Hanken Grotesk',sans-serif}
.sobre strong{font-size:1.6rem; font-weight:700; line-height:1.05; display:block; margin:6px 0 3px}
@media(max-width:640px){
  .barra .envoltorio{position:relative}
  .menu-toggle{display:inline-flex}
  /* La nav pasa a panel desplegable debajo de la barra, a lo ancho. */
  .barra nav{position:absolute; top:100%; left:0; right:0; margin-left:0; display:none;
    flex-direction:column; align-items:stretch; gap:2px; padding:8px;
    background:var(--blanco); border-bottom:1px solid var(--linea); box-shadow:var(--sombra-md); z-index:40}
  .barra nav.abierto{display:flex}
  .barra nav a{padding:12px 14px; border-radius:var(--r-sm); min-height:44px; display:flex; align-items:center}
  .barra nav a:hover{background:var(--papel)}
  .barra nav a.boton{justify-content:center; margin-top:4px}
  .barra nav form{display:block !important; margin-top:4px}
  .barra nav form .boton{width:100%}
}

/* ============ componentes nuevos (rediseno crear/editar) ============ */

/* encabezado de seccion con accion a la derecha */
.cabecera-seccion{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:22px}

/* toast de exito (feedback de guardado) */
.toast{display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--r);
  font-size:.95rem; font-weight:500; margin-bottom:18px; animation:toast-in .28s ease both}
.toast svg{width:20px; height:20px; flex:0 0 auto}
.toast.ok{background:#E7F6EF; border:1px solid #BFE4D2; color:#146B4C}
@keyframes toast-in{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* control segmentado (radios como opciones) */
.segmento{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.seg-op{position:relative; display:block; cursor:pointer}
.seg-op input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg-op>span{display:block; border:1.5px solid var(--linea-fuerte); border-radius:var(--r);
  padding:13px 15px; height:100%; transition:border-color .12s ease, background .12s ease, box-shadow .12s ease}
.seg-op>span b{display:block; font-size:.98rem}
.seg-op>span small{display:block; color:var(--gris); font-size:.85rem; margin-top:3px; line-height:1.4}
.seg-op:hover>span{border-color:var(--gris)}
.seg-op input:checked+span{border-color:var(--fucsia); background:var(--tenue-fucsia);
  box-shadow:0 0 0 1px var(--fucsia) inset}
.seg-op input:focus-visible+span{outline:3px solid var(--agua); outline-offset:2px}

/* opciones de cobro (radios en columna con descripcion) */
.opciones-cobro{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.opcion-cobro{position:relative; display:flex; align-items:flex-start; gap:10px;
  border:1.5px solid var(--linea-fuerte); border-radius:var(--r); padding:13px 15px; cursor:pointer;
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease}
.opcion-cobro:hover{border-color:var(--gris)}
.opcion-cobro input{margin-top:3px; accent-color:var(--fucsia)}
.opcion-cobro:has(input:checked){border-color:var(--fucsia); background:var(--tenue-fucsia);
  box-shadow:0 0 0 1px var(--fucsia) inset}
.oc-cuerpo{display:block}
.oc-cuerpo b{display:block; font-size:.96rem}
.oc-cuerpo span{display:block; color:var(--gris); font-size:.84rem; margin-top:2px; line-height:1.4}

/* barra de acciones flotante (Guardar / Publicar) */
.barra-acciones{position:sticky; bottom:16px; z-index:5; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap; margin:26px 0 6px;
  padding:13px 16px; border-radius:var(--r);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border:1px solid var(--linea-fuerte); box-shadow:var(--sombra-md)}
.ba-estado{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.92rem}
.ba-estado .pildora.si{color:#146B4C}
.ba-nota{color:var(--gris)}
.ba-botones{display:flex; gap:10px; flex-wrap:wrap; margin-left:auto}

/* zona de borrado */
.zona-peligro{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:30px; padding:16px 18px; border:1px solid #F0CBD3;
  border-radius:var(--r); background:#FDF4F6}
.zona-peligro b{color:#96223A}

/* crear evento */
.crear-evento[hidden]{display:none}
.crear-evento{border-color:var(--linea-fuerte); box-shadow:var(--sombra-md)}

/* grilla de eventos */
.grilla-eventos{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px}
.tarjeta-evento{display:flex; flex-direction:column; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra);
  transition:transform .14s ease, box-shadow .14s ease}
.tarjeta-evento:hover{transform:translateY(-3px); box-shadow:var(--sombra-md)}
.te-portada{position:relative; height:120px; background:linear-gradient(135deg,#3a2352,#7a3cf0 60%,var(--fucsia));
  background-size:cover; background-position:center}
.te-chips{position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap}
.te-chips .pildora{background:rgba(255,255,255,.92); backdrop-filter:blur(4px); font-weight:600}
.te-cuerpo{padding:16px 18px 6px; flex:1}
.te-cuerpo h3{margin:0 0 4px}
.te-fecha{margin:0; color:var(--gris); font-size:.9rem}
.te-metricas{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; font-size:.86rem; color:var(--gris)}
.te-metricas b{font-family:'Bricolage Grotesque',sans-serif; font-size:1.2rem; color:var(--tinta)}
.te-acciones{display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px 18px; border-top:1px solid var(--linea); margin-top:12px}
.te-acciones .boton{flex:1 1 auto}

/* editor de perfil */
.perfil-editor{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-bottom:6px}
.pe-avatar{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:10px}
.pe-datos{flex:1 1 300px; min-width:0}
.avatar-grande{width:104px; height:104px; border-radius:24px; background:#eee center/cover no-repeat;
  display:grid; place-items:center; box-shadow:var(--sombra); border:1px solid var(--linea)}
.avatar-grande[data-inicial]{background:linear-gradient(135deg,#7a3cf0,var(--fucsia)); color:#fff;
  font-family:'Bricolage Grotesque',sans-serif; font-size:2.4rem; font-weight:700}
.avatar-grande[data-inicial]::after{content:attr(data-inicial)}
.pe-avatar label{cursor:pointer}

@media(max-width:520px){
  .segmento{grid-template-columns:1fr}
  .barra-acciones{flex-direction:column; align-items:stretch}
  .ba-botones{margin-left:0}
  .ba-botones .boton{flex:1}
  .perfil-editor{flex-direction:column; align-items:center; text-align:center}
  .pe-datos{text-align:left; width:100%}
}