@charset "UTF-8";
/* 
 * ==========================================
 * SISTEMA DE DISEÑO — LATALAYA PANEL
 * Colores corporativos: Azul #3d90cc + Magenta #e91c8e
 * ==========================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ── VARIABLES DE MARCA ───────────────────── */
:root {
  /* Paleta Light */
  --bg-primary:     #f0f5fb;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f5f9ff;
  --text-primary:   #0d1f33;
  --text-secondary: #4a6080;
  --text-muted:     #8fa8c2;
  --border-color:   #d8e6f3;
  --input-bg:       #f5f9ff;
  --input-focus-border: #3d90cc;

  /* ── COLORES LATALAYA ── */
  --color-primary:        #3d90cc;   /* Azul corporativo Latalaya */
  --color-primary-hover:  #2d7ab5;
  --color-primary-rgb:    61, 144, 204;
  --color-primary-light:  rgba(61, 144, 204, 0.12);

  --color-accent:         #e91c8e;   /* Magenta / rosa corporativo */
  --color-accent-hover:   #c91578;
  --color-accent-light:   rgba(233, 28, 142, 0.1);

  --color-secondary:      #5aa8d8;   /* Azul claro */
  --color-secondary-hover:#3d90cc;
  --color-success:        #10b981;
  --color-success-hover:  #059669;
  --color-warning:        #f59e0b;
  --color-danger:         #ef4444;
  --color-purple:         #7c6fe0;

  /* Sidebar */
  --sidebar-width:        220px;
  --sidebar-bg:           #081828;    /* Navy oscuro que armoniza con el azul */
  --sidebar-border:       rgba(255,255,255,0.06);
  --sidebar-text:         #7a9ab8;
  --sidebar-text-active:  #ffffff;
  --sidebar-accent:       rgba(61, 144, 204, 0.18);
  --sidebar-icon:         #4a6a88;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(61,144,204,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 8px -1px rgba(61,144,204,0.1), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 20px -3px rgba(61,144,204,0.12), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 30px -5px rgba(61,144,204,0.15), 0 10px 15px rgba(0,0,0,0.06);

  /* Glassmorphism */
  --glass-bg:       rgba(255,255,255,0.78);
  --glass-border:   rgba(255,255,255,0.65);
  --backdrop-blur:  18px;

  /* Radios */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  /* Transiciones */
  --transition-fast:   0.15s cubic-bezier(0.4,0,0.2,1);
  --transition-normal: 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── DARK MODE ─────────────────────────────── */
body.dark-mode {
  --bg-primary:     #060f1c;
  --bg-card:        #0d1e30;
  --bg-card-hover:  #122434;
  --text-primary:   #e8f2fc;
  --text-secondary: #7a9ab8;
  --text-muted:     #3d5a74;
  --border-color:   #162535;
  --input-bg:       #091524;
  --input-focus-border: #5aa8d8;

  --glass-bg:     rgba(13,30,48,0.82);
  --glass-border: rgba(255,255,255,0.04);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px -1px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 20px -3px rgba(0,0,0,0.6);
  --shadow-xl: 0 20px 30px -5px rgba(0,0,0,0.65);
}

/* ── RESET ─────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════
   LAYOUT PRINCIPAL
════════════════════════════════════════════ */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ── SIDEBAR ──────────────────────────────── */
.app-sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: left var(--transition-normal);
  overflow: hidden;
}

.sidebar-brand {
  padding: 1.1rem 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-brand .logo-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-brand .brand-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.sidebar-brand .brand-accent {
  color: var(--color-accent);
}

.sidebar-brand .brand-sub {
  font-size: 0.6rem;
  color: var(--sidebar-text);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.55rem;
  gap: 1px;
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.nav-section-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #2a4a66;
  padding: 0.85rem 0.65rem 0.3rem;
  display: block;
}

.nav-item {
  border: none;
  background: none;
  padding: 0.52rem 0.7rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.81rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--sidebar-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all var(--transition-fast);
  text-align: left;
  width: 100%;
  position: relative;
}

.nav-item svg {
  flex-shrink: 0;
  color: var(--sidebar-icon);
  transition: color var(--transition-fast);
}

.nav-item:hover {
  color: #c5dff0;
  background: rgba(61, 144, 204, 0.08);
}

.nav-item:hover svg { color: #7ab8dc; }

.nav-item.active {
  background: var(--sidebar-accent);
  color: #a8d4ef;
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2.5px;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
}

.nav-item.active svg { color: #6bbde0; }

.nav-badge {
  margin-left: auto;
  background: var(--color-accent);
  color: white;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.1rem 0.38rem;
  border-radius: 20px;
  min-width: 16px;
  text-align: center;
}

.sidebar-footer {
  padding: 0.7rem 0.75rem;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  background: rgba(0,0,0,0.25);
  flex-shrink: 0;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  min-width: 0;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.user-info { display: flex; flex-direction: column; min-width: 0; }

.user-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: #cce0f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role { font-size: 0.62rem; color: #2a4a66; font-weight: 500; }

.btn-logout {
  background: none;
  border: none;
  cursor: pointer;
  color: #2a4a66;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem;
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.btn-logout:hover {
  color: var(--color-accent);
  background: rgba(233, 28, 142, 0.12);
}

/* ── MAIN CONTENT ──────────────────────────── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  transition: margin-left var(--transition-normal);
}

/* ── TOP HEADER ────────────────────────────── */
.content-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  border-bottom: 1px solid var(--border-color);
  padding: 0 1.5rem;
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background var(--transition-normal), border var(--transition-normal);
}

.view-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.header-actions { display: flex; align-items: center; gap: 0.55rem; }

.menu-toggle-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.menu-toggle-btn:hover { background: var(--bg-card-hover); }

.content-body {
  flex: 1;
  padding: 1.4rem;
  width: 100%;
}

.theme-toggle-btn {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.theme-toggle-btn:hover { background: var(--bg-card-hover); color: var(--color-primary); }

/* ── CONNECTION STATUS ─────────────────────── */
.connection-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-xl);
  font-size: 0.7rem;
  font-weight: 600;
}

.connection-status.online  { background: rgba(16,185,129,0.1); color: var(--color-success); }
.connection-status.offline { background: rgba(239,68,68,0.1);  color: var(--color-danger); }

.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-dot.ping { animation: pulse-ping 2s infinite ease-in-out; }

@keyframes pulse-ping {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50%       { transform: scale(1.3); opacity: 1; }
}

/* ── VIEW PANELS ──────────────────────────── */
.view-panel { display: none; animation: fadeInUp var(--transition-normal) forwards; }
.view-panel.active { display: block; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   LOGIN SCREEN
════════════════════════════════════════════ */
.login-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #f0f5fb 0%, #e4f0fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1.5rem;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-logo {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ═══════════════════════════════════════════
   KPI / STATS CARDS
════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card:hover::after { opacity: 1; }

.kpi-card.blue::after    { background: var(--color-primary); }
.kpi-card.emerald::after { background: var(--color-success); }
.kpi-card.amber::after   { background: var(--color-warning); }
.kpi-card.indigo::after  { background: var(--color-accent); }
.kpi-card.pink::after    { background: var(--color-accent); }

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icon.blue    { background: rgba(61,144,204,0.12); color: var(--color-primary); }
.kpi-icon.emerald { background: rgba(16,185,129,0.1);  color: var(--color-success); }
.kpi-icon.amber   { background: rgba(245,158,11,0.1);  color: var(--color-warning); }
.kpi-icon.indigo  { background: rgba(233,28,142,0.1);  color: var(--color-accent); }
.kpi-icon.pink    { background: rgba(233,28,142,0.1);  color: var(--color-accent); }

.kpi-value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  font-family: 'Outfit', sans-serif;
}

.kpi-label {
  font-size: 0.73rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════
   ALERTS / NOTIFICATIONS
════════════════════════════════════════════ */
.alert-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 420px;
  overflow-y: auto;
}

.alert-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
  animation: slideIn 0.3s ease;
}

.alert-item:hover { transform: translateX(2px); }
.alert-item.danger-alert { border-left-color: var(--color-danger); }

.alert-info { flex: 1; }
.alert-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.2rem; }
.alert-desc  { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.alert-actions { display: flex; gap: 0.4rem; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════
   FORMS & INPUTS
════════════════════════════════════════════ */
.form-group { margin-bottom: 1.1rem; width: 100%; }

.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.33rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.form-control {
  width: 100%;
  padding: 0.62rem 0.85rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(61, 144, 204, 0.15);
  background: var(--bg-card);
}

.form-control:disabled { opacity: 0.55; cursor: not-allowed; }

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

.is-invalid { border-color: var(--color-danger) !important; }

.invalid-feedback { color: var(--color-danger); font-size: 0.72rem; margin-top: 0.2rem; display: block; }

/* ═══════════════════════════════════════════
   PHONE PICKER WIDGET
════════════════════════════════════════════ */

/* Stacks phone and email vertically to avoid squishing the phone picker and email field */
.phone-email-row {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}

.phone-input-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  overflow: visible;
  height: 41px;
}
.phone-input-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(61, 144, 204, 0.15);
  background: var(--bg-card);
}

.phone-country-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0.85rem;
  min-width: 85px;
  background: var(--bg-card-hover);
  border: none;
  border-right: 1px solid var(--border-color);
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.phone-country-btn:hover,
.phone-country-btn:focus-visible { background: rgba(61,144,204,0.09); outline: none; }
.phone-country-btn:active { transform: scale(0.97); }

#phone-flag {
  font-size: 1.25rem;     /* emoji flag grande y claro */
  line-height: 1;
  display: inline-block;
}
#phone-prefix {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.phone-country-btn svg { flex-shrink: 0; opacity: 0.45; }

.phone-number-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 0.85rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;        /* matches .form-control font-size */
  font-weight: 500;
  color: var(--text-primary);
  outline: none;
  min-width: 0;
  letter-spacing: 0.02em;
}
.phone-number-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.875rem;
}

/* Dropdown */
.phone-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 400;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  width: 300px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  animation: fadeInUp 0.14s ease;
}
@media (max-width: 560px) {
  .phone-dropdown {
    width: calc(100vw - 48px);
    left: 0;
  }
}

.phone-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  background: var(--input-bg);
}
.phone-country-search {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.875rem;
  color: var(--text-primary);
  width: 100%;
  font-family: 'Inter', sans-serif;
}
.phone-country-search::placeholder { color: var(--text-muted); }

.phone-country-list {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.phone-country-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: background var(--transition-fast);
  user-select: none;
}
.phone-country-option:hover  { background: var(--bg-card-hover); }
.phone-country-option.selected {
  background: rgba(61,144,204,0.12);
  color: var(--color-primary);
  font-weight: 600;
}
.phone-country-option .c-flag  { font-size: 1.25rem; flex-shrink: 0; line-height: 1; }
.phone-country-option .c-name  { flex: 1; }
.phone-country-option .c-dial  {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.btn {
  padding: 0.58rem 1.05rem;
  border-radius: var(--radius-xs);
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  justify-content: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 3px 12px rgba(61,144,204,0.35);
}

.btn-accent { background: var(--color-accent); color: white; border-color: var(--color-accent); }
.btn-accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: 0 3px 12px rgba(233,28,142,0.35);
}

.btn-secondary {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.btn-secondary:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.btn-success { background: var(--color-success); color: white; border-color: var(--color-success); }
.btn-success:hover { background: var(--color-success-hover); box-shadow: 0 3px 10px rgba(16,185,129,0.3); }

.btn-danger { background: rgba(239,68,68,0.1); color: var(--color-danger); border-color: rgba(239,68,68,0.2); }
.btn-danger:hover { background: var(--color-danger); color: white; border-color: var(--color-danger); }

.btn-sm { padding: 0.33rem 0.7rem; font-size: 0.76rem; }

/* ═══════════════════════════════════════════
   TABLE TOOLBAR & TABLES
════════════════════════════════════════════ */
.table-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  box-shadow: var(--shadow-sm);
}

.table-responsive {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  margin-bottom: 1.4rem;
}

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

.admin-table th {
  background: var(--bg-card-hover);
  padding: 0.75rem 0.95rem;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.admin-table td {
  padding: 0.78rem 0.95rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  white-space: nowrap;
}

.admin-table tbody tr { transition: background var(--transition-fast); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr.clickable-row { cursor: pointer; }
.admin-table tbody tr.clickable-row:hover { background: var(--bg-card-hover); }

/* ── BADGES ──────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.17rem 0.52rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
}

.badge-success { background: rgba(16,185,129,0.1);  color: var(--color-success); }
.badge-warning { background: rgba(245,158,11,0.1);  color: var(--color-warning); }
.badge-danger  { background: rgba(239,68,68,0.1);   color: var(--color-danger); }
.badge-info    { background: rgba(61,144,204,0.12); color: var(--color-primary); }
.badge-accent  { background: rgba(233,28,142,0.1);  color: var(--color-accent); }

/* Estado badges - cliente workflow */
.estado-pendiente-medicion  { background: rgba(245,158,11,0.12); color: #b45309; }
.estado-medido              { background: rgba(61,144,204,0.12);  color: var(--color-primary); }
.estado-presupuesto-pendiente { background: rgba(124,111,224,0.12); color: #6d56d6; }
.estado-espera-respuesta    { background: rgba(245,158,11,0.15); color: #92400e; border: 1px solid rgba(245,158,11,0.3); }
.estado-presupuesto-aceptado  { background: rgba(16,185,129,0.12);  color: var(--color-success); }
.estado-presupuesto-rechazado { background: rgba(239,68,68,0.12);   color: var(--color-danger); }

body.dark-mode .estado-pendiente-medicion  { background: rgba(245,158,11,0.18); color: #fbbf24; }
body.dark-mode .estado-medido              { background: rgba(61,144,204,0.18);  color: #7dd3fc; }
body.dark-mode .estado-presupuesto-pendiente { background: rgba(124,111,224,0.18); color: #a78bfa; }
body.dark-mode .estado-espera-respuesta    { background: rgba(245,158,11,0.2); color: #fcd34d; }
body.dark-mode .estado-presupuesto-aceptado  { background: rgba(16,185,129,0.18);  color: #34d399; }
body.dark-mode .estado-presupuesto-rechazado { background: rgba(239,68,68,0.18);   color: #f87171; }

/* ═══════════════════════════════════════════
   LAYOUT PANELS
════════════════════════════════════════════ */
.split-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 1.2rem; }

@media (max-width: 992px) { .split-layout { grid-template-columns: 1fr; } }

.card-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
}

.card-panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-primary);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════
   MODALS
════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 15, 28, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  padding: 1.5rem;
}

.modal-backdrop.active { opacity: 1; pointer-events: all; }

.modal-window {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--transition-normal);
}

.modal-backdrop.active .modal-window { transform: translateY(0) scale(1); }

.modal-header {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title { font-size: 1rem; font-weight: 700; }

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}

.modal-close-btn:hover { background: var(--bg-card-hover); color: var(--color-accent); }

.modal-body { padding: 1.2rem; }

.modal-footer {
  padding: 0.85rem 1.2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* ═══════════════════════════════════════════
   PHOTO GALLERY & UPLOAD
════════════════════════════════════════════ */
.photo-upload-btn-area {
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  text-align: center;
  cursor: pointer;
  background: var(--input-bg);
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.photo-upload-btn-area:hover {
  border-color: var(--color-primary);
  background: rgba(61,144,204,0.05);
  transform: translateY(-1px);
}

.upload-title   { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.upload-subtitle{ font-size: 0.67rem; color: var(--text-muted); }

.photo-gallery-categorized {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.photo-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-category-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(6,15,28,0.78);
  color: white;
  font-size: 0.63rem;
  font-weight: 600;
  text-align: center;
  padding: 0.2rem;
}

.photo-card .remove-btn {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(239,68,68,0.92);
  color: white;
  border: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* ═══════════════════════════════════════════
   RENTABILIDAD FINANCIAL
════════════════════════════════════════════ */
.margin-meter-container { margin-top: 0.75rem; }

.margin-meter-bar {
  height: 6px;
  border-radius: 10px;
  background: var(--border-color);
  overflow: hidden;
  margin-bottom: 0.2rem;
}

.margin-meter-fill { height: 100%; border-radius: 10px; transition: width var(--transition-normal); }
.margin-meter-fill.success { background: var(--color-success); }
.margin-meter-fill.warning { background: var(--color-warning); }
.margin-meter-fill.danger  { background: var(--color-danger); }

/* Pedido row card en rentabilidad */
.rent-pedido-row {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all var(--transition-fast);
}

.rent-pedido-row:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════
   TOAST NOTIFICATIONS
════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: none;
}
@media (max-width: 600px) {
  #toast-container {
    bottom: auto;
    top: 1.2rem;
    right: 1.2rem;
    left: 1.2rem;
    align-items: center;
  }
}

.toast-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 0.72rem 1rem;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  animation: slideInRight 0.25s ease forwards;
  pointer-events: all;
  min-width: 250px;
  max-width: 370px;
}

.toast-item.error   { border-left-color: var(--color-danger); }
.toast-item.success { border-left-color: var(--color-success); }
.toast-item.warning { border-left-color: var(--color-warning); }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ═══════════════════════════════════════════
   WORKER CLIENT CARDS
════════════════════════════════════════════ */
.worker-client-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.05rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.worker-client-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.worker-client-card .card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.worker-client-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.2rem;
}

.worker-client-name { font-size: 0.92rem; font-weight: 700; }

.worker-client-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 900px) {
  .app-sidebar {
    left: calc(-1 * var(--sidebar-width));
    box-shadow: none;
  }
  .app-sidebar.active { left: 0; box-shadow: var(--shadow-xl); }
  .main-content { margin-left: 0; }
  .menu-toggle-btn { display: flex; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 560px) {
  .content-body { padding: 1rem 0.85rem; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   ENCABEZADOS DE SECCIÓN INLINE
════════════════════════════════════════════ */
.view-header-inline {
  margin-bottom: 1.25rem;
}
.view-header-inline .view-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}
.view-header-inline .view-subheading {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* ═══════════════════════════════════════════
   SPLIT LAYOUT (Pedidos / Equipo)
════════════════════════════════════════════ */
.split-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  .split-layout {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════
   CARD PANEL
════════════════════════════════════════════ */
.card-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow-sm);
}

.card-panel-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════
   PICKER DE CLIENTE (Confirmación de Pedido)
════════════════════════════════════════════ */
.picker-client-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--bg-card);
  user-select: none;
}

.picker-client-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  transform: translateX(2px);
}

.picker-client-card.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
}

.picker-client-card .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.02em;
}

.picker-client-card.active .avatar {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.4);
}

.picker-client-card .info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.picker-client-card .info .name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.12rem;
}

.picker-client-card.active .info .name {
  color: var(--color-primary);
}

.picker-client-card .info .meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════
   ALERT / NOTIFICACIONES LIST
════════════════════════════════════════════ */
.alert-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* ═══════════════════════════════════════════
   STATUS DOT (Sidebar)
════════════════════════════════════════════ */
.sidebar-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.sidebar-status-dot.online  { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.3); }
.sidebar-status-dot.offline { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.3); }

/* ═══════════════════════════════════════════
   RESPONSIVE ADICIONAL MÓVIL
════════════════════════════════════════════ */
@media (max-width: 900px) {
  .view-header-inline .view-heading { font-size: 1.2rem; }
  .card-panel { padding: 0.85rem 0.9rem; }
}

@media (max-width: 560px) {
  .picker-client-card { padding: 0.55rem 0.6rem; gap: 0.6rem; }
  .picker-client-card .avatar { width: 32px; height: 32px; font-size: 0.75rem; }
  .picker-client-card .info .name { font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════
   MAP INTERACTIVE & LEAFLET CUSTOM STYLES
   ════════════════════════════════════════════ */
#modal-map-container {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.custom-leaflet-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}

.custom-leaflet-marker svg {
  filter: drop-shadow(0 3px 6px rgba(233,28,142,0.35));
  animation: markerBounce 0.3s ease-out;
}

@keyframes markerBounce {
  0% { transform: translateY(-12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btn-link-action:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.btn-link-action:active {
  transform: scale(0.97);
}

/* Adaptación de Leaflet al tema general del panel */
.leaflet-container {
  font-family: inherit !important;
}

.leaflet-control-attribution {
  font-size: 0.65rem !important;
  background: var(--glass-bg) !important;
  color: var(--text-muted) !important;
  border-top-left-radius: var(--radius-xs);
}

body.dark-mode .leaflet-bar a {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
body.dark-mode .leaflet-bar a:hover {
  background-color: var(--bg-card-hover) !important;
}
body.dark-mode .leaflet-bar {
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}
body.dark-mode .leaflet-container {
  background: var(--input-bg) !important;
}
body.dark-mode .leaflet-tile {
  filter: brightness(0.6) contrast(1.2) invert(1) hue-rotate(180deg);
}


@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CRM Client Status Badges */
.badge.estado-pendiente-medicion {
  background-color: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge.estado-medido {
  background-color: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.badge.estado-presupuesto-pendiente {
  background-color: rgba(162, 28, 175, 0.12);
  color: #a21caf;
  border: 1px solid rgba(162, 28, 175, 0.25);
}
.badge.estado-presupuesto-aceptado {
  background-color: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.badge.estado-presupuesto-rechazado {
  background-color: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.badge.estado-espera-respuesta {
  background-color: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.25);
}
.badge.estado-pendiente-pago {
  background-color: rgba(234, 88, 12, 0.12);
  color: #ea580c;
  border: 1px solid rgba(234, 88, 12, 0.25);
}
.badge.estado-pendiente-instalacion {
  background-color: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Estado En Fabricación */
.badge.estado-en-fabricacion,
.estado-presupuesto-en-fabricacion {
  background-color: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
body.dark-mode .badge.estado-en-fabricacion,
body.dark-mode .estado-presupuesto-en-fabricacion {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

/* Lightbox Modal */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 15, 28, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  padding: 1.5rem;
}
.lightbox-backdrop.active {
  opacity: 1;
  pointer-events: all;
}
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2xl);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.2s ease;
  border: 2px solid var(--border-color);
}
.lightbox-backdrop.active .lightbox-image {
  transform: translateY(0) scale(1);
}
.lightbox-close {
  position: absolute;
  top: -42px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}
.lightbox-close:hover {
  color: var(--color-accent);
}
.lightbox-caption {
  color: #cbd5e1;
  font-size: 0.82rem;
  margin-top: 0.75rem;
  text-align: center;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ==================================================
   KANBAN BOARD / TRELLO STYLE FOR PARTES
   ================================================== */

.kanban-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  align-items: flex-start;
  padding: 0.25rem 0.1rem 1rem;
  min-height: 560px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.kanban-board::-webkit-scrollbar { height: 6px; }
.kanban-board::-webkit-scrollbar-track { background: transparent; }
.kanban-board::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

/* ── Column ──────────────────────────────────── */
.kanban-column {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  /* top border set inline (colored per state) */
  border-top-width: 3px;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}

.kanban-column.drag-over {
  border-color: var(--color-primary) !important;
  background: rgba(61,144,204,0.06) !important;
  box-shadow: 0 0 0 2px rgba(61,144,204,0.18);
}

/* ── Column header ───────────────────────────── */
.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem 0.6rem;
  border-bottom: 1px solid var(--border-color);
  user-select: none;
}

.kanban-col-icon {
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
}

.kanban-column-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-column-badge {
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 12px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ── Cards container ─────────────────────────── */
.kanban-cards-container {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.kanban-cards-container::-webkit-scrollbar { width: 4px; }
.kanban-cards-container::-webkit-scrollbar-track { background: transparent; }
.kanban-cards-container::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* ── Empty column placeholder ────────────────── */
.kanban-empty-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 2rem 0;
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius-sm);
  margin-top: 0.25rem;
  opacity: 0.7;
}

/* ── Card ────────────────────────────────────── */
.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.85rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              opacity var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  border-color: var(--color-primary);
}

.kanban-card:active { cursor: grabbing; transform: translateY(0); }

.kanban-card.dragging {
  opacity: 0.35;
  transform: scale(0.96) rotate(-1deg);
  box-shadow: var(--shadow-lg);
}

/* tipo badge inside card */
.kanban-tipo-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ── Legacy classes (kept for compat) ────────── */
.kanban-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.kanban-card-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kanban-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-color);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.kanban-card-id { font-family: monospace; font-weight: 600; }

/* Estado Finalizado */
.badge.estado-finalizado,
.estado-presupuesto-finalizado {
  background-color: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
body.dark-mode .badge.estado-finalizado,
body.dark-mode .estado-presupuesto-finalizado {
  background-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

/* ═══════════════════════════════════════════
   GRID DE LISTADO DE PARTES DE TRABAJO (NUEVO)
   ════════════════════════════════════════════ */
.partes-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.2rem;
  width: 100%;
}
.parte-modern-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.parte-modern-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.parte-card-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parte-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.parte-card-details {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.parte-card-desc {
  font-size: 0.78rem;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  padding: 0.5rem 0.65rem;
  color: var(--text-muted);
  max-height: 4.5rem;
  overflow-y: auto;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════
   SUB-TABS DE CATEGORIZACIÓN DE PARTES
   ════════════════════════════════════════════ */
.partes-subtab-btn {
  background: none;
  border: none;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.partes-subtab-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.partes-subtab-btn.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
body.dark-mode .partes-subtab-btn.active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.partes-subtab-badge {
  font-size: 0.7rem;
  background: var(--border-color);
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 800;
}
.partes-subtab-btn.active .partes-subtab-badge {
  background: var(--color-primary);
  color: white;
}
body.dark-mode .partes-subtab-btn.active .partes-subtab-badge {
  background: #3b82f6;
  color: white;
}


/* ═══════════════════════════════════════════
   PARTES DE OBRA — GRID Y TARJETAS PREMIUM
   ════════════════════════════════════════════ */

/* Grid responsive para las tarjetas */
.partes-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  width: 100%;
}

/* Tarjeta individual de parte */
.parte-modern-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.parte-modern-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  background: var(--bg-card-hover);
  border-color: var(--color-primary);
}

/* Fila de badges (tipo + estado) */
.parte-card-badge-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

/* Título principal (nombre cliente) */
.parte-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grid de detalles de la tarjeta */
.parte-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin-top: 0.45rem;
}

.parte-card-details > div {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}

.parte-card-details strong {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

/* Descripcion */
.parte-card-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  padding: 0.35rem 0.55rem;
  background: var(--bg-card-hover);
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

body.dark-mode .parte-modern-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}
body.dark-mode .parte-modern-card:hover {
  background: var(--bg-card-hover);
}

@media (max-width: 600px) {
  .partes-list-grid {
    grid-template-columns: 1fr;
  }
}