/* ==========================================================================
   IPRINT POS 1.0 - FLAT MINIMALIST DESIGN SYSTEM (NO GRADIENTS)
   Estilo Minimalista • Fondo Blanco • Azul Eléctrico Plano • Alto Contraste
   ========================================================================== */

:root {
  /* Canvas & Surfaces (Minimal Light Base) */
  --bg-app: #f5f6f8;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f8fafc;
  --bg-card: #ffffff;
  --bg-dark-hero: #1a3149;
  --bg-sidebar: #1a3149;

  /* Borders & Dividers */
  --border-subtle: #e5e7eb;
  --border-medium: #cbd5e1;
  --border-dark: #1e293b;
  --border-focus: #0078d4;

  /* Typography Colors */
  --text-main: #0a0a0a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-white: #ffffff;

  /* Data Marketing Brand Blue & Colors (SIN DEGRADADOS) */
  --primary: #0078d4;
  --primary-hover: #0063b1;
  --primary-dark: #1a3149;
  --primary-glow: rgba(0, 120, 212, 0.2);
  --electric-cyan: #0191fc;

  /* Accents & Functional Colors */
  --accent-black: #0a0a0a;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #ef4444;
  --accent-purple: #8b5cf6;

  /* Shadows */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Layout Dimensions */
  --sidebar-width: 250px;
  --font-main: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-main);
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Top Solid Electric Blue Bar (SIN DEGRADADO) */
.app-stripe {
  height: 3px;
  width: 100%;
  background: var(--primary);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* App Layout Container */
.app-layout {
  display: flex;
  height: 100vh;
  padding-top: 3px;
  overflow: hidden;
}

/* ==========================================================================
   SIDEBAR NAVIGATION (Sleek Dark Minimalist)
   ========================================================================== */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-sidebar);
  color: var(--text-white);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 100;
  overflow-y: auto;
}

.sidebar-header {
  padding: 20px 18px 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
}

/* Brand Mark (squircle icon, echoes the Data Marketing node logo) */
.brand-logo-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}

.brand-wordmark {
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.3px;
  color: #ffffff;
}

.brand-wordmark strong {
  font-weight: 800;
}

.brand-version {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.5px;
}

/* User Operator Profile Card in Sidebar */
.sidebar-user {
  padding: 10px 14px;
  margin: 12px 12px 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar-pill {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-info-text {
  flex: 1;
  min-width: 0;
}

.user-role-select-box {
  width: 100%;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.user-role-select-box option {
  background: var(--text-main);
  color: #ffffff;
}

/* Sidebar Nav Links */
.sidebar-nav {
  padding: 10px 10px 24px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all 0.15s ease-in-out;
  position: relative;
}

.nav-link i {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.nav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.nav-link.active {
  color: #ffffff;
  background: var(--primary);
  font-weight: 600;
}

.nav-link.active i {
  opacity: 1;
}

.nav-counter-badge {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.nav-link.active .nav-counter-badge {
  background: #ffffff;
  color: var(--primary);
}

.nav-counter-badge.badge-danger {
  background: #ef4444;
  color: #ffffff;
}

/* ==========================================================================
   MAIN CONTENT WRAPPER
   ========================================================================== */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  background-color: var(--bg-app);
}

/* View Container */
.app-view {
  display: none;
  padding: 24px 28px 40px 28px;
  max-width: 1560px;
  margin: 0 auto;
  width: 100%;
}

.app-view.active {
  display: block;
}

/* ==========================================================================
   HERO BANNER (SOLID FLAT DARK WITH ELECTRIC BLUE ACCENT - NO GRADIENT)
   ========================================================================== */
.hero-banner {
  background: var(--bg-dark-hero);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid #1e293b;
  border-top: 3px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--electric-cyan);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-title {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-subtitle {
  font-size: 0.88rem;
  color: #94a3b8;
}

.hero-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
}

/* ==========================================================================
   BUTTONS SYSTEM (FLAT SOLID COLORS - NO GRADIENT)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn i {
  width: 16px;
  height: 16px;
}

/* Primary Flat Electric Blue Button */
.btn-primary {
  background-color: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

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

/* Hero Flat Button */
.btn-hero-solid {
  background-color: var(--primary);
  color: #ffffff;
  border: 1px solid #3b82f6;
  font-weight: 700;
}

.btn-hero-solid:hover {
  background-color: var(--primary-hover);
}

/* Deep Black Button */
.btn-dark {
  background-color: var(--accent-black);
  color: #ffffff;
  border-color: var(--accent-black);
}

.btn-dark:hover {
  background-color: #1e293b;
}

/* Light / Outline Button */
.btn-outline {
  background-color: #ffffff;
  color: var(--text-main);
  border-color: var(--border-medium);
}

.btn-outline:hover {
  background-color: var(--bg-surface-elevated);
  border-color: var(--text-main);
}

.btn-outline-blue {
  background-color: #ffffff;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-blue:hover {
  background-color: #eff6ff;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}

/* Botón cuadrado de solo-ícono para acciones de fila (editar/borrar) en
   tablas y tarjetas de lista — reemplaza estilos inline sueltos y repetidos. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: #ffffff;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.btn-icon i {
  width: 14px;
  height: 14px;
}

.btn-icon:hover {
  background: var(--bg-surface-elevated);
  border-color: var(--text-secondary);
  color: var(--text-main);
}

.btn-icon-danger {
  color: #dc2626;
  border-color: #fecaca;
}

.btn-icon-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
  color: #b91c1c;
}

.btn-lg {
  padding: 13px 24px;
  font-size: 1rem;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   KPI CARDS GRID (DASHBOARD / INICIO - SOLID ACCENTS)
   ========================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-subtle);
  position: relative;
  overflow: hidden;
}

/* Solid accent bar on top */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.kpi-card.kpi-ventas::before { background: var(--primary); }
.kpi-card.kpi-cotizaciones::before { background: #f59e0b; }
.kpi-card.kpi-saldos::before { background: var(--electric-cyan); }
.kpi-card.kpi-caja::before { background: #10b981; }
.kpi-card.kpi-canceladas::before { background: #64748b; }
.kpi-card.kpi-danger::before { background: #dc2626; }
.kpi-card.kpi-purple::before { background: #8b5cf6; }

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kpi-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.kpi-icon-pill {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-ventas .kpi-icon-pill { background: #eff6ff; color: var(--primary); }
.kpi-cotizaciones .kpi-icon-pill { background: #fffbeb; color: #f59e0b; }
.kpi-saldos .kpi-icon-pill { background: #ecfeff; color: #0891b2; }
.kpi-caja .kpi-icon-pill { background: #f0fdf4; color: #16a34a; }
.kpi-canceladas .kpi-icon-pill { background: #f1f5f9; color: #64748b; }
.kpi-danger .kpi-icon-pill { background: #fef2f2; color: #dc2626; }
.kpi-purple .kpi-icon-pill { background: #f5f3ff; color: #7c3aed; }

.kpi-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.kpi-subtext {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Dashboard Lower Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.operator-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.operator-badge-lg {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-full);
  background: var(--accent-black);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-subtle);
}

.chart-bars-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 180px;
  padding-top: 30px;
  gap: 12px;
}

.chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

/* Solid Flat Chart Bars */
.chart-bar-pill {
  width: 100%;
  max-width: 38px;
  background: var(--primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height 0.3s ease;
  min-height: 6px;
}

.chart-bar-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 8px;
}

/* ==========================================================================
   PRODUCTION WORKFLOW / PEDIDOS (KANBAN POR DEPARTAMENTO)
   ========================================================================== */
.kanban-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.search-box-wrapper {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.search-box-wrapper i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 18px;
  height: 18px;
}

.search-input {
  width: 100%;
  padding: 10px 14px 10px 42px;
  font-size: 0.88rem;
  font-family: inherit;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-main);
  outline: none;
}

.search-input:focus {
  border-color: var(--primary);
}

.filter-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}

.kanban-board-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 20px;
  min-height: calc(100vh - 280px);
}

.kanban-column {
  flex: 0 0 310px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-subtle);
  max-height: calc(100vh - 270px);
}

.kanban-column-header {
  padding: 14px 16px;
  background: var(--text-main);
  color: #ffffff;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--primary);
}

.kanban-column-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.kanban-column-subtitle {
  font-size: 0.68rem;
  color: #94a3b8;
  display: block;
}

.kanban-column-badge {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.kanban-cards-list {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kanban-empty-state {
  text-align: center;
  padding: 30px 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* Order Card (Clean, Minimal, Process-Focused) */
.order-card {
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-subtle);
  transition: border-color 0.15s ease;
  position: relative;
}

.order-card:hover {
  border-color: var(--primary);
}

.order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.order-id-badge {
  background: var(--text-main);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.order-client-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.order-items-snippet {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.35;
  background: #f8fafc;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid #f1f5f9;
}

/* Process & Task Details Box on Card */
.order-process-box {
  background: #eff6ff;
  border-left: 3px solid var(--primary);
  padding: 6px 8px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 8px;
  font-size: 0.76rem;
  color: #1e3a8a;
}

.order-delivery-tag {
  font-size: 0.74rem;
  color: #0284c7;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.order-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  gap: 8px;
}

.order-money-tag {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-main);
}

.order-balance-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: #fee2e2;
  color: #dc2626;
  margin-left: 4px;
}

.order-tech-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   NUEVA VENTA (POINT OF SALE)
   ========================================================================== */
.pos-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
}

@media (max-width: 1100px) {
  .pos-grid {
    grid-template-columns: 1fr;
  }
}

/* Cotizaciones reutiliza el mismo configurador de ítems que Punto de Venta
   (ver quotes.js renderItemConfiguratorHtml), pero antes envolvía las dos
   columnas con un grid fijo 1.2fr/1fr sin clase — a diferencia de .pos-grid,
   nada lo colapsaba en pantallas chicas, así que el configurador (tabs,
   categorías, tarjetas de material) quedaba aplastado en la mitad del ancho
   en vez de apilarse como en Punto de Venta. */
.quote-builder-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: flex-start;
}

@media (max-width: 1100px) {
  .quote-builder-grid {
    grid-template-columns: 1fr;
  }
}

.pos-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-subtle);
  min-width: 0;
}

.pos-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.form-control {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-family: inherit;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-main);
  background: #ffffff;
  outline: none;
}

.form-control:focus {
  border-color: var(--primary);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.pos-tabs {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  gap: 4px;
}

.pos-finishes-details > summary {
  list-style: none;
}

.pos-finishes-details > summary::-webkit-details-marker {
  display: none;
}

.pos-finishes-details[open] > summary {
  border-bottom: 1px solid var(--border-subtle);
}

.pos-tab-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pos-tab-btn.active {
  background: #ffffff;
  color: var(--primary);
  font-weight: 700;
  box-shadow: var(--shadow-subtle);
}

.pos-mat-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pos-mat-cat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--border-subtle);
  background: #fff;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.pos-mat-cat-btn i { width: 14px; height: 14px; }

.pos-mat-cat-btn.active {
  background: var(--primary);
  color: var(--text-white);
  border-color: var(--primary);
}

.pos-mat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.pos-mat-card {
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: border-color .1s, background .1s;
}

.pos-mat-card:hover { border-color: var(--primary); }

.pos-mat-card.active {
  border-color: var(--primary);
  background: #eff6ff;
}

.pos-mat-card i {
  width: 22px;
  height: 22px;
  color: var(--primary);
  margin-bottom: 4px;
}

.pos-mat-card-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 3px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-mat-card-width {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-full);
  padding: 1px 7px;
  margin-bottom: 4px;
}

.pos-mat-card-price {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.pos-mat-card-stock {
  font-size: 0.66rem;
  font-weight: 700;
  margin-top: 2px;
}

.finishes-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.finish-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-main);
  background: #f8fafc;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.finish-checkbox-label input {
  accent-color: var(--primary);
}

.pos-cart-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 18px;
}

.pos-cart-item {
  background: #f8fafc;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cart-item-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.cart-item-details {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.cart-item-price {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
}

.btn-remove-item {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 4px;
}

.pos-totals-box {
  background: #f8fafc;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 18px;
  border: 1px solid var(--border-subtle);
}

.totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.totals-row.grand-total {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  border-top: 1px solid var(--border-medium);
  padding-top: 10px;
  margin-top: 8px;
  margin-bottom: 0;
}

.deposit-payment-section {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 18px;
}

/* ==========================================================================
   DATA TABLES
   ========================================================================== */
.table-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

/* Tarjeta de fila en Ventas — columnas lado a lado en escritorio, apiladas
   en móvil (ver media query) para que nada se corte fuera de la pantalla. */
.sale-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid #64748b;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.sale-card-meta {
  flex-shrink: 0;
  text-align: center;
  min-width: 90px;
}

.sale-card-client {
  flex: 0.6;
  min-width: 120px;
  border-left: 1px solid var(--border-subtle);
  padding-left: 12px;
}

.sale-card-items {
  flex: 1;
  min-width: 160px;
  border-left: 1px solid var(--border-subtle);
  padding-left: 12px;
}

.sale-card-amount {
  flex-shrink: 0;
  text-align: right;
  border-left: 1px solid var(--border-subtle);
  padding-left: 12px;
  min-width: 120px;
}

.sale-card-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 1px solid var(--border-subtle);
  padding-left: 12px;
  min-width: 120px;
}

/* Tarjeta de fila en Cotizaciones — mismo patrón que .sale-card: columnas
   lado a lado en escritorio, apiladas en móvil (ver media query). */
.quote-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid #64748b;
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.quote-card-meta {
  flex-shrink: 0;
  text-align: center;
  min-width: 100px;
}

.quote-card-client {
  flex: 0.6;
  min-width: 130px;
}

.quote-card-items {
  flex: 1;
  min-width: 180px;
  border-left: 1px solid var(--border-subtle);
  padding-left: 14px;
}

.quote-card-amount {
  flex-shrink: 0;
  text-align: right;
  border-left: 1px solid var(--border-subtle);
  padding-left: 14px;
  min-width: 120px;
}

.quote-card-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--border-subtle);
  padding-left: 14px;
  min-width: 130px;
}

.quote-card-actions button {
  width: 100%;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.86rem;
}

.data-table th {
  background: #f8fafc;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: middle;
}

.data-table tr:hover td {
  background-color: #f8fafc;
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
}

.badge-paid {
  background: #dcfce7;
  color: #15803d;
}

.badge-due {
  background: #fee2e2;
  color: #b91c1c;
}

.badge-warning {
  background: #fef3c7;
  color: #b45309;
}

.badge-neutral {
  background: #f1f5f9;
  color: #475569;
}

/* ==========================================================================
   MOBILE-ONLY ELEMENTS (hidden on desktop)
   ========================================================================== */
.mobile-bottom-bar { display: none !important; }

/* ==========================================================================
   MODALS & PRINTABLE SHEETS
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 14, 26, 0.65);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  overflow-y: auto;
}

.modal-backdrop.open {
  display: flex;
}

.modal-dialog {
  background: #ffffff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin: auto;
}

/* El contenido de cada modal se arma con divs con overflow-y:auto inline
   (no una clase fija) — esto asegura scroll con inercia en Safari/iOS viejo
   y evita que el "tirón" del scroll se le escape al fondo de la página. */
#receipt-modal-content,
#receipt-modal-content * {
  -webkit-overflow-scrolling: touch;
}

.modal-dialog.modal-lg {
  max-width: 960px;
  max-height: calc(100vh - 40px);
}

/* receipt-modal-content fills the dialog */
#receipt-modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* Manija de arrastre del bottom sheet (solo visible en móvil, ver media query) */
.modal-drag-handle {
  display: none;
  flex-shrink: 0;
}

/* Botón para plegar/desplegar "Historial & Notas" (solo activo en móvil,
   ver media query — en escritorio la columna siempre está expandida) */
.chatter-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
}

.chatter-toggle-btn i {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.chatter-collapsed .chatter-toggle-btn i {
  transform: rotate(-90deg);
}

/* Formal Sheet for OT & Quotes (High Res, PDF Ready) */
.formal-sheet {
  background: #ffffff;
  padding: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #000000;
  font-family: var(--font-main);
}

.sheet-header-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.sheet-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: #f8fafc;
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 18px;
  border: 1px solid #e2e8f0;
}

.sheet-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.sheet-table th {
  background: var(--text-main);
  color: #ffffff;
  padding: 8px 10px;
  font-size: 0.8rem;
  text-align: left;
}

.sheet-table td {
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.82rem;
}

.sheet-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 36px;
  padding-top: 20px;
}

.signature-line {
  border-top: 1px solid #000000;
  text-align: center;
  padding-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Thermal Ticket Style */
.ticket-print-box {
  background: #ffffff;
  border: 1px dashed #94a3b8;
  padding: 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #000000;
  max-width: 380px;
  margin: 0 auto;
}

.ticket-header {
  text-align: center;
  border-bottom: 1px dashed #000000;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.ticket-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ticket-qr-placeholder {
  width: 100px;
  height: 100px;
  margin: 14px auto 8px auto;
  background: #ffffff;
  border: 2px solid #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.7rem;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--text-main);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid var(--primary);
}

/* Responsive adjustments (ver también el bloque móvil principal más abajo,
   que define .sidebar como cajón deslizante + .mobile-topbar) */
@media (max-width: 768px) {
  .app-layout {
    flex-direction: column;
  }
  .app-view {
    padding: 16px;
  }
  .hero-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .hero-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .hero-actions .btn {
    flex: 1 1 auto;
  }
  /* Toolbars de filtros/búsqueda a ancho completo en móvil */
  .kanban-toolbar .search-box-wrapper {
    max-width: none !important;
    width: 100%;
  }

  /* Barra de acciones de Pedidos (Pantalla Taller / Nuevo Pedido / Cotizar
     Estructura / Nueva Venta) — en pantalla angosta ya no caben en una sola
     fila; se reparten a ancho completo, 2 por fila, en vez de desbordarse o
     quedar apretados sin poder tocarse bien. */
  .pedidos-toolbar-actions {
    width: 100%;
  }
  .pedidos-toolbar-actions #tv-live-clock {
    width: 100%;
    text-align: center;
  }
  .pedidos-toolbar-actions .pedidos-toolbar-btn {
    flex: 1 1 calc(50% - 8px);
  }
}

/* ==========================================================================
   WORKSHOP TV DISPLAY & QUICK UPDATE STYLES
   ========================================================================== */

.order-tv-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.order-tv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.order-tv-card:active {
  transform: scale(0.99);
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 20px;
}

@media (max-width: 1400px) {
  .kanban-board {
    grid-template-columns: repeat(7, 240px);
  }
}

.kanban-column {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 450px;
}

/* ==========================================================================
   TALLER TV & KANBAN REFINED STYLES (V9)
   ========================================================================== */

/* Placeholder que deja SortableJS mientras se arrastra una tarjeta a otra
   columna (ver KanbanModule.initSortable) — sin esto el hueco se ve como
   una tarjeta en blanco sin ninguna pista visual de qué está pasando. */
.kanban-card-ghost {
  opacity: 0.4;
  border: 1.5px dashed #94a3b8 !important;
  background: #f1f5f9 !important;
}

.taller-tv-toolbar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.taller-tv-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.taller-tv-icon {
  background: var(--primary);
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.taller-tv-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.2;
}

.taller-tv-subtitle {
  font-size: 0.76rem;
  color: #64748b;
  margin: 2px 0 0 0;
}

.taller-tv-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.taller-search-wrap {
  position: relative;
  width: 200px;
}

.taller-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: #94a3b8;
  pointer-events: none;
}

.taller-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 32px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  background: #ffffff;
}

.taller-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
}

.taller-select-control {
  height: 38px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  background: #ffffff;
}

.taller-btn-urgent {
  height: 38px;
  padding: 0 14px;
  border: 1px solid #ef4444;
  border-radius: 6px;
  background: #ffffff;
  color: #dc2626;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.taller-btn-urgent.active,
.taller-btn-urgent:hover {
  background: #dc2626;
  color: #ffffff;
}

.taller-kanban-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(240px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 20px;
}

@media (max-width: 1450px) {
  .taller-kanban-board {
    grid-template-columns: repeat(7, 260px);
  }
}

.taller-column {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.taller-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--text-main);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.taller-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.taller-dept-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.taller-column-count {
  background: #1e293b;
  color: #38bdf8;
  border: 1px solid #334155;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.taller-column-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.taller-empty-state {
  padding: 30px 10px;
  text-align: center;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 600;
}

/* Card Styling */
.taller-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.taller-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.taller-card.is-urgent {
  border-left: 4px solid #ef4444;
  background: #fffafa;
}

.taller-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.taller-card-id {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.taller-card-id.urgent {
  color: #dc2626;
}

.fire-badge {
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
}

.taller-card-date {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
}

.taller-card-client {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.taller-card-itembox {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

.taller-item-title {
  font-weight: 700;
  font-size: 0.78rem;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-items {
  color: #64748b;
  font-weight: 600;
}

.taller-item-dims {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--primary);
  margin-top: 2px;
}

.taller-card-process-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.72rem;
}

.taller-process-text {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.taller-operator-pill {
  background: #f1f5f9;
  color: var(--text-main);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.taller-card-actions {
  display: flex;
  gap: 4px;
  border-top: 1px solid #f1f5f9;
  padding-top: 6px;
}

.taller-action-btn {
  flex: 1;
  height: 26px;
  padding: 0 4px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.taller-action-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: var(--text-main);
}

.taller-action-btn.next-step {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.taller-action-btn.next-step:hover {
  background: #0063b1;
}

/* Fix folio nowrap and header spacing */
.taller-card-id {
  white-space: nowrap !important;
  flex-shrink: 0;
}

.taller-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: nowrap;
}

.fire-badge {
  white-space: nowrap !important;
  font-size: 0.6rem !important;
  padding: 1px 4px !important;
}

.taller-card-date {
  white-space: nowrap !important;
  font-size: 0.68rem !important;
  padding: 1px 5px !important;
}

/* ==========================================================================
   TV WORKSHOP / KIOSK FULLSCREEN MODE STYLES
   ========================================================================== */

body.tv-kiosk-mode .sidebar {
  display: none !important;
}

body.tv-kiosk-mode .app-layout {
  padding-left: 0 !important;
}

body.tv-kiosk-mode .main-wrapper {
  padding: 12px 16px !important;
  max-width: 100vw !important;
}

body.tv-kiosk-mode .taller-tv-toolbar {
  padding: 8px 16px !important;
  margin-bottom: 12px !important;
  background: var(--text-main) !important;
  color: #ffffff !important;
  border: none !important;
}

body.tv-kiosk-mode .taller-tv-title {
  color: #ffffff !important;
  font-size: 1.25rem !important;
}

body.tv-kiosk-mode .taller-tv-subtitle {
  color: #94a3b8 !important;
}

body.tv-kiosk-mode .taller-kanban-board {
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 10px !important;
  height: calc(100vh - 85px) !important;
  padding-bottom: 0 !important;
}

body.tv-kiosk-mode .taller-column {
  min-height: auto !important;
  height: 100% !important;
  padding: 8px !important;
}

body.tv-kiosk-mode .taller-card {
  padding: 8px 10px !important;
}

body.tv-kiosk-mode .taller-card-id {
  font-size: 1.05rem !important;
}

body.tv-kiosk-mode .taller-card-client {
  font-size: 1rem !important;
}

body.tv-kiosk-mode .taller-item-dims {
  font-size: 0.82rem !important;
}

/* Clock in TV mode */
.tv-digital-clock {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--electric-cyan);
  background: rgba(0, 120, 212, 0.15);
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 210, 255, 0.3);
}

/* ==========================================================================
   MOBILE-FIRST RESPONSIVE OPTIMIZATION
   ========================================================================== */

/* Barra superior móvil con botón de menú (oculta en escritorio) */
.mobile-topbar {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  .app-layout {
    padding-left: 0 !important;
    padding-top: 54px; /* deja espacio para .mobile-topbar fija */
    overflow-x: hidden;
  }

  /* Barra superior fija con botón hamburguesa */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 3px;
    left: 0;
    right: 0;
    height: 51px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 14px;
    z-index: 1150;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mobile-topbar-brand {
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.3px;
  }

  /* Sidebar como cajón deslizante superpuesto (no oculto) */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    height: 100vh;
    max-height: none;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1300;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(9,14,26,0.6);
    z-index: 1250;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .main-wrapper {
    padding: 10px 12px 70px 12px !important;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Toolbar del Kanban (Pedidos): los selects de operador/fase y el buscador
     usan ancho fijo en px (pensado para escritorio) que en móvil corta el
     texto ("Todos los operador..."). Se fuerzan a ancho completo apilado. */
  #kanban-operator-filter,
  #kanban-dept-filter,
  .taller-search-wrap {
    width: 100% !important;
  }

  /* Tablas lado a lado de Reportes (Top Clientes/Productos, Operador/Producción):
     en móvil 1fr 1fr deja cada columna demasiado angosta y corta el texto. */
  .reports-grid-2col {
    grid-template-columns: 1fr !important;
  }

  /* El detalle de pedido (dos columnas) se apila en pantallas angostas.
     Sin esto, "Historial & Notas" queda pegado justo debajo del flujo de
     producción, como si fuera la misma sección continua. */
  .order-modal-body {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
  }

  .order-modal-col-main {
    border-right: none !important;
  }

  .order-modal-col-chatter {
    border-top: 8px solid var(--bg-app);
    background: #fbfbfc;
  }

  .chatter-panel-header {
    cursor: pointer;
  }

  .chatter-toggle-btn {
    display: flex !important;
  }

  .chatter-collapsed #chatter-feed,
  .chatter-collapsed #chatter-note-box {
    display: none !important;
  }

  /* Encabezados con título + botones de acción: si no caben en una línea,
     que bajen a una segunda fila en vez de recortarse fuera de la vista
     (afecta el modal de detalle de pedido y la Ficha OT). */
  .order-modal-header,
  .ot-sheet-header {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }
  .order-modal-header-actions,
  .ot-sheet-header-actions {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }

  /* Modales como bottom sheet en móvil (anclados abajo, esquinas superiores
     redondeadas, manija de arrastre) en vez de recortarse o taparlo todo
     como una pantalla completa sin indicar que se puede cerrar.
     z-index por encima de la barra superior (1150) y del cajón (1300):
     un modal abierto debe quedar siempre visible por completo. */
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
    z-index: 1400;
  }

  .modal-dialog,
  .modal-dialog.modal-lg {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }

  .modal-drag-handle {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
    cursor: grab;
    touch-action: none;
  }

  .modal-drag-handle::after {
    content: '';
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-medium);
  }

  /* Formularios a una sola columna e inputs con área táctil mínima de 44px */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  .form-control,
  .search-input,
  select.form-control {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 16px; /* evita el zoom automático de iOS al enfocar */
  }

  /* Tablas de datos como listas legibles en vez de scroll horizontal */
  .table-responsive {
    overflow-x: visible;
  }

  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr {
    display: block;
    width: 100%;
  }

  .data-table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .data-table tr:last-child {
    border-bottom: none;
  }

  .data-table tr:hover td {
    background: none;
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 16px;
    border-bottom: none;
    text-align: right;
  }

  .data-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    text-align: left;
    margin-right: auto;
  }

  /* Tarjeta de Ventas: en escritorio son columnas lado a lado con separadores
     verticales; en móvil eso se sale de la pantalla, así que se apilan a
     ancho completo y los separadores pasan a ser líneas horizontales. */
  .sale-card {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
  }

  .sale-card-meta,
  .sale-card-client,
  .sale-card-items,
  .sale-card-amount,
  .sale-card-actions {
    min-width: 0;
    width: 100%;
    border-left: none;
    padding-left: 0;
    text-align: left;
  }

  .sale-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .sale-card-amount {
    text-align: left;
    border-top: 1px dashed var(--border-subtle);
    padding-top: 8px;
  }

  .sale-card-actions {
    flex-direction: row;
    border-top: 1px solid var(--border-subtle);
    padding-top: 8px;
  }

  .sale-card-actions button {
    flex: 1;
    width: auto;
  }

  /* Cotizaciones puede llegar a mostrar 4 botones con textos largos (Ver
     Cotización, Enviar WhatsApp, Pasar a Pedido, Marcar Rechazada) — en fila
     no caben, así que aquí se quedan apilados a ancho completo. */
  .quote-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
  }

  .quote-card-meta,
  .quote-card-client,
  .quote-card-items,
  .quote-card-amount,
  .quote-card-actions {
    min-width: 0;
    width: 100%;
    border-left: none;
    padding-left: 0;
    text-align: left;
  }

  .quote-card-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
  }

  .quote-card-meta > div:first-child {
    margin: 0 !important;
  }

  .quote-card-amount {
    text-align: left;
    border-top: 1px dashed var(--border-subtle);
    padding-top: 8px;
  }

  .quote-card-actions {
    border-top: 1px solid var(--border-subtle);
    padding-top: 8px;
  }

  .taller-tv-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .taller-tv-actions {
    flex-wrap: wrap;
  }

  .taller-search-wrap {
    width: 100%;
  }

  .taller-select-control {
    flex: 1;
  }

  .taller-kanban-board {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Mobile Bottom Navigation Bar */
  .mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--text-main);
    border-top: 1px solid #334155;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
  }

  .mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 700;
    gap: 2px;
    flex: 1;
    height: 100%;
  }

  .mobile-nav-btn.active,
  .mobile-nav-btn:hover {
    color: var(--electric-cyan);
  }
}

/* ==========================================================================
   COTIZACIONES FORMALES - ESTILOS DE MEMBRETE & LIVE PREVIEW
   ========================================================================== */

/* Contenedor de Vista Previa en Vivo */
.quote-live-preview-box {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  max-height: 820px;
  overflow-y: auto;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Membrete Estilo 1: Azul Eléctrico Moderno */
.quote-sheet-modern {
  background: #ffffff;
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border-top: 5px solid var(--primary);
  font-family: var(--font-main);
  color: var(--text-main);
}

.quote-sheet-modern .quote-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

/* Membrete Estilo 2: Corporativo Clásico */
.quote-sheet-classic {
  background: #ffffff;
  border: 2px solid var(--text-main);
  border-radius: 0;
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  font-family: var(--font-main);
  color: var(--text-main);
}

.quote-sheet-classic .quote-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--text-main);
  padding-bottom: 14px;
  margin-bottom: 16px;
  text-align: center;
}

/* Membrete Estilo 3: Taller Técnico Minimal */
.quote-sheet-tech {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: 6px solid var(--text-main);
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  font-family: var(--font-main);
  color: var(--text-main);
}

.quote-sheet-tech .quote-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px dashed #64748b;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

/* Estilos de selector de membrete */
.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.theme-card-option {
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: #ffffff;
  transition: all 0.2s;
}

.theme-card-option:hover {
  border-color: #93c5fd;
}

.theme-card-option.active {
  border-color: var(--primary);
  background: #eff6ff;
  color: var(--primary);
}

/* ==========================================================================
   HIGH-END A4 PRINT & PDF DOCUMENT STYLES
   ========================================================================== */

/* The Modal Viewer Container */
.quote-modal-container {
  background: #ffffff;
  border-radius: 12px;
  max-width: 860px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid #cbd5e1;
  /* Un item flex sin min-height:0 se niega a encogerse por debajo del alto
     de su propio contenido, aunque el padre tenga max-height — eso hacía
     que cotizaciones largas se recortaran de raíz en vez de dar scroll. */
  min-height: 0;
}

.quote-modal-toolbar {
  background: var(--text-main);
  color: #ffffff;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--primary);
  flex-wrap: wrap;
  gap: 10px;
}

.quote-modal-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.quote-modal-body {
  padding: 24px;
  background: #f8fafc;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  /* Sin esto, el align-items:stretch por defecto (eje cruzado de un
     flex-container fila) ESTIRA la hoja de la cotización a la altura
     visible del modal — y como la hoja tiene overflow:hidden inline (solo
     para redondear las esquinas del membrete), esa altura forzada recortaba
     todo el contenido de más ahí mismo, antes de que este contenedor
     siquiera detectara que había algo que hacer scroll. */
  align-items: flex-start;
}

/* Authentic A4 Paper Sheet */
.a4-quote-sheet {
  background: #ffffff;
  width: 100%;
  max-width: 780px;
  padding: 36px 40px;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  font-family: var(--font-main);
  color: var(--text-main);
  box-sizing: border-box;
}

/* Document Header */
.a4-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 18px;
  margin-bottom: 20px;
}

.a4-logo-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

.a4-logo-slogan {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 2px;
}

.a4-company-info {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
  margin-top: 6px;
}

.a4-folio-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-top: 4px solid var(--primary);
  border-radius: 6px;
  padding: 10px 16px;
  text-align: right;
  min-width: 200px;
}

.a4-folio-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.a4-folio-number {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--primary);
  font-family: var(--font-mono);
  margin: 2px 0;
}

.a4-folio-date {
  font-size: 0.74rem;
  color: #475569;
}

/* Client & Terms Grid */
.a4-info-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.a4-info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.78rem;
}

.a4-card-title {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.a4-info-line {
  margin-bottom: 4px;
  color: #334155;
}

.a4-info-line strong {
  color: var(--text-main);
}

/* Formal Document Table */
.a4-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 0.8rem;
}

.a4-table th {
  background: var(--text-main);
  color: #ffffff;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  border: 1px solid var(--text-main);
  text-align: left;
}

.a4-table td {
  padding: 10px;
  border: 1px solid #cbd5e1;
  color: #334155;
  vertical-align: top;
}

.a4-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

/* Totals Summary */
.a4-totals-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.a4-totals-box {
  width: 280px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
}

.a4-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  font-size: 0.82rem;
  border-bottom: 1px solid #f1f5f9;
}

.a4-totals-row.final {
  background: #eff6ff;
  border-top: 2px solid var(--primary);
  border-bottom: none;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--primary);
  padding: 10px 12px;
}

.a4-deposit-notice {
  background: #f0fdf4;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  text-align: right;
  border-top: 1px solid #bbf7d0;
}

/* Bank Terms & Signatures */
.a4-terms-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.72rem;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 24px;
}

.a4-signatures-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-top: 20px;
}

.a4-signature-col {
  text-align: center;
}

.a4-signature-line {
  border-top: 1px solid #94a3b8;
  margin-bottom: 6px;
}

.a4-signature-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-main);
}

.a4-signature-sub {
  font-size: 0.68rem;
  color: #64748b;
}

/* PRINT CSS CLEANUP - MUST HIDE ALL MODAL OVERLAYS & UI CONTROLS
   ==========================================================================
   Todo documento imprimible (cotización, recibo de abono, Corte Z, ficha OT,
   ticket de venta, reporte) lleva la clase .printable-doc y vive en uno de
   dos lugares: dentro de #receipt-modal (el modal genérico), o dentro de la
   vista normal de la app (el caso de Reportes). Dos problemas se arreglaron
   aquí:
   1) display:none en un ANCESTRO del documento gana siempre sobre cualquier
      visibility:visible en un descendiente — por eso nunca se puede poner
      #receipt-modal, .app-layout o .main-wrapper en la lista de "ocultar
      todo", solo lo que es HERMANO del documento (sidebar, topbar, barra de
      botones, toast).
   2) position:absolute en el documento (el truco clásico para "imprimir
      solo este elemento") saca al documento del flujo normal, y un
      elemento fuera de flujo NO pagina — el motor de impresión lo mete
      entero en una sola hoja y todo lo que exceda esa hoja se PIERDE, no
      solo se recorta visualmente. Por eso una cotización con muchos ítems
      nunca generaba una segunda página. La solución es dejar el documento
      y toda su cadena de contenedores en flujo normal (position:static,
      overflow:visible, sin max-height) para que el navegador reparta el
      contenido en tantas páginas como haga falta.
   ========================================================================== */
@media print {
  body * {
    visibility: hidden !important;
  }

  .printable-doc,
  .printable-doc * {
    visibility: visible !important;
  }

  .printable-doc {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* Cadena de contenedores de AMBOS lugares donde puede vivir un documento
     imprimible — se resetean a flujo normal sin alto/overflow fijo para que
     el contenido pagine libremente en vez de truncarse en una sola hoja. */
  #receipt-modal,
  .modal-dialog,
  #receipt-modal-content,
  .quote-modal-container,
  .quote-modal-body,
  .printable-doc-wrap,
  .app-layout,
  .main-wrapper {
    position: static !important;
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
    inset: auto !important;
  }

  /* Todo lo demás que NO es ancestro de ningún documento imprimible sí
     puede (y debe) sacarse del flujo con display:none, para que no deje un
     hueco en blanco antes del documento real. */
  #login-screen,
  .app-stripe,
  .mobile-topbar,
  .mobile-bottom-bar,
  .sidebar-backdrop,
  .sidebar,
  .toast-container,
  .quote-modal-toolbar,
  .btn,
  #global-toast {
    display: none !important;
    visibility: hidden !important;
  }

  /* .app-layout (sidebar + la vista activa completa) se deja arriba en
     flujo normal porque #printable-report vive DENTRO de él, sin modal —
     pero cuando el documento que se imprime SÍ está en el modal genérico
     (cotización, recibo, Corte Z, ficha OT, ticket), la vista activa de
     atrás (Cotizaciones, Ventas, lo que sea) sigue invisible pero
     reservando su alto real, dejando una o más páginas en blanco antes del
     documento. Se oculta por completo solo en ese caso. */
  .app-layout:has(~ #receipt-modal.open) {
    display: none !important;
  }
}

/* ==========================================================================
   CONFIGURACIÓN - LAYOUT RESPONSIVE
   ========================================================================== */

.cfg-shell {
  display: flex;
  gap: 0;
  height: 100%;
  min-height: 580px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}

.cfg-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-radius: 12px 0 0 12px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cfg-sidebar-head {
  padding: 0 16px 16px;
  border-bottom: 1px solid #213c59;
  margin-bottom: 8px;
}

.cfg-sidebar-foot {
  padding: 12px 16px;
  border-top: 1px solid #213c59;
}

.cfg-tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: #64748b;
  font-family: var(--font-main);
  font-size: 0.83rem;
  font-weight: 500;
  text-align: left;
  width: 100%;
  transition: all 0.15s;
}

.cfg-tab-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
}

.cfg-tab-btn.active {
  background: rgba(0, 120, 212, 0.18);
  border-left-color: var(--primary);
  color: #79a3ff;
  font-weight: 700;
}

.cfg-tab-dot {
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.cfg-content {
  flex: 1;
  background: #f8fafc;
  border-radius: 0 12px 12px 0;
  padding: 28px;
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 768px) {
  .cfg-shell {
    flex-direction: column;
    min-height: 0;
    border-radius: 12px;
  }

  .cfg-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px 12px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cfg-sidebar-head,
  .cfg-sidebar-foot {
    display: none;
  }

  .cfg-tab-btn {
    width: auto;
    flex-shrink: 0;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 8px 12px;
    white-space: nowrap;
    border-radius: 8px;
  }

  .cfg-tab-btn.active {
    border-bottom-color: var(--primary);
  }

  .cfg-tab-dot {
    display: none;
  }

  .cfg-content {
    border-radius: 0 0 12px 12px;
    padding: 18px 16px 24px;
  }
}

/* ==========================================================================
   CONFIGURACIÓN - SELECTOR DE ESTILO DE MEMBRETE
   ========================================================================== */

.letterhead-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 820px;
}

@media (max-width: 768px) {
  .letterhead-picker-grid {
    grid-template-columns: 1fr;
  }
}

.letterhead-picker-card {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.letterhead-picker-card:hover {
  border-color: #93c5fd;
}

.letterhead-picker-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12);
}

.letterhead-picker-preview {
  height: 110px;
  overflow: hidden;
  position: relative;
  background: #f1f5f9;
  pointer-events: none;
}

.letterhead-picker-preview > div {
  transform: scale(0.34);
  transform-origin: top left;
  width: 294%;
}

.letterhead-picker-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  border-top: 1px solid #f1f5f9;
}

.letterhead-picker-card.active .letterhead-picker-label {
  color: var(--primary);
}

/* ===== Selector de cliente (client-picker.js) ===== */
.cp { position: relative; }
.cp-trigger { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #fff; border: 1.5px solid #cbd5e1; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, box-shadow .15s; }
.cp-trigger:hover, .cp-trigger:focus-visible { border-color: #0078d4; box-shadow: 0 0 0 3px rgba(0, 120, 212,.1); outline: none; }
.cp-trigger.is-empty { color: #64748b; border-style: dashed; padding: 12px; }
.cp-placeholder { font-weight: 600; font-size: .88rem; }
.cp-change { margin-left: auto; font-size: .72rem; font-weight: 800; color: #0078d4; }
.cp-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #e0e7ff; color: #0078d4; font-weight: 800; font-size: .78rem; display: flex; align-items: center; justify-content: center; }
.cp-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cp-name { font-weight: 800; font-size: .88rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-sub { font-size: .74rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-tier { font-size: .62rem; font-weight: 800; text-transform: uppercase; color: #475569; background: #f1f5f9; border-radius: 999px; padding: 2px 8px; }
.cp-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.18); overflow: hidden; }
.cp-panel[hidden] { display: none; }
.cp-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; color: #94a3b8; }
.cp-input { flex: 1; border: none; outline: none; font: inherit; font-size: .88rem; color: #0f172a; background: transparent; }
.cp-list { max-height: 264px; overflow-y: auto; padding: 4px; }
.cp-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; }
.cp-item:hover, .cp-item.is-active { background: #f1f5f9; }
.cp-item.is-selected { background: #eff6ff; }
.cp-empty { padding: 18px 12px; text-align: center; font-size: .8rem; color: #94a3b8; }
.cp-new { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: none; border-top: 1px solid #f1f5f9; background: #f8fafc; color: #0078d4; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.cp-new:hover { background: #eff6ff; }

/* Selector de clientes — encabezado de hoja, grupos y versión móvil */
.cp-sheet-head { display: none; }
.cp-group { position: sticky; top: 0; z-index: 1; padding: 8px 10px 4px; font-size: .64rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #94a3b8; background: #fff; }
.cp-check { width: 16px; height: 16px; color: #0078d4; flex-shrink: 0; }
.cp-search input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.cp-list { max-height: 320px; overscroll-behavior: contain; }
.cp-backdrop { position: fixed; inset: 0; background: rgba(9,14,26,.55); z-index: 1400; }
body.cp-lock { overflow: hidden; }
.cp-panel.is-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: 8vh; z-index: 1401; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.cp-panel.is-sheet[hidden] { display: none; }
.cp-panel.is-sheet .cp-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; font-size: 1rem; color: #0f172a; }
.cp-close { width: 36px; height: 36px; border: none; border-radius: 50%; background: #f1f5f9; color: #475569; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cp-panel.is-sheet .cp-search { margin: 6px 16px 8px; padding: 10px 12px; border: 1.5px solid #cbd5e1; border-radius: 12px; background: #f8fafc; }
.cp-panel.is-sheet .cp-input { font-size: 16px; } /* 16px evita el zoom automático de iOS */
.cp-panel.is-sheet .cp-list { flex: 1; max-height: none; min-height: 0; padding: 0 8px 8px; -webkit-overflow-scrolling: touch; }
.cp-panel.is-sheet .cp-item { padding: 12px 10px; min-height: 58px; }
.cp-panel.is-sheet .cp-name { font-size: .95rem; }
.cp-panel.is-sheet .cp-new { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); font-size: .9rem; }

/* RRHH */
.hr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.hr-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; }
.hr-card.is-inactive { opacity: .6; }
.hr-avatar { width: 42px; height: 42px; border-radius: 11px; background: #eef2ff; color: #0078d4; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 8px; }
.hr-stats > div { background: #f8fafc; border-radius: 8px; padding: 7px 9px; display: flex; flex-direction: column; }
.hr-stats span { font-size: .62rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; }
.hr-stats strong { font-size: .88rem; color: #0f172a; }
.hr-summary { display: grid; grid-template-columns: 1fr 1fr 1.2fr; border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; }
.hr-summary > div { background: #fff; padding: 10px 12px; display: flex; flex-direction: column; }
.hr-summary > div.is-net { background: #0078d4; }
.hr-summary span { font-size: .64rem; font-weight: 800; color: #64748b; text-transform: uppercase; }
.hr-summary .is-net span { color: #c7d2fe; }
.hr-summary strong { font-size: 1rem; font-weight: 900; color: #0f172a; }
@media (max-width: 520px) { .hr-summary { grid-template-columns: 1fr 1fr; } .hr-summary .is-net { grid-column: 1 / -1; } }

/* Permisos por sección (Configuración > Usuarios) */
.perm-views-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 12px 16px 4px; }
.perm-view-chip { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: .8rem; font-weight: 700; color: #475569; cursor: pointer; user-select: none; }
.perm-view-chip:has(input:checked) { border-color: #0078d4; background: #eff6ff; color: #0078d4; }
.perm-view-chip input { accent-color: #0078d4; }

.hr-import-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
@media (max-width: 520px) { .hr-import-row > div:last-child { width: 100%; } .hr-import-row .imp-salary, .hr-import-row .imp-freq { flex: 1; width: auto !important; } }

.hr-sch { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; font-weight: 800; color: #64748b; text-transform: uppercase; }
.hr-sch input { width: 130px; }
.hr-ot-preview { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 12px 14px; font-size: .82rem; }
@media (max-width: 520px) { .hr-sch { flex: 1; } .hr-sch input { width: 100%; } }