/* DAVID BARBER VIP CLUB — ESTILOS
   Orden: variables generales, componentes, diseño adaptable y estilos del panel.
   Editar aquí la presentación;
     no modificar lógica de negocio. */

:root {
    color-scheme:dark;
    --bg:#0d0d0f;
    --panel:#19191c;
    --panel2:#202023;
    --line:#36332c;
    --gold:#e1bb70;
    --gold2:#a77d3e;
    --text:#f6f2e9;
    --muted:#aba7a0;
    --danger:#e4a38f
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:15px/1.55 system-ui,-apple-system,Segoe UI,sans-serif
}

button,input {
    font:inherit
}

button {
    cursor:pointer
}

button:disabled {
    cursor:not-allowed;
    opacity:.38
}

a {
    color:inherit;
    text-decoration:none
}

.ambient {
    position:fixed;
    inset:0;
    pointer-events:none;
    background:radial-gradient(ellipse at 92% 0%,#6e4e231e,transparent 40%),radial-gradient(ellipse at 0% 60%,#57402110,transparent 40%)
}

.shell {
    position:relative;
    max-width:1160px;
    margin:auto;
    padding:0 24px
}

.header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 0;
    border-bottom:1px solid var(--line);
    gap:15px
}

.brand {
    display:flex;
    align-items:center;
    gap:13px
}

.brand-icon {
    width:53px;
    height:53px;
    object-fit:contain
}

.brand strong {
    display:block;
    font-family:Georgia,serif;
    font-size:23px;
    line-height:1.1;
    letter-spacing:2px
}

.brand em {
    font-style:normal;
    color:var(--gold)
}

.brand-sub {
    font-size:10px;
    letter-spacing:5px;
    color:var(--gold)
}

.eyebrow,.section-label {
    font-size:10px;
    letter-spacing:2.2px;
    font-weight:800;
    color:var(--gold);
    text-transform:uppercase
}

.brand .eyebrow {
    font-size:8px
}

.edition {
    border:1px solid #6b5633;
    color:var(--gold);
    font-size:10px;
    letter-spacing:1px;
    border-radius:30px;
    padding:8px 12px
}

.hero {
    position:relative;
    overflow:hidden;
    min-height:280px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--line)
}

.hero-content {
    z-index:1;
    padding:45px 0;
    max-width:690px
}

.hero h1 {
    font-family:Georgia,serif;
    font-size:clamp(36px,5vw,64px);
    font-weight:500;
    line-height:1.08;
    margin:14px 0
}

.hero h1 span {
    color:var(--gold)
}

.hero p {
    max-width:490px;
    color:var(--muted);
    font-size:16px
}

.hero p b {
    color:var(--text)
}

.hero-tags {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px
}

.hero-tags span {
    border:1px solid #4c4130;
    border-radius:40px;
    padding:6px 12px;
    color:var(--gold);
    font-size:12px
}

.hero-web {
    position:absolute;
    width:290px;
    right:-40px;
    top:-40px;
    opacity:.32;
    transform:rotate(7deg)
}

.navigation {
    display:flex;
    gap:12px;
    padding:23px 0
}

.nav-btn {
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    border-radius:12px;
    padding:13px 20px;
    font-weight:700;
    transition:.2s
}

.nav-btn.active,.nav-btn:hover {
    background:linear-gradient(120deg,#e8c784,#b98944);
    color:#17120a;
    border-color:transparent
}

.layout {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:20px;
    padding-bottom:25px
}

.stack {
    display:flex;
    flex-direction:column;
    gap:20px
}

.panel {
    background:linear-gradient(160deg,#1b1b1e,#151517);
    border:1px solid var(--line);
    border-radius:18px;
    padding:25px;
    box-shadow:0 14px 45px #0003
}

.panel h2 {
    font:normal 27px/1.2 Georgia,serif;
    margin:8px 0 12px
}

.muted {
    color:var(--muted)
}

.tiny {
    font-size:12px
}

.fine {
    font-size:12px;
    color:#99938a
}

.hidden {
    display:none!important
}

label {
    display:block;
    margin:15px 0 7px;
    font-size:12px;
    font-weight:750;
    color:#d7c9b1
}

input {
    width:100%;
    background:#101013;
    border:1px solid #494137;
    border-radius:10px;
    padding:13px 14px;
    color:var(--text);
    outline:none
}

input:focus {
    border-color:var(--gold);
    box-shadow:0 0 0 3px #e1bb7024
}

.primary,.secondary {
    border-radius:10px;
    padding:12px 16px;
    font-weight:800;
    transition:transform .15s,filter .15s
}

.primary:hover:not(:disabled),.secondary:hover:not(:disabled) {
    transform:translateY(-2px);
    filter:brightness(1.1)
}

.primary {
    background:linear-gradient(110deg,#edcf91,#b98942);
    color:#17130d;
    border:0
}

.secondary {
    background:#242124;
    border:1px solid #80653d;
    color:var(--gold)
}

.full {
    width:100%;
    margin-top:15px
}

.compact {
    padding:8px 11px;
    font-size:12px
}

.feedback {
    min-height:1em;
    color:var(--gold);
    font-size:13px
}

.loyalty {
    position:relative;
    overflow:hidden;
    border-color:#80653d;
    animation:rise .35s ease
}

.loyalty:before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 100% 0%,#c9973a1a,transparent 45%);
    pointer-events:none
}

.card-top,.card-footer,.heading-row,.stamp-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px
}

.card-top h2 {
    margin:8px 0 3px
}

.vip-medal {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    flex:none;
    width:65px;
    height:65px;
    border:2px solid var(--gold);
    border-radius:50%;
    color:var(--gold);
    font-family:Georgia,serif;
    font-size:23px;
    line-height:1
}

.vip-medal small {
    font:8px system-ui;
    letter-spacing:2px
}

.card-id {
    font-size:11px;
    color:var(--gold);
    letter-spacing:2px;
    margin:12px 0 22px
}

.stamp-title {
    font-size:12px;
    letter-spacing:.4px
}

.stamp-title span {
    color:var(--gold);
    font-weight:700
}

.stamps {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    margin:20px 0
}

.stamp {
    aspect-ratio:1;
    border:1.5px solid #65615d;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8d8985;
    font:22px Georgia,serif;
    background:#111113;
    transition:all .25s
}

.stamp.on {
    border-color:var(--gold);
    box-shadow:inset 0 0 15px #b88b2b15,0 0 16px #d8ae6020;
    animation:pop .3s ease
}

.stamp img {
    width:72%;
    height:72%;
    filter:drop-shadow(0 0 5px #d9b66b45)
}

.progress {
    height:8px;
    border-radius:10px;
    background:#353536;
    overflow:hidden
}

.progress div {
    height:100%;
    width:0;
    background:linear-gradient(90deg,#a77b37,#f3d38e);
    transition:width .5s
}

.reward-banner {
    text-align:center;
    padding:17px 12px;
    margin-top:18px;
    border-radius:10px;
    background:linear-gradient(120deg,#3a2a18,#6b4b25,#352617);
    border:1px solid #cda35c;
    color:#f6db9c;
    font-weight:900;
    letter-spacing:.7px
}

.celebration {
    margin-top:15px;
    padding:18px;
    border:1px solid var(--gold);
    border-radius:12px;
    background:#b88b2920;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:7px;
    animation:rise .5s ease
}

.celebration-icon {
    font-size:32px;
    color:var(--gold);
    animation:glow 1.5s infinite alternate
}

.celebration strong {
    color:var(--gold)
}

.celebration span:last-child {
    font-size:13px
}

.card-footer {
    margin-top:18px
}

.history {
    margin-top:12px;
    max-height:430px;
    overflow:auto
}

.event {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid #393530
}

.event span {
    font-size:13px
}

.event time {
    font-size:11px;
    color:var(--muted);
    text-align:right;
    white-space:nowrap
}

.qr-panel {
    text-align:center
}

.qr-panel h2 {
    margin-top:9px
}

.qr-frame {
    background:#fff;
    border:9px solid #fff;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:186px;
    min-height:186px;
    margin:12px auto
}

.qr-content {
    color:#333;
    display:grid;
    place-items:center;
    min-width:166px;
    min-height:166px
}

.qr-content img,.qr-content canvas {
    max-width:166px
}

.qr-placeholder {
    font-size:12px;
    max-width:150px
}

.help-panel {
    display:flex;
    align-items:center;
    gap:22px
}

.help-spider {
    width:75px;
    height:75px;
    flex:none
}

.alert {
    border:1px solid #9a6b4b;
    background:#5a342b36;
    border-radius:12px;
    padding:14px 18px;
    color:#f1c3a8;
    margin-bottom:20px
}

.stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:20px
}

.stat {
    background:#1b1b1e;
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px
}

.stat span {
    display:block;
    color:var(--gold);
    font-size:10px;
    letter-spacing:1.4px;
    font-weight:800
}

.stat strong {
    display:block;
    font:40px Georgia,serif;
    margin:5px 0
}

.stat small {
    color:var(--muted)
}

.client-list {
    margin-top:15px;
    max-height:600px;
    overflow:auto
}

.client-row {
    padding:17px 0;
    border-bottom:1px solid #40392f
}

.client-info {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}

.client-info strong {
    display:block
}

.client-info small {
    color:var(--muted);
    font-size:11px;
    display:block
}

.client-actions {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-top:12px
}

.client-actions button {
    font-size:11px;
    padding:7px 10px
}

.client-row .ready {
    color:var(--gold);
    font-size:11px;
    font-weight:800
}

footer {
    padding:25px 0 35px;
    text-align:center;
    color:#827e77;
    font-size:11px;
    letter-spacing:1px;
    border-top:1px solid var(--line)
}

footer span {
    color:var(--gold)
}

.toast {
    position:fixed;
    right:18px;
    bottom:18px;
    background:#3c3020;
    color:#f9e7bf;
    border:1px solid var(--gold);
    padding:13px 20px;
    border-radius:10px;
    box-shadow:0 10px 30px #0008;
    opacity:0;
    transform:translateY(15px);
    pointer-events:none;
    transition:.2s;
    max-width:360px;
    z-index:20
}

.toast.show {
    opacity:1;
    transform:translateY(0)
}

@keyframes rise {
    from {
    opacity:0;
    transform:translateY(10px)
}

to {
    opacity:1;
    transform:translateY(0)
}

}

@keyframes pop {
    from {
    transform:scale(.75)
}

to {
    transform:scale(1)
}

}

@keyframes glow {
    from {
    filter:brightness(.9)
}

to {
    filter:brightness(1.5)
}

}

@media(max-width:760px) {
    .shell {
    padding:0 14px
}

.header {
    padding:16px 0
}

.brand strong {
    font-size:17px
}

.brand-icon {
    width:40px;
    height:40px
}

.edition {
    font-size:8px;
    padding:6px
}

.hero {
    min-height:260px
}

.hero-content {
    padding:30px 0
}

.hero-web {
    width:190px;
    right:-65px
}

.layout {
    grid-template-columns:1fr
}

.stats {
    grid-template-columns:repeat(2,1fr)
}

.panel {
    padding:20px
}

.navigation {
    display:grid;
    grid-template-columns:1fr 1fr
}

.nav-btn {
    padding:12px 7px;
    font-size:12px
}

.stamps {
    gap:8px
}

.event {
    flex-wrap:wrap
}

.event time {
    white-space:normal
}

}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
    animation:none!important;
    transition:none!important
}

}



/* V4.1 */
.consent {
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-weight:400;
    line-height:1.45
}

.consent input {
    width:18px;
    height:18px;
    flex:none;
    margin:2px 0;
    accent-color:var(--gold)
}

.birthday-panel {
    border-color:#765b35
}

.birthday-panel strong {
    color:var(--gold)
}

.birthday-status {
    border:1px solid #7c613a;
    background:#3d2e1c;
    padding:14px;
    border-radius:10px;
    color:#f1d79e;
    margin:15px 0
}

.birthday-panel details {
    font-size:13px;
    color:var(--muted)
}

.birthday-panel summary {
    cursor:pointer;
    color:var(--gold);
    font-weight:700
}

.birthday-panel li {
    margin:7px 0
}

.birthdays-admin {
    margin-bottom:20px
}



/* V4.2: listado maestro y expediente individual */
.admin-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding-bottom:25px;
    align-items:start
}

.selected-client {
    background:#ae843014;
    border-left:3px solid var(--gold);
    padding-left:12px
}

.detail-divider {
    border-top:1px solid var(--line);
    margin:25px 0
}

.admin-layout .panel {
    min-width:0
}

.admin-layout .heading-row h2 {
    margin:0
}

.admin-layout .history {
    max-height:440px
}

@media(max-width:800px) {
    .admin-layout {
    grid-template-columns:1fr
}

}


/* V4.3: administración y finanzas */
.admin-tabs {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin:0 0 20px
}

.admin-nav.active {
    background:linear-gradient(110deg,#edcf91,#b98942);
    color:#17130d
}

.quick-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap
}

.alert-list {
    border:1px solid #765b35;
    border-radius:10px;
    background:#3d2e1c;
    padding:4px 15px;
    margin:15px 0
}

.finance-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.service-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid var(--line)
}

.service-row span {
    flex:1
}

.service-row strong {
    color:var(--gold)
}

textarea,select {
    width:100%;
    background:#101013;
    border:1px solid #494137;
    border-radius:10px;
    padding:13px 14px;
    color:var(--text);
    font:inherit
}

textarea:focus,select:focus {
    outline:2px solid #e1bb7066
}

.report-controls {
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:12px;
    margin:20px 0
}

.report-controls label {
    min-width:170px;
    flex:1;
    margin:0
}

.report-controls button {
    min-height:48px
}

.report-summary {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:20px 0
}

.summary-cell {
    border:1px solid var(--line);
    background:var(--panel2);
    padding:15px;
    border-radius:12px
}

.summary-cell small {
    display:block;
    color:var(--muted)
}

.summary-cell strong {
    display:block;
    color:var(--gold);
    font-size:20px;
    margin-top:5px
}

@media(max-width:760px) {
    .finance-grid {
    grid-template-columns:1fr
}

.report-summary {
    grid-template-columns:repeat(2,1fr)
}

.admin-tabs {
    display:grid;
    grid-template-columns:repeat(2,1fr)
}

.admin-nav {
    font-size:12px
}

}



/* V4.5 · recorrido QR */
.flow-guide {
    margin:20px 0
}

.flow-steps {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-top:16px
}

.flow-steps>div {
    border:1px solid #665333;
    border-radius:12px;
    padding:18px;
    min-width:0
}

.flow-steps p {
    min-height:48px
}

.qr-register {
    background:#fff;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    margin:8px 0
}

.qr-register img,.qr-register canvas {
    max-width:100%;
    height:auto
}

.scan-panel {
    margin-bottom:18px
}

.scan-controls {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin:12px 0
}

.scan-controls input {
    flex:1;
    min-width:190px
}

.scanner-video {
    display:block;
    width:100%;
    max-width:440px;
    max-height:310px;
    object-fit:cover;
    border:2px solid #b7944f;
    border-radius:12px
}

.scanner-video.hidden {
    display:none
}

#scanResult {
    margin-top:16px;
    padding:14px;
    border:1px solid #b7944f;
    border-radius:12px
}

@media(max-width:720px) {
    .flow-steps {
    grid-template-columns:1fr
}

.flow-steps p {
    min-height:0
}

}