:root{ --radius: 20px; }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 680px at 15% 8%, rgba(255,230,150,.38), transparent 58%),
    radial-gradient(900px 600px at 82% 22%, rgba(255,245,200,.45), transparent 55%),
    radial-gradient(800px 500px at 50% 90%, rgba(255,220,120,.18), transparent 50%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 42%, var(--bg3));
  overflow-x:hidden;
}
.bg-orb{position:fixed;width:520px;height:520px;filter:blur(42px);opacity:.42;pointer-events:none;animation: float 10s ease-in-out infinite}
.orb1{left:-140px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(255,220,130,.55), transparent 62%)}
.orb2{right:-160px; bottom:-120px; background: radial-gradient(circle at 30% 30%, rgba(255,235,180,.48), transparent 60%); animation-delay:-3.5s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(0,18px)}}

.wrap{min-height:100%;display:grid;place-items:center;padding: clamp(18px, 4vw, 40px)}
.wrap--login{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:100%;
  padding: clamp(16px, 4vw, 36px) clamp(14px, 4vw, 24px);
}
.wrap__authStack{
  width:min(560px, 100%);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
}
.authBelow{
  text-align:center;
  padding:2px 8px 4px;
}
.authBelow__label{
  margin:0 0 6px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.02em;
}
.authBelow__innsite{
  height:36px;
  max-width:min(220px, 70vw);
  width:auto;
  object-fit:contain;
  object-position:center;
  display:inline-block;
  vertical-align:middle;
}
.authPageFooter{
  text-align:center;
  padding:4px 10px 12px;
}
.authPageFooter__text{
  margin:0 0 6px;
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}
.authPageFooter__text a{
  color:inherit;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}
.authPageFooter__mark{
  height:16px;
  max-width:88px;
  width:auto;
  object-fit:contain;
  object-position:center;
  opacity:.88;
  display:inline-block;
  vertical-align:middle;
}
.card{
  width:min(560px, 100%);
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow:hidden;
}
.card--flat{width:100%}
.badge{
  display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;
  background: rgba(159,200,188,.22);
  border:1px solid rgba(159,200,188,.42);
  color: var(--text);
  letter-spacing:.12em;text-transform:uppercase;font-size:12px;
}
.title{font-family:"Playfair Display", serif;font-size: 38px;line-height:1.05;margin:16px 0 8px}
.sub{margin:0;color:var(--muted);font-size:15.5px}
.auth__header{padding:28px 26px 14px}
.auth__brand{display:flex;justify-content:center;margin:0 0 14px}
.auth__logo{max-height:44px;width:auto;max-width:min(260px,100%);height:auto;object-fit:contain;display:block;border-radius:12px;margin-top:4px}
.auth__logo--innvita{max-height:40px;max-width:min(240px,85vw)}
.auth__body{padding:16px 26px 24px}
.auth__footer{padding:14px 26px 20px;border-top:1px solid rgba(255,255,255,.08);color: rgba(244,242,247,.58);font-size: 13px}

.label{display:block;font-size:13px;color: var(--muted);margin: 12px 0 8px}
.input{
  width:100%;height:48px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background: var(--inputBg);color:var(--text);outline:none;transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.input:focus{border-color: rgba(159,200,188,.65); background: var(--inputBg); transform: translateY(-1px)}
.input--sm{height:42px;border-radius:12px}
/* iOS Safari enfoca inputs con font-size < 16px y hace zoom; evitarlo en login */
.auth .input{font-size:16px}
.select{
  height:42px;border-radius:12px;padding:0 12px;border:1px solid rgba(255,255,255,.12);
  background: var(--inputBg);color:var(--text);outline:none;
}
.btn{
  height:48px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: var(--btnBg);
  color: var(--text);
  cursor:pointer;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
  user-select:none;
}
.btn:where(a){text-decoration:none}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.22)}
.btn:active{transform: translateY(0)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--primary{background: linear-gradient(135deg, rgba(244,213,141,.22), rgba(167,139,250,.16));border-color: rgba(244,213,141,.24)}
.btn--primary{
  background: linear-gradient(135deg, rgba(159,200,188,.40), rgba(233,214,201,.30));
  border-color: rgba(159,200,188,.55);
}
.btn--ghost{background: var(--btnGhostBg);border-color: rgba(255,255,255,.10)}

.toast{margin-top:14px;padding:12px 14px;border-radius:14px;border:1px solid var(--stroke);background: var(--card);color: var(--text)}
.dash > .toast{
  box-sizing:border-box;
  width:calc(100% - 2 * clamp(16px,4vw,40px));
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
.toast--hidden{display:none}
.toast--ok{border-color: rgba(52,211,153,.28)}
.toast--bad{border-color: rgba(248,113,113,.28)}

/* Dashboard: contenido centrado; cabecera a ancho completo sin “caja” */
.dash{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}
/* Cabecera + KPI fuera del recuadro de la tabla de invitados */
.dashTop{margin-bottom:0}
.dashTop .topbar{margin-bottom:0}
.dashTop .grid.kpiRow{
  margin:6px auto 12px;
  max-width:1200px;
  padding-left:clamp(16px,4vw,40px);
  padding-right:clamp(16px,4vw,40px);
  box-sizing:border-box;
}
.guestPanel{
  padding:0 clamp(16px,4vw,40px) clamp(18px,4vw,40px);
  margin:0 auto;
  max-width:1200px;
  border:none;
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
}
.guestPanel .tableWrap{
  border-radius:16px;
  border:1px solid var(--stroke);
  background:var(--card);
}
.topbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px 16px;
  margin-bottom:0;
}
/* Logo + saludo: no crece para no dejar hueco vacío entre texto y botones */
.topbar__brandBlock{
  flex:0 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.topbar__theme{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
}
.topbar__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.topbar__actions--compact{align-items:center}
@media (min-width: 981px){
  .topbar__actions{flex-wrap:nowrap;width:auto}
  .topbar__actions .menu{min-width:0}
}
.topbar--sticky{
  position: sticky;
  top: 0;
  z-index: 20;
  width:100%;
  margin:0;
  padding:14px clamp(16px,4vw,32px) 8px;
  border:none;
  border-radius:0;
  box-shadow:none;
  background: var(--topbarFade);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.topbar__brandBlock{padding-top:4px}
.brand__logo{
  flex:0 1 auto;
  min-width:0;
  max-width:min(260px,100%);
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border:none;
  background:transparent;
  overflow:hidden;
}
.brand__logo img{
  width:auto;
  height:56px;
  max-height:56px;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
  display:block;
}
body.theme--dark .brand__logo img{
  filter: brightness(0) invert(1);
}
.brand__meta{display:flex;flex-direction:column;gap:2px;width:100%}
.hello{font-size: 13.5px}
.hello__name{font-weight:800}
.iconBtn--theme{height:40px;width:40px;border-radius:14px}
.iconBtn--tiny{
  height:34px;
  width:34px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: var(--btnGhostBg);
}

@media (max-width: 980px){
  .topbar{flex-direction:column;align-items:stretch;gap:6px}
  .topbar__actions{
    width:100%;
    justify-content:stretch;
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    align-items:center;
  }
  .topbar__actions > #btnNuevo{flex:1 1 0;min-width:0}
  .topbar__actions > .menu{flex:1 1 0;min-width:0}
  .topbar__actions > .topbar__theme{flex:0 0 auto}
}

/* Mobile-first refinamiento: menos “bloques”, más claridad */
@media (max-width: 560px){
  .authBelow__innsite{height:32px;max-width:min(200px,75vw)}
  .authPageFooter__text{font-size:12.5px}
  .authPageFooter__mark{height:14px;max-width:80px}
  .brand__logo{
    max-width:min(220px,100%);
    height:52px;
  }
  .brand__logo img{height:52px;max-height:52px}
  .brand__meta .muted{font-size: 12.5px}
  .hello{font-size: 12.5px}

  .btn{height:44px;border-radius:14px;font-size: 13px}
  .iconBtn--theme{height:36px;width:36px}

  .grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .kpi{padding:12px 12px}
  .kpi__value{font-size: 22px}

  .tools{padding: 8px 2px 12px}
  .tools__left{width:100%}
  .tools__right{width:100%;text-align:left}
  .input--sm,.select{width:100%}
  #btnRefrescar{width:100%}
}

/* Menú de acciones (compacto) */
.menu{position:relative}
.menu > summary{list-style:none}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary{display:flex;align-items:center;justify-content:center;gap:8px}
.menu__chev{opacity:.75;font-size:14px;line-height:1;transform: translateY(1px)}
details[open].menu > summary .menu__chev{transform: rotate(180deg) translateY(-1px)}
.menu__panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:min(260px, 85vw);
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 8px;
  display:grid;
  gap:6px;
}
.menu__item,
a.menu__item{
  width:100%;
  border:1px solid var(--stroke);
  background: var(--btnGhostBg);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  text-align:left;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
  line-height:1.25;
  text-decoration:none;
  display:block;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
.menu__item:hover,
a.menu__item:hover{background: rgba(159,200,188,.18)}
.menu__item--danger:hover{background: rgba(197,52,52,.12)}
.menu__sep{height:1px;background: var(--stroke);margin:6px 2px}

/* Invitados: en móvil mostramos solo lo esencial */
.nameRow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.nameRow__status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.metaRow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.metaRow__pases{color: var(--muted);font-size: 12.5px}
.h1{margin:10px 0 0;font-family:"Playfair Display", serif;font-size: 44px;line-height:1.05}
.muted{color:var(--muted);font-size: 13.5px}

.grid{display:grid;grid-template-columns: repeat(4, minmax(0,1fr));gap:12px;margin: 12px 0 16px}
.kpi{padding:14px 16px;border-radius:16px;border:1px solid var(--stroke);background: var(--card)}
.kpi__label{color: var(--muted);font-size: 12.5px}
.kpi__value{font-size: 26px;font-weight:700;margin-top:6px}

.card--flat{padding: 14px 14px 10px}
.tools{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding: 6px 4px 12px}
.tools__left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tools__right{white-space:nowrap}

.tableWrap{overflow:auto;border-radius:16px;border:1px solid var(--stroke);background: var(--card)}
.table{width:100%;border-collapse:collapse;min-width: 980px}
.table th,.table td{padding: 12px 12px;border-bottom:1px solid rgba(31,35,34,.08);vertical-align:top}
body.theme--dark .table th,.table td{border-bottom-color: rgba(255,255,255,.08)}
.table th{
  position:sticky;
  top:0;
  background: var(--card2);
  backdrop-filter: blur(10px);
  text-align:left;
  font-size: 12.5px;
  color: var(--muted);
}
.table td{font-size: 13.5px;color: var(--text)}

.table tbody tr:nth-child(even) td{background: rgba(233,214,201,.12)}
body.theme--dark .table tbody tr:nth-child(even) td{background: rgba(255,255,255,.03)}

.select--mini{height:34px;border-radius:12px;padding:0 10px;font-size: 12.5px}
.statusCell{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.row--ok td:first-child,.row--bad td:first-child,.row--wait td:first-child{border-left: 3px solid transparent}
.row--ok td:first-child{border-left-color: rgba(26,143,99,.40)}
.row--bad td:first-child{border-left-color: rgba(197,52,52,.40)}
.row--wait td:first-child{border-left-color: rgba(159,200,188,.42)}

.tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background: rgba(255,255,255,.55);font-size:12.5px}
body.theme--dark .tag{background: rgba(255,255,255,.06)}
.tag--ok{
  border-color: color-mix(in srgb, var(--ok) 65%, transparent);
  background: color-mix(in srgb, var(--ok) 18%, rgba(255,255,255,.58));
  color: color-mix(in srgb, var(--ok) 70%, var(--text));
}
.tag--bad{
  border-color: color-mix(in srgb, var(--bad) 70%, transparent);
  background: color-mix(in srgb, var(--bad) 16%, rgba(255,255,255,.58));
  color: color-mix(in srgb, var(--bad) 74%, var(--text));
}
.tag--wait{border-color: rgba(159,200,188,.45)}

.rowBtns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.btnSm{height:36px;border-radius:12px;padding:0 12px;font-size: 12.5px}

/* Escritorio: una sola columna de estado, fila coloreada, acciones alineadas, mensaje solo con modal */
@media (min-width: 761px){
  .nameRow__status--mobileOnly{display:none !important}
  .guestMsg--mobile{display:none !important}

  .table tbody tr.row--ok td{
    background: linear-gradient(180deg, rgba(26,143,99,.14), rgba(255,255,255,.88)) !important;
  }
  .table tbody tr.row--bad td{
    background: linear-gradient(180deg, rgba(197,52,52,.12), rgba(255,255,255,.88)) !important;
  }
  .table tbody tr.row--wait td{
    background: linear-gradient(180deg, rgba(159,200,188,.12), rgba(255,255,255,.90)) !important;
  }
  body.theme--dark .table tbody tr.row--ok td{
    background: linear-gradient(180deg, rgba(52,211,153,.16), rgba(255,255,255,.05)) !important;
  }
  body.theme--dark .table tbody tr.row--bad td{
    background: linear-gradient(180deg, rgba(248,113,113,.14), rgba(255,255,255,.04)) !important;
  }
  body.theme--dark .table tbody tr.row--wait td{
    background: linear-gradient(180deg, rgba(159,200,188,.12), rgba(255,255,255,.04)) !important;
  }

  .col-actions .rowBtns{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px;
    width:100%;
    min-width:200px;
    max-width:240px;
    margin-left:auto;
    justify-items:stretch;
  }
  .col-actions .rowBtns .btnSm{
    width:100%;
    box-sizing:border-box;
    justify-self:stretch;
  }
}

/* En móvil: Regenerar / Eliminar solo en escritorio (Acciones masivas siguen en el menú) */
@media (max-width: 760px){
  .btnAct--desktop{display:none !important}
  .guestMsg--desktop{display:none !important}
}
.iconBtn{height:34px;width:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background: var(--btnGhostBg);color:var(--text);cursor:pointer}

/* Tabla → tarjetas en móvil (la prioridad es leer invitados) */
@media (max-width: 760px){
  .table{min-width: 0}
  .table thead{display:none}
  .tableWrap{border-radius:18px}
  .table tbody{display:block;padding: 8px}
  .table tr{
    display:block;
    margin: 10px 0;
    border:1px solid var(--stroke);
    border-radius: 18px;
    background: var(--card);
    overflow:hidden;
  }

  /* Fondo del recuadro según estado */
  .table tr.row--ok{background: linear-gradient(180deg, rgba(26,143,99,.10), rgba(255,255,255,.75))}
  .table tr.row--bad{background: linear-gradient(180deg, rgba(197,52,52,.10), rgba(255,255,255,.75))}
  .table tr.row--wait{background: linear-gradient(180deg, rgba(159,200,188,.10), rgba(255,255,255,.78))}
  body.theme--dark .table tr.row--ok{background: linear-gradient(180deg, rgba(52,211,153,.12), rgba(255,255,255,.04))}
  body.theme--dark .table tr.row--bad{background: linear-gradient(180deg, rgba(248,113,113,.12), rgba(255,255,255,.04))}
  body.theme--dark .table tr.row--wait{background: linear-gradient(180deg, rgba(159,200,188,.10), rgba(255,255,255,.03))}
  .table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding: 10px 12px;
    border-bottom:1px solid rgba(31,35,34,.08);
  }
  body.theme--dark .table td{border-bottom-color: rgba(255,255,255,.08)}
  .table td:last-child{border-bottom:none}

  .col-select{justify-content:flex-start}
  .col-num{display:none !important}
  .col-pases{display:none !important}
  .col-estado{display:none !important}
  .col-mensaje{display:none !important}
  .col-fecha{display:none !important}

  .col-nombre{align-items:flex-start}
  .nameRow__name{font-size: 15px}
  .col-codigo code{font-size: 12.5px}

  .col-actions .rowBtns{width:100%;justify-content:flex-start}
  .col-actions .btnSm{flex:1 1 110px;height:40px}

  .select--mini{min-width: 140px}

  .msgActions{margin-top:10px}
  .msgDrawer{
    margin-top:10px;
    border:1px solid var(--stroke);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    padding: 10px 12px;
  }
  body.theme--dark .msgDrawer{background: rgba(255,255,255,.06)}
  .msgDrawer--hidden{display:none}
  .msgDrawer__label{font-size:12px;color:var(--muted);margin-bottom:6px}
  .msgDrawer__text{white-space:pre-wrap}
  .msgDrawer__meta{margin-top:8px;font-size:12px;color:var(--muted)}
}

/* Modal */
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:50}
.modal--hidden{display:none}
.modal__backdrop{position:absolute;inset:0;background: rgba(0,0,0,.55)}
.modal__panel{
  position:relative;
  width:min(520px, calc(100% - 28px));
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: var(--card);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__panel--wide{width:min(640px, calc(100% - 28px))}
.modalGuestRead__body{padding: 0 16px 16px}
.modalGuestRead__nombre{font-size:13px;margin-bottom:10px}
.modalGuestRead__text{
  white-space:pre-wrap;
  font-size:14px;
  line-height:1.5;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--inputBg);
  color:var(--text);
  max-height:min(50vh, 320px);
  overflow:auto;
}
.modalGuestRead__meta{margin-top:10px;font-size:12.5px}
.msgGen__hint{font-size:13px;line-height:1.45;margin:0 0 8px}
.msgGen__hint code{font-size:12px;padding:2px 6px;border-radius:8px;border:1px solid var(--stroke);background:var(--btnGhostBg)}
.textarea--admin{
  width:100%;
  min-height:200px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--inputBg);
  color:var(--text);
  font-size:14px;
  line-height:1.45;
  resize:vertical;
  outline:none;
}
.textarea--admin:focus{border-color: rgba(159,200,188,.55)}
.metaRow__codeCopy{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%}
.iconBtn--copy{
  width:32px;
  height:32px;
  min-width:32px;
  padding:0;
  border-radius:10px;
  font-size:15px;
  line-height:1;
  flex-shrink:0;
}
.iconBtn--copy--flash{
  border-color: rgba(52,211,153,.45) !important;
  background: rgba(52,211,153,.16) !important;
  animation: copyFlash 1.2s ease-out;
}
@keyframes copyFlash{
  0%{transform:scale(1)}
  35%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.modal__head{display:flex;justify-content:space-between;align-items:center;padding:14px 14px;border-bottom:1px solid var(--stroke)}
.modal__title{font-weight:700}
.modal__foot{padding:10px 14px 14px;border-top:1px solid var(--stroke)}
.form{display:grid;gap:0}
.form--grid{padding: 10px 14px 14px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.row--2 > *{flex:1 1 180px}

@media (max-width: 980px){
  .grid{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 760px){
  .modal .input{font-size:16px}
}

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