/* =======================================================
   🎨 VARIABLES COMUNES (paleta, radios, sombras, tipografía)
   * Mantiene los colores y “look” original.
   ======================================================= */
:root{
  --bg: #fafafa;
  --text: #111;
  --muted: #666;

  --border: #e0e0e0;
  --border-light: #f1f1f1;

  --primary: #0d6efd;
  --primary-hover: #0b5ed7;

  --success-bg: #e9f7ef;  --success-text: #137a28;
  --warn-bg:    #fff8e1;  --warn-text:    #9a6b00;
  --danger-bg:  #fdecea;  --danger-text:  #b00020;

  --menu-hover: #f3f4f6;     /* ✅ hover del menú “chulo” */
  --menu-active-bg: #e7f0ff; /* ✅ activo del menú “chulo” */

  --r-sm: .35rem;
  --r-md: .5rem;
  --r-lg: .7rem;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 2px 6px rgba(0,0,0,.10);

  --ff: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* =======================================================
   🖼️ LAYOUT & NAV (con hover/activo conservado)
   ======================================================= */
body{
  font-family: var(--ff);
  margin: 0;
  color: var(--text);
  background: var(--bg);
}

.nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1rem; border-bottom:1px solid var(--border);
  background:#fff; position:sticky; top:0; z-index:100;
}

.brand{
  text-decoration:none; font-weight:700; color:inherit; letter-spacing:.2px;
}

.links{ display:flex; gap:1rem; }
.links a{
  text-decoration:none; color:inherit; padding:.25rem .35rem;
  border-radius: var(--r-sm);
  transition: background .15s ease;
}
/* ✅ mantiene el hover suave del menú */
.links a:hover{ background: var(--menu-hover); text-decoration:none; }
/* ✅ mantiene el activo vistoso del menú */
.links a.active, .links a[aria-current="page"]{
  background: var(--menu-active-bg);
  color: var(--primary);
}

.container{ max-width:1100px; margin:1rem auto; padding:0 1rem; }

/* Dropdown del menú (Admin) */
.dropdown{ position:relative; display:inline-block; }
.dropbtn{
  background:none; border:none; cursor:pointer; font:inherit; color:inherit;
  padding:.25rem .35rem; border-radius:var(--r-sm);
}
.dropbtn:hover{ background: var(--menu-hover); }
.dropdown-content{
  display:none; position:absolute; right:0; min-width:180px; z-index:1000;
  background:#fff; border:1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.dropdown-content a{
  display:block; padding:.6rem .8rem; color:#333; text-decoration:none;
}
.dropdown-content a:hover{ background: var(--menu-hover); }

/* =======================================================
   🔘 BOTONES (unificados, sin perder personalidad)
   ======================================================= */
.btn{
  border:1px solid var(--border);
  padding:.45rem .75rem; border-radius: var(--r-sm);
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; color:#333; cursor:pointer; text-decoration:none;
  font-size:.95rem; transition: background .15s ease, filter .15s ease;
}
.btn:hover{ background:#f7f7f7; }

.btn-primary{
  background: var(--primary); border-color: var(--primary); color:#fff;
}
.btn-primary:hover{ background: var(--primary-hover); }

.btn-outline{ background:#fff; color:#333; }
.btn-icon{ width:36px; height:36px; padding:0; justify-content:center; border-radius:50%; }
.btn-small{ padding:.3rem .55rem; font-size:.85rem; }
.btn-block{ width:100%; }

/* =======================================================
   🏷️ BADGES / TAGS / PILLS (misma paleta)
   ======================================================= */
.badge, .tag{
  font-size:.82rem; padding:.2rem .5rem; border-radius: var(--r-sm);
  border:1px solid transparent;
}
.badge-success, .tag.ok{ background: var(--success-bg); color: var(--success-text); }
.badge-warning, .tag.warn{ background: var(--warn-bg);    color: var(--warn-text); }
.badge-danger,  .tag.bad{ background: var(--danger-bg);  color: var(--danger-text); }

.pill{
  font-size:.75rem; padding:.1rem .5rem; border-radius:999px;
  background:#f3f4f6; border:1px solid var(--border); color:#333;
}

/* =======================================================
   📦 TARJETAS / LISTAS (dashboard look “chulo” conservado)
   ======================================================= */
.card{
  border:1px solid var(--border); border-radius: var(--r-lg);
  background:#fff; padding:.8rem; box-shadow: var(--shadow-sm);
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.card-head h3{ margin:0; font-size:1.05rem; }
.card-foot{ margin-top:.6rem; text-align:right; }

.list{ display:grid; gap:.45rem; }
.list-item{
  border:1px solid var(--border-light); border-radius: var(--r-md);
  padding:.45rem .6rem; display:flex; align-items:center; justify-content:space-between;
}
.li-left{ display:flex; align-items:center; gap:.45rem; }
.li-right{ display:inline-flex; align-items:center; gap:.4rem; }
.muted{ color:#888; }

/* =======================================================
   📊 DASHBOARD (Inicio) — auto-fit, ocupa todo si hay 1
   ======================================================= */
.dash-grid{ display:grid; gap:1rem; max-width:1100px; margin:0 auto; }
.widgets{
  display:grid; gap:.8rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mini-card{
  border:1px solid var(--border); border-radius: var(--r-md);
  background:#fff; padding:.9rem; display:flex; flex-direction:column; gap:.25rem;
  min-height:96px; transition: box-shadow .15s ease, transform .05s ease;
}
.mini-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }
.mini-title{ font-size:.9rem; color:#666; }
.mini-value{ font-size:1.3rem; font-weight:700; }
.mini-sub{ font-size:.85rem; color:#777; }

/* Stats resúmenes */
.stats{
  display:grid; gap:.6rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top:.3rem;
}
.stat{
  border:1px solid var(--border-light); border-radius: var(--r-md);
  padding:.7rem; background:#fff; display:flex; flex-direction:column; gap:.2rem;
}
.stat-k{ font-size:1.4rem; font-weight:700; }
.stat-l{ font-size:.85rem; color:#666; }

/* =======================================================
   📑 TABLA RESERVAS + RESPONSIVE (mantiene detalles/ocultos)
   ======================================================= */
.table-responsive{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

.reservations-table{ width:100%; border-collapse:collapse; font-size:15px; }
.reservations-table th, .reservations-table td{
  padding:.8rem .75rem; border-bottom:1px solid var(--border);
  vertical-align:top; line-height:1.3; white-space:nowrap;
}
.reservations-table thead th{
  text-align:left; font-weight:600; background:#fafafa;
}

.reservations-table .col-nombre,
.reservations-table .col-notes{
  max-width:30ch; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}

/* Ocultación por breakpoints (conservado) */
@media (max-width:1000px){ .reservations-table .hide-md{ display:none; } .reservations-table .show-md{ display:table-cell; } }
@media (max-width:680px){  .reservations-table .hide-sm{ display:none; } }

/* Detalles inline */
.row-details{ font-size:.9rem; }
.row-details summary{ cursor:pointer; list-style:none; user-select:none; font-weight:600; }
.row-details summary::-webkit-details-marker{ display:none; }
.row-details summary::after{ content:"▾"; margin-left:.25rem; font-weight:400; }
.row-details[open] summary::after{ content:"▴"; }
.row-details .rd-line{
  display:grid; grid-template-columns:90px 1fr; gap:.4rem; margin-top:.35rem;
}
.row-details .rd-k{ color:#666; }
.row-details .rd-v{ overflow:hidden; text-overflow:ellipsis; }

/* Acciones compactas en móvil */
@media (max-width:680px){
  .reservations-table .col-acciones .action-group{
    gap:.4rem; min-width:unset;
  }
}

/* Notas truncadas */
.notes{ display:inline-block; max-width:30ch; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* Enmascarado FREE */
.masked-row .blur{ filter: blur(4px); user-select:none; }
.masked-row .btn, .masked-row form{ pointer-events:none; opacity:.5; }
.masked-row .btn-upgrade{ pointer-events:auto; opacity:1; }

/* Banner cuota (FREE) */
.quota-banner{
  background: var(--warn-bg); border:1px solid #ffe7a3; color:#8a6d1f;
  padding:.8rem 1rem; border-radius: var(--r-md); margin:0 0 1rem;
  display:flex; align-items:center; gap:.8rem; justify-content:space-between;
}
.btn-upgrade{ background: var(--primary); color:#fff !important; border-color: var(--primary); border-radius: var(--r-sm); padding:.45rem .75rem; text-decoration:none; }

/* =======================================================
   📅 CALENDARIO (reservas)
   ======================================================= */
.res-calendar-panel{
  margin-top:1.5rem; max-width:900px; margin-left:auto; margin-right:auto;
  border:1px solid var(--border); border-radius: var(--r-md);
  background:#fff; padding:.8rem; box-shadow: var(--shadow-sm);
}
.cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.cal-title{ font-weight:600; }
.cal-nav{
  border:1px solid #ddd; background:#fff; border-radius: var(--r-sm);
  width:34px; height:34px; cursor:pointer;
}
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; user-select:none; }
.cal-weekday{ text-align:center; font-size:.8rem; color:#666; padding:.3rem 0; }
.cal-day{
  border:1px solid var(--border); min-height:44px; border-radius: var(--r-md);
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:.35rem .4rem; cursor:pointer; background:#fff; transition: background .15s ease;
}
.cal-day:hover{ background:#f9fafb; }
.cal-day.out{ opacity:.45; }
.cal-day .n{ font-size:.95rem; }
.cal-badge{
  font-size:.7rem; background: var(--primary); color:#fff; border-radius:999px;
  padding:.05rem .4rem; line-height:1.2;
}
.cal-day.today{ outline:2px solid rgba(13,110,253,.2); }
.cal-day.active{ box-shadow:0 0 0 2px var(--primary) inset; }

.cal-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-top:.6rem; }
.today-list{
  margin-top:.6rem; border-top:1px dashed var(--border); padding-top:.6rem;
  display:grid; gap:.4rem; max-height:320px; overflow:auto;
}
.today-item{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.9rem; padding:.35rem .45rem; border:1px solid var(--border-light); border-radius: var(--r-sm);
}
.today-item .left{ display:flex; gap:.5rem; align-items:center; }
.today-item .pill{ font-size:.72rem; padding:.05rem .4rem; border-radius:999px; border:1px solid #ddd; color:#555; }

/* =======================================================
   📬 FORMULARIOS (base + soporte)
   ======================================================= */
.form-group{ display:flex; flex-direction:column; gap:.35rem; }
.form-group label{ font-weight:600; font-size:.9rem; color:#333; }
.form-group input, .form-group select, .form-group textarea{
  padding:.55rem .65rem; border:1px solid #d1d5db; border-radius: var(--r-sm); font-size:.95rem; background:#fff;
}
.form-group textarea{ min-height:120px; resize:vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color: var(--primary); box-shadow:0 0 0 3px rgba(13,110,253,.12);
}
.form-actions{ text-align:right; }

.support-form{ display:grid; gap:.8rem; }
@media (min-width:900px){
  .support-form .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
}

/* =======================================================
   🔐 AUTH (login / register)
   ======================================================= */
.auth-wrap{ max-width:420px; margin:0 auto; }
.auth-card{ padding:1rem; }
.auth-form{ display:grid; gap:.85rem; }
.auth-actions{ display:grid; gap:.6rem; margin-top:.4rem; }
.auth-actions .hint{ margin:0; font-size:.92rem; text-align:center; color:#555; }
.auth-actions .hint a{ color: var(--primary); text-decoration:none; }
.auth-actions .hint a:hover{ text-decoration:underline; }

/* =======================================================
   🆘 SOPORTE: lista de tickets inline
   ======================================================= */
.tickets{ display:grid; gap:.6rem; }
.ticket-item{ border:1px solid var(--border); border-radius: var(--r-md); background:#fff; overflow:hidden; }
.ticket-summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; padding:.6rem .7rem; cursor:pointer;
}
.ticket-summary::-webkit-details-marker{ display:none; }
.ticket-summary::after{ content:"▾"; margin-left:.5rem; color:#666; font-weight:400; }
.ticket-item[open] .ticket-summary::after{ content:"▴"; }
.ts-left{ display:flex; align-items:center; gap:.45rem; min-width:0; }
.ts-subj{ font-weight:600; }
.ts-right{ display:inline-flex; align-items:center; gap:.4rem; }
.ticket-body{
  padding:.6rem .7rem .8rem; border-top:1px solid var(--border-light);
  display:grid; gap:.6rem;
}
.ticket-meta{ display:flex; gap:1rem; flex-wrap:wrap; color:#444; }
.ticket-message{
  padding:.6rem .7rem; border:1px solid var(--border-light);
  border-radius: var(--r-sm); background:#fafafa; line-height:1.45; word-break:break-word;
}
.ticket-actions{ display:flex; justify-content:flex-end; }

/* =======================================================
   ⚠️ FLASH MESSAGES
   ======================================================= */
.flash{ margin-bottom:1rem; }
.flash .f{
  padding:.6rem .8rem; border-radius: var(--r-sm);
  margin-bottom:.5rem; border:1px solid var(--border); background:#fff;
}
.flash .error{ background: var(--danger-bg); color: var(--danger-text); border-color:#f7c9c4; }
.flash .ok{    background: var(--success-bg); color: var(--success-text); border-color:#cfe9d6; }


/* Utilidades compactas para formularios en fila */
.inline-row{
    display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap;

}
.inline-row .w-2{ min-width: 260px; flex: 1 1 260px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


/* ====== Selector de negocio (dropdown minimal) ====== */
.biz-switch {
  position: relative;
  margin-left: auto;          /* empuja a la derecha si va en una barra */
}
.biz-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .6rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  cursor: pointer;
  font-weight: 600;
}
.biz-btn:hover { background: #f9fafb; }
.biz-btn .caret { font-size: .9rem; opacity: .7; }

.biz-menu {
  position: absolute; right: 0; top: calc(100% + .35rem);
  width: 320px; max-width: 90vw;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: .6rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: .6rem;
  display: none;
  z-index: 999;
}
.biz-menu.open { display: block; }

.biz-section + .biz-section { border-top: 1px dashed #eee; margin-top: .5rem; padding-top: .5rem; }

.biz-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; padding: .45rem .5rem; border-radius: .45rem;
}
.biz-item:hover { background: #f9fafb; }

.biz-name { font-weight: 600; }
.biz-meta { font-size: .82rem; color: #666; }

.biz-actions { display: inline-flex; gap: .35rem; }
.biz-actions .btn-xxs {
  font-size: .76rem; padding: .2rem .45rem; border-radius: .35rem;
  border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
}
.biz-actions .btn-xxs:hover { background: #f3f4f6; }

.biz-create {
  display: flex; gap: .45rem; align-items: center;
}
.biz-create input[type="text"]{
  flex: 1 1 auto; padding: .45rem .55rem; border:1px solid #d1d5db; border-radius:.45rem;
}
.biz-create button { white-space: nowrap; }

/* Utilidad: contenedor alineado a la derecha con estilo “card mini” */
.float-card {
  display:flex; justify-content:flex-end;
  margin-bottom: .8rem;
}

.pill { display:inline-block; padding:.18rem .5rem; border-radius:999px; border:1px solid #e5e7eb; background:#f3f4f6; font-size:.82rem; }
.badge-secondary{background:#dcdcdc;color:#000000}

dialog#tablePickerDialog {
  border: none;           /* sin borde */
  padding: 0;
  border-radius: 8px;     /* esquinas redondeadas */
  box-shadow: 0 8px 32px rgba(0,0,0,0.25); /* sombra elegante */
}

dialog#tablePickerDialog::backdrop {
  background: rgba(0,0,0,0.4); /* fondo semitransparente detrás */
}