/* =================================================================
   Base + panel de administración
   ================================================================= */
:root {
    --ink: #23253b;
    --muted: #6c7089;
    --bg: #f5f6fb;
    --card: #ffffff;
    --line: #e7e9f2;
    --navy: #1c2040;
    --navy-2: #262b52;
    --pri: #2fa6df;
    --mint: #34c38a;
    --lila: #9a6cf0;
    --cielo: #3b9cf0;
    --durazno: #ff9a3d;
    --rosa: #ff5c8d;
    --amarillo: #ffc933;
    --brand: #7c5cff;
    --radio: 16px;
    --sombra: 0 1px 2px rgba(28, 32, 64, .04), 0 6px 20px rgba(28, 32, 64, .06);
    --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Fredoka', 'Nunito', system-ui, sans-serif;
}

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
a { color: var(--pri); }
.text-muted { color: var(--muted) !important; }
.small-caps { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Botones */
.btn { border-radius: 12px; font-weight: 700; padding: .55rem 1rem; }
.btn-sm { border-radius: 10px; padding: .35rem .7rem; }
.btn-lg { border-radius: 14px; padding: .8rem 1.4rem; }
.btn-pri { background: var(--pri); border-color: var(--pri); color: #fff; }
.btn-pri:hover, .btn-pri:focus { background: #1d93cc; border-color: #1d93cc; color: #fff; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { filter: brightness(.93); color: #fff; }
.btn-wa { background: #25d366; border-color: #25d366; color: #fff; }
.btn-wa:hover, .btn-wa:focus { background: #1eb956; border-color: #1eb956; color: #fff; }
.btn-soft { background: #eef1f8; border-color: #eef1f8; color: var(--ink); }
.btn-soft:hover { background: #e2e6f2; color: var(--ink); }
.btn-ghost { background: transparent; border: 1px dashed #c9cde0; color: var(--muted); }
.btn-ghost:hover { border-color: var(--pri); color: var(--pri); }

/* ---------- Formularios */
.form-control, .form-select { border-radius: 12px; border-color: #dfe2ee; padding: .6rem .85rem; }
.form-select { padding-right: 2.4rem; }
.form-control:focus, .form-select:focus { border-color: var(--pri); box-shadow: 0 0 0 .2rem rgba(47, 166, 223, .15); }
.form-label { font-weight: 700; font-size: .88rem; margin-bottom: .3rem; }
.form-text { color: var(--muted); }
.form-check-input:checked { background-color: var(--pri); border-color: var(--pri); }
.input-group-text { border-radius: 12px; background: #f3f5fa; border-color: #dfe2ee; }

/* ---------- Tarjetas */
.tarjeta { background: var(--card); border-radius: var(--radio); box-shadow: var(--sombra); border: 1px solid var(--line); }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.tarjeta-cab h2, .tarjeta-cab h3 { font-size: 1.05rem; margin: 0; }
.tarjeta-cuerpo { padding: 1.25rem; }

/* ---------- Estados */
.estado { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-pendiente { background: #fff3db; color: #b8741a; }
.estado-confirmada { background: #e0f7ec; color: #1b8a55; }
.estado-realizada { background: #e5efff; color: #2e67cf; }
.estado-cancelada { background: #f0f0f4; color: #8b8ea3; }

.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: #eef1f8; color: var(--muted); }
.chip-web { background: #fde9f1; color: #d13d72; }

/* ---------- Layout del panel */
.panel-body { min-height: 100vh; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 1040;
    background: var(--navy); color: #c9cdea; display: flex; flex-direction: column;
    padding: 1.1rem .85rem; overflow-y: auto;
}
.sb-marca { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1rem; color: #fff; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.sb-marca:hover { color: #fff; }
.logo-marca { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.15rem;
    background: #1a1d29; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.logo-marca img { width: 88%; height: 88%; }
.sb-salon { display: flex; align-items: center; gap: .65rem; background: var(--navy-2); border-radius: 14px; padding: .65rem .75rem; margin-bottom: 1rem; }
.sb-salon img, .sb-salon .ini { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: #fff; flex: none; }
.sb-salon .ini { display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; }
.sb-salon b { display: block; color: #fff; font-size: .92rem; line-height: 1.2; }
.sb-salon a { font-size: .78rem; color: #9fa6d6; text-decoration: none; }
.sb-salon a:hover { color: #fff; }
.sb-titulo { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: #6f76a8; padding: .9rem .6rem .35rem; }
.sb-link { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 12px; color: #c9cdea; text-decoration: none; font-weight: 700; font-size: .93rem; margin-bottom: 2px; }
.sb-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sb-link.activo { background: #fff; color: var(--navy); }
.sb-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; flex: none; }
.sb-link .badge { margin-left: auto; background: var(--rosa); border-radius: 999px; }
.sb-pie { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.sb-pie .ini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-2); color: #fff; font-weight: 800; font-size: .8rem; }
.sb-pie a { color: #9fa6d6; margin-left: auto; font-size: 1.15rem; }
.sb-pie a:hover { color: #fff; }

.ico-mint { background: rgba(52, 195, 138, .18); color: var(--mint); }
.ico-lila { background: rgba(154, 108, 240, .2); color: #b896ff; }
.ico-cielo { background: rgba(59, 156, 240, .2); color: #6cb8ff; }
.ico-durazno { background: rgba(255, 154, 61, .2); color: var(--durazno); }
.ico-rosa { background: rgba(255, 92, 141, .2); color: #ff86aa; }
.ico-gris { background: rgba(255, 255, 255, .08); color: #c9cdea; }
.sb-link.activo .ico-gris { background: #eef1f8; color: var(--navy); }

.main { margin-left: 256px; padding: 1.25rem 1.75rem 3rem; min-height: 100vh; }
.topbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.topbar h1 { font-size: 1.55rem; margin: 0; }
.topbar .sub { color: var(--muted); font-size: .9rem; }
.topbar .acciones { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-menu { display: none; border: 0; background: var(--card); width: 42px; height: 42px; border-radius: 12px; box-shadow: var(--sombra); font-size: 1.3rem; }
.sb-fondo { display: none; }
.aviso-imp { background: #fff3db; border: 1px solid #ffe0a3; color: #8a5a10; border-radius: 12px; padding: .55rem .9rem; font-weight: 700; font-size: .9rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
    .sidebar.abierto { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .35); }
    .sb-fondo.abierto { display: block; position: fixed; inset: 0; background: rgba(20, 22, 45, .45); z-index: 1035; }
    .main { margin-left: 0; padding: 1rem 1rem 3rem; }
    .btn-menu { display: inline-grid; place-items: center; }
    .topbar h1 { font-size: 1.3rem; }
}

/* ---------- Alertas flash */
.flash { border-radius: 12px; border: 0; font-weight: 700; display: flex; gap: .6rem; align-items: center; }
.flash-ok { background: #e0f7ec; color: #17784a; }
.flash-error { background: #ffe8ee; color: #c02a56; }

/* ---------- Estadísticas */
.stat { background: var(--card); border-radius: var(--radio); border: 1px solid var(--line); box-shadow: var(--sombra); padding: 1rem 1.1rem; display: flex; gap: .9rem; align-items: center; height: 100%; text-decoration: none; color: inherit; }
.stat .sb-ico { width: 46px; height: 46px; border-radius: 14px; font-size: 1.35rem; }
.stat .num { font-family: var(--display); font-size: 1.55rem; font-weight: 600; line-height: 1.1; }
.stat .lbl { font-size: .82rem; color: var(--muted); font-weight: 700; }
.stat .ico-mint { color: #1fa56f; } .stat .ico-lila { color: #7c4fe0; } .stat .ico-cielo { color: #2484d6; } .stat .ico-durazno { color: #e77e17; } .stat .ico-rosa { color: #e23a6d; }

@media (max-width: 575.98px) {
    .stat { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem; }
    .stat .sb-ico { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 12px; }
    .stat .num { font-size: 1.25rem; white-space: nowrap; }
    .topbar .acciones { margin-left: 0; width: 100%; }
}

/* ---------- Lista de eventos */
.evento { display: flex; gap: .9rem; align-items: center; padding: .8rem 1.25rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.evento:last-child { border-bottom: 0; }
.evento:hover { background: #fafbfe; }
.fecha-bloque { width: 54px; flex: none; text-align: center; border-radius: 12px; background: #f1f3fa; padding: .35rem 0; line-height: 1.05; }
.fecha-bloque .d { font-family: var(--display); font-weight: 600; font-size: 1.35rem; }
.fecha-bloque .m { font-size: .68rem; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.fecha-bloque.hoy { background: var(--pri); color: #fff; }
.fecha-bloque.hoy .m { color: rgba(255, 255, 255, .85); }
.evento .info { flex: 1; min-width: 0; }
.evento .t { font-weight: 800; }
.evento .s { font-size: .84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vacio { text-align: center; padding: 2.2rem 1rem; color: var(--muted); }
.vacio .emoji { font-size: 2.4rem; display: block; margin-bottom: .4rem; }

/* ---------- Calendario del panel */
.cal-nav { display: flex; align-items: center; gap: .5rem; }
.cal-nav h2 { font-size: 1.25rem; margin: 0 .5rem; min-width: 170px; text-align: center; text-transform: capitalize; }
.cal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.cal th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; padding: .6rem; text-align: left; }
.cal td { vertical-align: top; height: 118px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding: .35rem; }
.cal tr td:last-child { border-right: 1px solid var(--line); }
.cal tr:last-child td { border-bottom: 1px solid var(--line); }
.cal td.fuera { background: #fafbfd; }
.cal td.hoy { background: #f0f9ff; }
.cal td.bloq { background: repeating-linear-gradient(-45deg, #fafafc, #fafafc 8px, #f1f2f7 8px, #f1f2f7 16px); }
.cal .n { font-weight: 800; font-size: .85rem; display: flex; justify-content: space-between; align-items: center; }
.cal td.hoy .n span { background: var(--pri); color: #fff; border-radius: 999px; padding: 0 .45rem; }
.cal .mas { opacity: 0; font-size: .95rem; color: var(--muted); text-decoration: none; line-height: 1; }
.cal td:hover .mas { opacity: 1; }
.ev-chip { display: block; font-size: .74rem; font-weight: 700; border-radius: 8px; padding: .2rem .4rem; margin-top: .25rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; }
.ev-chip.estado-pendiente { border-color: #f0a73a; }
.ev-chip.estado-confirmada { border-color: #2fbf7d; }
.ev-chip.estado-realizada { border-color: #4f86e6; }
.ev-chip.estado-cancelada { border-color: #c4c6d3; text-decoration: line-through; }
.ev-chip::before { display: none; }
.libre-chip { display: block; font-size: .7rem; font-weight: 700; color: #1b8a55; text-decoration: none; padding: .1rem .4rem; border-radius: 6px; margin-top: .2rem; border: 1px dashed #9edcbf; }
.libre-chip:hover { background: #e0f7ec; }
.bloq-txt { font-size: .72rem; color: var(--muted); font-weight: 700; margin-top: .3rem; }
.leyenda { display: flex; gap: .5rem; flex-wrap: wrap; }
.cal-lista { display: none; }
@media (max-width: 767.98px) {
    .cal-tabla { display: none; }
    .cal-lista { display: block; }
}

/* Mini calendario del inicio */
.mini-cal { width: 100%; text-align: center; font-size: .85rem; }
.mini-cal th { font-size: .7rem; color: var(--muted); font-weight: 800; padding-bottom: .4rem; }
.mini-cal td { padding: 2px; }
.mini-cal a, .mini-cal span { display: grid; place-items: center; height: 34px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 700; position: relative; }
.mini-cal a:hover { background: #f1f3fa; }
.mini-cal .hoy { background: var(--pri); color: #fff !important; }
.mini-cal .con { background: #f1ecff; color: #6a3fd8; }
.mini-cal .puntos { position: absolute; bottom: 4px; display: flex; gap: 2px; height: auto; }
.mini-cal .puntos i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* ---------- Tablas */
.tabla { width: 100%; }
.tabla th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; padding: .75rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabla td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: #fafbfe; }
.fila-nueva { box-shadow: inset 4px 0 0 var(--rosa); }

/* ---------- Ficha de reserva */
.ficha-cab { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.avatar-cumple { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 2rem; background: linear-gradient(135deg, #ffe7f0, #efe6ff); flex: none; }
.dato { display: flex; gap: .75rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.dato:last-child { border-bottom: 0; }
.dato i { color: var(--muted); font-size: 1.05rem; width: 20px; text-align: center; }
.dato .k { font-size: .78rem; color: var(--muted); font-weight: 700; }
.dato .v { font-weight: 700; }
.saldo-box { border-radius: 14px; background: #f6f7fb; padding: .9rem 1rem; }
.saldo-box .num { font-family: var(--display); font-size: 1.4rem; font-weight: 600; }
.progreso { height: 8px; border-radius: 999px; background: #e9ecf5; overflow: hidden; }
.progreso div { height: 100%; background: linear-gradient(90deg, var(--mint), #23b37a); border-radius: 999px; }
.wa-plantillas .btn { text-align: left; }
.modulo { border-radius: 16px; padding: 1.1rem; position: relative; overflow: hidden; }
.modulo-inv { background: linear-gradient(135deg, #e8f4ff, #f3ecff); }
.modulo-gal { background: linear-gradient(135deg, #fff1e2, #ffe9f1); }
.modulo .emoji-fondo { position: absolute; right: -10px; bottom: -22px; font-size: 5rem; opacity: .14; pointer-events: none; }
.modulo > :not(.emoji-fondo) { position: relative; z-index: 1; }
.clave { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-weight: 800; letter-spacing: .12em; background: #fff; border-radius: 8px; padding: .1rem .5rem; }

/* ---------- Plantillas de invitación (selector) */
.plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; }
.plantilla-op input { position: absolute; opacity: 0; pointer-events: none; }
.plantilla-op label { display: block; border-radius: 14px; border: 2px solid transparent; padding: .7rem .4rem; text-align: center; cursor: pointer; font-weight: 700; font-size: .82rem; transition: transform .15s; }
.plantilla-op label:hover { transform: translateY(-2px); }
.plantilla-op label .e { font-size: 2rem; display: block; line-height: 1.2; }
.plantilla-op input:checked + label { border-color: var(--ink); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.preview-tel { width: 100%; max-width: 330px; margin: 0 auto; border-radius: 34px; border: 10px solid #1c1e2e; overflow: hidden; height: 640px; background: #1c1e2e; box-shadow: 0 20px 50px rgba(28, 32, 64, .25); }
.preview-tel iframe { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 24px; }

.fotos-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; }
.fotos-mini div { position: relative; }
.fotos-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.fotos-mini button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8rem; line-height: 1; }

/* ---------- Fotos */
.grilla-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .85rem; }
.foto-item { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.foto-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.foto-item .pie { padding: .5rem; display: flex; gap: .35rem; align-items: center; }
.zona-subida { border: 2px dashed #cdd2e6; border-radius: 16px; padding: 1.6rem; text-align: center; background: #fbfcff; cursor: pointer; transition: .15s; }
.zona-subida:hover, .zona-subida.arrastrando { border-color: var(--pri); background: #f0f9ff; }

/* ---------- Paquetes (panel) */
.paquete-card { height: 100%; display: flex; flex-direction: column; }
.paquete-card .precio { font-family: var(--display); font-size: 1.5rem; font-weight: 600; }
.paquete-card ul { padding-left: 1.1rem; margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }
.inactivo { opacity: .55; }

.extra-fila { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.extra-fila label { flex: 1; font-size: .9rem; font-weight: 700; cursor: pointer; }
.extra-fila .extra-cant { width: 70px; }
.estrellas { color: #f5a623; letter-spacing: .05em; }

/* Selector de juegos (contenido de la web) */
.juegos-sel { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.juegos-sel input { position: absolute; opacity: 0; pointer-events: none; }
.juegos-sel label { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 12px; border: 2px solid var(--line); cursor: pointer; font-weight: 700; font-size: .88rem; transition: .15s; }
.juegos-sel label span { font-size: 1.3rem; }
.juegos-sel input:checked + label { border-color: var(--pri); background: #eef8fe; }

/* ---------- Días de la semana (checkbox) */
.dias-sel { display: flex; gap: .3rem; flex-wrap: wrap; }
.dias-sel input { display: none; }
.dias-sel label { width: 44px; text-align: center; border-radius: 10px; padding: .4rem 0; font-weight: 800; font-size: .8rem; background: #eef1f8; color: var(--muted); cursor: pointer; }
.dias-sel input:checked + label { background: var(--pri); color: #fff; }

/* ---------- Login / páginas simples */
.simple-body { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background: radial-gradient(circle at 10% 10%, #e3f7ff 0, transparent 40%), radial-gradient(circle at 90% 20%, #f4e9ff 0, transparent 40%), radial-gradient(circle at 50% 100%, #ffeaf2 0, transparent 50%), #f8f9fd; }
.simple-card { width: 100%; max-width: 420px; background: #fff; border-radius: 24px; box-shadow: 0 20px 60px rgba(28, 32, 64, .12); padding: 2rem; }
.simple-card .logo-marca { width: 52px; height: 52px; border-radius: 16px; font-size: 1.6rem; margin: 0 auto .8rem; }

.copiar-ok { animation: pulso .6s; }
@keyframes pulso { 50% { transform: scale(1.06); } }