/*
 * Componentes compartidos del panel del tenant (app.hotelweb.app) sobre Tabler.
 * Antes cada vista traía su propia copia de estas reglas con la paleta de
 * SB Admin 2 — ahora viven acá una sola vez y usan los tokens de Tabler
 * (--tblr-*), así un cambio de tema se hereda en todo el panel.
 */
:root{ --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Marca en el sidebar */
.panel-brand a{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.panel-brand-logo{ height:28px; width:auto; }
.panel-brand-tag{
  font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--tblr-secondary); border-left:1px solid var(--tblr-border-color); padding-left:10px;
}
.nav-link-icon .fas, .nav-link-icon .fab{ font-size:1rem; width:1.25rem; text-align:center; }

/* Secciones tipo card */
.panel-section{
  background:var(--tblr-bg-surface); border:1px solid var(--tblr-border-color);
  border-radius:var(--tblr-border-radius-lg); box-shadow:var(--tblr-shadow-card);
  padding:1.5rem; margin-bottom:1.25rem;
}
.panel-section h2{
  font-size:1rem; font-weight:600; color:var(--tblr-body-color); margin-bottom:.25rem;
  display:flex; align-items:center; gap:.625rem;
}
.panel-section h2 i{ color:var(--tblr-primary); font-size:.9rem; width:18px; text-align:center; }
.panel-section .section-desc{ font-size:.8125rem; color:var(--tblr-secondary); margin-bottom:1.25rem; }
.form-text-hint{ font-size:.75rem; color:var(--tblr-secondary); margin-top:.3rem; }

.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.125rem; }
@media (max-width:640px){ .row-2{ grid-template-columns:1fr; } }

/* Pestañas de idioma (campos traducibles) */
.lang-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:.875rem; }
.lang-tab{
  border:1px solid var(--tblr-border-color); background:var(--tblr-bg-surface);
  border-radius:var(--tblr-border-radius); padding:.3rem .875rem;
  font-size:.8125rem; font-weight:600; color:var(--tblr-secondary); cursor:pointer;
}
.lang-tab:hover{ color:var(--tblr-body-color); }
.lang-tab.active{ background:var(--tblr-primary); border-color:var(--tblr-primary); color:var(--tblr-primary-fg, #fff); }
.lang-tab .miss{ color:var(--tblr-yellow); margin-left:4px; }
.lang-fields{ display:none; }
.lang-fields.active{ display:block; }

/* Barra de guardado fija abajo */
.save-bar{
  position:sticky; bottom:0; z-index:10; background:var(--tblr-body-bg);
  border-top:1px solid var(--tblr-border-color); padding:1rem 0; margin-top:.5rem;
  display:flex; justify-content:flex-end; align-items:center; gap:.625rem;
}
.save-actions{ display:flex; gap:.625rem; }

/* Aviso de función no incluida en el plan */
.locked-note{
  display:flex; align-items:center; gap:.625rem;
  background:var(--tblr-yellow-lt); border:1px solid rgba(var(--tblr-yellow-rgb), .35);
  border-radius:var(--tblr-border-radius); padding:.625rem .875rem; font-size:.8125rem; margin-bottom:1rem;
}
.locked-note i{ color:var(--tblr-yellow); }
.locked-note a{ font-weight:600; text-decoration:none; }

.empty-hint{ font-size:.8125rem; color:var(--tblr-secondary); padding:.625rem 0; }

.add-row-btn{
  background:var(--tblr-bg-surface-secondary); border:1px solid var(--tblr-border-color);
  border-radius:var(--tblr-border-radius); padding:.5rem 1rem; font-size:.8125rem; font-weight:600;
  color:var(--tblr-body-color);
}
.add-row-btn:hover{ background:var(--tblr-bg-surface-tertiary); border-color:var(--tblr-primary); color:var(--tblr-primary); }
.add-row-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Filas editables (highlights) */
.item-row{
  display:flex; align-items:center; gap:.625rem; border:1px solid var(--tblr-border-color);
  border-radius:var(--tblr-border-radius-lg); padding:.625rem .875rem; background:var(--tblr-bg-surface); margin-bottom:.625rem;
}
.item-row .drag-handle{ color:var(--tblr-secondary); font-size:12px; cursor:grab; }
.item-row input.icon-input{ width:130px; flex-shrink:0; }
.item-row input.texto-input{ flex:1; }
.item-row .remove-btn{ color:var(--tblr-secondary); cursor:pointer; font-size:13px; padding:4px 8px; background:none; border:none; flex-shrink:0; }
.item-row .remove-btn:hover{ color:var(--tblr-danger); }

/* Selector de íconos (modal) */
.icon-pick-btn{
  width:38px; height:38px; flex-shrink:0; border:1px solid var(--tblr-border-color);
  border-radius:var(--tblr-border-radius); background:var(--tblr-bg-surface-secondary);
  color:var(--tblr-primary); font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-pick-btn:hover{ border-color:var(--tblr-primary); }
.icon-picker-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; max-height:340px; overflow-y:auto; }
@media (max-width:640px){ .icon-picker-grid{ grid-template-columns:repeat(3, 1fr); } }
.icon-picker-tile{
  border:1px solid var(--tblr-border-color); border-radius:var(--tblr-border-radius-lg); padding:12px 6px;
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; text-align:center;
}
.icon-picker-tile:hover{ border-color:var(--tblr-primary); background:var(--tblr-primary-lt); }
.icon-picker-tile i{ font-size:17px; color:var(--tblr-primary); }
.icon-picker-tile span{ font-size:10.5px; color:var(--tblr-body-color); line-height:1.2; }
.icon-picker-empty{ grid-column:1/-1; text-align:center; color:var(--tblr-secondary); font-size:.8125rem; padding:20px 0; }

/* Controles sobre fotos (drag/eliminar), comunes a todas las grillas de fotos */
.photo-tile .drag-handle,
.gallery-photo .drag-handle,
.photo-tile .delete-btn,
.gallery-photo .delete-btn{ box-shadow:0 1px 2px rgba(0,0,0,.12); }
/* Mientras una subida/borrado por fetch está en curso */
.is-busy{ opacity:.5; pointer-events:none; }