/* ======================================================================
   admin.css — Panel de administración
   ====================================================================== */

body.admin-body{
  background: linear-gradient(160deg, #4E0B33 0%, #2C0620 100%);
}

/* ---------------------------------------------------------------------
   LOGIN / PIN
--------------------------------------------------------------------- */
.pin-screen{
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2rem;
  text-align: center;
}
.pin-screen .eyebrow{ display:block; }
.pin-logo{
  width: min(72vw, 300px);
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.35));
}
.pin-dots{
  display: flex;
  gap: .8rem;
  margin: .6rem 0 .4rem;
}
.pin-dots span{
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  transition: background .2s, transform .2s;
}
.pin-dots span.filled{ background: var(--gold); transform: scale(1.15); }
.pin-dots.error span{ border-color: var(--coral-pink); animation: shake .4s; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  75%{ transform: translateX(6px); }
}
.pin-pad{
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: .8rem;
}
.pin-pad button{
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(255,248,240,.35);
  background: rgba(255,248,240,.06);
  color: var(--ivory);
  font-size: 1.3rem;
  font-family: var(--font-headline);
  cursor: pointer;
  transition: background .25s, transform .2s;
}
.pin-pad button:hover{ background: rgba(255,248,240,.16); }
.pin-pad button:active{ transform: scale(.92); }
.pin-pad button.wide{ font-size: .85rem; }
.pin-error{
  color: var(--coral-pink);
  font-size: .85rem;
  min-height: 1.2em;
}

/* ---------------------------------------------------------------------
   SHELL
--------------------------------------------------------------------- */
.admin-shell{ min-height: 100svh; position: relative; z-index: 1; }
.admin-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
  padding: 1.2rem 1.6rem;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,248,240,.14);
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(10px);
}
.admin-brand{ display: flex; align-items: center; gap: .5rem; }
.admin-brand-logo{ height: 34px; width: auto; display: block; }
.admin-brand-label{ font-family: var(--font-script); font-size: 1.1rem; color: var(--butter-yellow); }
.admin-nav{ display:flex; gap: .4rem; flex-wrap: wrap; }
.admin-nav button{
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,248,240,.75);
  padding: .5em 1em;
  border-radius: 999px;
  cursor: pointer;
  font-size: .9rem;
  transition: background .25s, color .25s, border-color .25s;
}
.admin-nav button.active, .admin-nav button:hover{
  background: rgba(255,248,240,.12);
  border-color: rgba(255,248,240,.3);
  color: var(--ivory);
}
.admin-main{ max-width: 1160px; margin: 0 auto; padding: 2.2rem 1.4rem 4rem; }
.admin-panel{ display: none; animation: fadeUp .5s var(--ease-soft) both; }
.admin-panel.active{ display: block; }
.admin-panel h2{ font-size: 1.6rem; margin-bottom:.2em; }
.panel-sub{ color: rgba(255,248,240,.7); margin-bottom: 1.8rem; }

/* Stats */
.stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 1rem;
  margin-bottom: 2.4rem;
}
.stat-card{
  background: rgba(255,248,240,.07);
  border: 1px solid rgba(255,248,240,.18);
  border-radius: 20px;
  padding: 1.3rem 1.2rem;
}
.stat-card .num{ font-family: var(--font-headline); font-size: 2rem; color: var(--golden-yellow); }
.stat-card .label{ font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,248,240,.7); }

/* Cards / forms generic */
.panel-card{
  background: rgba(255,248,240,.06);
  border: 1px solid rgba(255,248,240,.16);
  border-radius: 22px;
  padding: 1.6rem;
  margin-bottom: 1.6rem;
}
.panel-card h3{ font-size: 1.1rem; margin-bottom: .8rem; }
.form-row{ display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.form-row .field{ flex: 1 1 180px; margin-bottom: 0; }
.field-inline label{ display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--butter-yellow); margin-bottom:.4em; }
.field-inline input, .field-inline select, .field-inline textarea{
  width: 100%; padding: .7em .9em; border-radius: 12px;
  border: 1px solid rgba(255,248,240,.3); background: rgba(255,248,240,.07);
  color: var(--ivory); font-family: var(--font-body); font-size: 1rem;
}

/* Guests table */
.guest-table{ width: 100%; border-collapse: collapse; font-size: .95rem; }
.guest-table th{
  text-align: left; padding: .7em .6em;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--butter-yellow); border-bottom: 1px solid rgba(255,248,240,.2);
}
.guest-table td{ padding: .7em .6em; border-bottom: 1px solid rgba(255,248,240,.09); }
.guest-table tr:hover td{ background: rgba(255,248,240,.04); }
.guest-row-companion td{ padding-top: .35em; padding-bottom: .35em; border-bottom: 1px solid rgba(255,248,240,.09); }
.companion-label{
  display: inline-block;
  margin-left: 1.2em;
  font-style: italic;
  font-size: .88rem;
  color: rgba(255,248,240,.55);
}
.chip{
  display: inline-block; padding: .2em .7em; border-radius: 999px;
  font-size: .74rem; background: rgba(143,211,182,.2); color: var(--mint);
  border: 1px solid rgba(143,211,182,.4);
}
.chip.warn{ background: rgba(255,140,66,.18); color: var(--tropical-orange); border-color: rgba(255,140,66,.4); }
.icon-btn{
  background: transparent; border: none; color: rgba(255,248,240,.7);
  cursor: pointer; font-size: 1rem; padding: .2em .4em; transition: color .2s;
}
.icon-btn:hover{ color: var(--coral-pink); }
.empty-state{
  text-align: center; padding: 3rem 1rem; color: rgba(255,248,240,.65);
}
.empty-state .big{ font-size: 2.4rem; margin-bottom: .4rem; }

/* Tables board (drag & drop) */
.tables-board{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
}
.table-col{
  background: rgba(255,248,240,.06);
  border: 1.5px dashed rgba(255,248,240,.28);
  border-radius: 20px;
  padding: 1rem;
  min-height: 160px;
  transition: border-color .2s, background .2s;
}
.table-col.dragover{ border-color: var(--golden-yellow); background: rgba(255,212,59,.08); }
.table-col h4{
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-headline); font-size: 1rem; margin-bottom: .7rem;
}
.table-col h4 .count{ font-size: .75rem; color: rgba(255,248,240,.6); font-family: var(--font-body); }
.guest-chip{
  display: flex; align-items: center; justify-content: space-between; gap: .4em;
  background: rgba(255,248,240,.1);
  border: 1px solid rgba(255,248,240,.22);
  border-radius: 12px;
  padding: .5em .7em;
  margin-bottom: .5em;
  cursor: grab;
  font-size: .88rem;
}
.guest-chip:active{ cursor: grabbing; }
.guest-chip button{ background:none; border:none; color: rgba(255,248,240,.5); cursor:pointer; }
.guest-chip.companion-chip{
  background: rgba(255,248,240,.04);
  border-style: dashed;
  font-style: italic;
  color: rgba(255,248,240,.6);
  padding-left: 1.2em;
}
.unassigned-pool{
  background: rgba(238,37,141,.08);
  border: 1.5px dashed rgba(238,37,141,.4);
}

/* Plano del salón — editor de posiciones sobre la foto real */
.floor-editor{
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1215 / 1005;
  margin: 0 auto;
  border: 1.5px solid rgba(255,248,240,.25);
  border-radius: 20px;
  overflow: hidden;
  touch-action: none;
  box-shadow: 0 20px 50px rgba(35,7,22,.5);
}
.floor-editor .fe-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.fe-marker{
  position: absolute;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.fe-marker:active{ cursor: grabbing; }
.fe-marker .fe-dot{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(35,7,22,.55);
  border: 2px solid var(--golden-yellow);
  font-family: var(--font-headline);
  font-size: .95rem;
  color: var(--ivory);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.fe-marker.fe-entrance .fe-dot{
  width: 40px; height: 40px;
  background: var(--turquoise);
  border-color: var(--turquoise);
  color: var(--ink);
}
.fe-marker.fe-landmark .fe-dot{
  width: 30px; height: 30px;
  background: rgba(217,167,215,.35);
  border-color: var(--lilac);
  color: var(--ivory);
  font-size: .8rem;
}
.fe-marker.fe-landmark .fe-label{
  background: rgba(0,0,0,.18);
  color: rgba(255,248,240,.7);
}
.fe-marker .fe-label{
  font-size: .68rem;
  color: rgba(255,248,240,.8);
  white-space: nowrap;
  background: rgba(0,0,0,.25);
  padding: .1em .5em;
  border-radius: 999px;
}

.pin-change-note{ font-size: .82rem; color: rgba(255,248,240,.6); margin-top: .4rem; }
.danger-zone{ border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.06); }
.btn-danger{
  background: rgba(255,107,107,.15); border: 1px solid rgba(255,107,107,.5);
  color: var(--coral-pink); padding: .6em 1.3em; border-radius: 999px; cursor: pointer;
}

.toast{
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--golden-yellow); color: var(--ink); padding: .7em 1.4em;
  border-radius: 999px; font-size: .9rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
  z-index: 50;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }