/* ============================================================
   TB-GGB · Shell de aplicación + componentes
   Consume exclusivamente tokens --app-*/--tb-* (tb-tokens.css +
   tb-platform.css). No hardcodea colores, tamaños ni duraciones.
   ============================================================ */

html, body { margin: 0; padding: 0; }
img { max-width: 100%; }
button { font-family: inherit; }

/* ---------- LAYOUT: SIDEBAR + CONTENIDO ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--app-sidebar-w);
  flex-shrink: 0;
  background: var(--app-nav-bg);
  color: var(--app-text-inverse);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: var(--app-z-sidebar);
  transition: transform var(--app-dur-base) var(--app-ease-out);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: var(--tb-space-5) var(--tb-space-4) var(--tb-space-6);
}
.sidebar-brand img { width: 100%; max-width: 210px; height: auto; }

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--tb-space-3);
  overflow-y: auto;
}
.sidebar-spacer { flex: 1; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--tb-space-3);
  height: var(--app-nav-item-h);
  padding: 0 var(--tb-space-3);
  border-radius: var(--app-nav-item-radius);
  color: var(--app-nav-fg);
  font-family: var(--tb-font-body);
  font-size: var(--tb-fs-sm);
  font-weight: var(--tb-w-medium);
  transition: var(--app-t-color);
}
.sidebar-link:hover { background: var(--app-nav-item-bg-hover); color: var(--app-nav-fg-active); text-decoration: none; }
.sidebar-link.active {
  background: var(--app-nav-item-bg-active);
  color: var(--app-nav-fg-active);
  box-shadow: inset var(--app-nav-indicator-w) 0 0 var(--app-nav-indicator);
}
.sidebar-link svg { width: var(--app-icon); height: var(--app-icon); flex-shrink: 0; stroke-width: var(--app-icon-stroke); }

/* Nav oculta por rol - common.js agrega .show según el rol logueado
   (admin ve nav-admin-only, admin+supervisor ven nav-hide-limited);
   sin esta regla el toggle de .show no hacía nada y quedaban visibles
   para todos los roles (encargado/franquiciado incluidos). */
.sidebar-link.nav-admin-only,
.sidebar-link.nav-hide-limited { display: none; }
.sidebar-link.nav-admin-only.show,
.sidebar-link.nav-hide-limited.show { display: flex; }

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--tb-space-3);
  padding: var(--tb-space-4);
  border-top: var(--tb-bw-1) solid rgba(255,255,255,.1);
}
.sidebar-user .avatar {
  width: var(--app-avatar); height: var(--app-avatar);
  border-radius: var(--app-avatar-radius);
  background: var(--app-accent);
  color: var(--app-text-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--tb-w-bold); font-size: var(--tb-fs-sm);
  flex-shrink: 0;
}
.sidebar-user-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sidebar-user-info .user-name {
  font-size: var(--tb-fs-sm); font-weight: var(--tb-w-medium);
  color: var(--app-nav-fg-active);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-info .logout {
  font-size: var(--tb-fs-xs); color: var(--app-nav-fg);
  transition: var(--app-t-color);
}
.sidebar-user-info .logout:hover { color: var(--app-nav-fg-active); text-decoration: none; }

.sidebar-toggle-mobile {
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: var(--app-z-sidebar);
  width: 40px; height: 40px;
  border-radius: var(--app-nav-item-radius);
  background: var(--app-surface-inverse);
  color: var(--app-text-inverse);
  border: none;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--app-scrim);
  /* Tiene que quedar DETRÁS del sidebar (200), no usar --app-z-scrim (500,
     pensado para el fondo oscuro de un modal, que sí va por encima de casi
     todo) - si no, el overlay intercepta los clics de los links del menú
     mobile aunque visualmente no se note (el sidebar se sigue viendo por
     encima, pero los clics los captura el overlay y solo cierran el menú). */
  z-index: 150;
}

.app-main {
  flex: 1;
  margin-left: var(--app-sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-header {
  padding: var(--tb-space-6) var(--app-content-pad-x) var(--tb-space-5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tb-space-4);
  flex-wrap: wrap;
}
.page-title {
  font-family: var(--tb-font-display);
  font-size: var(--tb-fs-h1);
  letter-spacing: var(--tb-ls-caps);
  margin: 0 0 6px;
}
.page-subtitle {
  font-family: var(--tb-font-para);
  font-size: var(--tb-fs-sm);
  color: var(--app-text-muted);
}

.app-content {
  padding: 0 var(--app-content-pad-x) var(--tb-space-6);
  flex: 1;
  max-width: var(--app-content-max);
}

/* ---------- COMPONENTES ---------- */
.block {
  background: var(--app-card-bg);
  border: var(--app-card-bw) solid var(--app-card-border);
  border-radius: var(--app-card-radius);
  box-shadow: var(--app-card-shadow);
  transition: box-shadow var(--app-dur-base) var(--app-ease-out), transform var(--app-dur-base) var(--app-ease-out);
}
.block:hover { box-shadow: var(--app-card-shadow-hover); }
.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tb-space-3);
  height: var(--app-card-header-h);
  padding: 0 var(--app-card-pad);
  border-bottom: var(--tb-bw-1) solid var(--app-border);
}
.block-title {
  font-family: var(--tb-font-display);
  font-size: var(--tb-fs-lg);
  letter-spacing: var(--tb-ls-caps);
  margin: 0;
}
.block-body { padding: var(--app-card-pad); }
.full-width { width: 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--app-btn-gap);
  height: var(--app-btn-h);
  padding: 0 var(--app-btn-pad-x);
  border-radius: var(--app-btn-radius);
  border: var(--app-btn-bw) solid transparent;
  font-family: var(--app-btn-font);
  font-size: var(--app-btn-fs);
  font-weight: var(--app-btn-weight);
  letter-spacing: var(--app-btn-ls);
  cursor: pointer;
  transition: var(--app-t-color);
}
.btn-primary { background: var(--app-btn-primary-bg); color: var(--app-btn-primary-fg); border-color: var(--app-btn-primary-border); }
.btn-primary:hover { background: var(--app-btn-primary-bg-hover); }
.btn-accent { background: var(--app-btn-accent-bg); color: var(--app-btn-accent-fg); border-color: var(--app-btn-accent-bg); }
.btn-accent:hover { background: var(--app-btn-accent-bg-hover); }
.btn-ghost, .btn-outline { background: var(--app-btn-outline-bg); color: var(--app-btn-outline-fg); border-color: var(--app-btn-outline-border); }
.btn-ghost:hover, .btn-outline:hover { background: var(--app-btn-outline-bg-hover); color: var(--app-btn-outline-fg-hover); }
.btn-danger { background: var(--app-btn-danger-bg); color: var(--app-btn-danger-fg); border-color: var(--app-btn-danger-bg); }
.btn-danger:hover { background: var(--app-btn-danger-bg-hover); }
.btn-sm { height: var(--app-btn-h-sm); padding: 0 var(--app-btn-pad-x-sm); font-size: var(--tb-fs-xs); }
.btn:disabled { opacity: var(--app-o-disabled); cursor: not-allowed; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="time"], input[type="date"], textarea, select {
  font-family: var(--tb-font-body);
  border: var(--app-input-bw) solid var(--app-input-border);
  border-radius: var(--app-input-radius);
  height: var(--app-input-h);
  padding: 0 var(--app-input-pad-x);
  font-size: var(--app-input-fs);
  background: var(--app-input-bg);
  color: var(--app-input-fg);
  transition: var(--app-t-color);
}
textarea { height: auto; padding: var(--app-input-pad-x); }
input:hover, textarea:hover, select:hover { border-color: var(--app-input-border-hover); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--app-input-border-focus);
  box-shadow: var(--app-shadow-focus);
}

.info-label {
  font-family: var(--tb-font-body);
  font-size: var(--tb-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tb-ls-caps);
  color: var(--app-text-muted);
  font-weight: var(--tb-w-bold);
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--tb-space-4);
}
.info-item { display: flex; flex-direction: column; gap: 4px; }
.info-value { font-size: var(--tb-fs-lg); }

.badge {
  display: inline-flex;
  align-items: center;
  height: var(--app-badge-h);
  padding: 0 var(--app-badge-pad-x);
  border-radius: var(--app-badge-radius);
  font-size: var(--app-badge-fs);
  font-weight: var(--app-badge-weight);
  letter-spacing: var(--app-badge-ls);
  text-transform: uppercase;
}
.badge-admin { background: var(--app-info-bg); color: var(--app-info-text); }
.badge-supervisor { background: var(--app-success-bg); color: var(--app-success-text); }
.badge-encargado { background: var(--app-warning-bg); color: var(--app-warning-text); }
.badge-franquiciado { background: var(--tb-kraft-100); color: var(--app-text-secondary); border: var(--tb-bw-1) solid var(--tb-kraft-500); }
.badge-inactivo { background: var(--app-danger-bg); color: var(--app-danger-text); }

.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--app-scrim);
  align-items: center; justify-content: center;
  z-index: var(--app-z-modal);
}
.modal-overlay.open { display: flex; }
.modal-content {
  background: var(--app-modal-bg);
  border-radius: var(--app-modal-radius);
  box-shadow: var(--app-modal-shadow);
  padding: var(--app-modal-pad);
  max-width: var(--app-modal-w);
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-title {
  font-family: var(--tb-font-display);
  font-size: var(--tb-fs-h3);
  letter-spacing: var(--tb-ls-caps);
  margin: 0 0 4px;
}
.modal-option { display: block; font-size: var(--tb-fs-sm); padding: var(--tb-space-2) 0; cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--tb-space-2); margin-top: var(--tb-space-4); }

footer.footer-tagline-new {
  background: var(--app-surface-inverse);
  text-align: center;
  padding: var(--tb-space-6) var(--tb-space-5);
  font-family: var(--tb-font-display);
  font-size: var(--tb-fs-h3);
  letter-spacing: 3px;
  border-top: var(--tb-bw-3) solid var(--app-accent);
  margin-top: auto;
}
.footer-tagline-new .word-celeste { color: var(--tb-celeste-500); }
.footer-tagline-new .word-blanco { color: var(--tb-white); margin: 0 var(--tb-space-2); }
.footer-info {
  text-align: center;
  padding: var(--tb-space-3) var(--tb-space-5) var(--tb-space-5);
  font-size: var(--tb-fs-xs);
  color: var(--app-text-muted);
  font-family: var(--tb-font-para);
  text-transform: uppercase;
  letter-spacing: var(--tb-ls-caps);
  background: var(--app-surface-inverse);
}
.footer-info .sep { margin: 0 6px; opacity: .5; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--app-shadow-lg); }
  .sidebar-toggle-mobile { display: flex; }
  .sidebar-overlay.open { display: block; }
  .app-main { margin-left: 0; }
  .page-header { padding: 64px var(--tb-space-5) var(--tb-space-3); }
  .app-content { padding: 0 var(--tb-space-5) var(--tb-space-5); }
}

/* ---------- IMPRESIÓN / "Exportar a PDF" ---------- */
/* Solo oculta la navegación y los controles interactivos - el contenido
   real (tablas, KPIs) queda igual, así "Exportar a PDF" usa el diálogo de
   impresión nativo del navegador en vez de generar un PDF fake aparte. */
@media print {
  .sidebar, .sidebar-toggle-mobile, .sidebar-overlay,
  .header-actions, .filters, .tab-filter, #select-all-bar, #bulk-actions,
  .compare-bar, .limpiar-filtros {
    display: none !important;
  }
  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0 !important; }
  body { background: var(--tb-white, #fff) !important; }
}