:root{
  --bg:#0b0b0b;
  --bg-soft:#121212;
  --panel:#171717;
  --panel-2:#1f1f1f;
  --line:#2f2a1b;
  --line-soft:#3d3520;
  --text:#f3efe3;
  --muted:#b3a98f;
  --gold:#c9a24a;
  --gold-2:#e1bf6c;
  --gold-dark:#8f6d25;
  --success:#183221;
  --success-line:#2a5c3b;
  --error:#3a1919;
  --error-line:#7b3434;
  --danger:#7a2424;
  --danger-line:#b55656;
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(circle at top, rgba(201,162,74,.18), transparent 38%),
    linear-gradient(180deg,#0a0a0a 0%, #111 100%);
}
a{color:inherit}
img{max-width:100%}

.wrap,.gallerywrap{position:relative;z-index:1}
.wrap{max-width:760px;margin:auto;padding:42px 20px}
.wide{max-width:1120px}
.gallerywrap{max-width:1400px;margin:auto;padding:32px 20px}
.pin-wrap{max-width:560px;padding-top:10vh}

header{text-align:center;margin-bottom:30px}
.brand{
  color:var(--gold-2);
  font-size:24px;
  letter-spacing:.34em;
  font-weight:300;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(201,162,74,.16);
}
.brand b{font-weight:700;color:#fff}
.sub,header p,footer,.muted{color:var(--muted)}
footer{text-align:center;margin-top:30px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
  margin:20px 0;
  box-shadow:var(--shadow);
  backdrop-filter: blur(6px);
}

h1,h2,h3,p{margin-top:0}
h1{font-size:31px;font-weight:300;letter-spacing:.02em;color:#fff;margin-bottom:10px}
h2{font-size:22px;font-weight:500;color:#fff;margin-bottom:8px}
label{display:block;margin:18px 0 8px;color:#d7ccb0;font-size:14px;letter-spacing:.04em}
input{
  width:100%;
  padding:15px 16px;
  border:1px solid #4a4129;
  border-radius:14px;
  font-size:16px;
  color:#fff;
  background:#0f0f0f;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,74,.14);
  background:#121212;
}
input[readonly]{color:#f2e4b8;background:#101010}

button,.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:14px;
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  color:#151515;
  padding:14px 20px;
  margin-top:18px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease;
  box-shadow:0 12px 24px rgba(201,162,74,.17);
}
button:hover,.button:hover{transform:translateY(-1px);filter:brightness(1.03)}
button:active,.button:active{transform:translateY(0)}
.full{width:100%}
.ghost{
  background:linear-gradient(180deg, #232323, #191919);
  color:var(--text);
  border-color:#3e3522;
  box-shadow:none;
}
.whatsapp{
  background:linear-gradient(180deg, #2da868, #218651);
  color:#fff;
}
.danger,.button.danger{
  background:linear-gradient(180deg, #8c2d2d, #701f1f);
  color:#fff;
  border-color:var(--danger-line);
  box-shadow:none;
}
.small,.button.small{font-size:11px;padding:9px 11px}

.ok,.error{
  padding:13px 15px;
  border-radius:14px;
  margin:12px 0 0;
  font-size:14px;
}
.ok{background:var(--success);border:1px solid var(--success-line);color:#ddf5e4}
.error{background:var(--error);border:1px solid var(--error-line);color:#ffdede}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions form{margin:0}
.actions form button{width:100%}

.drop{
  border:1.5px dashed #5a4b27;
  border-radius:18px;
  padding:24px;
  text-align:center;
  background:rgba(201,162,74,.05);
}
.drop span{display:block;color:var(--muted);font-size:15px}
.drop input{border:0;background:transparent;box-shadow:none;padding:10px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.grid img{width:100%;aspect-ratio:3/2;object-fit:cover;background:#111;border-radius:12px}
.client{margin-top:30px}
.waiting{
  grid-column:1/-1;
  text-align:center;
  padding:72px 20px;
  color:var(--muted);
  border:1px dashed #514626;
  border-radius:18px;
  background:rgba(201,162,74,.04);
}
.compact{padding:35px}

.topline{display:flex;align-items:center;gap:14px;justify-content:space-between}
.photo-count{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:90px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(201,162,74,.12), rgba(201,162,74,.06));
  border:1px solid #544620;
}
.photo-count strong{font-size:32px;line-height:1;font-weight:700;color:#fff}
.photo-count span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-top:6px}

.pin-card{text-align:left}
.pin-card h1,.pin-card>p{text-align:center}
.pin-input{text-align:center;font-size:30px;letter-spacing:.38em;padding-left:.38em}
.pin-admin{margin:22px 0;display:flex;justify-content:center}
.pin-admin>div{
  border:1px solid #5c4b20;
  background:linear-gradient(180deg, rgba(201,162,74,.14), rgba(201,162,74,.06));
  border-radius:18px;
  padding:18px 30px;
  text-align:center;
  min-width:220px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pin-admin span{display:block;font-size:11px;letter-spacing:.22em;color:var(--muted);margin-bottom:8px}
.pin-admin strong{font-size:38px;font-weight:700;letter-spacing:.18em;color:#fff}
.inline-form{display:flex;gap:10px;align-items:flex-end}
.inline-form input{flex:1}
.inline-form button{margin-top:0;white-space:nowrap}

.admin-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.admin-photo{
  background:#111;
  border:1px solid #40361f;
  border-radius:16px;
  padding:10px;
}
.admin-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.admin-photo form{text-align:center}
.admin-photo .small{margin-top:8px}
.admin-bottom{text-align:center;padding:5px 0 25px}
.admin-bottom a{color:var(--muted);font-size:13px;text-decoration:none}
.admin-bottom a:hover{color:#fff}

/* Thumb grid */
.thumb{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:1px solid #3a301a;
  background:#111;
  cursor:pointer;
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.thumb img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;transition:transform .22s ease, filter .22s ease}
.thumb:hover img{transform:scale(1.025);filter:brightness(1.04)}
.thumb .heart{
  display:none;
  position:absolute;
  right:10px;
  top:10px;
  width:32px;
  height:32px;
  line-height:32px;
  border-radius:999px;
  background:rgba(12,12,12,.78);
  color:var(--gold-2);
  font-size:17px;
  border:1px solid rgba(201,162,74,.45);
  box-shadow:0 4px 14px rgba(0,0,0,.32);
}
.thumb.chosen .heart{display:block}

/* Viewer */
.viewer{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(6,6,6,.96);
  display:none;
  align-items:center;
  justify-content:center;
  padding:30px 70px;
}
.viewer.open{display:flex}
.viewer-content{max-width:min(1200px,92vw);max-height:94vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.viewer-content img{max-width:100%;max-height:calc(94vh - 95px);object-fit:contain;background:#0f0f0f;border-radius:18px;border:1px solid #3b321d}
.viewer-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.viewer-actions button,.viewer-actions .button{margin:0}
.select-button{
  background:linear-gradient(180deg,#f6e2a3,#dcb661);
  color:#141414;
  min-width:190px;
}
.select-button.active{background:linear-gradient(180deg,#f6e2a3,#dcb661);color:#141414}
.viewer-close,.viewer-nav{
  position:absolute;
  margin:0;
  border:1px solid rgba(201,162,74,.28);
  background:rgba(22,22,22,.88);
  color:#fff;
  border-radius:50%;
  padding:0;
  box-shadow:none;
}
.viewer-close{right:18px;top:18px;width:44px;height:44px;font-size:32px;line-height:40px}
.viewer-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:42px;line-height:40px}
.viewer-nav.prev{left:16px}
.viewer-nav.next{right:16px}
.viewer-open{overflow:hidden}
.save-hint{font-size:12px;color:var(--muted);text-align:center;min-height:18px;margin-top:8px}
.gallery-actions{justify-content:center}

/* Legacy/session helpers kept for compatibility */
.sessions{display:flex;flex-direction:column;gap:12px}
.session-row{border-top:1px solid #352e1c;padding:16px 0;display:flex;justify-content:space-between;gap:18px;align-items:center}
.session-info{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.session-info small{width:100%;color:var(--muted)}
.session-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.session-actions form{display:flex;gap:7px;flex-wrap:wrap}
.status{font-size:10px;letter-spacing:.12em;padding:4px 7px;border-radius:20px}
.status.open{background:#203223;color:#d9f5df}
.status.closed{background:#222;color:#ddd}
.copy-status{min-height:22px;margin-top:12px;color:var(--muted);font-size:14px}
.admin-thumb{position:relative}
.admin-thumb>span{display:none;position:absolute;right:8px;top:8px;background:#111;color:var(--gold-2);border-radius:50%;width:28px;height:28px;text-align:center;line-height:28px;border:1px solid rgba(201,162,74,.45)}
.admin-thumb.chosen>span{display:block}
.admin-thumb img{display:block}

@media (max-width:700px){
  .topline{align-items:flex-start;flex-direction:column}
  .session-row{align-items:flex-start;flex-direction:column}
  .session-actions{justify-content:flex-start}
  .session-actions form{width:100%}
  .session-actions .button,.session-actions button{flex:1 1 auto}
}

@media (max-width:600px){
  .wrap,.gallerywrap{padding:22px 12px}
  .card{padding:20px;border-radius:18px}
  .brand{font-size:19px;letter-spacing:.25em}
  h1{font-size:27px}
  .pin-wrap{padding-top:7vh}
  .inline-form{flex-direction:column;align-items:stretch}
  .inline-form button{width:100%}
  .actions>.button,.actions>form{flex:1 1 46%}
  .gallery-actions>.button{flex:0 1 auto}
  .grid{grid-template-columns:repeat(2,1fr)}
  .admin-grid{grid-template-columns:repeat(2,1fr)}
  .viewer{padding:62px 10px 18px}
  .viewer-content{max-width:100%;max-height:100%}
  .viewer-content img{max-height:calc(100vh - 155px);max-height:calc(100dvh - 155px)}
  .viewer-nav{width:40px;height:40px;font-size:34px;background:rgba(0,0,0,.55)}
  .viewer-nav.prev{left:7px}
  .viewer-nav.next{right:7px}
  .viewer-close{right:10px;top:10px}
  .viewer-actions{width:100%}
  .select-button,.viewer-actions .button{flex:1;text-align:center;padding:13px 12px}
  .grid.client{gap:8px}
  .pin-admin strong{font-size:34px}
  .photo-count{min-width:72px}
}


/* v1.0 · controles de calidad y seguridad */
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mode-switch button{margin-top:0;width:100%}
.mode-active{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#151515;border-color:var(--gold-2)}
.mode-note{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
@media(max-width:520px){.mode-switch{grid-template-columns:1fr}}


/* v1.1 · acceso administración en pie */
footer .admin-access{display:inline-block;margin-top:14px;padding-top:12px;border-top:1px solid rgba(201,162,74,.25);color:var(--gold-2);font-size:11px;letter-spacing:.14em;text-decoration:none;text-transform:uppercase}footer .admin-access:hover{color:#fff}


/* v1.2 · activar/desactivar galería */
.live-status{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;white-space:nowrap;border:1px solid #514626;background:#111}.live-status span{width:9px;height:9px;border-radius:50%;display:block}.live-status.on{color:#dff5e5;border-color:#2d6740;background:#142319}.live-status.on span{background:#43c76a;box-shadow:0 0 12px rgba(67,199,106,.65)}.live-status.off{color:#f0c9c9;border-color:#713737;background:#2a1616}.live-status.off span{background:#d44b4b;box-shadow:0 0 12px rgba(212,75,75,.45)}.gallery-toggle-form{margin-top:12px}.inactive-card{text-align:center;padding-top:42px;padding-bottom:42px}.inactive-icon{color:#d44b4b;font-size:24px;margin-bottom:14px;text-shadow:0 0 18px rgba(212,75,75,.5)}
