/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Paleta oficial Palma Pictures ───────────────────────── */
  --space-indigo:  #2b2d42;
  --lavender-grey: #8d99ae;
  --platinum:      #edf2f4;
  --punch-red:     #ef233c;
  --flag-red:      #d90429;

  /* ── Sistema de color ────────────────────────────────────── */
  --bg:          #edf2f4;
  --surface:     #ffffff;
  --surface-2:   #f3f5f7;
  --surface-sunk:#e8ecef;
  --border:      rgba(43,45,66,0.09);
  --border-med:  rgba(43,45,66,0.16);
  --border-strong: rgba(43,45,66,0.28);
  --text:        #2b2d42;
  --text-2:      rgba(43,45,66,0.78);
  --text-soft:   #8d99ae;
  --text-xsoft:  rgba(141,153,174,0.6);

  /* Accent = punch-red · hover = flag-red */
  --blue:        #ef233c;
  --blue-hover:  #d90429;
  --blue-light:  rgba(239,35,60,0.07);

  /* Estados dentro de la paleta */
  --green:       #2b2d42;
  --green-dark:  #1d1f30;
  --orange:      #8d99ae;
  --orange-dark: #6b7589;
  --red:         #ef233c;
  --red-dark:    #d90429;
  --indigo:      #2b2d42;

  --sidebar-bg:  #2b2d42;
  --sidebar-w:   268px;

  --radius-lg: 0;
  --radius:    0;
  --radius-sm: 0;
  --radius-xs: 0;
  --radius-pill: 999px;

  --shadow-xs: none;   /* las tarjetas no flotan: se separan con 1px de borde */
  --shadow-sm: none;   /* los modales usan --shadow-md, que sí se conserva */
  --shadow:    0 4px 14px rgba(43,45,66,0.10), 0 0 0 0.5px rgba(43,45,66,0.06);
  --shadow-md: 0 12px 34px rgba(43,45,66,0.18), 0 0 0 0.5px rgba(43,45,66,0.07);
  --shadow-lift: 0 6px 20px rgba(43,45,66,0.13), 0 0 0 0.5px rgba(43,45,66,0.06);

  --ring: 0 0 0 3px rgba(239,35,60,0.22);

  /* ── Alias ─────────────────────────────────────────────── */
  --accent:         var(--punch-red);
  /* Componentes del acento: permiten tintes rgba(var(--acento-rgb), x) que
     siguen a la paleta. Si cambia el acento, cambian todos los tintes. */
  --acento-rgb:     239, 35, 60;
  --accent-blue:    var(--punch-red);
  --accent-hover:   var(--flag-red);
  --bg-card:        var(--surface);
  --bg-hover:       rgba(43,45,66,0.04);
  --border-light:   var(--border);
  --border-color:   var(--border-med);
  --text-primary:   var(--text);
  --text-secondary: var(--text-2);
  --text-muted:     var(--text-soft);
  --radius-md:      var(--radius);
  --font-mono:      'SF Mono', 'Monaco', 'Menlo', ui-monospace, monospace;

  --font:         -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --transition: 0.12s ease;

  --cal-bar-radius: 3px;
}

html { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT ────────────────────────────────────────────────────── */
#login-screen, #app { position: fixed; inset: 0; }
#app { display: flex; align-items: stretch; }

/* ── SIDEBAR ───────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: none;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: width 0.22s cubic-bezier(0.4,0,0.2,1);
}
.sidebar.collapsed {
  width: 64px;
}

/* Palm tree watermark */
.sidebar-palm-watermark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  transition: opacity 0.6s ease;
}
.sidebar-palm-watermark img {
  width: 72%;
  height: auto;
  object-fit: contain;
  object-position: center top;
  filter: invert(1) brightness(1.3);
  transform: scale(1) translateY(0);
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
/* Hover: subtle reveal with upward drift */
.sidebar:hover .sidebar-palm-watermark {
  opacity: 0.13;
}
.sidebar:hover .sidebar-palm-watermark img {
  transform: scale(1.03) translateY(-5px);
}
.sidebar-palm-watermark svg { width: 100%; height: 100%; object-fit: cover; }

.sidebar-logo {
  padding: 16px 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-bottom: 4px;
  /* overflow visible so collapse btn stays clickable when sidebar collapses */
  overflow: visible;
}
.logo-mark {
  transition: opacity 0.18s, width 0.22s;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  transition: opacity 0.18s, width 0.22s;
}
.logo-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.logo-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Collapse button */
.sidebar-collapse-btn {
  width: 26px; height: 26px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, opacity 0.22s;
  padding: 0;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sidebar-collapse-btn svg { width: 12px; height: 12px; }
/* Hide text when collapsed */
.sidebar.collapsed .logo-text { opacity: 0; width: 0; overflow: hidden; }
.sidebar.collapsed .logo-mark { opacity: 0; width: 0; overflow: hidden; margin: 0; }
.sidebar.collapsed .sidebar-logo { gap: 0; justify-content: center; overflow: visible; }
.sidebar.collapsed .sidebar-collapse-btn { margin-left: 0; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }

.sidebar-nav {
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 0; }
.nav-section-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.32);
  padding: 14px 10px 4px;
  overflow: hidden;
  transition: opacity 0.15s, height 0.22s, padding 0.22s;
}
/* Collapsed: hide labels with zero height */
.sidebar.collapsed .nav-section-label {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}
/* nav-label: the text span inside each nav-item */
.nav-label {
  transition: opacity 0.15s;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar.collapsed .nav-label { opacity: 0; width: 0; overflow: hidden; }
.nav-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: all var(--transition);
  letter-spacing: -0.01em;
  gap: 9px;
  position: relative;
  overflow: hidden;
}
/* Collapsed: center icon, add tooltip */
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 9px 0;
  gap: 0;
}
.sidebar.collapsed .nav-item .nav-badge { display: none !important; }
.sidebar.collapsed .nav-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.sidebar.collapsed .nav-item:hover::after { opacity: 1; }
.nav-item:hover  { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.92); }
.nav-item.active {
  background: rgba(239,35,60,0.18);
  color: #FFFFFF;
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--red);
  border-radius: 0 3px 3px 0;
}
.nav-icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  opacity: 0.55;
}
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon { opacity: 1; }
.nav-item-admin  { display: none; }

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.nav-badge.show { display: flex; }
.nav-badge-warn { background: #F59E0B; }
.nav-badge-warn.show { display: flex; }

.sidebar-user {
  padding: 11px 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-user { padding: 10px 0; display: flex; justify-content: center; }
.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}
.sidebar.collapsed .sidebar-user-info { margin-bottom: 0; }
.sidebar-user-text { overflow: hidden; transition: opacity 0.15s, width 0.22s; }
.sidebar.collapsed .sidebar-user-text { opacity: 0; width: 0; overflow: hidden; }
.sidebar-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(239,35,60,0.25);
  border: 1.5px solid rgba(239,35,60,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: #4FC3FF;
  flex-shrink: 0;
}
.sidebar-user-name {
  font-size: 12.5px; font-weight: 600;
  color: #FFFFFF; line-height: 1.2;
}
.sidebar-user-role { font-size: 10.5px; color: #48484A; font-weight: 500; }
.btn-logout {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #636366;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  font-size: 11.5px; cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
  width: 100%; font-weight: 500;
}
.btn-logout:hover { background: rgba(255,255,255,0.1); color: #AEAEB2; border-color: rgba(255,255,255,0.18); }

/* ── MAIN ──────────────────────────────────────────────────────── */
.main { flex: 1; overflow-y: auto; padding: 28px 30px; min-width: 0; }

/* ── PAGES ─────────────────────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

.page-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text);
}
.page-date { color: var(--text-soft); font-size: 12.5px; font-weight: 500; }

/* ── DASHBOARD LAYOUT ──────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 278px;
  gap: 20px;
  align-items: start;
}
.dashboard-col-side { display: flex; flex-direction: column; gap: 14px; }

/* ── CHART CARD ────────────────────────────────────────────────── */
.chart-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
}
.chart-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 6px;
}
.chart-donut-wrap svg { overflow: visible; }
.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.chart-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-legend-label { flex: 1; font-weight: 500; }
.chart-legend-val {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
  font-family: var(--font-display);
}

/* ── STATS GRID ────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 0 0 0.5px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.stat-card[style*="cursor:pointer"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1), 0 0 0 0.5px rgba(0,0,0,0.06);
}
.stat-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.stat-card.blue   .stat-card-accent { background: linear-gradient(90deg, var(--red), #34AADC); }
.stat-card.green  .stat-card-accent { background: linear-gradient(90deg, var(--text), #30D158); }
.stat-card.orange .stat-card-accent { background: linear-gradient(90deg, var(--text-soft), #FFCC02); }
.stat-card.red    .stat-card-accent { background: linear-gradient(90deg, var(--red), #FF6961); }
.stat-card.indigo .stat-card-accent { background: linear-gradient(90deg, #5856D6, #34AADC); }
.stat-card.purple .stat-card-accent { background: linear-gradient(90deg, #AF52DE, #FF375F); }
.stat-card-icon {
  width: 28px; height: 28px;
  margin-bottom: 10px;
  margin-top: 4px;
}
.stat-card-icon svg { width: 100%; height: 100%; }
.stat-value {
  font-family: var(--font-display);
  font-size: 46px; font-weight: 800;
  line-height: 1; margin-bottom: 6px;
  letter-spacing: -0.05em;
  color: var(--text);
}
.stat-label {
  font-size: 10.5px; color: var(--text-soft);
  font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ── SECTION TITLE ─────────────────────────────────────────────── */
.section-title {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-soft); margin-bottom: 8px; padding-left: 2px;
}

/* ── ALERT STRIP ───────────────────────────────────────────────── */
.alert-strip {
  background: rgba(255,149,0,0.07);
  border: 1px solid rgba(255,149,0,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 13px; margin-bottom: 8px;
  font-size: 12.5px; display: flex; align-items: center; gap: 9px; color: var(--text-2);
}
.alert-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.alert-strip.red { background: rgba(255,59,48,0.06); border-color: rgba(255,59,48,0.2); }
.alert-strip.red .alert-dot { background: var(--red); }

/* ── CALENDAR WIDGET ───────────────────────────────────────────── */
.calendar-widget {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 14px;
}
.calendar-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 10px;
}
.calendar-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.cal-nav {
  background: none; border: none; color: var(--blue);
  cursor: pointer; width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: background var(--transition);
}
.cal-nav:hover { background: var(--blue-light); }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.cal-day-label {
  text-align: center; font-size: 9px; font-weight: 700;
  color: var(--text-soft); text-transform: uppercase;
  padding: 3px 0 5px; letter-spacing: 0.05em;
}
.cal-day {
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 0; cursor: default;
  font-size: 11px; color: var(--text);
  transition: background var(--transition);
  gap: 2px; padding: 2px;
}
.cal-day.other-month { color: var(--text-xsoft); }
.cal-day.today .cal-day-num {
  background: var(--blue); color: white;
  border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
}
.cal-day.has-event { cursor: pointer; }
.cal-day.has-event:hover { background: var(--bg); }
.cal-day-num { line-height: 1; }
.cal-dots {
  display: flex; gap: 2px; height: 4px;
  align-items: center; justify-content: center;
}
.cal-dot { width: 4px; height: 4px; border-radius: 50%; }
.cal-dot.orange { background: var(--orange); }
.cal-dot.red    { background: var(--red); }

/* ── AGENDA WIDGET ─────────────────────────────────────────────── */
.agenda-widget {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.agenda-item {
  display: flex; gap: 11px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.agenda-item:last-child { border-bottom: none; }
.agenda-date { min-width: 30px; text-align: center; padding-top: 1px; }
.agenda-date-day {
  font-size: 17px; font-weight: 700;
  line-height: 1; color: var(--text);
  letter-spacing: -0.03em;
  font-family: var(--font-display);
}
.agenda-date-month {
  font-size: 9px; text-transform: uppercase;
  font-weight: 700; color: var(--text-soft);
  letter-spacing: 0.04em;
}
.agenda-content { flex: 1; min-width: 0; }
.agenda-equipo {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-meta {
  font-size: 10.5px; color: var(--text-soft); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-tag {
  font-size: 9.5px; font-weight: 600; margin-top: 3px;
  padding: 1px 6px; border-radius: 0; display: inline-block;
}
.agenda-tag.vencido { background: rgba(255,59,48,0.1); color: var(--red); }
.agenda-tag.hoy     { background: rgba(239,35,60,0.1); color: var(--blue); }
.agenda-empty {
  padding: 24px 13px; text-align: center;
  color: var(--text-soft); font-size: 12px;
}

/* ── CARDS ─────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden; margin-bottom: 14px;
}

/* ── TABLE ─────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden; overflow-x: auto;
}
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  background: var(--surface);
  padding: 10px 15px; text-align: left;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-soft); border-bottom: 1px solid var(--border);
}
.tabla td {
  padding: 11px 15px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text); vertical-align: middle;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla tbody tr { transition: background var(--transition); }
.tabla tbody tr:hover { background: rgba(239,35,60,0.025); }
.tabla .empty-row td {
  text-align: center; color: var(--text-soft);
  padding: 48px; font-size: 13.5px;
}

/* ── BADGES ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
}
.badge-green  { background: rgba(52,199,89,0.10);  color: var(--green-dark); }
.badge-orange { background: rgba(255,149,0,0.10);  color: var(--orange-dark); }
.badge-blue   { background: rgba(239,35,60,0.10);  color: var(--blue); }
.badge-red    { background: rgba(255,59,48,0.10);  color: var(--red-dark); }
.badge-gray   { background: rgba(0,0,0,0.06);      color: var(--text-soft); }
.badge-purple { background: rgba(88,86,214,0.10);  color: var(--indigo); }

/* ── SEGMENTED CONTROL ─────────────────────────────────────────── */
.seg-control {
  display: inline-flex;
  background: rgba(116,116,128,0.12);
  border-radius: 0;
  padding: 2px; gap: 1px;
}
.seg-btn {
  padding: 5px 13px; border-radius: 0;
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
  color: var(--text-2); border: none; background: none;
  font-family: var(--font); white-space: nowrap; letter-spacing: -0.01em;
}
.seg-btn.active {
  background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
}

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 15px;
  border-radius: 0;
  font-size: 13px; font-weight: 600;
  cursor: pointer; border: none;
  transition: all var(--transition);
  font-family: var(--font); letter-spacing: -0.01em; white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { filter: brightness(0.92); }
.btn-ghost { background: var(--surface); color: var(--blue); border: 1px solid var(--border-med); font-weight: 500; }
.btn-ghost:hover { background: var(--bg); }
.btn-sm { padding: 5px 10px; font-size: 11.5px; border-radius: 0; }
.btn-danger { background: transparent; color: var(--red); border: 1px solid rgba(255,59,48,0.22); font-weight: 500; }
.btn-danger:hover { background: rgba(255,59,48,0.05); }

/* ── FILTERS BAR ───────────────────────────────────────────────── */
.filters-bar {
  display: flex; gap: 8px; margin-bottom: 12px;
  flex-wrap: wrap; align-items: center;
}
.filter-input, .filter-select {
  background: var(--surface);
  border: 1px solid var(--border-med);
  color: var(--text); border-radius: var(--radius-sm);
  padding: 7px 11px; font-size: 13px;
  outline: none; transition: all var(--transition);
  font-family: var(--font); box-shadow: var(--shadow-xs);
}
.filter-input { flex: 1; min-width: 200px; }
.filter-input:focus, .filter-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(239,35,60,0.12);
}

/* ── FORM CARD ─────────────────────────────────────────────────── */
.form-card {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 20px 22px; margin-bottom: 20px;
}
.form-card-title { font-size: 14px; font-weight: 700; margin-bottom: 15px; color: var(--text); letter-spacing: -0.02em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group-full { grid-column: 1 / -1; }
.form-group label {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg); border: 1px solid var(--border-med);
  color: var(--text); border-radius: var(--radius-sm);
  padding: 8px 11px; font-size: 13.5px;
  font-family: var(--font); outline: none;
  transition: all var(--transition); -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(239,35,60,0.12);
}
.form-group textarea { min-height: 72px; resize: vertical; }
.form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* ── MODAL ─────────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 1000; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 24px; width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md);
}
.modal-sm { max-width: 400px; }
.modal-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
}
.modal-close {
  background: var(--bg); border: none; color: var(--text-soft);
  font-size: 12px; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  font-family: var(--font); font-weight: 700;
}
.modal-close:hover { background: var(--border-med); color: var(--text); }
.dev-info-text {
  color: var(--text-2); font-size: 13px; margin-bottom: 15px;
  padding: 10px 13px; background: var(--blue-light);
  border-radius: var(--radius-sm); border-left: 3px solid var(--blue); font-weight: 500;
}

/* ── LOGIN ─────────────────────────────────────────────────────── */
#login-screen {
  background: var(--bg); display: flex;
  align-items: center; justify-content: center; z-index: 9000;
}
.login-box {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 32px 28px; width: 100%; max-width: 320px;
  box-shadow: var(--shadow-md);
}
.login-logo { margin-bottom: 22px; }
.login-logo-mark {
  width: 52px; height: 52px; background: var(--bg);
  border-radius: 0;
  border: 1px solid var(--border-med);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}
.login-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text);
}
.login-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; font-weight: 500; }
.login-error {
  margin-top: 10px; padding: 8px 11px;
  background: rgba(255,59,48,0.07); color: var(--red);
  border-radius: var(--radius-xs); font-size: 12.5px; font-weight: 500;
}
.btn-login { width: 100%; margin-top: 16px; padding: 11px; font-size: 13.5px; }

/* ── TOAST ─────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(29,29,31,0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF; padding: 9px 18px; border-radius: 0;
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow);
  opacity: 0; transition: opacity 0.18s, transform 0.18s;
  pointer-events: none; z-index: 9999;
  white-space: nowrap; letter-spacing: -0.01em;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err  { background: rgba(255,59,48,0.9); }

/* ── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); }

/* ── TELEFONÍA ─────────────────────────────────────────────────── */
.tel-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.tel-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tel-stat-num {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.05em; line-height: 1;
  color: var(--text);
}
.tel-stat-lbl {
  font-size: 10.5px; color: var(--text-soft);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Type pills for telefonia */
.tel-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
}
.tel-pill.movil {
  background: rgba(239,35,60,0.08);
  color: var(--blue);
}
.tel-pill.fijo {
  background: rgba(88,86,214,0.08);
  color: var(--indigo);
}
.tel-pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Sensitive field (PIN/PUK) */
.pin-cell {
  font-family: var(--font-mono, monospace);
  font-size: 12px; color: var(--text-soft);
  letter-spacing: 0.05em;
}

/* Activo indicator */
.activo-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
}
.activo-dot::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.activo-dot.baja::before { background: var(--text-xsoft); }
.activo-dot.baja { color: var(--text-soft); }

/* Import/Export action row */
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── DASHBOARD TELEPHONY SECTION ───────────────────────────────── */
.tel-dash-section {
  margin-bottom: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  position: relative;
}
.tel-dash-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--red), #5856D6);
  border-radius: var(--radius) 0 0 var(--radius);
}
.tel-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.tel-dash-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tel-dash-num {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 800;
  line-height: 1; letter-spacing: -0.05em;
  color: var(--text);
}
.tel-dash-lbl {
  font-size: 10.5px; font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tel-dash-dept {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tel-dash-dept-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 3px 10px;
  font-size: 11.5px; font-weight: 500;
  color: var(--text-2);
}
.tel-dash-dept-count {
  font-weight: 700;
  color: var(--text);
}

/* ── TELEFONÍA PAGE — visual distinction ───────────────────────── */
#page-telefonia {
  background: linear-gradient(180deg, rgba(88,86,214,0.02) 0%, transparent 120px);
}
#page-telefonia .page-header h1::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  background: linear-gradient(135deg, var(--red), #5856D6);
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: middle;
  margin-bottom: 2px;
}
.tel-page-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  opacity: 0.4;
}
.tel-page-divider::before,
.tel-page-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--indigo), transparent);
}

/* ── PRESUPUESTOS ──────────────────────────────────────────────── */

/* Builder layout */
.builder-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  height: calc(100vh - 90px);
  overflow: hidden;
}
.builder-left {
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: 40px;
}
.builder-right {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.builder-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.builder-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

/* Empty state */
.pres-empty-items {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-soft);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Line items table in builder */
.pres-items-table {
  font-size: 12px;
}
.pres-items-table th {
  font-size: 10.5px;
  padding: 6px 8px;
}
.pres-items-table td {
  padding: 6px 8px;
  vertical-align: middle;
}
.pres-items-table input {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 2px 4px;
  width: 100%;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  transition: border-color var(--transition);
}
.pres-items-table input:focus {
  outline: none;
  border-bottom-color: var(--blue);
  background: var(--blue-light);
  border-radius: 0 3px 0 0;
}
.pres-item-del {
  background: none;
  border: none;
  color: var(--text-xsoft);
  cursor: pointer;
  font-size: 15px;
  padding: 2px 4px;
  border-radius: 0;
  transition: color var(--transition), background var(--transition);
  line-height: 1;
}
.pres-item-del:hover {
  color: var(--red);
  background: rgba(255,59,48,0.08);
}

/* Totals panel */
.pres-totals {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.pres-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.pres-totals-row:last-child { border-bottom: none; }
.pres-totals-base {
  color: var(--text-soft);
  font-size: 12.5px;
}
.pres-totals-final {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  padding-top: 8px;
}
.pres-totals-row input[type="number"] {
  width: 48px;
  border: 1px solid var(--border-med);
  border-radius: 0;
  padding: 1px 5px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  text-align: center;
}

/* Catalog panel */
.catalog-panel-header {
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.catalog-panel-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.catalog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.catalog-tab {
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 0;
  border: 1px solid var(--border-med);
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.catalog-tab.active,
.catalog-tab:hover {
  background: var(--blue);
  color: #fff;
  border-color: transparent;
}
.catalog-items-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 12px;
}
.catalog-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
  margin-bottom: 4px;
}
.catalog-card:hover {
  background: var(--blue-light);
  border-color: rgba(239,35,60,0.15);
}
.catalog-card-info {
  flex: 1;
  min-width: 0;
}
.catalog-card-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-card-desc {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-card-price {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}
.catalog-card-add {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition), background var(--transition);
}
.catalog-card-add:hover {
  background: var(--blue-hover);
  transform: scale(1.12);
}
.catalog-cat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-xsoft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 10px 4px;
}

/* Presupuesto badges */
.badge-borrador  { background: rgba(174,174,178,0.15); color: #6E6E73; }
.badge-enviado   { background: rgba(239,35,60,0.1);    color: var(--red); }
.badge-aceptado  { background: rgba(52,199,89,0.12);   color: var(--text); }
.badge-rechazado { background: rgba(255,59,48,0.1);    color: var(--red); }

/* Presupuestos page gradient */
#page-presupuestos {
  overflow: hidden;
}
#pres-list-view, #pres-catalog-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#pres-list-view .table-wrap,
#pres-catalog-view .table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── INVENTARIO ────────────────────────────────────────────────── */
.inv-counter {
  font-size: 12px;
  color: var(--text-soft);
  padding: 8px 2px;
  text-align: right;
}
.badge-disponible { background: rgba(43,45,66,0.09); color: var(--text); }
.badge-en_uso { background: rgba(239,35,60,0.10); color: var(--red); }
.badge-mantenimiento { background: rgba(141,153,174,0.15); color: var(--text-soft); }
.badge-baja { background: rgba(217,4,41,0.09); color: var(--red-dark); }

/* ── VEHÍCULOS ─────────────────────────────────────────────────── */
#page-vehiculos { overflow-y: auto; }
.veh-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding-bottom: 0;
}
.veh-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.veh-tab:hover { color: var(--text); }
.veh-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.veh-tab-content { }

.veh-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.veh-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.veh-info-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.veh-info-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.veh-info-value.warn { color: #F59E0B; }
.veh-info-value.danger { color: var(--red); }
.veh-info-value.ok { color: var(--text); }

.veh-alerta-banner {
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #D97706;
  display: flex;
  align-items: center;
  gap: 8px;
}
.veh-alerta-banner.danger {
  background: rgba(255,59,48,.1);
  border-color: rgba(255,59,48,.3);
  color: var(--red);
}

/* ── VEHICLE FOTOS LATERALES ─────────────────────────────────── */
.veh-fotos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.veh-foto-slot {
  cursor: pointer;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 2px dashed var(--border);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.veh-foto-slot:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(239,35,60,.12); }
.veh-foto-preview {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; color: var(--text-soft); font-size: 12px;
}
.veh-foto-preview span { font-size: 24px; }
@media (max-width:700px) { .veh-fotos-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── VEHICLE PRÓXIMO PROYECTO BANNER ─────────────────────────── */
.veh-proximo-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-card);
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1.5px solid var(--border);
}
.veh-proximo-banner.active { border-color: var(--text); background: rgba(52,199,89,.06); }
.veh-proximo-banner.upcoming { border-color: var(--red); background: rgba(239,35,60,.05); }
.veh-proximo-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.veh-proximo-dot.active { background: var(--text); }
.veh-proximo-dot.upcoming { background: var(--red); }
.veh-proximo-label { font-size: 11px; color: var(--text-soft); margin-bottom: 2px; }
.veh-proximo-nombre { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.veh-proximo-dates { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

.veh-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.veh-doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.veh-doc-icon { font-size: 28px; line-height: 1; }
.veh-doc-name { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-word; }
.veh-doc-meta { font-size: 11px; color: var(--text-soft); }
.veh-doc-actions { display: flex; gap: 6px; margin-top: 4px; }

.veh-svc-list { display: flex; flex-direction: column; gap: 10px; }
.veh-svc-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px;
  align-items: start;
}
.veh-svc-date { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.veh-svc-desc { font-size: 14px; font-weight: 500; color: var(--text); }
.veh-svc-meta { font-size: 12px; color: var(--text-soft); margin-top: 3px; }
.veh-svc-coste { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }

.badge-activo       { background: rgba(52,199,89,.15); color: var(--text); }
.badge-en_servicio  { background: rgba(239,35,60,.13); color: var(--red); }
.badge-en_reparacion { background: rgba(255,149,0,.15); color: var(--text-soft); }

/* ── GANTT CALENDAR ────────────────────────────────────────────── */
.gantt-section {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.gantt-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gantt-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gantt-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gantt-leg-lbl { font-size: 11px; color: var(--text-soft); }
.gantt-scroll { overflow-x: auto; }

.gantt-header-row {
  display: flex;
  border-bottom: 1.5px solid var(--border-med);
  margin-bottom: 2px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}
.gantt-label-col {
  width: 148px;
  min-width: 148px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 600;
  display: flex;
  align-items: flex-end;
  padding-bottom: 6px;
}
.gantt-day-hdr {
  width: 30px;
  min-width: 30px;
  flex-shrink: 0;
  text-align: center;
  padding-bottom: 4px;
}
.gantt-day-hdr .gd-wd {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-xsoft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gantt-day-hdr .gd-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  margin-top: 1px;
}
.gantt-day-hdr.g-today .gd-num {
  color: var(--red);
}
.gantt-day-hdr.g-today .gd-num::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--red);
  border-radius: 50%;
  margin: 2px auto 0;
}
.gantt-day-hdr.g-weekend { opacity: 0.45; }

.gantt-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-xsoft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 0 3px 148px;
}
.gantt-event-row {
  display: flex;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid rgba(43,45,66,0.05);
}
.gantt-event-row:nth-child(even) { background: rgba(43,45,66,0.018); }
.gantt-event-row:last-child { border-bottom: none; }
.gantt-event-row:hover { background: var(--bg-hover); }
.gantt-event-label {
  width: 148px;
  min-width: 148px;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  padding-right: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.gantt-event-label small {
  display: block;
  font-size: 10.5px;
  color: var(--text-soft);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-cells {
  position: relative;
  flex: 1;
  height: 40px;
}
.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(239,35,60,0.5);
  z-index: 1;
  pointer-events: none;
  border-radius: 0;
}
.gantt-bar {
  position: absolute;
  top: 7px;
  bottom: 7px;
  border-radius: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  z-index: 2;
  cursor: default;
  min-width: 6px;
  transition: filter 0.15s, opacity 0.15s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  letter-spacing: -0.01em;
}

.gantt-bar:hover { filter: brightness(1.08); box-shadow: 0 2px 8px rgba(43,45,66,0.22); }
.gantt-bar.b-proyecto { background: var(--text); }
.gantt-bar.b-proyecto.activo { background: var(--red); }
.gantt-bar.b-alquiler { background: var(--text-soft); }
.gantt-bar.b-alquiler-overdue { background: var(--red); }
.gantt-bar.b-itv { background: var(--red); min-width: 60px !important; }
.gantt-bar.b-seguro { background: var(--text-soft); min-width: 60px !important; }
.gantt-empty { padding: 28px; text-align: center; color: var(--text-soft); font-size: 13px; }

/* ── DASHBOARD BOTTOM GRID ─────────────────────────────────────── */
.dash-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px;
  align-items: start;
}
.dash-widget {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 18px;
  position: relative;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.dash-widget.dragging { opacity: 0.4; }
.dash-widget.drag-over {
  box-shadow: 0 0 0 2px var(--blue);
  border-color: var(--blue);
}
.dash-widget-drag-handle {
  position: absolute; top: 10px; right: 12px;
  font-size: 13px; color: var(--text-soft);
  opacity: 0; transition: opacity 0.15s;
  cursor: grab; user-select: none;
  pointer-events: none; letter-spacing: 2px;
}
.dash-widget:hover .dash-widget-drag-handle { opacity: 0.45; }

/* ── FLEET WIDGET ──────────────────────────────────────────────── */
.fleet-project-header {
  background: linear-gradient(135deg, var(--red) 0%, #0056B8 100%);
  border-radius: 0;
  padding: 14px 16px;
  color: #fff;
  margin-bottom: 14px;
}
.fleet-project-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}
.fleet-project-dates {
  font-size: 11px;
  opacity: 0.8;
  font-weight: 500;
}
.fleet-veh-list { display: flex; flex-direction: column; gap: 8px; }
.fleet-veh-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border-radius: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.fleet-veh-icon {
  font-size: 22px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: 0;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.fleet-veh-info { flex: 1; min-width: 0; }
.fleet-veh-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-conductor { font-size: 11px; color: var(--text-soft); margin-top: 1px; }
.fleet-conductor.no-driver { color: var(--red); font-style: italic; }
.fleet-add-btn { margin-top: 12px; width: 100%; }

/* Flota row en modal proyecto */
.flota-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.flota-row select, .flota-row input {
  flex: 1;
  min-width: 0;
}

/* ── DOCUMENT PREVIEW ──────────────────────────────────────────── */
#preview-content img {
  max-width: 100%;
  max-height: 65vh;
  border-radius: 0;
  object-fit: contain;
}
#preview-content canvas {
  max-width: 100%;
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.preview-no-preview {
  text-align: center;
  padding: 40px;
  color: var(--text-soft);
}
.preview-no-preview .preview-icon { font-size: 48px; margin-bottom: 10px; }

/* ── EMPLEADOS ────────────────────────────────────────────────── */
.emp-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.emp-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(239,35,60,0.12); }
.emp-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--text));
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.emp-info { flex: 1; min-width: 0; }
.emp-nombre { font-size: 14px; font-weight: 700; color: var(--text); }
.emp-meta { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.emp-contact { font-size: 11px; color: var(--text-soft); margin-top: 3px; }

/* ── STAT ICON ─────────────────────────────────────────────────── */
.stat-icon-lg {
  font-size: 22px;
  margin-bottom: 6px;
  display: block;
  line-height: 1;
}
.stat-card { transition: box-shadow 0.15s, transform 0.15s; }
.stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); transform: translateY(-1px); }

/* ── VEHICLE BRAND BADGE ───────────────────────────────────────── */
.veh-brand-badge {
  width: 38px;
  height: 38px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* ── FLEET SECTION LABEL ───────────────────────────────────────── */
.fleet-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.fleet-project-header { margin-bottom: 8px; }

/* ── FLEET WIDGET REDESIGN ──────────────────────────────────────────── */
.fleet-proj-card {
  border-radius: 0;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
}
.active-proj {
  /* border-left color set dynamically per project via inline style */
}
.upcoming-proj {
  border-left: 3px solid var(--red);
  opacity: 0.85;
}
.fleet-proj-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.fleet-proj-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fleet-proj-dot.active   { background: var(--text); box-shadow: 0 0 0 3px rgba(52,199,89,0.2); }
.fleet-proj-dot.upcoming { background: var(--red); }
.fleet-proj-title {
  font-weight: 700;
  font-size: 13.5px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fleet-proj-days {
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.fleet-proj-client {
  font-size: 11px;
  color: var(--text-soft);
  margin-bottom: 8px;
  margin-left: 16px;
}
.fleet-proj-dates-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-soft);
  margin-top: 6px;
}
.fleet-proj-progress-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 0;
  overflow: hidden;
}
.fleet-proj-progress-fill {
  height: 4px;
  background: linear-gradient(90deg, var(--text), #30D158);
  border-radius: 0;
  transition: width 0.4s;
}
.fleet-proj-vehs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.fleet-proj-veh-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 0;
  padding: 3px 10px 3px 6px;
  font-size: 11.5px;
}
.fleet-pill-icon { font-size: 13px; }
.fleet-pill-name { font-weight: 500; }
.fleet-pill-driver { color: var(--text-soft); font-size: 10.5px; }
.fleet-upcoming-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-soft);
  margin: 10px 0 6px;
}
.fleet-pill-count {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 0;
  padding: 2px 8px;
  font-size: 10.5px;
}

/* ── INVENTORY CHART (visual bars) ────────────────────────────── */
.inv-chart-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.inv-chart-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.inv-chart-lbl {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}
.inv-stacked-bar {
  width: 100%;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  display: flex;
  background: var(--bg);
  margin-bottom: 16px;
}
.inv-chart-rows { display: flex; flex-direction: column; gap: 10px; }
.inv-chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inv-chart-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inv-chart-bar-wrap { flex: 1; min-width: 0; }
.inv-chart-bar-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.inv-chart-bar-track {
  width: 100%;
  height: 6px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
}
.inv-chart-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.inv-chart-nums {
  text-align: right;
  flex-shrink: 0;
  width: 56px;
}
.inv-chart-val {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  display: block;
}
.inv-chart-pct {
  font-size: 11px;
  color: var(--text-soft);
}

/* ── INVENTARIO BULK TOOLBAR ────────────────────────────────────── */
.inv-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--accent-blue, var(--red));
  border-radius: var(--radius-md, 8px);
  margin-bottom: 10px;
  animation: fadeIn 0.15s ease;
}
.inv-bulk-count {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  margin-right: 8px;
  white-space: nowrap;
}
.inv-bulk-bar .btn-ghost {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.inv-bulk-bar .btn-ghost:hover {
  background: rgba(255,255,255,0.28);
}
.row-selected td {
  background: rgba(239,35,60, 0.05);
}

/* ── VEHÍCULOS MINI-DASHBOARD ───────────────────────────────────── */
#veh-dashboard {
  margin-bottom: 20px;
}
.veh-dash-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.veh-dash-card {
  background: var(--bg-card, #fff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.veh-dash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.veh-dash-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 3px 0 0;
}
.veh-dash-card.green .veh-dash-accent  { background: linear-gradient(90deg, var(--text), #30D158); }
.veh-dash-card.red .veh-dash-accent    { background: linear-gradient(90deg, var(--red), #FF6961); }
.veh-dash-card.orange .veh-dash-accent { background: linear-gradient(90deg, var(--text-soft), #FFCC02); }
.veh-dash-card.yellow .veh-dash-accent { background: linear-gradient(90deg, #FFCC02, var(--text-soft)); }
.veh-dash-card.blue .veh-dash-accent   { background: linear-gradient(90deg, var(--red), #34AADC); }
.veh-dash-val {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 10px;
  margin-bottom: 4px;
}
.veh-dash-card.green .veh-dash-val  { color: var(--text); }
.veh-dash-card.red .veh-dash-val    { color: var(--red); }
.veh-dash-card.orange .veh-dash-val { color: var(--text-soft); }
.veh-dash-card.yellow .veh-dash-val { color: #B8860B; }
.veh-dash-card.blue .veh-dash-val   { color: var(--red); }
.veh-dash-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary, #86868b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── ECONOMÍA ──────────────────────────────────────────────────── */
.eco-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.eco-stats-row.eco-stats-5 {
  grid-template-columns: repeat(5, 1fr);
}
.eco-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 20px 18px;
  position: relative;
  overflow: hidden;
}
.eco-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 16px 0 0;
}
.eco-stat-green::before  { background: var(--green); }
.eco-stat-blue::before   { background: var(--blue); }
.eco-stat-orange::before { background: var(--text-soft); }
.eco-stat-gray::before   { background: var(--text-soft); }
.eco-stat-purple::before { background: #AF52DE; }
.eco-stat-icon {
  font-size: 18px; font-weight: 700;
  margin-bottom: 10px;
  opacity: 0.6;
}
.eco-stat-green .eco-stat-icon  { color: var(--green); }
.eco-stat-blue .eco-stat-icon   { color: var(--blue); }
.eco-stat-orange .eco-stat-icon { color: var(--text-soft); }
.eco-stat-purple .eco-stat-icon { color: #AF52DE; }
.eco-stat-val {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--text);
  margin-bottom: 4px; line-height: 1.1;
}
.eco-stat-lbl {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-soft);
}
.eco-stat-sub {
  font-size: 11px; color: var(--text-muted);
  margin-top: 4px;
}
.eco-body { display: flex; flex-direction: column; gap: 20px; }
.eco-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px 22px;
}
.eco-panel-title {
  font-size: 13px; font-weight: 700;
  color: var(--text); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.eco-panel-legend { margin-left: auto; display: flex; gap: 10px; }
.eco-leg {
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 0;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.eco-leg-aceptado { background: rgba(52,199,89,0.15); color: var(--green); }
.eco-leg-pipeline  { background: rgba(255,149,0,0.15); color: var(--text-soft); }
.eco-panel-badge {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 0; margin-left: auto;
}
.eco-badge-blue   { background: rgba(239,35,60,0.12); color: var(--blue); }
.eco-badge-gray   { background: rgba(141,153,174,0.15); color: var(--text-soft); }
.eco-month-row {
  display: grid;
  grid-template-columns: 90px 1fr 160px;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.eco-month-row:last-child { border-bottom: none; }
.eco-month-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-soft);
}
.eco-month-bar-bg {
  height: 8px; background: var(--bg);
  border-radius: 0; overflow: hidden;
  display: flex;
}
.eco-month-bar-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease;
}
.eco-bar-aceptado { background: var(--green); }
.eco-month-amount {
  text-align: right; font-size: 13px;
  white-space: nowrap;
}
.eco-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.eco-proy-row {
  display: grid;
  grid-template-columns: 160px 1fr 120px;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
}
.eco-proy-row:last-child { border-bottom: none; }
.eco-proy-name {
  font-size: 12px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eco-proy-bar-wrap {
  height: 6px; background: var(--bg); border-radius: 0; overflow: hidden;
}
.eco-proy-bar {
  height: 100%; border-radius: 0;
  background: var(--blue);
  transition: width 0.3s ease;
}
.eco-proy-amount {
  text-align: right; font-size: 12px; font-weight: 600; color: var(--text);
}

/* ── MANTENIMIENTO DASHBOARD ──────────────────────────────────── */
.mant-dashboard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mant-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mant-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 70px;
}
.mant-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.mant-chip:hover { border-color: var(--accent); color: var(--accent); }
.mant-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.mant-chip.active .mant-chip-count { background: rgba(255,255,255,0.2); color: #fff; }
.mant-chip-sm { padding: 3px 9px; font-size: 11px; }
.mant-chip-count {
  background: var(--border);
  color: var(--text-soft);
  border-radius: 0;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}
.mant-filter-cats { padding-top: 2px; border-top: 1px solid var(--border-light); }

/* ── TELEFONÍA BULK BAR ──────────────────────────────────────── */
.tel-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--blue-light);
  border: 1px solid rgba(239,35,60,0.18);
  border-radius: 0;
  margin-bottom: 10px;
}
.tel-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  flex: 1;
}
.tel-row-selected {
  background: rgba(239,35,60,0.04) !important;
}
.tel-row-cb {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
}

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .dash-bottom-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-col-side { display: none; }
  .veh-dash-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .sidebar { display: none; }
  .main { padding: 0; }   /* el padding vive ahora en .main-scroll */
  .form-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .veh-dash-grid { grid-template-columns: 1fr 1fr; }
}

/* ── IT TABS ──────────────────────────────────────────────────── */
.it-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: 0;
  width: fit-content;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.it-tab {
  background: transparent;
  border: none;
  padding: 7px 18px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.it-tab:hover { background: var(--bg-hover, rgba(0,0,0,.06)); color: var(--text-primary); }
.it-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.it-tab.active:hover { background: var(--accent); color: #fff; }
.it-panel { }

/* ── IT DASHBOARD ────────────────────────────────────────────── */
.it-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.it-dash-card {
  background: var(--bg-card);
  border-radius: 0;
  padding: 18px 20px 16px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.it-dash-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-1px); border-color: var(--border); }
.it-dash-accent {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  border-radius: 0;
}
.it-dash-accent.blue   { background: #3b82f6; }
.it-dash-accent.orange { background: #f97316; }
.it-dash-accent.purple { background: #8b5cf6; }
.it-dash-val {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
  padding-left: 10px;
}
.it-dash-label {
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
  padding-left: 10px;
}

/* ── PROYECTOS DASHBOARD ─────────────────────────────────────── */
.proy-dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.proy-dash-card {
  background: var(--bg-card);
  border-radius: 0;
  padding: 16px 18px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  position: relative;
  overflow: hidden;
  cursor: default;
}
.proy-dash-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.proy-dash-icon {
  font-size: 20px;
  margin-bottom: 6px;
  opacity: 0.7;
}
.proy-dash-val {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}
.proy-dash-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary, #86868b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.proy-dash-card.green .proy-dash-accent { background: linear-gradient(90deg, var(--text), #30D158); }
.proy-dash-card.yellow .proy-dash-accent { background: linear-gradient(90deg, #FFCC02, var(--text-soft)); }
.proy-dash-card.blue .proy-dash-accent { background: linear-gradient(90deg, var(--red), #34AADC); }
.proy-dash-card.purple .proy-dash-accent { background: linear-gradient(90deg, #AF52DE, #7B61FF); }
.proy-dash-card.green .proy-dash-val { color: var(--text); }
.proy-dash-card.yellow .proy-dash-val { color: #B8860B; }
.proy-dash-card.blue .proy-dash-val { color: var(--red); }
.proy-dash-card.purple .proy-dash-val { color: #AF52DE; }
@media (max-width:900px) { .proy-dash-grid { grid-template-columns: 1fr 1fr; } }

/* ── CREW ROSTER ────────────────────────────────────────────── */
.crew-proj-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.crew-proj-tab {
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.crew-proj-tab:hover { background: var(--bg-hover, #f0f0f2); color: var(--text-primary); }
.crew-proj-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(239,35,60,.25);
}
.crew-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.crew-role-card {
  background: var(--bg-card);
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  overflow: hidden;
}
.crew-role-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-soft);
  background: var(--bg-hover, rgba(0,0,0,.04));
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,.06));
}
.crew-role-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crew-role-empty {
  font-size: 12px;
  color: var(--text-soft);
  opacity: 0.5;
  padding: 4px 0;
}
.crew-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg, #fafafa);
  border-radius: 0;
  padding: 7px 10px;
  gap: 8px;
}
.crew-member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.crew-member-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crew-member-veh {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crew-member-noveh {
  font-size: 11px;
  color: var(--text-soft);
  opacity: 0.5;
}
.crew-add-btn {
  background: none;
  border: 1.5px dashed var(--border-color, rgba(0,0,0,.15));
  border-radius: 0;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.crew-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(239,35,60,.04);
}
.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 0;
}
@media (max-width: 900px) { .crew-roles-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .crew-roles-grid { grid-template-columns: 1fr; } }

/* ── INVENTORY DASHBOARD ────────────────────────────────────── */
.inv-dash-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.inv-dash-card {
  background: var(--bg-card);
  border-radius: 0;
  padding: 12px 16px 10px;
  box-shadow: 0 1px 5px rgba(0,0,0,.07);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s;
  min-width: 90px;
  text-align: center;
  border: 2px solid transparent;
}
.inv-dash-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); }
.inv-dash-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(239,35,60,.15); }
.inv-dash-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.inv-dash-val {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 4px;
}
.inv-dash-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #86868b);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
/* Color variants */
.inv-dash-card.all .inv-dash-accent    { background: linear-gradient(90deg,#1D1D1F,#6E6E73); }
.inv-dash-card.all .inv-dash-val       { color: var(--text-primary); }
.inv-dash-card.blue .inv-dash-accent   { background: linear-gradient(90deg,var(--red),#34AADC); }
.inv-dash-card.blue .inv-dash-val      { color: var(--red); }
.inv-dash-card.green .inv-dash-accent  { background: linear-gradient(90deg,var(--text),#30D158); }
.inv-dash-card.green .inv-dash-val     { color: var(--text); }
.inv-dash-card.purple .inv-dash-accent { background: linear-gradient(90deg,#AF52DE,#7B61FF); }
.inv-dash-card.purple .inv-dash-val    { color: #AF52DE; }
.inv-dash-card.orange .inv-dash-accent { background: linear-gradient(90deg,var(--text-soft),#FFCC02); }
.inv-dash-card.orange .inv-dash-val    { color: var(--text-soft); }
.inv-dash-card.teal .inv-dash-accent   { background: linear-gradient(90deg,#5AC8FA,#30B0C7); }
.inv-dash-card.teal .inv-dash-val      { color: #30B0C7; }
.inv-dash-card.red .inv-dash-accent    { background: linear-gradient(90deg,var(--red),#FF6961); }
.inv-dash-card.red .inv-dash-val       { color: var(--red); }
.inv-dash-card.yellow .inv-dash-accent { background: linear-gradient(90deg,#FFCC02,var(--text-soft)); }
.inv-dash-card.yellow .inv-dash-val    { color: #B8860B; }
.inv-dash-card.indigo .inv-dash-accent { background: linear-gradient(90deg,#5856D6,#AF52DE); }
.inv-dash-card.indigo .inv-dash-val    { color: #5856D6; }

/* ── Badge: en proyecto ───────────────────────────────────────────────────── */
.badge-proyecto { background: rgba(239,35,60,.14); color: var(--red); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-reparacion { background: rgba(255,59,48,.13); color: var(--red); }

/* ── Fleet widget — Vehículos en proyecto ─────────────────────────────────── */
.fleet-ep-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.fleet-ep-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.fleet-ep-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fleet-ep-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 12px;
  min-width: 190px;
  max-width: 280px;
  flex: 1;
}
.fleet-ep-proyecto {
  margin-left: auto;
  font-size: 11px;
  color: var(--red);
  background: rgba(239,35,60,.12);
  border-radius: 0;
  padding: 2px 7px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Vehicle brand logo ───────────────────────────────────────────────────── */
.veh-brand-logo-wrap {
  width: 44px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.veh-brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}
.veh-brand-badge {
  width: 44px;
  height: 32px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}


/* ── VEHICLE CALENDAR ────────────────────────────────────────────────────────── */

/* Page layout */
#page-veh-calendar .page-header { margin-bottom: 0; border-bottom: 1px solid var(--border); padding-bottom: 16px; }

/* Month navigator */
.cal-month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  padding: 4px 6px;
  box-shadow: var(--shadow-xs);
}
.cal-month-nav-btn {
  width: 32px; height: 32px;
  border: none; background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.cal-month-nav-btn:hover { background: var(--platinum); color: var(--text); }
.cal-month-nav-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  min-width: 160px;
  text-align: center;
  letter-spacing: -0.02em;
}

/* Project palette */
.cal-project-palette {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: wrap;
}
.cal-project-palette::-webkit-scrollbar { display: none; }

.cal-proj-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 0;
  border: 2px solid transparent;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
  white-space: nowrap;
}
.cal-proj-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.cal-proj-card.selected {
  border-color: currentColor;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08), var(--shadow);
  transform: translateY(-1px);
}
.cal-proj-swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-proj-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.cal-proj-card-dates {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 1px;
}

.cal-eraser-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 0;
  border: 2px solid var(--border-med);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  transition: all 0.12s;
  white-space: nowrap;
}
.cal-eraser-btn:hover, .cal-eraser-btn.selected { border-color: var(--red); color: var(--red); background: rgba(239,35,60,0.06); }

/* Calendar grid wrapper */
.cal-veh-wrap {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-med);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin-top: 8px;
  max-height: calc(100vh - 300px);
}

.cal-veh-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-family: var(--font);
}

/* Sticky header */
.cal-veh-table thead tr { position: sticky; top: 0; z-index: 10; }

/* Sticky vehicle column */
.cal-veh-th-veh, .cal-veh-td-veh { position: sticky; left: 0; z-index: 9; }
.cal-veh-table thead .cal-veh-th-veh { z-index: 11; }

.cal-veh-th-veh {
  background: var(--text);
  color: var(--surface);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 18px;
  text-align: left;
  min-width: 190px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cal-veh-th-day {
  background: var(--text);
  color: var(--surface);
  text-align: center;
  padding: 10px 2px 8px;
  min-width: 62px;
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cal-veh-th-day.cal-weekend { background: #1a1a1f; }
.cal-veh-th-day.cal-today-col { background: #1c2340; }

.cal-day-num {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.cal-day-name {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: 3px;
}
.cal-today-col .cal-day-num { color: var(--accent); }
.cal-today-col .cal-day-name { color: var(--accent); opacity: 0.8; }

/* Data rows */
.cal-veh-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.08s; }
.cal-veh-table tbody tr:last-child { border-bottom: none; }
.cal-veh-table tbody tr:hover .cal-veh-td-veh { background: rgba(67,97,238,0.03); }

.cal-veh-td-veh {
  padding: 8px 14px;
  border-right: 1px solid var(--border-med);
  min-width: 190px;
  background: var(--surface);
  vertical-align: middle;
  transition: background 0.1s;
}
.cal-veh-row-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cal-veh-logo-cell {
  flex-shrink: 0;
  width: 40px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-veh-logo-cell .veh-brand-logo-wrap {
  width: 40px;
  height: 28px;
}
.cal-veh-logo-cell .veh-brand-logo-img {
  max-width: 36px;
  max-height: 24px;
  object-fit: contain;
}
.cal-veh-logo-cell .veh-brand-badge {
  width: 36px;
  height: 24px;
  font-size: 10px;
}
.cal-veh-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  line-height: 1.2;
}
.cal-veh-mat {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 1px;
  white-space: nowrap;
  font-family: 'SF Mono', 'Monaco', monospace;
  letter-spacing: 0.04em;
}

/* Day cells — NO display:flex on <td> (breaks table layout in some browsers) */
.cal-veh-td-day {
  min-width: 62px;
  height: 60px;
  padding: 0;
  border-right: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
  box-sizing: border-box;
  vertical-align: middle;
}
/* Inner wrapper carries the flex layout instead of the <td> itself */
.cal-cell-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
}
.cal-veh-td-day:hover {
  background: rgba(239,35,60,0.06);
}
.cal-veh-td-day:hover::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(239,35,60,0.30);
  pointer-events: none;
}
.cal-veh-td-day.cal-assigned:hover::after { display: none; }
.cal-veh-td-day.cal-weekend { background: rgba(43,45,66,0.035); }
.cal-veh-td-day.cal-today-col { background: rgba(239,35,60,0.055); }
.cal-veh-td-day.cal-today-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--blue);
  pointer-events: none;
  z-index: 3;
}
.cal-veh-td-day.cal-drag-over  { background: rgba(239,35,60,0.16) !important; }
.cal-veh-td-day.cal-erase-over { background: rgba(239,35,60,0.10) !important; }

/* Cell inner content */
.cal-cell-inner {
  flex: 0 0 auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: filter var(--transition), box-shadow var(--transition);
}
/* Relieve de la barra. Sólo sombras INSET verticales: una sombra exterior
   crearía costuras verticales donde se unen los días de un mismo tramo. */
.cal-cell-inner.filled {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}
/* Degradado vertical: da volumen sin cortar el tramo horizontalmente. */
.cal-cell-inner.filled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 45%,
    rgba(0,0,0,0.10) 100%);
  pointer-events: none;
}
.cal-veh-td-day.cal-assigned .cal-cell-inner:hover {
  filter: brightness(1.10) saturate(1.05);
}
.cal-cell-label {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
  padding: 0 3px;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Legend */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 10px;
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 4px 10px 4px 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.cal-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Selection hint */
.cal-selection-hint {
  font-size: 12px;
  color: var(--text-soft);
  padding: 8px 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-selection-hint strong { color: var(--text); }
.cal-sel-hint-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: 0;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  box-shadow: var(--shadow-xs);
}
.cal-veh-td-day.cal-assigned .cal-cell-inner { cursor: cell; }
.cal-veh-td-day { user-select: none; -webkit-user-select: none; }

/* ── Vehicle Calendar: row stripes & conductor ─────────────────────────── */
.cal-veh-row { transition: background 0.05s; }
.cal-veh-row.cal-row-alt .cal-veh-td-day:not(.cal-assigned) {
  background: rgba(141,153,174,0.06);
}
/* La columna de vehículos va OPACA: es sticky y, si es translúcida, la barra
   del evento que queda por debajo al desplazar en horizontal se transparenta.
   rgb(248,249,250) es ese mismo rgba(141,153,174,0.06) compuesto sobre blanco. */
.cal-veh-row.cal-row-alt .cal-veh-td-veh { background: rgb(248,249,250); }
.cal-veh-row:hover .cal-veh-td-veh { background: rgb(244,246,254); }
.cal-veh-table tbody tr { border-bottom: 1px solid var(--border-med); }
.cal-veh-table tbody tr:last-child { border-bottom: none; }

/* Conductor name inside cell */
.cal-cell-conductor {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52px;
  padding: 0 3px;
  margin-top: 1px;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  letter-spacing: 0.01em;
  background: rgba(0,0,0,0.18);
  border-radius: 0;
}

/* Conductor edit popup */
.cal-conductor-popup {
  position: fixed;
  z-index: 2000;
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: 0;
  padding: 12px 14px 10px;
  width: 240px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-conductor-popup-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}
.cal-conductor-inp {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border-med);
  border-radius: 0;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.cal-conductor-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(67,97,238,0.15); }
.cal-conductor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* Gantt: clickable labels */
.gantt-event-label.gantt-label-link {
  cursor: pointer;
}
.gantt-event-label.gantt-label-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gantt-bar { cursor: default; }
.gantt-bar[onclick] { cursor: pointer; }
.gantt-bar[onclick]:hover { filter: brightness(1.12); }

/* ===================================================
   Vehicle Calendar — Run bars (merged consecutive days)
   =================================================== */

/* Remove right border on start/mid so bars merge seamlessly */
.cal-veh-td-day.cal-run-start,
.cal-veh-td-day.cal-run-mid {
  border-right: none !important;
  padding-right: 0 !important;
}
/* Remove left padding on mid/end so bars are flush */
.cal-veh-td-day.cal-run-mid,
.cal-veh-td-day.cal-run-end {
  padding-left: 0 !important;
}

/* Base cell inner — shared by all run positions.
   La barra "flota" dentro de la fila: margen vertical fijo, y el redondeo se
   aplica sólo en los extremos del tramo para que los días consecutivos se
   lean como una sola píldora continua. */
.cal-veh-td-day .cal-cell-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 38px;
  margin: 0;
  position: relative;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  padding: 0 4px;
  box-sizing: border-box;
}

/* Unassigned / empty cells */
.cal-veh-td-day:not(.cal-assigned) .cal-cell-inner {
  background: transparent;
  color: transparent;
  box-shadow: none;
}
.cal-veh-td-day:not(.cal-assigned) .cal-cell-inner::after { display: none; }

/* Un solo día: píldora completa */
.cal-veh-td-day.cal-run-solo .cal-cell-inner {
  border-radius: var(--cal-bar-radius);
  margin: 0 3px;
  padding: 0 5px;
  justify-content: center;
  align-items: center;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 1px 3px rgba(43,45,66,0.20);
}

/* Inicio de tramo: redondeado sólo a la izquierda */
.cal-veh-td-day.cal-run-start .cal-cell-inner {
  border-radius: var(--cal-bar-radius) 0 0 var(--cal-bar-radius);
  margin: 0 0 0 3px;
  padding-left: 8px;
  padding-right: 0;
  align-items: flex-start;
}

/* Centro de tramo: recto por ambos lados, ancho completo */
.cal-veh-td-day.cal-run-mid .cal-cell-inner {
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Fin de tramo: redondeado sólo a la derecha */
.cal-veh-td-day.cal-run-end .cal-cell-inner {
  border-radius: 0 var(--cal-bar-radius) var(--cal-bar-radius) 0;
  margin: 0 3px 0 0;
  padding-left: 0;
  padding-right: 6px;
}

/* Marca vertical al inicio del tramo: ancla visualmente dónde empieza */
.cal-veh-td-day.cal-run-start .cal-cell-inner::before,
.cal-veh-td-day.cal-run-solo .cal-cell-inner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2.5px;
  background: rgba(255,255,255,0.48);
  border-radius: var(--cal-bar-radius) 0 0 var(--cal-bar-radius);
  pointer-events: none;
  z-index: 2;
}

/* Al pasar el ratón, el tramo entero se realza */
.cal-veh-row:hover .cal-cell-inner.filled {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.22);
}

/* Run label — only shown in start/solo positions */
.cal-run-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0em;
  opacity: 0.98;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* Project sub-label shown below conductor name */
.cal-proy-sub {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.82;
  pointer-events: none;
  letter-spacing: 0em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Conductor chip — shown inline when conductor is assigned (name on top, bigger) */
.cal-cond-chip {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.98);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0;
  padding: 2px 9px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
  line-height: 1.45;
  position: relative;
  z-index: 1;
  transition: background var(--transition), border-color var(--transition);
  pointer-events: auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.cal-cond-chip:hover {
  background: rgba(0,0,0,0.42);
  border-color: rgba(255,255,255,0.34);
}

/* "+ conductor" — shown when no conductor, subtle until hover */
.cal-cond-add {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  padding: 0 5px;
  border-radius: 0;
  white-space: nowrap;
  opacity: 0;
  position: relative;
  z-index: 1;
  transition: opacity var(--transition), background var(--transition);
  pointer-events: auto;
}
.cal-veh-td-day:hover .cal-cond-add { opacity: 1; }
.cal-cond-add:hover { background: rgba(0,0,0,0.26); color: #fff; }

/* ===================================================
   Vehicle Calendar — Vehicle row repair state
   =================================================== */

/* Dim the entire row when vehicle estado = reparacion */
.cal-row-repair .cal-veh-td-day {
  opacity: 0.55;
}
.cal-row-repair td {
  position: relative;
}

/* Repair overlay stripe on a specific day */
.cal-day-repair .cal-cell-inner {
  background: repeating-linear-gradient(
    -45deg,
    rgba(239,68,68,0.15),
    rgba(239,68,68,0.15) 4px,
    transparent 4px,
    transparent 10px
  ) !important;
  border-radius: 0;
  margin: 2px 3px;
}

/* Repair badge on the vehicle name cell */
.cal-veh-repair-badge {
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 0;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

/* ===================================================
   Vehicle Calendar — Vehicle event (ITV / Seguro) badges
   =================================================== */

/* Event badge row — normal flow, below the bar */
.cal-vev-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 14px;
  flex-shrink: 0;
}

.cal-vev {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 0;
  line-height: 13px;
  letter-spacing: 0.2px;
  cursor: default;
  white-space: nowrap;
}

.cal-vev-itv {
  background: #f59e0b;
  color: #fff;
}

.cal-vev-seg {
  background: #8b5cf6;
  color: #fff;
}

/* ===================================================
   Vehicle Calendar — Manual event cells (ITV / Mant)
   =================================================== */

/* ITV manual — rayado diagonal ámbar */
.cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-solo .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-mid .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-end .cal-cell-inner {
  background: repeating-linear-gradient(
    -45deg,
    #f0a018,
    #f0a018 5px,
    #d98a0c 5px,
    #d98a0c 10px
  ) !important;
}

/* Mantenimiento manual — rayado diagonal rojo */
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-solo .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-mid .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-end .cal-cell-inner {
  background: repeating-linear-gradient(
    -45deg,
    #e84b4b,
    #e84b4b 5px,
    #cc3333 5px,
    #cc3333 10px
  ) !important;
}
/* En los eventos rayados el degradado de volumen estorba: se atenúa */
.cal-veh-td-day.cal-event-itv .cal-cell-inner::after,
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner::after {
  background: linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.16));
}

/* ===================================================
   Vehicle Calendar — Vehicle name edit button
   =================================================== */

.cal-veh-edit-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  padding: 1px 3px;
  border-radius: 0;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
}
.cal-veh-name-cell:hover .cal-veh-edit-btn { display: inline-block; }
.cal-veh-edit-btn:hover { background: var(--bg-hover); color: var(--accent); }

/* ===================================================
   Vehicle Calendar — Quick edit popup (ITV / Seguro / Estado)
   =================================================== */

.cal-veh-qedit {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-med, #e2e8f0);
  border-radius: 0;
  padding: 14px 16px;
  min-width: 230px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  font-family: inherit;
}

.cal-veh-qedit-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-veh-qedit-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.cal-veh-qedit-row label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-veh-qedit-row input,
.cal-veh-qedit-row select {
  padding: 6px 9px;
  border: 1px solid var(--border-med, #e2e8f0);
  border-radius: 0;
  font-size: 13px;
  background: var(--bg, #fff);
  color: var(--text, #1a202c);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.cal-veh-qedit-row input:focus,
.cal-veh-qedit-row select:focus {
  border-color: var(--accent, #4361ee);
  box-shadow: 0 0 0 2px rgba(67,97,238,0.15);
}

.cal-veh-qedit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.cal-veh-qedit-actions button {
  padding: 6px 14px;
  border-radius: 0;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.cal-veh-qedit-actions button:first-child {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text-muted, #64748b);
}

.cal-veh-qedit-actions button:last-child {
  background: var(--accent, #4361ee);
  color: #fff;
}

.cal-veh-qedit-actions button:hover { opacity: 0.85; }

/* Backdrop to close popup on outside click */
.cal-veh-qedit-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: transparent;
}

/* ===================================================
   Vehicle Calendar — Week / Month header row
   =================================================== */

.cal-veh-th-week-row th {
  background: #18181f;
  color: rgba(255,255,255,0.5);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 0 3px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cal-veh-th-week-cell {
  border-right: 1px solid rgba(255,255,255,0.1) !important;
  background: #18181f !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 4px 6px 3px !important;
}
.cal-veh-th-week-span {
  background: #18181f !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 4px 0 3px !important;
  border-right: 1px solid rgba(255,255,255,0.04) !important;
}
.cal-veh-th-week-span:last-child {
  border-right: none !important;
}
/* Today accent on week header */
.cal-veh-th-week-span.cal-today-col {
  background: rgba(76,201,240,0.1) !important;
  color: var(--accent) !important;
}

/* ===================================================
   Flota Checklists — Tasks page
   =================================================== */

.flt-page { display: flex; flex-direction: column; gap: 0; height: 100%; }

/* Dashboard stats bar */
.flt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.flt-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.flt-stat:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 12px rgba(239,35,60,0.08);
}
.flt-stat-val {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.flt-stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 2px;
}
.flt-stat-bar {
  height: 4px;
  background: var(--border);
  border-radius: 0;
  margin-top: 10px;
  overflow: hidden;
}
.flt-stat-bar-fill {
  height: 100%;
  border-radius: 0;
  background: var(--accent);
  transition: width 0.4s ease;
}

/* Main layout — 3 columns: projects | checklists | detail */
.flt-body {
  display: grid;
  grid-template-columns: 200px 260px 1fr;
  gap: 16px;
  min-height: 0;
  flex: 1;
}

/* Sidebar: list of checklists */
.flt-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.flt-sidebar-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}
.flt-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.flt-list-item {
  padding: 10px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.flt-list-item:hover { background: var(--bg-hover); }
.flt-list-item.active {
  background: rgba(67,97,238,0.08);
  border-left-color: var(--accent);
}
.flt-list-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flt-list-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.flt-progress-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
}
.flt-progress-mini-bar {
  width: 36px;
  height: 3px;
  background: var(--border);
  border-radius: 0;
  overflow: hidden;
}
.flt-progress-mini-fill {
  height: 100%;
  border-radius: 0;
  background: #06d6a0;
  transition: width 0.3s ease;
}

/* Detail panel */
.flt-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.flt-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  color: var(--text-soft);
}
.flt-detail-empty svg { opacity: 0.25; }
.flt-detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}
.flt-detail-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.flt-detail-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.flt-progress-bar {
  width: 80px;
  height: 5px;
  background: var(--border);
  border-radius: 0;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.flt-progress-fill {
  height: 100%;
  border-radius: 0;
  background: #06d6a0;
  transition: width 0.4s ease;
}

/* Add item form */
.flt-add-form {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.flt-add-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.flt-add-form label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.flt-add-form input,
.flt-add-form select {
  padding: 6px 10px;
  border: 1px solid var(--border-med);
  border-radius: 0;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.flt-add-form input:focus,
.flt-add-form select:focus { border-color: var(--accent); }
.flt-add-form input.flt-task-input { min-width: 200px; flex: 1; }

/* Items list */
.flt-items {
  overflow-y: auto;
  flex: 1;
  padding: 8px 20px 16px;
}

/* Group by vehicle */
.flt-veh-group {
  margin-bottom: 18px;
}
.flt-veh-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Individual task item */
.flt-task {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
  margin-bottom: 8px;
}
.flt-task:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
.flt-task.done {
  opacity: 0.55;
}
.flt-task-check {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: 2px solid var(--border-med);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.flt-task-check:hover { border-color: var(--accent); }
.flt-task.done .flt-task-check {
  background: #06d6a0;
  border-color: #06d6a0;
}
.flt-task-check-icon { display: none; color: #fff; font-size: 12px; font-weight: 900; }
.flt-task.done .flt-task-check-icon { display: block; }

.flt-task-body { flex: 1; min-width: 0; }
.flt-task-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}
.flt-task.done .flt-task-text { text-decoration: line-through; color: var(--text-muted); }
.flt-task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-soft);
}
.flt-task-notas {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-style: italic;
}
.flt-task-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.1s; flex-shrink: 0; }
.flt-task:hover .flt-task-actions { opacity: 1; }

/* Priority pill */
.flt-prio {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 0;
  letter-spacing: 0.04em;
}
.flt-prio-alta { background: rgba(239,68,68,0.12); color: #ef4444; }
.flt-prio-media { background: rgba(245,158,11,0.12); color: #f59e0b; }
.flt-prio-baja { background: rgba(6,214,160,0.12); color: #06d6a0; }

/* Category pill */
.flt-cat {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 0;
  border: 1px solid var(--border);
}

/* Create checklist modal */
.flt-new-modal {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px 24px;
  min-width: 340px;
  max-width: 420px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.22);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.flt-new-modal-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--text);
}
.flt-new-modal .form-group { margin-bottom: 12px; }
.flt-new-modal label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 4px;
}
.flt-new-modal input,
.flt-new-modal select,
.flt-new-modal textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--border-med);
  border-radius: 0;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.flt-new-modal input:focus,
.flt-new-modal select:focus,
.flt-new-modal textarea:focus { border-color: var(--accent); }
.flt-new-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.flt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.3);
}

/* Palette — manual event type buttons */
.cal-event-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 0;
  border: 2px solid transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg);
  color: var(--text);
}
.cal-event-btn:hover { opacity: 0.85; }
.cal-event-btn.cal-event-itv-btn {
  border-color: #f59e0b;
  color: #f59e0b;
}
.cal-event-btn.cal-event-itv-btn.selected {
  background: #f59e0b;
  color: #fff;
}
.cal-event-btn.cal-event-mant-btn {
  border-color: #ef4444;
  color: #ef4444;
}
.cal-event-btn.cal-event-mant-btn.selected {
  background: #ef4444;
  color: #fff;
}

/* Calendar week/month header cells */
.cal-week-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===================================================
   Mi Perfil
   =================================================== */
.perfil-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: flex-start;
  max-width: 900px;
}
@media (max-width: 700px) { .perfil-layout { grid-template-columns: 1fr; } }
.perfil-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 28px 24px;
  box-shadow: var(--shadow-xs);
}
.perfil-foto-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.perfil-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: visible;
  margin-bottom: 4px;
}
.perfil-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--border);
}
.perfil-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--flag-red));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  border: 3px solid var(--border);
}
.perfil-avatar-change {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  border: 2px solid var(--surface);
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
}
.perfil-avatar-change:hover { background: var(--accent-hover); transform: scale(1.08); }
.perfil-name-big {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}
.perfil-role-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 0;
  background: rgba(67,97,238,0.12);
  color: var(--accent);
  border: 1px solid rgba(67,97,238,0.2);
}
.perfil-username {
  font-size: 12px;
  color: var(--text-soft);
  font-family: monospace;
}
.perfil-info-card { }
.perfil-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-bottom: 16px;
}

/* ===================================================
   Registro de Actividad
   =================================================== */
.act-list {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.act-day-group {}
.act-day-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.act-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light, var(--border));
}
.act-entry:last-child { border-bottom: none; }
.act-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.act-body { flex: 1; min-width: 0; }
.act-text {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 3px;
}
.act-meta {
  font-size: 11.5px;
  color: var(--text-soft);
  display: flex;
  gap: 10px;
}
.act-user { font-weight: 600; color: var(--accent); }
.act-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-soft);
}

/* ── FLOTA TASKS — Projects panel ──────────────────────────────── */
.flt-projects {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.flt-projects-header {
  padding: 12px 14px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flt-proj-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.flt-proj-item:last-child { border-bottom: none; }
.flt-proj-item:hover { background: var(--bg); }
.flt-proj-item.active {
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  padding-left: 11px;
}
.flt-proj-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flt-proj-item-count {
  font-size: 11px;
  color: var(--text-soft);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 1px 7px;
  flex-shrink: 0;
}
.flt-proj-item.active .flt-proj-item-count {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
}

/* ── VEHÍCULOS — Category dashboard ────────────────────────────── */
.veh-cat-dash {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.veh-cat-card {
  flex: 1;
  min-width: 100px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.veh-cat-card:hover {
  border-color: var(--blue);
  background: var(--blue-light);
}
.veh-cat-card.active {
  border-color: var(--blue);
  background: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(239,35,60,0.12);
}
.veh-cat-card-icon { font-size: 22px; line-height: 1; }
.veh-cat-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.veh-cat-card-count {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

/* ── PRESUPUESTOS — Project filter dashboard ────────────────────── */
.pres-proy-dash {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pres-proy-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: border-color 0.12s, background 0.12s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pres-proy-card:hover {
  border-color: var(--blue);
  background: var(--blue-light);
}
.pres-proy-card.active {
  border-color: var(--blue);
  background: var(--blue-light);
  font-weight: 700;
  color: var(--blue);
}
.pres-proy-card-count {
  font-size: 11px;
  color: var(--text-soft);
  background: var(--bg);
  border-radius: 0;
  padding: 1px 6px;
}
.pres-proy-card.active .pres-proy-card-count {
  background: rgba(239,35,60,0.15);
  color: var(--blue);
}


/* =============================================================================
   CAPA DE ACABADO — sistema de diseño
   Va al final a propósito: refina los componentes existentes sin reescribir las
   reglas de arriba, para no desestabilizar el resto de la hoja.
   ========================================================================== */

/* ── Tipografía ───────────────────────────────────────────────────────────── */
body {
  font-size: 13.5px;
  letter-spacing: -0.006em;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.page-header { gap: 16px; flex-wrap: wrap; }

/* Cifras siempre en versalitas tabulares: en una app de datos, las columnas de
   números tienen que alinearse dígito a dígito. */
.tabla td, .tabla th,
.stat-value, .stat-num, .kpi-value,
.cal-day-num, .cal-week-label,
.veh-km, .cal-veh-mat {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Superficies y tarjetas ──────────────────────────────────────────────── */
.card, .chart-card, .form-card, .stat-card, .panel, .widget {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

/* Los galones de color saturado en el borde superior de las tarjetas de
   métrica eran el detalle más estridente: se reducen a una línea fina. */
.stat-card::before,
.kpi-card::before {
  height: 2px !important;
  opacity: 0.75;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.tabla th {
  background: var(--surface-2);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-med);
  white-space: nowrap;
  padding: 9px 14px;
}
.tabla td { padding: 10px 14px; }
.tabla tbody tr:hover { background: rgba(239,35,60,0.035); }

/* Importes y cantidades: a la derecha, en una sola línea. Antes "150,00 €"
   se partía en dos líneas y descuadraba la fila. */
.tabla td.num, .tabla th.num,
.tabla td.precio, .tabla td.importe,
.tabla td:has(> .eur) {
  text-align: right;
  white-space: nowrap;
}

/* Cabecera fija sólo en tablas largas (>= 25 filas): en las cortas un scroller
   propio molestaría más que ayudar. */
.table-wrap:has(tbody tr:nth-child(25)) {
  max-height: calc(100vh - 265px);
  overflow: auto;
  overscroll-behavior: contain;
}
.table-wrap:has(tbody tr:nth-child(25)) .tabla thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--surface-2);
  box-shadow: inset 0 -1px 0 var(--border-med);
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-xs);
  letter-spacing: -0.005em;
  transition: background var(--transition), box-shadow var(--transition),
              transform 0.06s ease, color var(--transition);
}
.btn:active { transform: translateY(0.5px); }
.btn-primary {
  box-shadow: 0 1px 2px rgba(239,35,60,0.28);
}
.btn-primary:hover { box-shadow: 0 2px 6px rgba(239,35,60,0.30); }
.btn-ghost {
  box-shadow: var(--shadow-xs);
  border-color: var(--border-med);
  color: var(--text-2);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-sm { border-radius: 0; }
.btn:disabled, .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Foco visible: no existía en ningún control ──────────────────────────── */
:where(a, button, input, select, textarea, [tabindex], .nav-item, .seg-btn,
       .btn, .filter-input, .filter-select, .form-control):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

/* ── Campos de formulario ────────────────────────────────────────────────── */
.form-control, .filter-input, .filter-select {
  border-radius: var(--radius-xs);
  border-color: var(--border-med);
}
.form-control:hover, .filter-input:hover, .filter-select:hover {
  border-color: var(--border-strong);
}
.form-control:focus, .filter-input:focus, .filter-select:focus {
  border-color: var(--blue);
  box-shadow: var(--ring);
}
.form-control::placeholder, .filter-input::placeholder {
  color: var(--text-xsoft);
}
label, .form-label {
  letter-spacing: 0.04em;
}

/* ── Badges y control segmentado ─────────────────────────────────────────── */
.badge {
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.015em;
  box-shadow: inset 0 0 0 1px rgba(20,22,43,0.05);
}
.seg-control {
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: 0;
}
.seg-btn.active, .seg-btn[aria-selected="true"] {
  box-shadow: var(--shadow-xs), 0 0 0 0.5px rgba(20,22,43,0.06);
}

/* ── Barra lateral ───────────────────────────────────────────────────────── */
.sidebar { box-shadow: inset -1px 0 0 rgba(255,255,255,0.06); }
.nav-item {
  border-radius: var(--radius-xs);
  letter-spacing: -0.005em;
  transition: background var(--transition), color var(--transition);
}
.nav-section-title, .nav-group-title {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  font-weight: 700;
}

/* ── Modales ─────────────────────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(20,22,43,0.42);
  backdrop-filter: saturate(120%) blur(3px);
  -webkit-backdrop-filter: saturate(120%) blur(3px);
}
.modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,0.6);
}

/* ── Barras de scroll: finas y discretas ─────────────────────────────────── */
.main, .table-wrap, .modal, .sidebar-nav, [class*="-scroll"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(43,45,66,0.22) transparent;
}
.main::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.modal::-webkit-scrollbar { width: 10px; height: 10px; }
.main::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
  background: rgba(43,45,66,0.20);
  border-radius: var(--radius-pill);
  border: 2.5px solid transparent;
  background-clip: content-box;
}
.main::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: rgba(43,45,66,0.34); }
.main::-webkit-scrollbar-track { background: transparent; }

/* ── Selección de texto en tono de marca ─────────────────────────────────── */
::selection { background: rgba(239,35,60,0.18); }

/* ── Respeto por "reducir movimiento" ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Celdas numéricas: a la derecha, sin partir, con cifras tabulares.
   Sustituye al `font-family: monospace` en línea (Courier del navegador). */
.tabla td.cell-num, .tabla th.cell-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-family: var(--font);
  letter-spacing: 0;
}

/* La columna de vehículos se mantiene por encima de las barras al desplazar
   en horizontal. El fondo tiene que ser OPACO (ver reglas de fila alterna y
   hover): con un fondo translúcido la barra se transparentaba a través. */
.cal-veh-table .cal-veh-td-veh { z-index: 12; }

/* ── Rejillas de métricas: adaptables ────────────────────────────────────────
   Varias rejillas fijaban un número de columnas (repeat(5,1fr)) y por debajo de
   ~1200px las etiquetas se partían en tres líneas. Con auto-fit + minmax las
   tarjetas se reordenan solas en vez de comprimirse. */
.stats-grid,
.eco-stats-row,
.eco-stats-row.eco-stats-5,
.veh-dash-grid,
.it-dash-grid,
.inv-dash-row {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

/* Las etiquetas de métrica no se parten a mitad de palabra */
.eco-stat-label, .stat-label, .inv-dash-label,
.it-dash-label, .veh-dash-label {
  overflow-wrap: break-word;
  hyphens: none;
}

/* La cabecera de página se apila si no cabe, en vez de solaparse con los
   botones de acción (pasaba por debajo de ~900px). */
.page-header {
  align-items: flex-start;
  row-gap: 10px;
}
.page-header > *:last-child { flex-shrink: 0; }

/* ── Modo sin login (AUTH_DISABLED en server.js) ──────────────────────────── */
body.sin-login #login-screen { display: none !important; }
body.sin-login .sidebar-user { padding-bottom: 14px; }
/* El botón de cerrar sesión se enseña SIEMPRE, también con el login
   desactivado: se pidió expresamente y tenerlo escondido hacía pensar que no
   existía. Con `AUTH_DISABLED` avisa de que la sesión aún no se está
   comprobando en el servidor, en vez de fingir que cierra algo. */

/* ═══════════════════════════════════════════════════════════════════════════
   INVENTARIO — selector de árbol, migas, chips y vista en cuadrícula
   ═══════════════════════════════════════════════════════════════════════════ */

/* El desplegable del árbol necesita más ancho: las rutas son largas */
.filter-select-arbol {
  min-width: 260px;
  max-width: 340px;
  font-variant-numeric: tabular-nums;
}
.filter-select-arbol option { font-family: var(--font); }

.inv-view-toggle { flex-shrink: 0; }
.inv-view-toggle .seg-btn { display: inline-flex; align-items: center; gap: 5px; }
.inv-view-toggle .seg-btn.active { background: var(--surface); color: var(--text); font-weight: 600; }

/* ── Migas de pan de la categoría activa ─────────────────────────────────── */
.inv-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 2px; margin: -4px 0 12px;
  font-size: 12.5px;
}
.crumb {
  background: none; border: none; padding: 3px 7px;
  border-radius: var(--radius-xs);
  font: inherit; color: var(--blue); cursor: pointer;
  transition: background var(--transition);
}
.crumb:hover { background: var(--bg-hover); }
.crumb-actual { color: var(--text); font-weight: 600; cursor: default; }
.crumb-actual:hover { background: none; }
.crumb-sep { color: var(--text-xsoft); }

/* ── Chip de categoría (tabla y tarjetas) ────────────────────────────────── */
.cat-chip {
  display: inline-block; max-width: 100%;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font: inherit; font-size: 11.5px; font-weight: 500;
  color: var(--text-2);
  cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.cat-chip:hover {
  background: var(--bg-hover);
  border-color: var(--blue);
  color: var(--blue);
}

/* ── Vista en cuadrícula ─────────────────────────────────────────────────── */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
  align-items: start;
}
.inv-card {
  position: relative;
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px 11px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.inv-card:hover {
  box-shadow: var(--shadow-lift);
  border-color: var(--border-med);
  transform: translateY(-1px);
}
.inv-card.sel {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(239,35,60,0.16);
}

/* Inventory card image */
.inv-card-img {
  width: 100%;
  height: 110px;
  border-radius: 0;
  background: var(--surface-sunk);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.inv-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.inv-card-img .inv-card-img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-xsoft);
  font-size: 11px;
}
.inv-card-img .inv-card-img-placeholder svg { opacity: 0.35; }
.inv-card-check { position: absolute; top: 10px; right: 10px; }
.inv-card-check input { cursor: pointer; }
.inv-card-cod {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--text-xsoft);
  font-variant-numeric: tabular-nums;
}
.inv-card-nom {
  font-size: 13.5px; font-weight: 600; line-height: 1.32;
  letter-spacing: -0.01em; color: var(--text);
  /* Máximo 3 líneas: si no, las tarjetas de nombres larguísimos descuadran */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 20px;   /* hueco de la casilla de selección */
}
.inv-card > .cat-chip { align-self: flex-start; }
.inv-card-datos {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 12px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.inv-card-datos strong { color: var(--text); font-weight: 650; font-size: 13px; }
.inv-card-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 2px;
  padding-top: 9px; border-top: 1px solid var(--border);
}
.inv-card-acciones { display: flex; gap: 4px; }
/* Las acciones solo aparecen al pasar por encima: la cuadrícula se lee mejor */
.inv-card-acciones { opacity: 0; transition: opacity var(--transition); }
.inv-card:hover .inv-card-acciones,
.inv-card:focus-within .inv-card-acciones { opacity: 1; }

.inv-grid-vacio {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 20px; color: var(--text-soft);
}
.inv-grid-mas {
  grid-column: 1 / -1;
  display: flex; justify-content: center; padding: 10px 0 4px;
}

/* Las tarjetas de departamento son botones: se resetea el estilo nativo */
.inv-dash-card {
  font: inherit; text-align: center;
  background: var(--surface);
  border: 2px solid transparent;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VEHICLE CALENDAR — pasada "fluida"
   Las barras pesaban demasiado para la altura de la fila: ocupaban casi toda
   la celda, llevaban una marca blanca a la izquierda que cortaba el tramo y
   sombras marcadas arriba y abajo. Resultado: cajas apiladas en vez de una
   barra continua. Aquí se aligera todo y se da aire entre filas.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --cal-bar-radius: 6px; }

/* Barra más baja: deja un canal claro entre filas */
.cal-veh-table .cal-veh-td-day .cal-cell-inner {
  height: 30px;
  min-height: 30px;
  font-size: 10.5px;
}

/* Relieve mínimo: una sola línea inferior muy tenue, nada arriba */
.cal-veh-table .cal-cell-inner.filled {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.10);
}
/* Degradado casi plano — el volumen fuerte era parte de la sensación de "caja" */
.cal-veh-table .cal-cell-inner.filled::after {
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.02) 60%,
    rgba(0,0,0,0.05) 100%);
}

/* Fuera la marca blanca del inicio del tramo: era lo que más cortaba la
   continuidad visual. El inicio ya se distingue por el redondeo y la etiqueta. */
.cal-veh-table .cal-veh-td-day.cal-run-start .cal-cell-inner::before,
.cal-veh-table .cal-veh-td-day.cal-run-solo .cal-cell-inner::before {
  display: none;
}

/* Sin sombra exterior en las píldoras de un día: se igualan a los tramos */
.cal-veh-table .cal-veh-td-day.cal-run-solo .cal-cell-inner {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.10);
}

/* Márgenes laterales menores: el tramo respira sin separarse de su columna */
.cal-veh-table .cal-veh-td-day.cal-run-solo  .cal-cell-inner { margin: 0 2px; }
.cal-veh-table .cal-veh-td-day.cal-run-start .cal-cell-inner { margin-left: 2px; padding-left: 7px; }
.cal-veh-table .cal-veh-td-day.cal-run-end   .cal-cell-inner { margin-right: 2px; }

/* Etiquetas: un poco más discretas, sin sombra dura de texto */
.cal-veh-table .cal-run-label {
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.cal-veh-table .cal-proy-sub {
  opacity: 0.82;
  text-shadow: none;
}
.cal-veh-table .cal-cond-chip {
  background: rgba(0,0,0,0.16);
  border-color: rgba(255,255,255,0.13);
  font-weight: 650;
}

/* ── Rayado continuo entre días (ITV y mantenimiento) ─────────────────────
   Cada celda desplaza el patrón según su índice de día, así las diagonales
   siguen de una casilla a la siguiente y el tramo se lee como una sola pieza.
   --cal-col-w lo publica App._calMedirColumna() midiendo la columna real. */
.cal-veh-table {
  --cal-col-w: 62px;
}
.cal-veh-table .cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner {
  /* !important obligatorio: las reglas de más arriba usan el atajo
     `background: ... !important`, que resetea background-position. */
  background-repeat: repeat !important;
  background-position-x: calc(var(--cal-dia, 0) * -1 * var(--cal-col-w)) !important;
  background-position-y: 0 !important;
}

/* Rayas más finas y con menos contraste: menos ruido a lo largo del tramo */
.cal-veh-table .cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-solo .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-start .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-mid .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-end .cal-cell-inner {
  background-image: repeating-linear-gradient(-45deg,
    #eda31c, #eda31c 6px, #dd9411 6px, #dd9411 12px) !important;
}
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-solo .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-start .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-mid .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-end .cal-cell-inner {
  background-image: repeating-linear-gradient(-45deg,
    #e05555, #e05555 6px, #d04545 6px, #d04545 12px) !important;
}

/* ── Rejilla más ligera ──────────────────────────────────────────────────── */
.cal-veh-table .cal-veh-td-day { border-right-color: var(--border); }
.cal-veh-table tbody tr { border-bottom-color: var(--border); }
/* El hover de celda ya no pinta la franja azul superior: sobraba ruido */
.cal-veh-table .cal-veh-td-day:hover::after { display: none; }
.cal-veh-table .cal-veh-td-day:hover { background: rgba(239,35,60,0.05); }

/* ── Fila activa durante el arrastre ─────────────────────────────────────── */
/* Un arrastre afecta a un solo vehículo: se resalta su fila para que se vea. */
.cal-fila-arrastrando .cal-veh-td-veh { background: rgba(239,35,60,0.09) !important; }
.cal-fila-arrastrando .cal-veh-td-day:not(.cal-assigned) { background: rgba(239,35,60,0.035); }
.cal-fila-arrastrando .cal-veh-name { color: var(--blue); }

/* ═══════════════════════════════════════════════════════════════════════════
   PRESUPUESTOS — dashboard de estados, proyectos y clientes
   ═══════════════════════════════════════════════════════════════════════════ */
.pres-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pres-kpi {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; font: inherit; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-xsoft);
  border-radius: var(--radius-sm);
  padding: 10px 13px 11px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.pres-kpi:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.pres-kpi.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(239,35,60,0.15);
}
.pres-kpi.gray   { border-left-color: var(--text-soft); }
.pres-kpi.blue   { border-left-color: var(--blue); }
.pres-kpi.green  { border-left-color: var(--green); }
.pres-kpi.red    { border-left-color: var(--red); }
.pres-kpi-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft);
}
.pres-kpi-val {
  font-size: 22px; font-weight: 680; letter-spacing: -0.03em;
  line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pres-kpi-eur {
  font-size: 12px; font-weight: 550; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ── Chips de proyecto y cliente ─────────────────────────────────────────── */
.pres-chip-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; margin-bottom: 8px;
}
.pres-chip-titulo {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-xsoft);
  margin-right: 4px; min-width: 62px;
}
.pres-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  color: var(--text-2); cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pres-chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.pres-chip.active {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 1px 3px rgba(239,35,60,0.3);
}
.pres-chip-n {
  font-size: 11px; font-weight: 700;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.pres-chip.active .pres-chip-n { background: rgba(255,255,255,0.24); color: #fff; }

/* El contenedor del dashboard de presupuestos era flex en fila (para las
   viejas tarjetas de proyecto) y aplastaba la rejilla de KPIs. Ahora apila
   bloques en vertical: KPIs, chips de proyecto y chips de cliente. */
.pres-proy-dash {
  display: block;
  margin-bottom: 16px;
}
.pres-proy-dash .pres-kpi-row { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROYECTOS — widgets de últimos proyectos
   Deliberadamente más pequeños que las tarjetas de métrica de arriba: son un
   atajo para saltar a un proyecto reciente, no una métrica.
   ═══════════════════════════════════════════════════════════════════════════ */
.proy-recientes { margin: 14px 0 18px; }
.proy-recientes-titulo {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-xsoft);
  margin-bottom: 8px;
}
.proy-recientes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 8px;
}
.proy-mini {
  display: flex; align-items: stretch; gap: 0;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0; overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.proy-mini:hover {
  box-shadow: var(--shadow-lift);
  border-color: var(--border-med);
  transform: translateY(-1px);
}
/* Banda del color del proyecto: identifica el proyecto de un vistazo y usa el
   mismo color que el calendario de vehículos */
.proy-mini-color { width: 4px; flex-shrink: 0; }
.proy-mini-cuerpo {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 11px 9px; min-width: 0; flex: 1;
}
.proy-mini-nombre {
  font-size: 12.5px; font-weight: 640; letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proy-mini-meta {
  font-size: 10.5px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proy-mini-pies { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 1px; }
.proy-mini-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 1px 7px;
  background: var(--surface-sunk); color: var(--text-soft);
}
.proy-mini-badge.est-activo     { background: rgba(52,199,89,0.13);  color: var(--green-dark); }
.proy-mini-badge.est-finalizado { background: rgba(43,45,66,0.08);   color: var(--text-soft); }
.proy-mini-badge.est-pendiente  { background: rgba(255,149,0,0.14);  color: var(--orange-dark); }
.proy-mini-dato {
  font-size: 10px; color: var(--text-xsoft);
  font-variant-numeric: tabular-nums;
}
/* Los iconos de las tarjetas de métrica ahora son SVG, no emoji */
.proy-dash-icon { display: inline-flex; align-items: center; color: var(--text-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD — Gantt más legible
   Se mantiene el diagrama; lo que cambia es la lectura: rejilla de días
   visible, fines de semana sombreados, "hoy" marcado de verdad, barras en
   píldora con el color real del proyecto y filas alternas.
   ═══════════════════════════════════════════════════════════════════════════ */

.gantt-day-hdr { width: 34px; min-width: 34px; }
.gantt-label-col, .gantt-event-label { width: 164px; min-width: 164px; }
.gantt-group-label { padding-left: 164px; }

/* Cabecera: número del día más nítido y fin de semana atenuado sin desaparecer */
.gantt-day-hdr .gd-num { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gantt-day-hdr.g-weekend { opacity: 1; }
.gantt-day-hdr.g-weekend .gd-num,
.gantt-day-hdr.g-weekend .gd-wd { color: var(--text-xsoft); }

/* Hoy: pastilla azul en la cabecera en vez de un puntito */
.gantt-day-hdr.g-today .gd-num {
  color: #fff;
  background: var(--blue);
  border-radius: var(--radius-pill);
  width: 21px; height: 21px; line-height: 21px;
  margin: 1px auto 0;
  font-weight: 700;
}
.gantt-day-hdr.g-today .gd-num::after { display: none; }
.gantt-day-hdr.g-today .gd-wd { color: var(--blue); font-weight: 700; }

/* Línea de hoy: visible pero sin tapar las barras */
.gantt-today-line {
  width: 0;
  border-left: 1.5px dashed rgba(239,35,60,0.55);
  background: none;
}

/* Filas alternas y separadores más suaves */
.gantt-event-row { min-height: 34px; border-bottom: none; }
.gantt-event-row:nth-child(even) { background: rgba(43,45,66,0.018); }
.gantt-event-row:hover { background: rgba(239,35,60,0.04); }

/* Etiqueta de fila: punto del color del proyecto + nombre */
.gantt-event-label {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 7px;
  font-size: 12.5px; font-weight: 550;
  padding-right: 12px;
}
.gantt-punto {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.gantt-lbl-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-event-label small { flex-basis: 100%; padding-left: 15px; }

/* Barras en píldora, con volumen suave */
.gantt-bar {
  top: 6px; bottom: 6px;
  /* Radio suave, no píldora: en barras de 22px de alto el redondeo completo
     se comía los extremos y costaba ver dónde empieza y acaba cada tramo. */
  border-radius: 0;
  font-size: 10.5px; font-weight: 650;
  padding: 0 9px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
  transition: filter var(--transition), box-shadow var(--transition);
}
.gantt-bar::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.gantt-bar:hover { opacity: 1; filter: brightness(1.07); box-shadow: var(--shadow-sm); }

/* Los avisos de ITV y seguro siguen destacando en rojo/ámbar */
.gantt-bar.b-itv    { background: var(--red) !important; min-width: 66px !important; }
.gantt-bar.b-seguro { background: var(--orange) !important; min-width: 66px !important; }

/* Cabecera del Gantt pegada arriba, con separación más discreta */
.gantt-header-row { border-bottom: 1px solid var(--border-med); }

/* La columna de nombres del Gantt se queda fija al desplazar en horizontal:
   antes, al llegar a los días con barras, ya no se veía de qué fila eran.
   El fondo tiene que ser OPACO o las barras se transparentan por debajo. */
.gantt-event-label,
.gantt-label-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
/* En las filas alternas el fondo fijo debe coincidir con el de la fila */
.gantt-event-row:nth-child(even) .gantt-event-label { background: #fafbfc; }
.gantt-event-row:hover .gantt-event-label { background: #f2f7fe; }
.gantt-group-label {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 3;
}

/* Los iconos SVG que sustituyen a los emoji se alinean con el texto */
.ico, .ico-wrap svg { vertical-align: -0.14em; flex-shrink: 0; }
.ico-wrap { display: inline-flex; align-items: center; color: var(--text-soft); }
.btn svg, .seg-btn svg, .crumb svg { vertical-align: -0.14em; }
.modal-close svg { display: block; }
/* Los iconos heredan el color del contexto, no van en color propio */
.eco-stat-icon svg, .eco-panel-title svg, .proy-dash-icon svg { vertical-align: -0.14em; }
.eco-panel-title { display: flex; align-items: center; gap: 6px; }

/* ── PRESUPUESTO TEMPLATE PICKER ──────────────────────────────── */
.pres-tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pres-tpl-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 0;
  padding: 16px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  width: 100%;
}
.pres-tpl-card:hover {
  border-color: var(--blue);
  background: rgba(239,35,60,0.04);
  box-shadow: 0 0 0 3px rgba(239,35,60,0.10);
}
.pres-tpl-icon {
  font-size: 22px;
  margin-bottom: 8px;
  display: block;
}
.pres-tpl-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.pres-tpl-desc {
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-bottom: 8px;
}
.pres-tpl-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.pres-tpl-sections span {
  font-size: 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 2px 6px;
  color: var(--text-2);
  white-space: nowrap;
}

/* ── PRESUPUESTO SECTION ROWS ──────────────────────────────────── */
.pres-section-row td {
  padding: 0 !important;
}
.pres-section-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-hover);
  border-top: 1px solid var(--border-med);
  border-bottom: 1px solid var(--border-med);
  padding: 7px 10px;
  margin-top: 2px;
}
.pres-section-icon {
  color: var(--text-soft);
  flex-shrink: 0;
}
.pres-section-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  outline: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.pres-section-input:focus { color: var(--blue); }
.pres-section-actions {
  display: flex;
  gap: 3px;
  align-items: center;
}
.pres-section-move {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-soft);
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 0;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.pres-section-move:hover { background: var(--border); color: var(--text); }

/* ── Fin de semana sin tinte propio (calendario de vehículos) ──────────────
   Pedido: sábados y domingos con el mismo fondo que el resto de días. Solo se
   quita el color; la cabecera sigue mostrando "SA"/"DO" para ubicarse. */
.cal-veh-table .cal-veh-td-day.cal-weekend { background: transparent; }
/* La cabecera es oscura: aquí "igual que los demás" es #2b2d42, NO transparente
   (transparente dejaba sábado y domingo en blanco sobre blanco, invisibles). */
.cal-veh-table .cal-veh-th-day.cal-weekend { background: var(--text); }
/* Las filas alternas mantienen su banda también en sábado y domingo */
.cal-veh-table .cal-veh-row.cal-row-alt .cal-veh-td-day.cal-weekend:not(.cal-assigned) {
  background: rgba(141,153,174,0.06);
}
/* La columna de hoy y el arrastre siguen mandando sobre el fin de semana */
.cal-veh-table .cal-veh-td-day.cal-weekend.cal-today-col { background: rgba(var(--acento-rgb), 0.055); }
.cal-veh-table .cal-veh-td-day.cal-weekend:hover { background: rgba(var(--acento-rgb), 0.05); }

/* El texto de la barra del Gantt se queda pegado al borde visible: si la barra
   empieza antes del mes mostrado, su etiqueta quedaba cortada a mitad de
   palabra justo en el borde de la columna de nombres. */
.gantt-bar-txt {
  position: sticky;
  /* 164px es el ancho de la columna de nombres (también sticky): así el texto
     se detiene justo a su derecha en vez de quedar cortado por debajo. */
  left: 170px;
  white-space: nowrap;
}

/* Logotipo de marca en el inventario IT. Va en el gris del texto secundario y
   no en negro puro, para que no pese más que el nombre del dispositivo. */
.logo-apple {
  color: var(--text-2);
  vertical-align: -0.16em;
  margin-right: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VEHICLE CALENDAR — legibilidad de conductor y proyecto dentro de la barra
   Dos problemas: (1) al adelgazar la barra a 30px las dos líneas (conductor +
   proyecto) ya no cabían y el nombre del proyecto salía cortado por abajo;
   (2) el texto era blanco fijo, y sobre los colores claros de la paleta
   (#e9c46a, #06d6a0, #4cc9f0, #fb8500) no había contraste suficiente.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Altura suficiente para dos líneas, dejando aún canal entre filas */
.cal-veh-table .cal-veh-td-day .cal-cell-inner {
  height: 36px;
  min-height: 36px;
  padding-top: 1px;
  padding-bottom: 1px;
  gap: 1px;
}

/* Conductor: primera línea, la que más se busca de un vistazo */
.cal-veh-table .cal-cond-chip {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.32;
  padding: 0 6px;
  max-width: 100%;
  background: rgba(0,0,0,0.20);
  border-color: rgba(255,255,255,0.18);
  text-shadow: none;
}
.cal-veh-table .cal-cond-chip:hover { background: rgba(0,0,0,0.38); }

/* Proyecto: segunda línea. Sube de 9 a 10px y de 0.82 a opacidad plena;
   la jerarquía la marca el tamaño, no el desvanecido. */
.cal-veh-table .cal-proy-sub {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.24;
  opacity: 0.95;
  letter-spacing: 0.004em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Etiqueta de tramo sin conductor: una sola línea, puede ser más grande */
.cal-veh-table .cal-run-label:not(.cal-proy-sub) {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.004em;
}

/* ── Texto oscuro cuando el color del proyecto es claro ──────────────────── */
.cal-veh-table .cal-cell-inner.txt-oscuro,
.cal-veh-table .cal-cell-inner.txt-oscuro .cal-run-label,
.cal-veh-table .cal-cell-inner.txt-oscuro .cal-proy-sub {
  color: #16182c;
  text-shadow: none;
}
.cal-veh-table .cal-cell-inner.txt-oscuro .cal-cond-chip {
  color: #16182c;
  background: rgba(255,255,255,0.46);
  border-color: rgba(0,0,0,0.10);
}
.cal-veh-table .cal-cell-inner.txt-oscuro .cal-cond-chip:hover {
  background: rgba(255,255,255,0.78);
}
.cal-veh-table .cal-cell-inner.txt-oscuro .cal-cond-add {
  color: rgba(0,0,0,0.55);
}
.cal-veh-table .cal-cell-inner.txt-oscuro .cal-cond-add:hover {
  background: rgba(255,255,255,0.5);
  color: #16182c;
}
/* Con texto oscuro el degradado de volumen tiene que aclarar, no oscurecer */
.cal-veh-table .cal-cell-inner.txt-oscuro.filled::after {
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.03) 60%,
    rgba(0,0,0,0.06) 100%);
}

/* ── La etiqueta puede salirse de su celda ────────────────────────────────
   El render centra la etiqueta en la celda del medio del tramo, pero esa
   celda mide ~67px: con `overflow:hidden` el nombre del proyecto se cortaba
   en mitad de una barra de 300px. Solo en la celda que lleva etiqueta se
   permite desbordar y se centra el texto sobre el tramo.
   El fondo redondeado sigue recortado porque `border-radius` recorta el
   pintado del propio fondo aunque overflow sea visible. */
.cal-veh-table .cal-cell-inner.con-label {
  overflow: visible;
  align-items: center;
  justify-content: center;
  z-index: 2;              /* por encima del fondo de las celdas vecinas */
}
.cal-veh-table .cal-cell-inner.con-label::after {
  border-radius: inherit;
}
.cal-veh-table .cal-cell-inner.con-label > * {
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
/* En un tramo de un solo día no hay sitio para desbordar: se recorta */
.cal-veh-table .cal-run-solo .cal-cell-inner.con-label > * {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA LATERAL — negra, activo en rojo, interactiva
   Antes: fondo #2b2d42 (azul marino) y activo en rojo al 18% de opacidad, que
   apenas se distinguía del hover. Ahora: casi negro con degradado, activo en
   rojo sólido y realimentación en todo lo que se puede pulsar.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sidebar-bg:     #0a0a0c;
  --sidebar-bg-alt: #121216;
  --sidebar-rojo:   #ef233c;
  --sidebar-rojo-2: #d90429;
}

.sidebar {
  background:
    radial-gradient(120% 55% at 50% 100%, rgba(239,35,60,0.10) 0%, transparent 62%),
    linear-gradient(180deg, var(--sidebar-bg-alt) 0%, var(--sidebar-bg) 46%, #060607 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.055), 4px 0 22px rgba(0,0,0,0.30);
}

/* ── Elementos de navegación ─────────────────────────────────────────────── */
.sidebar .nav-item {
  color: rgba(255,255,255,0.62);
  font-weight: 500;
  padding: 8px 11px;
  transition: background 0.16s ease, color 0.16s ease,
              transform 0.16s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.16s ease;
}
/* Barra roja que crece desde el borde: se insinúa en hover y se afirma al activar */
.sidebar .nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--sidebar-rojo);
  border-radius: 0 3px 3px 0;
  transition: height 0.2s cubic-bezier(0.34,1.4,0.64,1);
}
.sidebar .nav-item:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
  transform: translateX(2px);
}
.sidebar .nav-item:hover::before { height: 14px; }
.sidebar .nav-item:hover .nav-icon { transform: scale(1.12); }

/* Activo: rojo sólido, no un tinte translúcido */
.sidebar .nav-item.active {
  background: linear-gradient(90deg, var(--sidebar-rojo) 0%, var(--sidebar-rojo-2) 100%);
  color: #fff;
  font-weight: 650;
  transform: none;
  box-shadow: 0 2px 10px rgba(239,35,60,0.38), inset 0 1px 0 rgba(255,255,255,0.16);
}
.sidebar .nav-item.active::before { height: 100%; background: #fff; opacity: 0.85; }
.sidebar .nav-item.active .nav-icon { opacity: 1; transform: none; }
.sidebar .nav-item.active:hover {
  background: linear-gradient(90deg, #f5384f 0%, #e40b2e 100%);
  transform: none;
}

.sidebar .nav-icon {
  opacity: 0.6;
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.34,1.4,0.64,1);
}

/* Rótulos de sección: legibles pero sin competir */
.sidebar .nav-section-label {
  color: rgba(255,255,255,0.34);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 15px 11px 5px;
}

/* Contador/badge del elemento de navegación */
.sidebar .nav-badge {
  background: var(--sidebar-rojo);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(239,35,60,0.22);
  transition: transform 0.16s cubic-bezier(0.34,1.4,0.64,1);
}
.sidebar .nav-item:hover .nav-badge { transform: scale(1.1); }
.sidebar .nav-item.active .nav-badge {
  background: #fff;
  color: var(--sidebar-rojo-2);
  box-shadow: none;
}

/* ── Cabecera y pie ──────────────────────────────────────────────────────── */
.sidebar .sidebar-logo,
.sidebar .sidebar-brand { transition: transform 0.2s cubic-bezier(0.34,1.4,0.64,1); }
.sidebar .sidebar-logo:hover,
.sidebar .sidebar-brand:hover { transform: scale(1.04); }

.sidebar .sidebar-user {
  border-top: 1px solid rgba(255,255,255,0.08);
  transition: background 0.16s ease;
}
.sidebar .sidebar-user:hover { background: rgba(255,255,255,0.06); }
.sidebar .sidebar-user:hover .sidebar-user-name { color: #fff; }
.sidebar .sidebar-avatar {
  transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.18s ease;
}
.sidebar .sidebar-user:hover .sidebar-avatar {
  transform: scale(1.07);
  box-shadow: 0 0 0 2px rgba(239,35,60,0.5);
}

/* Botón de plegar */
.sidebar .sidebar-collapse-btn,
.sidebar [class*="collapse"] {
  transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}
.sidebar .sidebar-collapse-btn:hover,
.sidebar [class*="collapse"]:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}

/* ── Palmera: más grande y reactiva ──────────────────────────────────────── */
.sidebar-palm-watermark {
  opacity: 0.07;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34,1.1,0.64,1);
  transform: scale(1.28) translateY(6%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 22px rgba(239,35,60,0.28));
}
.sidebar-palm-watermark img { width: 100%; height: auto; }
/* Al entrar en la barra, la palmera se abre y se enciende un poco */
.sidebar:hover .sidebar-palm-watermark {
  opacity: 0.16;
  transform: scale(1.36) translateY(3%) rotate(-1.2deg);
}
/* Plegada no cabe: se reduce para que no invada los iconos */
.sidebar.collapsed .sidebar-palm-watermark { transform: scale(1.05) translateY(10%); opacity: 0.05; }

/* Barra de scroll de la navegación, discreta sobre fondo negro */
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.26); background-clip: content-box; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* La cabecera del calendario de vehículos usaba el color viejo de la barra */
.cal-veh-th-veh, .cal-veh-th-week-cell { background: #14141a; }
.cal-veh-table .cal-veh-th-day,
.cal-veh-table .cal-veh-th-day.cal-weekend { background: #1b1b22; }
.cal-veh-table .cal-veh-th-day.cal-today-col { background: #2a1420; }

/* ═══════════════════════════════════════════════════════════════════════════
   VEHICLE CALENDAR — más contraste entre evento y rejilla
   Las barras iban "a ras" de la rejilla y a media distancia se perdían.
   Se les da un borde propio y una sombra suave, y se aclara la rejilla vacía
   para que el color del proyecto destaque.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Rejilla vacía más clara: el contraste se gana también restando peso al fondo */
.cal-veh-table .cal-veh-td-day { border-right-color: rgba(43,45,66,0.07); }
.cal-veh-table tbody tr { border-bottom-color: rgba(43,45,66,0.07); }

/* La barra se separa del fondo con un borde del propio color, más oscuro */
.cal-veh-table .cal-cell-inner.filled {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 1px 2px rgba(20,22,43,0.20);
}
/* Los extremos del tramo llevan además sombra lateral; los centros no, para
   que no aparezcan costuras verticales en las uniones. */
.cal-veh-table .cal-run-solo .cal-cell-inner.filled {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 1px 3px rgba(20,22,43,0.26);
}
/* Saturación un pelín más alta: el color del proyecto se lee antes */
.cal-veh-table .cal-cell-inner.filled { filter: saturate(1.06); }
.cal-veh-table .cal-veh-td-day.cal-assigned .cal-cell-inner:hover {
  filter: saturate(1.12) brightness(1.06);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 2px 8px rgba(20,22,43,0.30);
}

/* Texto con algo más de cuerpo sobre el color */
.cal-veh-table .cal-proy-sub { opacity: 1; font-weight: 650; }
.cal-veh-table .cal-cell-inner:not(.txt-oscuro) .cal-run-label,
.cal-veh-table .cal-cell-inner:not(.txt-oscuro) .cal-proy-sub {
  text-shadow: 0 1px 2px rgba(0,0,0,0.30);
}
.cal-veh-table .cal-cell-inner:not(.txt-oscuro) .cal-cond-chip {
  background: rgba(0,0,0,0.26);
  border-color: rgba(255,255,255,0.22);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FICHAS QR
   ═══════════════════════════════════════════════════════════════════════════ */
.fichas-paso {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-xs);
}
.fichas-paso-num {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text); color: var(--surface);
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fichas-paso-cuerpo { flex: 1; min-width: 0; }
.fichas-paso-titulo {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.fichas-contador {
  font-size: 11px; font-weight: 600;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 2px 9px;
  transition: background var(--transition), color var(--transition);
}
.fichas-contador.activo { background: var(--blue); color: #fff; }

/* ── Selector de plantilla ───────────────────────────────────────────────── */
.fichas-plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 9px;
}
.ficha-plantilla {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; font: inherit; cursor: pointer;
  background: var(--surface);
  border: 1.5px solid var(--border-med);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition), background var(--transition);
}
.ficha-plantilla:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.ficha-plantilla.active {
  border-color: var(--blue);
  background: var(--bg-hover);
  box-shadow: 0 0 0 2px rgba(var(--acento-rgb), 0.14);
}
.ficha-plantilla-nom  { font-size: 12.5px; font-weight: 650; color: var(--text); }
.ficha-plantilla-desc { font-size: 11px; color: var(--text-soft); line-height: 1.34; }
.ficha-plantilla-n    { font-size: 10px; font-weight: 600; color: var(--text-xsoft); margin-top: 2px; }

/* ── Lista de registros ──────────────────────────────────────────────────── */
.fichas-lista {
  max-height: 300px; overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overscroll-behavior: contain;
}
.ficha-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  transition: background var(--transition);
}
.ficha-item:last-child { border-bottom: none; }
.ficha-item:hover { background: var(--bg-hover); }
.ficha-item.sel { background: rgba(var(--acento-rgb), 0.075); }
.ficha-item input { cursor: pointer; flex-shrink: 0; }
.ficha-item-cod {
  font-size: 11px; font-weight: 650; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  min-width: 74px; flex-shrink: 0;
}
.ficha-item-nom { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichas-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 16px; text-align: center;
  color: var(--text-soft); font-size: 12.5px;
}

.fichas-campo { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-soft); font-weight: 600; }
.fichas-campo-check { flex-direction: row; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.fichas-campo-check input { cursor: pointer; }

/* ── Vista previa (imita la hoja impresa) ────────────────────────────────── */
.fichas-preview-marco {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  max-height: 520px; overflow: auto;
}
.fichas-preview { display: grid; gap: 12px; }
.fichas-preview.tam-etiqueta { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fichas-preview.tam-media    { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.fichas-preview.tam-grande   { grid-template-columns: 1fr; }

.fichas-preview .ficha {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  background: #fff; color: #14162b;
  border-radius: var(--radius-xs);
  padding: 13px 14px;
  box-shadow: var(--shadow-xs);
}
.fichas-preview.con-bordes .ficha { border: 1px dashed #9aa3b2; }
.fichas-preview .ficha-txt { min-width: 0; flex: 1; }
.fichas-preview .ficha-empresa {
  font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 3px;
}
.fichas-preview .ficha-cab {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  color: #6b7688; font-variant-numeric: tabular-nums;
}
.fichas-preview .ficha-tit {
  font-size: 13px; font-weight: 700; line-height: 1.24;
  margin: 2px 0 7px; overflow-wrap: anywhere;
}
.fichas-preview .ficha-datos { display: grid; gap: 2px; }
.fichas-preview .ficha-datos > div { display: flex; gap: 7px; font-size: 10.5px; line-height: 1.34; }
.fichas-preview .ficha-datos dt { color: #78839a; min-width: 54px; flex-shrink: 0; }
.fichas-preview .ficha-datos dd { font-weight: 600; overflow-wrap: break-word; hyphens: none; }
.fichas-preview .ficha-qr { text-align: center; flex-shrink: 0; }
.fichas-preview .ficha-qr img { display: block; image-rendering: pixelated; border-radius: 0; }
.fichas-preview .ficha-qr-pie {
  font-size: 8px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-soft); margin-top: 3px;
}
.fichas-preview .ficha-qr-error {
  display: grid; place-items: center;
  width: 96px; height: 96px;
  border: 1px dashed var(--red);
  border-radius: 0;
  font-size: 10px; color: var(--red); text-align: center; padding: 4px;
}

/* Los nombres largos se cortan por palabra, no por letra */
.fichas-preview .ficha-tit { overflow-wrap: break-word; hyphens: none; }
.fichas-preview.tam-etiqueta .ficha-datos dt { min-width: 48px; font-size: 10px; }
.fichas-preview.tam-etiqueta .ficha-datos > div { font-size: 10px; }

/* Widget del dashboard que ocupa toda la fila (tabla ancha) */
.dash-widget-ancho { grid-column: 1 / -1; }
.filter-select-sm { padding: 3px 8px; font-size: 11.5px; min-width: 0; }
/* El asa de arrastre ahora es un SVG: se centra y reacciona al hover */
.dash-widget-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-xsoft);
  transition: color var(--transition), transform var(--transition);
}
.dash-widget:hover .dash-widget-drag-handle { color: var(--text-soft); }
.dash-widget-drag-handle:hover { color: var(--blue); transform: scale(1.15); cursor: grab; }
.dash-widget-drag-handle:active { cursor: grabbing; }

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA DE INTERACCIÓN GLOBAL
   Todo lo que se puede pulsar responde: elevación, desplazamiento sutil o
   cambio de color. Nada se mueve más de 1-2px ni tarda más de 0.18s, para que
   la interfaz se sienta viva sin resultar saltarina.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filas de tabla: resaltado y acciones que aparecen al acercarse ──────── */
.tabla tbody tr { transition: background var(--transition), box-shadow var(--transition); }
.tabla tbody tr:hover { box-shadow: inset 3px 0 0 var(--blue); }
.tabla tbody tr .actions { opacity: 0.55; transition: opacity var(--transition); }
.tabla tbody tr:hover .actions,
.tabla tbody tr:focus-within .actions { opacity: 1; }

/* ── Tarjetas: elevación al pasar por encima ─────────────────────────────── */
.card, .chart-card, .panel, .dash-widget, .inv-dash-card,
.eco-stat-card, .veh-card, .emp-card, .flt-card, .mifi-card {
  transition: box-shadow var(--transition), border-color var(--transition),
              transform var(--transition);
}
.dash-widget:hover, .eco-stat-card:hover, .veh-card:hover,
.emp-card:hover, .flt-card:hover, .mifi-card:hover {
  box-shadow: var(--shadow-lift);
  border-color: var(--border-med);
}
.inv-dash-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.inv-dash-card:active { transform: translateY(0); }

/* ── Botones: hundido al pulsar y anillo al enfocar con teclado ──────────── */
.btn { will-change: transform; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.985); }

/* ── Control segmentado: la pastilla activa se asienta ───────────────────── */
.seg-btn { transition: background var(--transition), color var(--transition), transform var(--transition); }
.seg-btn:hover:not(.active) { background: rgba(255,255,255,0.55); color: var(--text); }
.seg-btn:active { transform: scale(0.97); }

/* ── Chips y badges pulsables ────────────────────────────────────────────── */
.badge { transition: transform var(--transition); }
button.badge:hover, a .badge:hover { transform: scale(1.06); }
.cat-chip:active, .pres-chip:active { transform: scale(0.97); }

/* ── Campos de formulario: el borde se anima ─────────────────────────────── */
.form-control, .filter-input, .filter-select {
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.filter-input:hover, .filter-select:hover, .form-control:hover { background: var(--surface); }

/* ── Enlaces internos ────────────────────────────────────────────────────── */
a:not(.nav-item):not(.btn) { transition: color var(--transition); }

/* ── Pestañas ────────────────────────────────────────────────────────────── */
.it-tab, .veh-tab, [class$="-tab"] {
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.it-tab:hover:not(.active), .veh-tab:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text);
}

/* ── Modales: entran con un ligero impulso ──────────────────────────────── */
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.modal-overlay.open .modal { animation: modal-entra 0.19s cubic-bezier(0.2,0.9,0.3,1); }
.modal-close {
  transition: background var(--transition), color var(--transition), transform var(--transition);
  border-radius: var(--radius-xs);
}
.modal-close:hover { background: var(--surface-sunk); color: var(--red); transform: rotate(90deg); }

/* ── Avisos (toast) ──────────────────────────────────────────────────────── */
.toast { transition: transform 0.24s cubic-bezier(0.2,0.9,0.3,1), opacity 0.2s ease; }

/* ── Estado de carga: el cursor lo dice ─────────────────────────────────── */
[aria-busy="true"], .cargando { cursor: progress; }

/* Nada de esto se mueve si el sistema pide reducir movimiento (regla ya
   declarada arriba en la capa de acabado). */

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET "MATERIAL MÁS ALQUILADO"
   Antes iba con estilos en línea; aquí se llevan a clases y se añade el
   selector de departamento (top 10 global o top 10 de Cámara / Luces / Grip).
   ═══════════════════════════════════════════════════════════════════════════ */
.topmat-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.topmat-tab {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11.5px; font-weight: 600;
  background: none; border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  color: var(--text-soft); cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.topmat-tab:hover { background: var(--surface-sunk); color: var(--text); }
.topmat-tab:active { transform: scale(0.97); }
.topmat-tab.active {
  background: var(--text); color: var(--surface); border-color: var(--text);
}
/* Un departamento sin alquileres se muestra atenuado, pero se muestra: si
   desapareciera parecería que falta algo. */
.topmat-tab.vacia { opacity: 0.5; }
.topmat-tab.vacia.active { opacity: 1; }
.topmat-n {
  font-size: 10px; font-weight: 700;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 5px;
  font-variant-numeric: tabular-nums;
}
.topmat-tab.active .topmat-n { background: rgba(255,255,255,0.22); color: #fff; }

.topmat-lista { list-style: none; margin: 0; padding: 0; }
.topmat-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}
.topmat-fila:last-child { border-bottom: none; }
.topmat-fila:hover { background: var(--bg-hover); }

.topmat-pos {
  flex-shrink: 0; min-width: 20px;
  font-size: 12px; font-weight: 700; text-align: right;
  color: var(--text-xsoft);
  font-variant-numeric: tabular-nums;
}
/* Los tres primeros destacan: es un ranking, se debe ver de un vistazo */
.topmat-pos.podio { color: var(--text); }

.topmat-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.topmat-nombre {
  font-size: 12.5px; font-weight: 550; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topmat-cat { font-size: 10.5px; color: var(--text-soft); }
.topmat-barra {
  display: block; height: 4px; margin-top: 2px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.topmat-barra-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(var(--acento-rgb), 0.55) 100%);
  border-radius: var(--radius-pill);
  transition: width 0.32s cubic-bezier(0.2,0.9,0.3,1);
}
.topmat-cifras {
  flex-shrink: 0; text-align: right; min-width: 52px;
  font-variant-numeric: tabular-nums;
}
.topmat-veces { display: block; font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.topmat-dias  { display: block; font-size: 10.5px; color: var(--text-soft); }

.topmat-vacio {
  padding: 24px 12px; text-align: center;
  color: var(--text-soft); font-size: 12.5px; line-height: 1.5;
}

/* El widget no debe cambiar de alto al cambiar de departamento: se reserva la
   altura de la lista más larga (--topmat-filas lo fija el render) y se da
   altura fija a la fila, que además deja la lista más regular. */
#top-material-widget { min-height: calc(var(--topmat-filas, 10) * 44px); }
.topmat-fila { height: 44px; box-sizing: border-box; }
/* El mensaje de "sin datos" se centra en el hueco reservado en vez de dejarlo
   arriba con un vacío raro debajo. */
.topmat-vacio {
  min-height: calc(var(--topmat-filas, 10) * 44px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12px;
}

/* ── Rejilla del dashboard: columnas que no las empuja el contenido ────────
   `1fr` equivale a `minmax(auto, 1fr)`, y ese mínimo `auto` deja que el texto
   más largo de un widget ensanche su columna. Efecto observado: al filtrar el
   widget de material más alquilado, el nombre más largo desaparecía, la columna
   se encogía de 640 a 432px y la barra de pestañas pasaba a dos líneas.
   Con `minmax(0, 1fr)` las columnas mantienen su proporción siempre. */
/* Acotada a partir de 1101px: por debajo, la media query de arriba ya colapsa
   la rejilla a una columna, y sin este límite esta regla la anulaba y dejaba
   columnas de 118px. */
@media (min-width: 1101px) {
  .dash-bottom-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
}
.dash-widget { min-width: 0; }

/* Y la barra de pestañas no envuelve: si no cabe, se desplaza en horizontal.
   Así su altura es constante pase lo que pase con el ancho. */
.topmat-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 26px;
}
.topmat-tabs::-webkit-scrollbar { height: 0; }
.topmat-tab { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   EQUIPO DE RODAJE — cuadrícula tipo hoja de cálculo
   Filas = plazas fijas agrupadas por departamento, columnas = proyectos.
   La primera columna y la cabecera quedan fijas al desplazar; los fondos de
   ambas son OPACOS a propósito (con fondo translúcido el contenido de las
   celdas se transparenta por debajo al hacer scroll).
   ═══════════════════════════════════════════════════════════════════════════ */

.crew-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.crew-leyenda { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.crew-leyenda-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.crew-leyenda-punto { width: 9px; height: 9px; border-radius: 0; flex-shrink: 0; }
.crew-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.crew-toggle input { cursor: pointer; }

.crew-grid-wrap {
  overflow: auto;
  max-height: calc(100vh - 300px);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overscroll-behavior: contain;
}
.crew-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-variant-numeric: tabular-nums;
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.crew-grid thead th {
  position: sticky; top: 0; z-index: 6;
  background: #14141a;
  color: rgba(255,255,255,0.9);
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  border-right: 1px solid rgba(255,255,255,0.07);
}
.crew-th-esquina {
  left: 0; z-index: 8 !important;
  min-width: 152px; width: 152px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.crew-grid thead .crew-th-esquina { position: sticky; }
.crew-th-proy {
  min-width: 178px;
  display: table-cell;
  border-top: 3px solid var(--proy-color, var(--text-soft));
}
.crew-th-punto {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--proy-color, var(--text-soft));
  margin-right: 7px; vertical-align: 1px;
}
.crew-th-nom {
  font-size: 13px; font-weight: 650; letter-spacing: -0.01em;
  color: #fff;
}
.crew-th-fechas {
  display: block; margin-top: 2px; padding-left: 15px;
  font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.45);
}

/* ── Franja de departamento ──────────────────────────────────────────────── */
.crew-fila-grupo th, .crew-fila-grupo td {
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--border-med);
  border-top: 1px solid var(--border-med);
  padding: 4px 12px;
}
.crew-td-grupo {
  position: sticky; left: 0; z-index: 4;
  background: var(--surface-sunk);
  text-align: left;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grupo-color, var(--text-soft));
  box-shadow: inset 3px 0 0 var(--grupo-color, transparent);
}

/* ── Filas de plaza ──────────────────────────────────────────────────────── */
.crew-fila th, .crew-fila td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  height: 50px;
}
.crew-td-rol {
  position: sticky; left: 0; z-index: 4;
  /* Fondo opaco obligatorio: es columna fija y por debajo pasan las celdas */
  background: var(--surface);
  padding: 0 12px;
  text-align: left;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--text);
  white-space: nowrap;
  box-shadow: inset 3px 0 0 var(--grupo-color, transparent), 1px 0 0 var(--border-med);
}
.crew-rol-n {
  display: inline-block; margin-left: 5px;
  font-size: 9.5px; font-weight: 700;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 5px;
}
.crew-fila:hover .crew-td-rol { background: #f7f9fb; }

/* ── Celdas ──────────────────────────────────────────────────────────────── */
.crew-celda {
  padding: 6px 12px;
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--transition), box-shadow var(--transition);
}
.crew-celda:hover {
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 2px rgba(var(--acento-rgb), 0.30);
}
/* Una celda cubierta se tiñe del color de su departamento, muy suave: así de
   un vistazo se ve qué está cubierto y de qué equipo es. */
.crew-celda.llena {
  background: color-mix(in srgb, var(--grupo-color) 7%, transparent);
}
@supports not (background: color-mix(in srgb, red 7%, transparent)) {
  .crew-celda.llena { background: var(--surface-2); }
}
.crew-celda-cond {
  display: block;
  font-size: 12.5px; font-weight: 650; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crew-celda-veh {
  display: block; margin-top: 1px;
  font-size: 10.5px; font-weight: 550;
  color: var(--grupo-color, var(--text-soft));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crew-celda-sinveh {
  display: block; margin-top: 1px;
  font-size: 10.5px; font-style: italic; color: var(--text-xsoft);
}
/* El "+" solo se insinúa: una cuadrícula llena de signos sería ruido */
.crew-celda-add {
  display: block; text-align: center;
  font-size: 17px; font-weight: 400; line-height: 1;
  color: var(--text-xsoft);
  opacity: 0;
  transition: opacity var(--transition);
}
.crew-celda:hover .crew-celda-add { opacity: 1; }

/* ── Pie con el recuento ─────────────────────────────────────────────────── */
.crew-grid tfoot th, .crew-grid tfoot td {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--surface-2);
  border-top: 1px solid var(--border-med);
  padding: 7px 12px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-2);
}
.crew-pie-rol {
  left: 0; z-index: 7 !important;
  text-align: left;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-soft);
  box-shadow: 1px 0 0 var(--border-med);
}
.crew-pie-celda { text-align: left; }

/* ── Asignaciones fuera de plaza ─────────────────────────────────────────── */
.crew-huerfanos {
  margin-top: 12px; padding: 12px 14px;
  background: rgba(255,149,0,0.07);
  border: 1px solid rgba(255,149,0,0.28);
  border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
}
.crew-huerfanos ul { margin: 6px 0 0; padding-left: 4px; list-style: none; }
.crew-huerfano-btn {
  font: inherit; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border-med);
  border-radius: var(--radius-xs); padding: 3px 9px; margin: 3px 0;
  cursor: pointer; color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}
.crew-huerfano-btn:hover { border-color: var(--orange); background: var(--surface-2); }

.crew-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 50px 20px; color: var(--text-soft); font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET DE FLOTA EN PROYECTOS — versión escalable
   El problema era el crecimiento: una píldora por vehículo convertía la
   tarjeta en una columna interminable con flotas grandes. Ahora hay un resumen
   por tipo (siempre del mismo tamaño) y las píldoras van con tope y "+N más".
   ═══════════════════════════════════════════════════════════════════════════ */

.fleet-proj-resumen {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 9px 0 7px;
  padding: 6px 9px;
  background: var(--surface-sunk);
  border-radius: var(--radius-xs);
}
.fleet-tipo {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-2);
}
.fleet-tipo svg { color: var(--text-soft); }
.fleet-tipo b { font-weight: 700; font-variant-numeric: tabular-nums; }
.fleet-total {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-xsoft);
  font-variant-numeric: tabular-nums;
}

.fleet-proj-vehs { display: flex; flex-direction: column; gap: 4px; }
.fleet-proj-veh-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 11.5px;
  transition: border-color var(--transition), background var(--transition);
}
.fleet-proj-veh-pill:hover { border-color: var(--border-med); background: var(--surface); }
/* Los que llevan conductor se marcan: son los que aportan el dato útil */
.fleet-proj-veh-pill.con-conductor { border-left: 2px solid var(--accent); }
.fleet-pill-icon { display: inline-flex; color: var(--text-soft); flex-shrink: 0; }
.fleet-pill-name {
  flex: 1; min-width: 0;
  font-weight: 550; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fleet-pill-mat { opacity: 0.55; font-variant-numeric: tabular-nums; }
.fleet-pill-driver {
  flex-shrink: 0; max-width: 45%;
  font-size: 10.5px; font-weight: 650;
  color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fleet-mas {
  align-self: flex-start;
  font: inherit; font-size: 11px; font-weight: 650;
  background: none; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xs);
  padding: 3px 10px; margin-top: 1px;
  color: var(--text-soft); cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.fleet-mas:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }

.fleet-proj-sinflota { font-size: 12px; color: var(--text-soft); margin-top: 8px; }
.fleet-link {
  font: inherit; background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AJUSTES: tarjeta de economía, logo en claro y desplegable de flota
   ═══════════════════════════════════════════════════════════════════════════ */

/* Un importe con miles y decimales no cabe al tamaño de un contador ("3570,0"
   salía cortado). Se reduce y se deja que se ajuste al ancho disponible. */
.stat-value-eur {
  font-size: clamp(17px, 2vw, 25px);
  letter-spacing: -0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Logo de la barra lateral en claro ────────────────────────────────────
   El PNG es oscuro y la barra ahora es negra: se invierte, igual que ya se
   hacía con la palmera de fondo. */
.logo-mark img {
  filter: invert(1) brightness(1.08);
}
.logo-mark {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}
.sidebar-logo:hover .logo-mark {
  background: rgba(239,35,60,0.16);
  border-color: rgba(239,35,60,0.42);
}
.logo-title { color: #fff; }
.logo-sub   { color: rgba(255,255,255,0.42); }

/* ── La barra de resumen del widget de flota es un desplegable ───────────── */
.fleet-proj-resumen {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
}
.fleet-proj-resumen:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.fleet-proj-resumen.abierto {
  border-color: var(--accent);
  background: rgba(var(--acento-rgb), 0.05);
}
.fleet-chevron {
  color: var(--text-soft);
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.34,1.2,0.64,1), color var(--transition);
}
.fleet-proj-resumen:hover .fleet-chevron { color: var(--accent); }
.fleet-proj-resumen.abierto .fleet-chevron { transform: rotate(180deg); color: var(--accent); }
/* El total deja de empujar al chevron al borde */
.fleet-proj-resumen .fleet-total { margin-left: auto; }
.fleet-proj-vehs { margin-top: 5px; }

/* ── Etiquetas del widget de devoluciones ────────────────────────────────── */
.agenda-etiquetas {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 4px;
}
.agenda-dep {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(var(--acento-rgb), 0.10);
  color: var(--accent);
  border-radius: var(--radius-pill); padding: 1px 8px;
}
.agenda-cat {
  font-size: 10px; font-weight: 600;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 1px 8px;
}
/* Botón para asignar departamento: discreto hasta que se pasa por encima */
.agenda-dep-add {
  font: inherit; font-size: 10px; font-weight: 600;
  background: none; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-pill); padding: 1px 8px;
  color: var(--text-xsoft); cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.agenda-dep-add:hover {
  color: var(--accent); border-color: var(--accent);
  background: rgba(var(--acento-rgb), 0.07);
}

/* ── Barra lateral en pantallas de poca altura ─────────────────────────────
   `.sidebar-nav` es un contenedor flex en columna, y por defecto sus hijos
   pueden encogerse por debajo de su contenido (`flex-shrink: 1`). En una
   ventana baja los rótulos de sección quedaban a 20px necesitando 34 y se
   recortaban, y la barra no llegaba a hacer scroll porque todo cabía
   "comprimido". Con flex-shrink: 0 mantienen su tamaño y aparece el scroll. */
.sidebar-nav > * { flex-shrink: 0; }
.sidebar .nav-item,
.sidebar .nav-section-label { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROYECTOS — pestañas, cajón lateral y calendario resumido
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Distribución: la lista cede ancho al cajón, no lo tapa ──────────────── */
.proy-layout { display: flex; gap: 0; align-items: flex-start; }
.proy-main {
  flex: 1; min-width: 0;
  transition: padding-right 0.26s cubic-bezier(0.2,0.9,0.3,1);
}
.proy-layout.con-drawer .proy-main { padding-right: 22px; }

.proy-drawer {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.26s cubic-bezier(0.2,0.9,0.3,1);
  align-self: stretch;
}
.proy-layout.con-drawer .proy-drawer { width: min(520px, 46vw); }
.proy-drawer-inner {
  width: min(520px, 46vw);
  position: sticky;
  top: 0;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* En pantallas estrechas el cajón pasa a ocupar todo: partir la vista en dos
   columnas de 300px no serviría de nada. */
@media (max-width: 1200px) {
  .proy-layout.con-drawer .proy-main { display: none; }
  .proy-layout.con-drawer .proy-drawer { width: 100%; }
  .proy-drawer-inner { width: 100%; }
}

/* ── Pestañas superiores ─────────────────────────────────────────────────── */
.proy-tabs {
  display: flex; gap: 3px; flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-med);
}
.proy-tab {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 600;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 14px; margin-bottom: -1px;
  color: var(--text-soft); cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.proy-tab:hover { color: var(--text); background: var(--bg-hover); }
.proy-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.proy-tab svg { opacity: 0.7; }
.proy-tab.active svg { opacity: 1; }
.proy-tab-n {
  font-size: 10.5px; font-weight: 700;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.proy-tab.active .proy-tab-n { background: rgba(var(--acento-rgb), 0.12); color: var(--accent); }

/* ── Tabla de proyectos ──────────────────────────────────────────────────── */
.proy-fila { cursor: pointer; }
.proy-fila.abierta {
  background: rgba(var(--acento-rgb), 0.06) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}
.proy-celda-nombre { display: flex; align-items: center; gap: 9px; }
.proy-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.proy-cliente { font-size: 11px; color: var(--text-soft); margin-top: 1px; }
.proy-chips { display: flex; gap: 4px; margin-left: auto; }
.proy-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 650;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.proy-chip svg { opacity: 0.65; }
.proy-pista {
  font-size: 11.5px; color: var(--text-xsoft);
  padding: 9px 2px 0;
}

/* ── Cajón: cabecera ────────────────────────────────────────────────────── */
.drawer-cargando { padding: 44px 20px; text-align: center; color: var(--text-soft); font-size: 13px; }
.drawer-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--proy-color, var(--accent));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  position: sticky; top: 0; z-index: 3;
}
.drawer-head-top { display: flex; align-items: center; gap: 9px; }
.drawer-punto {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--proy-color, var(--accent)); flex-shrink: 0;
}
.drawer-titulo {
  flex: 1; min-width: 0; margin: 0;
  font-size: 18px; font-weight: 700; letter-spacing: -0.025em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer-cerrar {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: var(--text-soft); padding: 5px;
  border-radius: var(--radius-xs);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.drawer-cerrar:hover { background: var(--surface-sunk); color: var(--red); transform: rotate(90deg); }
.drawer-head-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
}
.drawer-cliente { font-size: 12px; color: var(--text-2); font-weight: 550; }
.drawer-restantes {
  font-size: 11px; font-weight: 650;
  color: var(--accent);
  background: rgba(var(--acento-rgb), 0.09);
  border-radius: var(--radius-pill); padding: 1px 9px;
}
.drawer-restantes.pasado { color: var(--red-dark); background: rgba(217,4,41,0.10); }
.drawer-progreso { margin-top: 11px; }
.drawer-progreso-track {
  height: 5px; background: var(--surface-sunk);
  border-radius: var(--radius-pill); overflow: hidden;
}
.drawer-progreso-fill {
  height: 100%; background: var(--proy-color, var(--accent));
  border-radius: var(--radius-pill);
  transition: width 0.4s cubic-bezier(0.2,0.9,0.3,1);
}
.drawer-progreso-fechas {
  display: flex; justify-content: space-between;
  margin-top: 4px;
  font-size: 10.5px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.drawer-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* ── Cajón: secciones ───────────────────────────────────────────────────── */
.drawer-cuerpo { padding: 4px 18px 22px; }
.drawer-sec { padding: 16px 0; border-bottom: 1px solid var(--border); }
.drawer-sec:last-child { border-bottom: none; }
.drawer-sec-tit {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 11px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-soft);
}
.drawer-sec-n {
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.drawer-sec-eur {
  margin-left: auto; letter-spacing: 0;
  font-size: 12px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.drawer-sec-add {
  margin-left: auto; letter-spacing: 0; text-transform: none;
  font: inherit; font-size: 11px; font-weight: 600;
  background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer;
}
.drawer-sec-add:hover { text-decoration: underline; }
.drawer-vacio { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }

.drawer-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
.drawer-datos dt { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-xsoft); }
.drawer-datos dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--text); }
.drawer-notas {
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface-sunk); border-radius: var(--radius-xs);
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Contactos ──────────────────────────────────────────────────────────── */
.drawer-contactos { display: flex; flex-direction: column; gap: 7px; }
.drawer-contacto {
  padding: 9px 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.drawer-contacto-rol {
  display: inline-block;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); background: rgba(var(--acento-rgb), 0.09);
  border-radius: var(--radius-pill); padding: 1px 7px;
}
.drawer-contacto-nombre { display: block; margin-top: 4px; font-size: 13px; font-weight: 650; }
.drawer-contacto-vias { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.drawer-via { font-size: 11.5px; color: var(--text-soft); text-decoration: none; }
.drawer-via:hover { color: var(--accent); text-decoration: underline; }

/* ── Flota ──────────────────────────────────────────────────────────────── */
.drawer-flota { display: flex; flex-direction: column; gap: 5px; }
.drawer-veh {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); font-size: 12.5px;
}
.drawer-veh-ico { color: var(--text-soft); display: inline-flex; flex-shrink: 0; }
.drawer-veh-nom { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-veh-mat { opacity: 0.55; font-weight: 500; font-variant-numeric: tabular-nums; }
.drawer-veh-cond { font-size: 11px; font-weight: 650; color: var(--accent); flex-shrink: 0; }

/* ── Presupuestos y desglose ────────────────────────────────────────────── */
.drawer-pres { display: flex; flex-direction: column; gap: 4px; }
.drawer-pres-fila {
  display: flex; align-items: center; gap: 8px;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  padding: 7px 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  transition: border-color var(--transition), background var(--transition);
}
.drawer-pres-fila:hover { border-color: var(--accent); background: var(--bg-hover); }
.drawer-pres-num { font-size: 11px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.drawer-pres-cli { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-pres-eur { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.drawer-dep-tit {
  margin: 15px 0 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-xsoft);
}
.drawer-deps { display: flex; flex-direction: column; gap: 3px; }
.drawer-dep {
  display: flex; align-items: center; gap: 9px;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  padding: 5px 8px; border-radius: var(--radius-xs);
  background: none; border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.drawer-dep:hover { background: var(--bg-hover); }
.drawer-dep.activo { border-color: var(--accent); background: rgba(var(--acento-rgb), 0.06); }
.drawer-dep-nom { width: 92px; flex-shrink: 0; font-size: 11.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-dep-barra { flex: 1; height: 6px; background: var(--surface-sunk); border-radius: var(--radius-pill); overflow: hidden; }
.drawer-dep-barra > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.drawer-dep-eur { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 74px; text-align: right; }

.drawer-dep-lineas { margin-top: 10px; padding: 10px; background: var(--surface-sunk); border-radius: var(--radius-xs); }
.drawer-dep-lineas-tit {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px;
  font-size: 11px; font-weight: 700; color: var(--text-2);
}
.drawer-linea {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 0; border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.drawer-linea:last-child { border-bottom: none; }
.drawer-linea-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-linea-cant { color: var(--text-soft); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.drawer-linea-eur { font-weight: 700; flex-shrink: 0; min-width: 66px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Material ───────────────────────────────────────────────────────────── */
.drawer-material { display: flex; flex-direction: column; }
.drawer-mat {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 2px; border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.drawer-mat:last-child { border-bottom: none; }
.drawer-mat-cod { width: 54px; flex-shrink: 0; font-weight: 650; color: var(--text-soft); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.drawer-mat-nom { flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-mat-dep { font-size: 10px; font-weight: 650; color: var(--text-soft); background: var(--surface-sunk); border-radius: var(--radius-pill); padding: 0 6px; flex-shrink: 0; }
.drawer-mat-dias { width: 42px; text-align: right; flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Modal de contactos ─────────────────────────────────────────────────── */
.contactos-cab, .contacto-fila {
  display: grid;
  grid-template-columns: 130px 1fr 1fr 120px 34px;
  gap: 7px; align-items: center;
}
.contactos-cab {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-xsoft);
  padding: 0 2px 6px;
}
.contacto-fila { margin-bottom: 6px; }
.contacto-fila .form-control { font-size: 12.5px; padding: 5px 8px; }

/* ── Calendario resumido de proyectos ───────────────────────────────────── */
.proy-cal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px 12px;
  box-shadow: var(--shadow-xs);
}
.proy-cal-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.proy-cal-titulo {
  font-size: 14px; font-weight: 680; letter-spacing: -0.02em;
  min-width: 190px;
}
.proy-cal-rango { display: inline-flex; gap: 2px; margin-left: auto; background: var(--surface-sunk); border-radius: 0; padding: 2px; }

.proy-cal-cabecera { display: flex; border-bottom: 1px solid var(--border-med); }
.proy-cal-etq-hueco, .proy-cal-etq { width: 178px; min-width: 178px; flex-shrink: 0; }
.proy-cal-meses { flex: 1; display: flex; }
.proy-cal-mes {
  text-align: center; padding: 5px 2px 7px;
  border-left: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--text-2);
}
.proy-cal-mes small { display: block; font-size: 9.5px; font-weight: 500; color: var(--text-xsoft); }

.proy-cal-filas { display: flex; flex-direction: column; }
.proy-cal-fila {
  display: flex; align-items: center;
  min-height: 38px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}
.proy-cal-fila:last-child { border-bottom: none; }
.proy-cal-fila:hover { background: var(--bg-hover); }
.proy-cal-fila.abierta { background: rgba(var(--acento-rgb), 0.06); box-shadow: inset 3px 0 0 var(--accent); }
.proy-cal-etq { display: flex; align-items: center; gap: 7px; padding-right: 12px; }
.proy-cal-etq-nom { font-size: 12.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proy-cal-etq-est {
  margin-left: auto; flex-shrink: 0;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-xsoft);
}
.proy-cal-pista { position: relative; flex: 1; height: 38px; }
.proy-cal-hoy {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1.5px dashed rgba(var(--acento-rgb), 0.6);
  pointer-events: none; z-index: 1;
}
.proy-cal-barra-p {
  position: absolute; top: 8px; bottom: 8px;
  border: none; border-radius: 0;
  display: flex; align-items: center;
  padding: 0 8px; overflow: hidden;
  cursor: pointer; z-index: 2;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.14);
  transition: filter var(--transition), box-shadow var(--transition);
}
.proy-cal-barra-p:hover { filter: brightness(1.08); box-shadow: var(--shadow-sm); }
/* Un proyecto que empieza o acaba fuera del rango se marca con el borde recto
   y una muesca, para que se vea que continúa */
.proy-cal-barra-p.corta-izq { border-radius: 0 4px 4px 0; border-left: 3px dotted rgba(255,255,255,0.75); }
.proy-cal-barra-p.corta-der { border-radius: 0 0 0 4px; border-right: 3px dotted rgba(255,255,255,0.75); }
.proy-cal-barra-p.corta-izq.corta-der { border-radius: 0; }
.proy-cal-barra-p.fin { opacity: 0.62; }
.proy-cal-barra-txt {
  position: sticky; left: 0;
  font-size: 10.5px; font-weight: 650; color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.proy-cal-pie { padding-top: 10px; font-size: 11.5px; color: var(--text-xsoft); }
.proy-cal-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 46px 20px; color: var(--text-soft); font-size: 13px;
}
.proy-cal-nota { font-size: 11.5px; color: var(--text-xsoft); }

/* El desglose por departamento suma bases de línea, mientras que el total del
   presupuesto incluye IVA y descuento global: sin aclararlo, los números
   parecen no cuadrar. */
.drawer-dep-tit {
  display: flex; align-items: baseline; gap: 8px;
}
.drawer-dep-nota {
  letter-spacing: 0; text-transform: none;
  font-size: 10px; font-weight: 500; color: var(--text-xsoft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRÓXIMAS DEVOLUCIONES — desplegable por proyecto
   El material sale de los presupuestos sin contabilizar. Cada proyecto es un
   desplegable y su lista de material tiene alto máximo con scroll: un
   presupuesto de 200 líneas no debe estirar el dashboard.
   ═══════════════════════════════════════════════════════════════════════════ */
.agenda-widget { display: flex; flex-direction: column; gap: 6px; }

.agenda-grupo {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color var(--transition);
}
.agenda-grupo:hover { border-color: var(--border-med); }
.agenda-grupo.abierto { border-color: var(--accent); background: var(--surface); }
/* La urgencia se marca en el borde izquierdo, no tiñendo todo */
.agenda-grupo.urgente { box-shadow: inset 3px 0 0 var(--orange); }
.agenda-grupo.vencido { box-shadow: inset 3px 0 0 var(--red); }

.agenda-cab {
  display: flex; align-items: center; gap: 10px;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: none; border: none;
  padding: 9px 11px;
  transition: background var(--transition);
}
.agenda-cab:hover { background: var(--bg-hover); }

.agenda-fecha {
  flex-shrink: 0; width: 34px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.agenda-fecha-dia { display: block; font-size: 17px; font-weight: 700; line-height: 1.05; color: var(--text); }
.agenda-fecha-mes { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.agenda-grupo.vencido .agenda-fecha-dia { color: var(--red); }
.agenda-grupo.urgente .agenda-fecha-dia { color: var(--orange-dark); }

.agenda-cab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agenda-proy {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agenda-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.agenda-sub {
  font-size: 10.5px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agenda-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.agenda-chips .agenda-dep {
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: none; letter-spacing: 0;
  font-size: 9.5px; font-weight: 600;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 6px;
}
.agenda-chips .agenda-dep b { font-weight: 800; color: var(--text-2); }

.agenda-cab-der { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.agenda-dias {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--text-soft); white-space: nowrap;
}
.agenda-grupo.vencido .agenda-dias { color: var(--red); }
.agenda-grupo.urgente .agenda-dias { color: var(--orange-dark); }
.agenda-chevron { color: var(--text-xsoft); transition: transform 0.2s cubic-bezier(0.34,1.2,0.64,1), color var(--transition); }
.agenda-cab:hover .agenda-chevron { color: var(--accent); }
.agenda-grupo.abierto .agenda-chevron { transform: rotate(180deg); color: var(--accent); }

/* Lista de material: tope de altura con scroll propio */
.agenda-material {
  max-height: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border);
  padding: 4px 11px;
  scrollbar-width: thin;
}
.agenda-material::-webkit-scrollbar { width: 8px; }
.agenda-material::-webkit-scrollbar-thumb {
  background: rgba(43,45,66,0.20); border-radius: var(--radius-pill);
  border: 2px solid transparent; background-clip: content-box;
}
.agenda-mat {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.agenda-mat:last-child { border-bottom: none; }
.agenda-mat-cant {
  flex-shrink: 0; min-width: 38px;
  font-weight: 700; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.agenda-mat-cant i { font-style: normal; font-weight: 500; font-size: 10px; color: var(--text-soft); }
.agenda-mat-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-mat-dep {
  flex-shrink: 0; font-size: 9.5px; font-weight: 650;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 6px;
}
.agenda-mat-eur {
  flex-shrink: 0; min-width: 62px; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.agenda-pie { padding: 7px 11px 9px; border-top: 1px solid var(--border); }

.agenda-empty { padding: 26px 14px; text-align: center; color: var(--text-soft); font-size: 12.5px; line-height: 1.6; }
.agenda-empty-nota { font-size: 11px; color: var(--text-xsoft); }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD DE PROYECTOS — bajar el ruido visual
   Había 15 colores distintos en una banda de 226px: cuatro degradados de
   métrica + cuatro colores de proyecto + los badges de estado. El problema no
   era la cantidad de información, era que el color no significaba nada (¿por
   qué "Finalizados" en rojo?).
   Criterio: el color se reserva para lo que IDENTIFICA (el proyecto) o avisa
   (una métrica que requiere atención). Las métricas neutras van en gris.
   ═══════════════════════════════════════════════════════════════════════════ */

.proy-dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px 12px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.proy-dash-card:hover { border-color: var(--border-med); box-shadow: var(--shadow-sm); }

/* Fuera los cuatro degradados; queda una línea gris fina y discreta */
.proy-dash-card .proy-dash-accent,
.proy-dash-card.green .proy-dash-accent,
.proy-dash-card.yellow .proy-dash-accent,
.proy-dash-card.blue .proy-dash-accent,
.proy-dash-card.purple .proy-dash-accent {
  background: var(--border-med);
  height: 1px;
}

/* Las cifras, todas del mismo color: la que informa es la cifra, no el tono */
.proy-dash-card .proy-dash-val,
.proy-dash-card.green .proy-dash-val,
.proy-dash-card.yellow .proy-dash-val,
.proy-dash-card.blue .proy-dash-val,
.proy-dash-card.purple .proy-dash-val {
  color: var(--text);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.proy-dash-icon { color: var(--text-xsoft); opacity: 1; margin-bottom: 4px; }
.proy-dash-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--text-soft);
}

/* Única excepción: si "Activos" tiene valor, se marca con el acento. Es el dato
   sobre el que se actúa; el resto son consulta. */
.proy-dash-card.destacada .proy-dash-accent { background: var(--accent); height: 2px; }
.proy-dash-card.destacada .proy-dash-val { color: var(--accent); }
.proy-dash-card.destacada .proy-dash-icon { color: var(--accent); }

/* ── Últimos proyectos: el color del proyecto pasa a punto ───────────────── */
.proy-mini {
  border-radius: var(--radius-sm);
  background: var(--surface);
}
/* La banda vertical de 4px competía con las métricas; un punto identifica
   igual de bien y pesa mucho menos. */
.proy-mini-color {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin: 11px 0 0 11px;
  align-self: flex-start;
}
.proy-mini-cuerpo { padding: 9px 11px 10px 7px; }
.proy-mini-nombre { font-size: 12.5px; }
.proy-mini-meta { color: var(--text-xsoft); }
/* Badges de estado en gris salvo el activo, que sí es información de estado */
.proy-mini-badge,
.proy-mini-badge.est-finalizado {
  background: var(--surface-sunk);
  color: var(--text-soft);
}
.proy-mini-badge.est-activo {
  background: rgba(var(--acento-rgb), 0.10);
  color: var(--accent);
}
.proy-mini-badge.est-pendiente { background: var(--surface-sunk); color: var(--text-2); }

.proy-recientes-titulo { color: var(--text-xsoft); }
.proy-recientes { margin: 12px 0 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ENVÍO DE PRESUPUESTOS — selección de destinatarios
   ═══════════════════════════════════════════════════════════════════════════ */
.enviar-aviso {
  padding: 10px 12px; margin-bottom: 14px;
  border-radius: var(--radius-xs);
  font-size: 12px; line-height: 1.5;
}
/* El aviso de "no configurado" tiene que verse: si no, alguien creerá que ha
   mandado un correo que no ha salido. */
.enviar-aviso.pendiente {
  background: rgba(255,149,0,0.09);
  border: 1px solid rgba(255,149,0,0.32);
  color: var(--text-2);
}
.enviar-aviso.ok {
  background: rgba(52,199,89,0.09);
  border: 1px solid rgba(52,199,89,0.30);
  color: var(--text-2);
}
.enviar-n { font-weight: 700; color: var(--accent); }

.enviar-sugeridos { margin-bottom: 9px; }
.enviar-sug-tit {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-xsoft);
  margin-bottom: 5px;
}
.enviar-sug {
  display: flex; align-items: center; gap: 9px;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  padding: 6px 9px; margin-bottom: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  transition: border-color var(--transition), background var(--transition);
}
.enviar-sug:hover { border-color: var(--accent); background: var(--bg-hover); }
.enviar-sug-nom { font-size: 12.5px; font-weight: 620; flex-shrink: 0; }
.enviar-sug-mail { font-size: 11.5px; color: var(--text-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enviar-sug-fuente {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 1px 7px; flex-shrink: 0;
}
.enviar-sug-mas { font-size: 15px; color: var(--accent); font-weight: 400; flex-shrink: 0; }
.enviar-sin-sug {
  font-size: 12px; color: var(--text-soft); line-height: 1.5;
  padding: 9px 11px; background: var(--surface-sunk); border-radius: var(--radius-xs);
}

.enviar-elegidos { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; min-height: 30px; }
.enviar-pastilla {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--acento-rgb), 0.09);
  border: 1px solid rgba(var(--acento-rgb), 0.30);
  border-radius: var(--radius-pill);
  padding: 3px 5px 3px 10px;
  font-size: 12px; font-weight: 620; color: var(--text);
}
.enviar-pastilla i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-soft); }
.enviar-pastilla button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex-shrink: 0;
  background: rgba(var(--acento-rgb), 0.14); border: none;
  border-radius: 50%; color: var(--accent); cursor: pointer;
  transition: background var(--transition);
}
.enviar-pastilla button:hover { background: var(--accent); color: #fff; }
.enviar-vacio { font-size: 12px; color: var(--text-xsoft); padding: 6px 2px; }

.enviar-manual { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 6px; }
.enviar-manual .form-control { font-size: 12.5px; padding: 6px 9px; }

/* ── Calendario de proyectos: vista de 1 mes con días ─────────────────────── */
.proy-cal-cabecera-dias { border-bottom: 1px solid var(--border); }
.proy-cal-dias { flex: 1; display: flex; }
.proy-cal-dia {
  flex: 1 0 0; min-width: 0;
  text-align: center; padding: 3px 0 4px;
  border-left: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.proy-cal-dia-n { display: block; font-size: 10px; font-weight: 700; color: var(--text-2); }
.proy-cal-dia-s { display: block; font-size: 8px; font-weight: 600; color: var(--text-xsoft); text-transform: uppercase; }
.proy-cal-dia.finde { background: rgba(43,45,66,0.035); }
.proy-cal-dia.finde .proy-cal-dia-n { color: var(--text-xsoft); }
.proy-cal-dia.hoy { background: rgba(var(--acento-rgb), 0.10); }
.proy-cal-dia.hoy .proy-cal-dia-n,
.proy-cal-dia.hoy .proy-cal-dia-s { color: var(--accent); }

/* Rejilla diaria de fondo en las pistas, para poder contar días de un vistazo.
   Se dibuja con un degradado repetido en vez de 31 divs por fila. */
.proy-cal-filas.con-dias .proy-cal-pista {
  background-image: repeating-linear-gradient(90deg,
    var(--border) 0 1px,
    transparent 1px calc(100% / var(--cal-dias, 31)));
  background-size: calc(100% / var(--cal-dias, 31)) 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAJÓN DE PROYECTO — pestañas y creador de presupuestos
   ═══════════════════════════════════════════════════════════════════════════ */
.drawer-tabs {
  display: flex; gap: 2px;
  margin: 12px -18px -14px;
  padding: 0 18px;
  border-top: 1px solid var(--border);
}
.drawer-tab {
  font: inherit; font-size: 12px; font-weight: 650;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 12px; margin-bottom: -1px;
  color: var(--text-soft); cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.drawer-tab:hover { color: var(--text); background: var(--bg-hover); }
.drawer-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.drawer-pres-acciones { display: flex; gap: 6px; padding: 14px 0 4px; }

/* ── Panel de nuevo presupuesto ──────────────────────────────────────────── */
.np-panel {
  margin: 10px 0 6px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.08);
  overflow: hidden;
}
.np-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: rgba(var(--acento-rgb), 0.06);
  border-bottom: 1px solid var(--border);
}
.np-cab-tit { flex: 1; font-size: 12px; font-weight: 700; color: var(--text); }
.np-cerrar {
  background: none; border: none; cursor: pointer; color: var(--text-soft);
  padding: 3px; border-radius: var(--radius-xs);
  transition: background var(--transition), color var(--transition);
}
.np-cerrar:hover { background: var(--surface-sunk); color: var(--red); }

.np-datos { display: grid; grid-template-columns: 1fr 130px 78px; gap: 7px; padding: 11px 12px 9px; }
.np-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.np-campo > span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-xsoft); }
.np-campo .form-control { font-size: 12.5px; padding: 5px 8px; }

/* Selector de departamento: el número en negrita son las líneas ya añadidas de
   ese departamento; en cursiva y claro, cuántas hay disponibles. */
.np-deps { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 9px; }
.np-dep {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11px; font-weight: 650;
  background: var(--surface-2); border: 1px solid var(--border-med);
  border-radius: var(--radius-pill); padding: 3px 10px;
  color: var(--text-2); cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.np-dep:hover { border-color: var(--border-strong); background: var(--surface); }
.np-dep.activo { background: var(--accent); border-color: var(--accent); color: #fff; }
.np-dep b { font-weight: 800; font-variant-numeric: tabular-nums; }
.np-dep i {
  font-style: normal; font-weight: 500; font-size: 10px;
  color: var(--text-xsoft); font-variant-numeric: tabular-nums;
}
.np-dep.activo b, .np-dep.activo i { color: #fff; }

.np-busca { margin: 0 12px 8px; width: calc(100% - 24px); font-size: 12.5px; padding: 6px 9px; }

/* Catálogo con tope de altura: es para picar rápido, no para leerlo entero */
.np-catalogo {
  max-height: 176px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-xs);
  scrollbar-width: thin;
}
.np-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  padding: 5px 9px; background: none; border: none;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  transition: background var(--transition);
}
.np-item:last-child { border-bottom: none; }
.np-item:hover:not(:disabled) { background: var(--bg-hover); }
.np-item:disabled { opacity: 0.45; cursor: default; }
.np-item-cod { width: 48px; flex-shrink: 0; font-weight: 650; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.np-item-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-item-eur { flex-shrink: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.np-item-mas { width: 14px; text-align: center; flex-shrink: 0; color: var(--accent); font-weight: 700; }

.np-lineas-tit {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 12px 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-soft);
}
.np-lineas-tit span {
  letter-spacing: 0; background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 6px; font-size: 10px;
}
.np-lineas { padding: 0 12px; max-height: 210px; overflow-y: auto; overscroll-behavior: contain; }
.np-linea {
  display: grid;
  grid-template-columns: 62px 1fr 52px 66px 72px 22px;
  gap: 6px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.np-linea:last-child { border-bottom: none; }
.np-linea-dep {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 1px 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-linea-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-linea-cant, .np-linea-precio {
  font: inherit; font-size: 11.5px;
  border: 1px solid var(--border-med); border-radius: 0;
  padding: 3px 5px; text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}
.np-linea-cant:focus, .np-linea-precio:focus { border-color: var(--accent); outline: none; }
.np-linea-eur { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.np-linea-quitar {
  background: none; border: none; cursor: pointer; color: var(--text-xsoft);
  padding: 2px; border-radius: 0;
  transition: color var(--transition), background var(--transition);
}
.np-linea-quitar:hover { color: var(--red); background: rgba(239,35,60,0.09); }

.np-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 10px 12px 11px; margin-top: 8px;
  background: var(--surface-2); border-top: 1px solid var(--border);
}
.np-totales { display: flex; gap: 12px; font-size: 11px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.np-totales b { color: var(--text); font-weight: 700; font-size: 12px; }
.np-total b { color: var(--accent); font-size: 13.5px; }
.np-botones { display: flex; gap: 6px; margin-left: auto; }
.np-vacio { padding: 14px 12px; font-size: 11.5px; color: var(--text-xsoft); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROYECTOS — ficha a pantalla casi completa
   Con la ficha abierta la lista de proyectos se convierte en un carril estrecho
   pegado a la barra lateral de siempre, y la ficha se queda con el resto. Antes
   la ficha eran 520px y la tabla seguía ocupando la mitad, que es justo lo que
   hacía incómodo trabajar dentro del proyecto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Por defecto (sin ficha) el carril no existe y manda la tabla */
.proy-rail { display: none; }

.proy-layout.con-drawer {
  gap: 0;
  /* La ficha necesita todo el alto disponible */
  align-items: stretch;
  min-height: calc(100vh - 48px);
}
/* La lista pasa a carril: se oculta todo menos la lista compacta */
.proy-layout.con-drawer .proy-main {
  flex: 0 0 232px;
  width: 232px;
  padding-right: 0;
  border-right: 1px solid var(--border-med);
  background: var(--surface-2);
  margin-right: 16px;
}
.proy-layout.con-drawer .proy-main > .page-header,
.proy-layout.con-drawer .proy-main > .proy-tabs,
.proy-layout.con-drawer .proy-main > #proy-dashboard,
.proy-layout.con-drawer .proy-main > #proy-filtros,
.proy-layout.con-drawer .proy-main > #proy-vista-tabla,
.proy-layout.con-drawer .proy-main > #proy-vista-calendario { display: none !important; }
.proy-layout.con-drawer .proy-rail { display: flex; flex-direction: column; }

/* La ficha se come el resto del ancho */
.proy-layout.con-drawer .proy-drawer { flex: 1 1 auto; width: auto; min-width: 0; }
.proy-drawer-inner { width: 100%; }
.proy-layout.con-drawer .proy-drawer-inner {
  max-height: calc(100vh - 44px);
  border-radius: var(--radius-lg);
}

/* ── Carril de proyectos ─────────────────────────────────────────────────── */
.proy-rail-cab { padding: 10px 10px 8px; border-bottom: 1px solid var(--border); }
.proy-rail-busca {
  width: 100%; font: inherit; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border-med);
  border-radius: var(--radius-xs); padding: 5px 9px;
  color: var(--text);
}
.proy-rail-busca:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
.proy-rail-lista {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; scrollbar-width: thin;
}
.proy-rail-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 7px 9px; margin-bottom: 2px;
  transition: background var(--transition), border-color var(--transition);
}
.proy-rail-item:hover { background: var(--surface); border-color: var(--border); }
.proy-rail-item.activo {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.proy-rail-punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.proy-rail-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.proy-rail-nom {
  font-size: 12.5px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proy-rail-meta {
  font-size: 10px; color: var(--text-xsoft);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proy-rail-n {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 5px;
}
.proy-rail-vacio { padding: 20px 10px; text-align: center; font-size: 11.5px; color: var(--text-xsoft); }

/* Con la ficha grande, los datos y la flota pueden ir a más columnas */
.proy-layout.con-drawer .drawer-datos { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.proy-layout.con-drawer .drawer-contactos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 7px; }
.proy-layout.con-drawer .drawer-flota { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 5px; }
.proy-layout.con-drawer .drawer-cuerpo { padding-left: 22px; padding-right: 22px; }
.proy-layout.con-drawer .drawer-head { padding-left: 22px; padding-right: 22px; }
.proy-layout.con-drawer .drawer-tabs { margin-left: -22px; margin-right: -22px; padding: 0 22px; }

/* En pantallas estrechas el carril estorba: se oculta y la ficha ocupa todo */
@media (max-width: 1100px) {
  .proy-layout.con-drawer .proy-main { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CREADOR DE PRESUPUESTO — dos columnas: árbol de categorías + catálogo
   Con una sola barra de búsqueda era muy incómodo montar un presupuesto: hay
   que poder recorrer el inventario por categorías, no adivinar nombres.
   ═══════════════════════════════════════════════════════════════════════════ */
.np-grande { margin: 12px 0 8px; }

.np-grande .np-cab { gap: 10px; flex-wrap: wrap; }
.np-cab-datos { display: flex; gap: 6px; margin-left: auto; }
.np-cab-datos .form-control { font-size: 12px; padding: 5px 8px; width: 150px; }
.np-cab-datos .np-iva { width: 62px; text-align: right; }

.np-cuerpo {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 430px;
}

/* ── Árbol de categorías ─────────────────────────────────────────────────── */
.np-arbol {
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; flex-direction: column;
  min-height: 0;
}
.np-arbol-tit {
  padding: 8px 11px 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-xsoft);
  border-bottom: 1px solid var(--border);
}
.np-arbol-lista {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 5px 6px 10px;
  max-height: 430px;
  scrollbar-width: thin;
}
.np-nodo {
  display: flex; align-items: center; gap: 2px;
  /* La sangría marca el nivel; sin ella el árbol no se lee */
  padding-left: calc(var(--niv, 0) * 13px);
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}
.np-nodo:hover { background: var(--surface); }
.np-nodo.sel { background: rgba(var(--acento-rgb), 0.10); }
.np-nodo-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 20px; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: var(--text-xsoft);
  transition: transform 0.16s cubic-bezier(0.34,1.2,0.64,1), color var(--transition);
}
.np-nodo-chev.vacio { cursor: default; }
.np-nodo-chev:hover { color: var(--accent); }
.np-nodo-chev.abierto { transform: rotate(90deg); color: var(--text-soft); }
.np-nodo-btn {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: none; padding: 3px 4px;
}
.np-nodo-nom {
  flex: 1; min-width: 0;
  font-size: 11.5px; font-weight: 550; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-nodo.sel .np-nodo-nom { color: var(--accent); font-weight: 700; }
.np-nodo-n {
  flex-shrink: 0;
  font-size: 9.5px; font-weight: 700;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 5px;
  font-variant-numeric: tabular-nums;
}
.np-nodo.sel .np-nodo-n { background: rgba(var(--acento-rgb), 0.16); color: var(--accent); }

/* ── Columna derecha ─────────────────────────────────────────────────────── */
.np-derecha { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.np-barra {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-bottom: 1px solid var(--border);
}
.np-grande .np-busca { margin: 0; width: auto; flex: 1; }
.np-barra-info {
  flex-shrink: 0; font-size: 10.5px; color: var(--text-xsoft);
  font-variant-numeric: tabular-nums;
}

.np-grande .np-catalogo {
  margin: 0; border: none; border-bottom: 1px solid var(--border-med);
  max-height: 232px; border-radius: 0;
}
/* Cabecera de columnas, pegada al desplazar */
.np-cat-cab {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: 58px minmax(0,1fr) 110px 44px 78px 22px;
  gap: 8px; padding: 5px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-med);
  font-size: 9px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-xsoft);
}
.np-cat-cab span:nth-child(4), .np-cat-cab span:nth-child(5) { text-align: right; }
.np-grande .np-item {
  display: grid; grid-template-columns: 58px minmax(0,1fr) 110px 44px 78px 22px;
  gap: 8px; padding: 5px 10px;
}
.np-item-cat {
  font-size: 9.5px; font-weight: 650;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  justify-self: start; align-self: center; max-width: 100%;
}
.np-item-uds { text-align: right; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.np-grande .np-item-eur { text-align: right; }

.np-lineas-zona { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.np-grande .np-lineas { max-height: 190px; padding: 0 11px; }
.np-grande .np-lineas-tit { padding: 9px 11px 6px; }
.np-lineas-deps { display: flex; gap: 5px; margin-left: auto; letter-spacing: 0; }
.np-lineas-deps i {
  font-style: normal; font-size: 9.5px; font-weight: 650;
  background: var(--surface-sunk); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: 0 6px;
}

/* En ficha estrecha el árbol se pliega arriba en vez de partir la pantalla */
@media (max-width: 1100px) {
  .np-cuerpo { grid-template-columns: 1fr; }
  .np-arbol { border-right: none; border-bottom: 1px solid var(--border); }
  .np-arbol-lista { max-height: 168px; }
  .np-cat-cab, .np-grande .np-item { grid-template-columns: 52px minmax(0,1fr) 60px 22px; }
  .np-item-cat, .np-item-uds { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRESUPUESTOS — constructor en panel lateral, sin cambiar de pantalla
   Antes editar un presupuesto ocultaba la lista entera. Ahora la lista pasa a
   carril y el constructor ocupa el resto, igual que la ficha de proyecto.
   ═══════════════════════════════════════════════════════════════════════════ */
.pres-layout { display: block; }
.pres-rail { display: none; }

.pres-layout.con-panel {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: calc(100vh - 48px);
}
.pres-layout.con-panel .pres-rail {
  display: flex; flex-direction: column;
  flex: 0 0 240px; width: 240px;
  border-right: 1px solid var(--border-med);
  background: var(--surface-2);
  margin-right: 16px;
}
.pres-layout.con-panel #pres-builder-view {
  flex: 1 1 auto; min-width: 0;
}

.pres-rail-cab {
  display: flex; gap: 6px; align-items: center;
  padding: 10px; border-bottom: 1px solid var(--border);
}
.pres-rail-busca {
  flex: 1; min-width: 0;
  font: inherit; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border-med);
  border-radius: var(--radius-xs); padding: 5px 8px; color: var(--text);
}
.pres-rail-busca:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
.pres-rail-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; }
.pres-rail-item {
  display: flex; align-items: center; gap: 7px;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent;
  border-radius: var(--radius-xs); padding: 6px 8px; margin-bottom: 2px;
  transition: background var(--transition), border-color var(--transition);
}
.pres-rail-item:hover { background: var(--surface); border-color: var(--border); }
.pres-rail-item.activo {
  background: var(--surface); border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.pres-rail-num {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700;
  color: var(--text-soft); font-variant-numeric: tabular-nums;
  writing-mode: horizontal-tb;
}
.pres-rail-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pres-rail-cli {
  font-size: 12px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pres-rail-meta {
  font-size: 10px; color: var(--text-xsoft);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pres-rail-est {
  flex-shrink: 0; font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: var(--radius-pill); padding: 1px 5px;
  background: var(--surface-sunk); color: var(--text-soft);
}
.pres-rail-est.est-aceptado { background: rgba(52,199,89,0.14); color: var(--green-dark); }
.pres-rail-est.est-enviado  { background: rgba(var(--acento-rgb),0.12); color: var(--accent); }
.pres-rail-est.est-rechazado{ background: rgba(239,35,60,0.12); color: var(--red-dark); }

@media (max-width: 1100px) {
  .pres-layout.con-panel .pres-rail { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA LATERAL CON GRUPOS DESPLEGABLES
   Se sube el tamaño de las filas en vez de bajarlo: al añadir cabeceras de
   grupo la tentación es comprimir para que quepa todo, y queda apretado.
   Los grupos ocasionales vienen cerrados, así que hay sitio de sobra.
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar-nav { padding: 12px 8px 16px; gap: 3px; }

/* Filas más generosas que antes (era 8px/13.5px/15px). */
.nav-item {
  padding: 9.5px 11px;
  font-size: 13.8px;
  gap: 10px;
}
.nav-icon { width: 16px; height: 16px; }

.nav-fijos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* ── Cabecera de grupo ───────────────────────────────────────────────────── */
.nav-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 11px 9px 9px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.46);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.nav-group-head:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.78);
}
.nav-group-head:focus-visible {
  outline: 2px solid rgba(239,35,60,0.6);
  outline-offset: -2px;
}
.nav-group-nombre { flex: 1; }

.nav-group-chevron {
  width: 12px; height: 12px;
  flex-shrink: 0;
  opacity: 0.65;
  transform: rotate(90deg);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-group.cerrado .nav-group-chevron { transform: rotate(0deg); }
.nav-group-head:hover .nav-group-chevron { opacity: 1; }

/* Punto rojo: cerrado, sigue diciendo en qué grupo estás. */
.nav-group-activo {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s, transform 0.2s;
}
.nav-group.cerrado.tiene-activo .nav-group-activo { opacity: 1; transform: scale(1); }
.nav-group.cerrado.tiene-activo .nav-group-head { color: rgba(255,255,255,0.72); }

/* ── Cuerpo del grupo ────────────────────────────────────────────────────── */
/* El padding/margin negativo de la izquierda deja que la marca roja del item
   activo (left:-8px) caiga dentro de la caja de relleno y no la recorte
   `overflow:hidden`. */
.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  max-height: 400px;
  padding-left: 8px;
  margin-left: -8px;
  transition: max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}
.nav-group.cerrado .nav-group-items {
  max-height: 0;
  opacity: 0;
}
.nav-group + .nav-group { margin-top: 1px; }

/* ── Barra contraída a iconos ────────────────────────────────────────────── */
/* Sin etiquetas no se puede saber qué hay dentro de un grupo cerrado, así que
   los grupos dejan de existir: todos los iconos a la vista, separados por una
   línea. `overflow: visible` es imprescindible o se recortarían los tooltips. */
.sidebar.collapsed .nav-group-head { display: none; }
.sidebar.collapsed .nav-group-items {
  max-height: none;
  opacity: 1;
  overflow: visible;
  padding-left: 0;
  margin-left: 0;
}
.sidebar.collapsed .nav-fijos { padding-bottom: 8px; margin-bottom: 2px; }
.sidebar.collapsed .nav-group + .nav-group {
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 7px;
  padding-top: 7px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD PRINCIPAL — bajar el ruido visual
   Mismo tratamiento que ya se dio al dashboard de proyectos. Aquí había seis
   degradados distintos en la banda superior (azul, índigo, morado, verde,
   naranja, rojo) más seis iconos de seis colores, todos escritos a pelo en el
   JS saltándose los tokens. El color no señalaba nada: "Equipos en alquiler"
   iba en verde y "Vehículos fuera de servicio" en rojo, con el mismo peso.
   Criterio: gris por defecto, color solo cuando la cifra exige actuar.
   ═══════════════════════════════════════════════════════════════════════════ */

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.stat-card:hover {
  border-color: var(--border-med);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Fuera los seis degradados: una línea gris de 1px */
.stat-card .stat-card-accent,
.stat-card.blue   .stat-card-accent,
.stat-card.green  .stat-card-accent,
.stat-card.orange .stat-card-accent,
.stat-card.red    .stat-card-accent,
.stat-card.indigo .stat-card-accent,
.stat-card.purple .stat-card-accent {
  background: var(--border-med);
  height: 1px;
}

.stat-card-icon { color: var(--text-xsoft); }
.stat-card-icon svg { stroke: currentColor; }

.stat-card .stat-value { color: var(--text); letter-spacing: -0.035em; }
.stat-card .stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--text-soft);
}

/* Única excepción: la tarjeta se enciende cuando su cifra > 0 y significa que
   algo está parado (material en mantenimiento, vehículo fuera de servicio).
   Con todo en orden la banda es completamente neutra. */
.stat-card.alerta .stat-card-accent { background: var(--accent); height: 2px; }
.stat-card.alerta .stat-value       { color: var(--accent); }
.stat-card.alerta .stat-card-icon   { color: var(--accent); }

/* ── Leyenda del Gantt: más discreta ────────────────────────────────────── */
.gantt-leg-dot { width: 7px; height: 7px; }
.gantt-leg-lbl {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--text-soft); text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÓN DE PLEGAR / ABRIR LA BARRA LATERAL
   El icono es un panel en miniatura: marco + barra lateral rellena + flecha.
   Al plegar, la barra del glifo se estrecha igual que la de verdad y la flecha
   gira: el icono representa el estado, no hace falta leer el tooltip.

   Bug que se arregla aquí: `.logo-text` conservaba `flex: 1` al plegarse, así
   que aunque midiera 0 de ancho seguía CRECIENDO y empujaba el botón contra el
   borde derecho (centro en x=39 con la barra de 64px, cuando los iconos de
   navegación van centrados en x=32). Se veía torcido y pequeño.
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar-collapse-btn {
  width: 30px; height: 30px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  transition: background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, width 0.22s ease, height 0.22s ease;
}
.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
.sidebar-collapse-btn:active { background: rgba(255,255,255,0.16); }
.sidebar-collapse-btn:focus-visible {
  outline: 2px solid rgba(239,35,60,0.65);
  outline-offset: 2px;
}
.sidebar-collapse-btn svg.sb-tog { width: 17px; height: 17px; overflow: visible; }

.sb-tog-marco  { opacity: 0.55; transition: opacity 0.18s ease; }
.sb-tog-barra  {
  opacity: 0.9;
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}
.sb-tog-flecha {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}
.sidebar-collapse-btn:hover .sb-tog-marco { opacity: 0.8; }

/* Plegada: la barra del glifo se estrecha y la flecha apunta al otro lado. */
.sidebar.collapsed .sb-tog-barra  { transform: scaleX(0.46); }
.sidebar.collapsed .sb-tog-flecha { transform: rotate(180deg); }

/* La flecha se asoma al pasar el ratón, en la dirección en la que va a moverse. */
.sidebar-collapse-btn:hover .sb-tog-flecha { transform: translateX(-1.5px); }
.sidebar.collapsed .sidebar-collapse-btn:hover .sb-tog-flecha {
  transform: rotate(180deg) translateX(-1.5px);
}

/* ── Plegada: botón más grande y de verdad centrado ─────────────────────── */
/* `flex: 0 0 0` mata el flex-grow que descentraba el botón. */
.sidebar.collapsed .logo-text { flex: 0 0 0; }
.sidebar.collapsed .sidebar-collapse-btn {
  width: 36px; height: 36px;
  margin: 0 auto;
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.72);
}
.sidebar.collapsed .sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.13);
  color: #fff;
}
.sidebar.collapsed .sidebar-collapse-btn svg.sb-tog { width: 19px; height: 19px; }
/* `width: 0` no basta: el borde de 1px a cada lado deja una caja de 2px que
   descentraba el botón 1px respecto a los iconos de navegación. */
.sidebar.collapsed .logo-mark { border: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   REVISIONES DE VEHÍCULOS
   La pantalla la usa un driver de pie en un parking, con una mano y con prisa.
   Todo lo tocable pasa de 48 px de alto (el mínimo cómodo con el pulgar) y el
   asistente ocupa la pantalla entera para que no haya nada más que tocar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Las dos acciones ────────────────────────────────────────────────────── */
.rev-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 6px;
}
.rev-accion {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 22px;
  min-height: 96px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.rev-accion:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.rev-accion:active { transform: translateY(0); }
.rev-accion-ico {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0;
  background: rgba(var(--acento-rgb), 0.08);
  color: var(--accent);
}
.rev-accion-ico svg { width: 28px; height: 28px; }
.rev-accion-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rev-accion-txt strong { font-size: 16.5px; font-weight: 650; color: var(--text); }
.rev-accion-txt small  { font-size: 12.5px; color: var(--text-soft); }

/* ── Fuera ahora mismo ───────────────────────────────────────────────────── */
.rev-pend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.rev-pend {
  display: flex; flex-direction: column; gap: 8px;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rev-pend:hover { box-shadow: var(--shadow-sm); border-color: var(--border-med); border-left-color: var(--accent); }
.rev-pend-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rev-pend-cab strong { font-size: 15.5px; font-weight: 650; }
.rev-pend-mat {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.rev-pend-meta {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  font-size: 12px; color: var(--text-soft);
}
.rev-pend-proy { display: inline-flex; align-items: center; gap: 5px; }
.rev-pend-proy i { width: 7px; height: 7px; border-radius: 50%; }
.rev-pend-sinproy { color: var(--text-xsoft); }
.rev-pend-cta {
  margin-top: 2px; font-size: 12.5px; font-weight: 650; color: var(--accent);
}

.rev-vacio { padding: 34px 18px; text-align: center; }
.rev-vacio-tit { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.rev-vacio-sub { font-size: 13px; color: var(--text-soft); line-height: 1.6; }

/* ── Historial (flota) ───────────────────────────────────────────────────── */
.rev-hist-cab { margin: 26px 0 12px; }
.rev-hist-filtros {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px; margin-top: 10px;
}
.rev-hist-lista {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.rev-hist-fila {
  display: grid;
  grid-template-columns: 76px minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr) 62px 84px 110px 96px;
  align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  font-family: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  transition: background var(--transition);
}
.rev-hist-fila:last-child { border-bottom: 0; }
.rev-hist-fila:hover { background: var(--bg); }
.rev-hist-fila.incompleta { box-shadow: inset 3px 0 0 var(--orange); }
.rev-hist-tipo {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--radius-xs); text-align: center;
}
.rev-hist-tipo-salida  { background: rgba(43,45,66,0.08);  color: var(--text); }
.rev-hist-tipo-entrada { background: rgba(var(--acento-rgb),0.10); color: var(--accent); }
.rev-hist-veh { display: flex; flex-direction: column; }
.rev-hist-veh strong { font-size: 13px; font-weight: 620; }
.rev-hist-veh small  { font-size: 10.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.rev-hist-proy, .rev-hist-driver, .rev-hist-fecha { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-hist-fotos, .rev-hist-km { font-variant-numeric: tabular-nums; color: var(--text-soft); }
.rev-hist-est {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--radius-xs); text-align: center;
}
.rev-hist-est.ok      { background: rgba(43,45,66,0.07); color: var(--text-soft); }
.rev-hist-est.falta   { background: rgba(141,153,174,0.18); color: #6b7589; }
.rev-hist-est.abierta { background: rgba(var(--acento-rgb),0.10); color: var(--accent); }

/* ═══ ASISTENTE A PANTALLA COMPLETA ═══════════════════════════════════════ */
.rev-wizard {
  position: fixed; inset: 0; z-index: 900;
  background: var(--bg);
  display: none; flex-direction: column;
}
.rev-wizard.abierto { display: flex; }
body.rev-wz-activo { overflow: hidden; }

.rev-wz-barra {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rev-wz-atras, .rev-wz-cerrar {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-soft);
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.rev-wz-atras:hover, .rev-wz-cerrar:hover { background: var(--border); color: var(--text); }
.rev-wz-atras svg, .rev-wz-cerrar svg { width: 17px; height: 17px; }
.rev-wz-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rev-wz-tit strong { font-size: 15.5px; font-weight: 650; }
.rev-wz-tit small  { font-size: 12px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rev-wz-progreso { height: 3px; background: var(--border); flex-shrink: 0; }
.rev-wz-progreso-barra {
  height: 100%; background: var(--accent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rev-wz-cuerpo {
  flex: 1; overflow-y: auto;
  padding: 20px 16px 24px;
  max-width: 860px; width: 100%; margin: 0 auto;
}
.rev-wz-pie {
  flex-shrink: 0; padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.rev-wz-pie:empty { display: none; }

.rev-paso-tit { font-size: 20px; font-weight: 680; letter-spacing: -0.02em; margin-bottom: 5px; }
.rev-paso-sub { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; margin-bottom: 18px; }

.rev-btn-grande {
  width: 100%; min-height: 54px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: var(--radius);
  font-family: inherit; font-size: 16px; font-weight: 650;
  cursor: pointer; transition: filter var(--transition);
}
.rev-btn-grande:hover  { filter: brightness(1.08); }
.rev-btn-grande:active { filter: brightness(0.94); }
.rev-btn-grande.aviso  { background: #6b7589; }
.rev-pie-aviso {
  font-size: 12.5px; color: var(--text-soft); line-height: 1.5;
  margin-bottom: 10px; text-align: center;
}

.rev-busca-grande { height: 50px; font-size: 15px; margin-bottom: 14px; }
.rev-input-grande { height: 52px; font-size: 17px; font-variant-numeric: tabular-nums; }

/* ── Elegir vehículo / proyecto ──────────────────────────────────────────── */
.rev-veh-grid, .rev-proy-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.rev-veh, .rev-proy {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 72px; padding: 14px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.rev-veh:hover, .rev-proy:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.rev-veh strong, .rev-proy strong { font-size: 15px; font-weight: 640; }
.rev-veh-mat {
  font-size: 11.5px; color: var(--text-soft); font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.rev-veh-est { font-size: 10.5px; color: var(--orange-dark); text-transform: capitalize; }
.rev-proy { flex-direction: row; align-items: center; gap: 9px; }
.rev-proy i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rev-proy-salta { border-style: dashed; }
.rev-proy-salta strong { color: var(--text-soft); font-weight: 560; }

/* ── Los huecos de foto ──────────────────────────────────────────────────── */
.rev-huecos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.rev-hueco {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--transition);
}
.rev-hueco.hecha { border-color: rgba(43,45,66,0.28); }
.rev-hueco-cab {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.rev-hueco-num {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 11.5px; font-weight: 700;
  background: var(--bg); color: var(--text-soft);
}
.rev-hueco.hecha .rev-hueco-num { background: var(--text); color: var(--surface); }
.rev-hueco-nom { font-size: 13.5px; font-weight: 620; }
.rev-hueco-cuerpo { display: flex; gap: 0; }
.rev-hueco-foto {
  flex: 1; min-width: 0; position: relative;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 0; cursor: pointer; padding: 0;
  font-family: inherit; overflow: hidden;
}
.rev-hueco-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rev-hueco-camara {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px; color: var(--text-xsoft); text-align: center;
}
.rev-hueco-camara svg { width: 30px; height: 30px; }
.rev-hueco-camara em { font-style: normal; font-size: 11px; line-height: 1.4; color: var(--text-soft); }
.rev-hueco-foto:hover .rev-hueco-camara { color: var(--accent); }
.rev-hueco-rehacer {
  position: absolute; bottom: 7px; right: 7px;
  background: rgba(43,45,66,0.82); color: #fff;
  font-size: 10.5px; font-weight: 650; padding: 3px 8px; border-radius: var(--radius-pill);
  opacity: 0; transition: opacity var(--transition);
}
.rev-hueco-foto:hover .rev-hueco-rehacer { opacity: 1; }
/* Referencia "así salió", solo en las entradas */
.rev-hueco-ref {
  width: 76px; flex-shrink: 0; position: relative;
  border-left: 1px solid var(--border); background: var(--bg);
  display: block; text-decoration: none;
}
.rev-hueco-ref img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; }
.rev-hueco-ref span {
  position: absolute; inset: auto 0 0 0;
  background: rgba(43,45,66,0.78); color: #fff;
  font-size: 9.5px; font-weight: 650; text-align: center; padding: 2px 0;
}
.rev-hueco-ref:hover img { opacity: 1; }

/* ── Daños ───────────────────────────────────────────────────────────────── */
.rev-danos {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.rev-danos-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.rev-danos-cab span { font-size: 14px; font-weight: 620; }
.rev-danos-vacio { font-size: 12.5px; color: var(--text-soft); }
.rev-danos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.rev-dano {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.rev-dano img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.rev-dano-nota {
  width: 100%; border: 0; border-top: 1px solid var(--border);
  padding: 8px 9px; font-family: inherit; font-size: 12px; background: var(--surface);
}
.rev-dano-nota:focus { outline: 2px solid rgba(var(--acento-rgb), 0.4); outline-offset: -2px; }
.rev-dano-x {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: rgba(43,45,66,0.78); color: #fff; cursor: pointer; font-size: 12px;
}
.rev-dano-x:hover { background: var(--accent); }

/* ── Último paso ─────────────────────────────────────────────────────────── */
.rev-datos { display: flex; flex-direction: column; gap: 18px; }
.rev-campo { display: flex; flex-direction: column; gap: 7px; }
.rev-campo > span { font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-soft); }
.rev-comb { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.rev-comb-op {
  min-height: 48px; padding: 6px 4px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft);
  transition: all var(--transition);
}
.rev-comb-op:hover { border-color: var(--border-med); color: var(--text); }
.rev-comb-op.sel { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Detalle de una revisión cerrada ────────────────────────────────────── */
.modal.modal-ancho { max-width: 1000px; width: calc(100vw - 40px); }
.revv-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.revv-meta > div { display: flex; flex-direction: column; gap: 3px; }
.revv-meta span { font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-soft); }
.revv-meta strong { font-size: 14px; font-weight: 620; }
.revv-notas, .revv-aviso {
  padding: 11px 13px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: 13px; line-height: 1.55;
}
.revv-notas { background: var(--bg); }
.revv-notas span { display: block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 4px; }
.revv-aviso { background: rgba(141,153,174,0.14); color: #5b6474; }
.revv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.revv-celda { }
.revv-nom { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; }
.revv-par { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.revv-foto {
  position: relative; display: block; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border); text-decoration: none;
}
.revv-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.revv-foto span {
  position: absolute; inset: auto 0 0 0;
  background: rgba(43,45,66,0.78); color: #fff;
  font-size: 9.5px; font-weight: 650; padding: 3px 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.revv-foto:hover { border-color: var(--accent); }
.revv-falta {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; border: 1px dashed var(--border-med);
  border-radius: var(--radius-sm); font-size: 11px; color: var(--text-xsoft);
}
.revv-danos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

/* ── Móvil: es el caso principal, no una adaptación ─────────────────────── */
@media (max-width: 720px) {
  .rev-hist-fila {
    grid-template-columns: 70px minmax(0, 1fr) 86px;
    grid-template-areas: 'tipo veh est' 'tipo proy est';
    row-gap: 2px;
  }
  .rev-hist-tipo   { grid-area: tipo; }
  .rev-hist-veh    { grid-area: veh; }
  .rev-hist-proy   { grid-area: proy; font-size: 11.5px; }
  .rev-hist-est    { grid-area: est; }
  .rev-hist-driver, .rev-hist-fotos, .rev-hist-km, .rev-hist-fecha { display: none; }
  .rev-hist-filtros { grid-template-columns: 1fr; }
  .rev-huecos { grid-template-columns: 1fr; }
  .rev-hueco-foto { aspect-ratio: 16 / 10; }
  .rev-veh-grid, .rev-proy-grid { grid-template-columns: 1fr 1fr; }
  .rev-comb { grid-template-columns: repeat(3, 1fr); }
  .rev-accion { min-height: 84px; padding: 18px; }
  .rev-wz-cuerpo { padding: 16px 12px 20px; }
  .revv-par { grid-template-columns: 1fr; }
}
/* La barra lateral se come 268px, así que el área útil ya va justa antes de
   llegar a "móvil": el nombre del driver salía cortado ("Adm..."). Se sacrifica
   la columna de proyecto, que es la menos crítica en el histórico. */
@media (max-width: 1250px) {
  .rev-hist-fila {
    grid-template-columns: 76px minmax(0, 1.5fr) minmax(0, 1.1fr) 58px 90px 106px 92px;
  }
  .rev-hist-proy { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   USUARIOS Y PERMISOS
   La matriz va dentro de un <details> cerrado: dar de alta a alguien tiene que
   ser elegir un perfil y darle a guardar. Quien necesite afinar, lo abre.
   ═══════════════════════════════════════════════════════════════════════════ */

.modal.modal-usuario-ancho { max-width: 720px; width: calc(100vw - 40px); }

.usr-bloque { margin: 18px 0 4px; }
.usr-bloque-tit {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 9px;
}
.usr-plantillas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 9px;
}
.usr-plantilla {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
  transition: border-color var(--transition), background var(--transition);
}
.usr-plantilla:hover { border-color: var(--border-med); }
.usr-plantilla.sel {
  border-color: var(--accent);
  background: rgba(var(--acento-rgb), 0.04);
}
.usr-plantilla strong { font-size: 13.5px; font-weight: 640; }
.usr-plantilla small  { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; }

.usr-avanzado { margin-top: 16px; }
.usr-avanzado > summary {
  cursor: pointer; padding: 9px 0;
  font-size: 12.5px; font-weight: 620; color: var(--text-soft);
  list-style: none;
}
.usr-avanzado > summary::-webkit-details-marker { display: none; }
.usr-avanzado > summary::before { content: '▸ '; }
.usr-avanzado[open] > summary::before { content: '▾ '; }
.usr-avanzado > summary:hover { color: var(--text); }

.usr-matriz {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 14px;
}
.usr-matriz-cab, .usr-matriz-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 74px);
  align-items: center; gap: 4px;
}
.usr-matriz-cab {
  padding: 8px 12px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.usr-matriz-cab span {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-soft); text-align: center;
}
.usr-matriz-fila {
  padding: 9px 12px; border-bottom: 1px solid var(--border);
}
.usr-matriz-fila:last-child { border-bottom: 0; }
.usr-matriz-fila:hover { background: var(--bg); }
.usr-area { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.usr-area strong { font-size: 13px; font-weight: 620; }
.usr-area small  { font-size: 10.5px; color: var(--text-soft); line-height: 1.35; }
.usr-radio {
  display: flex; align-items: center; justify-content: center;
  min-height: 30px; cursor: pointer;
}
.usr-radio input { position: absolute; opacity: 0; pointer-events: none; }
.usr-radio span {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--border-med); background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
}
.usr-radio:hover span { border-color: var(--text-soft); }
.usr-radio input:checked + span {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.usr-radio input:focus-visible + span { outline: 2px solid rgba(var(--acento-rgb),0.5); outline-offset: 2px; }

.usr-caps { display: flex; flex-direction: column; gap: 8px; }
.usr-cap {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; background: var(--bg);
  border-radius: var(--radius-sm); cursor: pointer;
}
.usr-cap input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); }
.usr-cap-txt { display: flex; flex-direction: column; gap: 1px; }
.usr-cap-txt strong { font-size: 13px; font-weight: 620; }
.usr-cap-txt small  { font-size: 11.5px; color: var(--text-soft); }

/* ── Etiquetas de la columna "Acceso" ───────────────────────────────────── */
.usr-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 620;
  padding: 2px 7px; margin: 1px 3px 1px 0;
  border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text-soft);
  white-space: nowrap;
}
.usr-tag i {
  font-style: normal; font-size: 8.5px; font-weight: 800;
  opacity: 0.7; letter-spacing: 0.03em;
}
.usr-tag-total   { background: rgba(43,45,66,0.10);            color: var(--text); }
.usr-tag-edicion { background: rgba(141,153,174,0.18);         color: #5b6474; }
.usr-tag-lectura { background: var(--bg);                      color: var(--text-soft); }
.usr-tag-admin   { background: rgba(var(--acento-rgb),0.10);   color: var(--accent); font-weight: 700; }
.usr-tag-nada    { background: transparent; color: var(--text-xsoft); font-style: italic; }
.usr-tag-cap     { background: rgba(43,45,66,0.06); color: var(--text-soft); font-size: 9.5px; }

@media (max-width: 640px) {
  .usr-matriz-cab, .usr-matriz-fila { grid-template-columns: minmax(0, 1fr) repeat(4, 50px); }
  .usr-matriz-cab span { font-size: 8.5px; }
  .usr-plantillas { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VEHÍCULOS — bajar la densidad sin quitar información
   Antes había DIEZ tarjetas grandes antes del primer vehículo, repartidas en dos
   filas que hacían lo mismo: filtrar la lista. Tres mostraban el mismo número
   (Todos = Disponibles = Flota total, porque los 26 están activos) y cuatro
   estaban a cero ocupando lo mismo que las útiles.

   Criterio: lo que es un control se pinta como control (chip), no como tarjeta
   de dashboard; lo que está a cero no ocupa sitio; y lo grande pero secundario
   se pliega con un rótulo que diga qué hay dentro.
   ═══════════════════════════════════════════════════════════════════════════ */

.veh-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.veh-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.veh-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: 13px; font-weight: 560; color: var(--text-soft);
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition);
}
.veh-chip span {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--bg); color: var(--text-soft);
}
.veh-chip:hover { border-color: var(--border-med); color: var(--text); }
.veh-chip.activo {
  background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 620;
}
.veh-chip.activo span { background: rgba(255,255,255,0.18); color: #fff; }
/* Una categoría sin vehículos sigue estando (se puede llenar mañana) pero no
   compite: atenuada y sin borde. */
.veh-chip.vacio { opacity: 0.45; }
.veh-chip.vacio:hover { opacity: 0.75; }

.veh-buscador { flex: 1; min-width: 220px; max-width: 380px; height: 34px; }

/* ── Avisos: solo existen si hay algo ───────────────────────────────────── */
.veh-avisos-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.veh-avisos-chips:empty { display: none; }
.veh-aviso-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px; margin-bottom: 10px;
  background: rgba(var(--acento-rgb), 0.07);
  border: 1px solid rgba(var(--acento-rgb), 0.18);
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: 12.5px; color: var(--accent);
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition);
}
.veh-aviso-chip strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.veh-aviso-chip:hover { background: rgba(var(--acento-rgb), 0.13); }
.veh-aviso-chip.activo { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Qué se está viendo ─────────────────────────────────────────────────── */
.veh-resumen {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; min-height: 22px;
}
.veh-resumen-txt { font-size: 12px; color: var(--text-soft); }
.veh-resumen-txt strong { color: var(--text); font-variant-numeric: tabular-nums; }
.veh-resumen-pill {
  font-size: 11px; font-weight: 620;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg); color: var(--text-soft);
}
.veh-resumen-limpiar {
  background: none; border: 0; padding: 2px 4px;
  font-family: inherit; font-size: 11.5px; font-weight: 620;
  color: var(--accent); cursor: pointer;
}
.veh-resumen-limpiar:hover { text-decoration: underline; }

/* ── Plegables ──────────────────────────────────────────────────────────── */
.veh-plegable {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 14px;
}
.veh-plegable > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 15px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-soft);
  transition: color var(--transition);
}
.veh-plegable > summary::-webkit-details-marker { display: none; }
.veh-plegable > summary::before {
  content: ''; width: 0; height: 0; flex-shrink: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.2s ease;
}
.veh-plegable[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.veh-plegable > summary:hover { color: var(--text); }
.veh-pleg-info {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; font-weight: 560; color: var(--text-xsoft);
}
.veh-plegable[open] > summary { border-bottom: 1px solid var(--border); }
.veh-plegable > *:not(summary) { padding: 4px 15px 14px; }
/* El widget de flota trae su propia tarjeta: dentro del plegable sobra. */
.veh-plegable #veh-fleet-widget .dash-widget {
  border: 0; box-shadow: none; padding: 0; background: none;
}

/* ── Tabla: ITV y seguro en una sola columna ────────────────────────────── */
.tabla-veh .veh-doc {
  display: flex; flex-direction: column; gap: 1px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.veh-doc-linea { display: flex; align-items: baseline; gap: 5px; }
.veh-doc-linea em {
  font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-xsoft); min-width: 24px;
}

@media (max-width: 820px) {
  .veh-buscador { max-width: none; }
  .veh-chips { width: 100%; }
}
/* Avisos de documentación: llevaban ⛔ y ⚠️ metidos en el texto, que es
   exactamente el tipo de ruido que se está quitando. Un punto de color basta. */
.veh-alerta-banner {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 2px; font-size: 12.5px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.veh-alerta-banner:last-child { border-bottom: 0; }
.veh-alerta-banner strong { font-weight: 620; }
.veh-alerta-banner em {
  font-style: normal; margin-left: auto;
  font-size: 11.5px; color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.veh-alerta-pt {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-xsoft);
}
.veh-alerta-banner.danger .veh-alerta-pt { background: var(--accent); }
.veh-alerta-banner.danger strong { color: var(--accent); }
/* Cada plegable se queda SIEMPRE en su media columna, abierto o cerrado. Antes
   el que se abría pasaba a ancho completo y empujaba al otro a la línea de
   abajo: abrir uno reorganizaba la pantalla entera y el segundo se perdía de
   vista. Cada uno en su sitio, y el contenido se apaña con el ancho que tiene. */
.veh-plegables {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 14px; align-items: start;
}
.veh-plegables > .veh-plegable { margin-bottom: 0; min-width: 0; }
/* Lo que se meta dentro no puede desbordar la media columna. */
.veh-plegables > .veh-plegable > *:not(summary) { overflow-x: auto; }
@media (max-width: 900px) {
  .veh-plegables { grid-template-columns: 1fr; }
}
/* Un poco más apretados: así los cinco caben en una línea también cuando el
   área útil se estrecha (la barra lateral se lleva 268px). */
.veh-chip { height: 32px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.veh-chip span { font-size: 10.5px; padding: 1px 5px; }
.veh-chips { gap: 4px; }
.veh-buscador { height: 32px; min-width: 190px; }
/* Las reglas de la línea 1353 pintaban la fila entera de ámbar o rojo con
   borde. Con un punto de color y el nombre en rojo ya se entiende, y así diez
   avisos seguidos no son diez rectángulos de color. */
.veh-alerta-banner,
.veh-alerta-banner.danger {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 0;
  color: var(--text);
}
.veh-alerta-banner:last-child,
.veh-alerta-banner.danger:last-child { border-bottom: 0; }
.veh-alerta-banner.danger strong { color: var(--accent); }

/* `flex-shrink: 1` (el valor por defecto) comprimía la fila de chips por debajo
   de su contenido y partía el último a la línea siguiente aunque hubiera sitio.
   Mismo patrón que ya apareció en la barra lateral: si no debe encogerse, hay
   que decirlo. Aquí el que cede es el buscador. */
.veh-chips { flex: 0 0 auto; }
.veh-buscador { flex: 1 1 190px; }
/* Los cinco chips piden ~461px y el área útil da 416 con la barra desplegada,
   así que el último se caía a una segunda línea. En vez de recortar 45px a base
   de padding (y volver a romperse el día que se añada una categoría), una sola
   línea con scroll: es el patrón normal para filtros en pantallas estrechas. */
.veh-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.veh-chips::-webkit-scrollbar { height: 0; }
.veh-chip { flex-shrink: 0; }
/* El buscador solo comparte línea cuando de verdad cabe. */
.veh-buscador { flex: 0 1 240px; }
@media (max-width: 1150px) {
  .veh-buscador { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA LATERAL — acabado profesional y minimalista

   Qué había apilado en el elemento activo: un degradado de rojo a rojo, un
   `box-shadow` de resplandor rojo, un bisel interior blanco (`inset 0 1px 0`) y
   una barra blanca de 3px encima del propio rojo. Cuatro efectos para decir una
   sola cosa: "estás aquí". Y en hover el item se desplazaba 2px Y el icono
   crecía un 12 %: dos movimientos a la vez, que se lee como nervioso.

   El rojo se queda, que es lo que se pidió, pero PLANO. Rojo sólido con texto
   blanco ya es el máximo contraste posible; el degradado y el resplandor no
   añadían contraste, solo ruido.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Activo: un solo rojo, plano ─────────────────────────────────────────── */
.sidebar .nav-item.active,
.sidebar .nav-item.active:hover {
  background: var(--sidebar-rojo);
  color: #fff;
  font-weight: 600;
  box-shadow: none;              /* fuera resplandor y bisel */
  transform: none;
}
/* La barra blanca sobre el rojo era redundante: la fila entera ya está roja. */
.sidebar .nav-item.active::before { display: none; }
.sidebar .nav-item.active .nav-icon { opacity: 1; transform: none; }

/* ── Hover: solo cambia el fondo ─────────────────────────────────────────── */
/* Sin desplazamiento lateral ni icono creciendo. Un cambio de fondo es
   suficiente para saber dónde está el cursor, y no mueve la lista. */
.sidebar .nav-item {
  transition: background 0.14s ease, color 0.14s ease;
}
.sidebar .nav-item:hover {
  background: rgba(255,255,255,0.055);
  color: #fff;
  transform: none;
}
.sidebar .nav-item:hover .nav-icon { transform: none; opacity: 0.9; }
/* La barra roja que crecía en hover se queda, pero fina y solo en los
   inactivos: es la única pista de color y no compite con nada. */
.sidebar .nav-item:hover::before { height: 16px; }
.sidebar .nav-icon { transition: opacity 0.14s ease; }

/* ── Badges: planos ──────────────────────────────────────────────────────── */
.sidebar .nav-badge {
  box-shadow: none;
  font-weight: 650;
  transition: none;
}
.sidebar .nav-item:hover .nav-badge { transform: none; }
.sidebar .nav-item.active .nav-badge {
  background: rgba(255,255,255,0.22);
  color: #fff;
  box-shadow: none;
}

/* ── Cabeceras de grupo: un poco más finas ──────────────────────────────── */
.nav-group-head {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.38);
}
.nav-group-head:hover { background: rgba(255,255,255,0.045); color: rgba(255,255,255,0.7); }
.nav-group.cerrado.tiene-activo .nav-group-head { color: rgba(255,255,255,0.66); }

/* ── Botón de plegar: sin caja ───────────────────────────────────────────── */
/* Un botón con borde y fondo propio junto al logo pesaba más que el logo. Sin
   caja hasta que se pasa el ratón. */
.sidebar-collapse-btn {
  background: none;
  border-color: transparent;
  color: rgba(255,255,255,0.4);
}
.sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: transparent;
  color: #fff;
}
.sidebar.collapsed .sidebar-collapse-btn {
  background: none;
  border-color: transparent;
  color: rgba(255,255,255,0.55);
}
.sidebar.collapsed .sidebar-collapse-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PALMERA DEL FONDO
   Estaba al 100 % de ancho, escalada 1.28, con `drop-shadow` rojo y girando
   1,2° al pasar el ratón. Resultado: una mancha grande que chocaba con los
   rótulos de PERSONAL y SISTEMA, y el resplandor rojo es justo lo que la hacía
   parecer barata.

   Ahora es una marca de agua contenida: más pequeña, anclada abajo, sin brillo
   ni giro, y con una máscara que la desvanece hacia arriba para que nunca se
   cruce con el texto del menú.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-palm-watermark {
  top: auto;
  bottom: 0;
  height: 46%;                    /* solo la franja inferior */
  align-items: flex-end;
  justify-content: center;
  opacity: 0.06;
  filter: none;                   /* fuera el drop-shadow rojo */
  transform: none;
  transition: opacity 0.45s ease;
  /* Se desvanece hacia arriba: así el menú siempre queda limpio por encima. */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 88%);
          mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 88%);
}
.sidebar-palm-watermark img {
  width: 74%;
  max-width: 200px;
  margin: 0 auto;
  filter: invert(1);
  transform: translateY(6%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Interacción: solo se aclara y sube un pelo. Sin giro. */
.sidebar:hover .sidebar-palm-watermark { opacity: 0.11; transform: none; }
.sidebar:hover .sidebar-palm-watermark img { transform: translateY(2%); }

.sidebar.collapsed .sidebar-palm-watermark {
  transform: none;
  opacity: 0.05;
  height: 30%;
}
.sidebar.collapsed .sidebar-palm-watermark img { width: 62%; max-width: 46px; }
/* Segunda pasada: con 46 % de alto y 74 % de ancho seguía siendo una silueta
   grande justo detrás de TECNOLOGÍA y PERSONAL. Una silueta grande tras el texto
   del menú es lo que hace que una barra lateral parezca de plantilla; como marca
   de agua pequeña de esquina se lee como intencionada.
   Si se prefiere quitarla del todo: `display: none` aquí y listo. */
.sidebar-palm-watermark {
  height: 210px;                 /* franja fija: no crece con la pantalla */
  opacity: 0.05;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 14px 10px 0;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 78%);
          mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 78%);
}
.sidebar-palm-watermark img {
  width: 128px;
  max-width: 128px;
  margin: 0;
}
.sidebar:hover .sidebar-palm-watermark { opacity: 0.09; }
.sidebar.collapsed .sidebar-palm-watermark {
  height: 120px;
  justify-content: center;
  padding: 0 0 8px 0;
  opacity: 0.045;
}
.sidebar.collapsed .sidebar-palm-watermark img { width: 40px; max-width: 40px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONSTRUCTOR DE PRESUPUESTOS — panel derecho con árbol de categorías
   Es el mismo componente que la ficha de proyecto. Al panel se le pone también
   la clase `np-grande`, que es la que activa la maquetación en rejilla de
   `.np-item` y de la cabecera, así que aquí solo hace falta el contenedor y las
   dos cosas que este sitio tiene y el otro no: el pie con el catálogo de
   servicios y la cabecera de 5 columnas de ese modo.
   ═══════════════════════════════════════════════════════════════════════════ */

.builder-right-arbol {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
.builder-right-arbol .np-arbol {
  border-right: 1px solid var(--border);
  border-bottom: 0;
  display: flex; flex-direction: column; min-height: 0;
}
.builder-right-arbol .np-arbol-lista { flex: 1; overflow-y: auto; }
.builder-right-arbol .np-derecha { min-width: 0; min-height: 0; }
.builder-right-arbol .np-catalogo { flex: 1; overflow-y: auto; max-height: none; }

/* Pie con el catálogo de servicios y personal: no está en el árbol de
   inventario porque no es material físico, así que tiene su propio acceso. */
.np-cat-pie {
  flex-shrink: 0;
  padding: 8px 11px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* El modo servicios tiene 5 columnas, no 6: sin código y con unidad. */
.np-cat-cab-serv,
.np-grande .np-item-serv {
  grid-template-columns: 110px minmax(0, 1fr) 62px 78px 22px;
}
.np-cat-cab-serv span:nth-child(3),
.np-cat-cab-serv span:nth-child(4) { text-align: right; }
.np-grande .np-item-serv .np-item-uds,
.np-grande .np-item-serv .np-item-eur { text-align: right; }

@media (max-width: 1200px) {
  .builder-right-arbol { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .builder-right-arbol { grid-template-columns: 1fr; }
  .builder-right-arbol .np-arbol {
    border-right: 0; border-bottom: 1px solid var(--border); max-height: 190px;
  }
  .np-cat-cab-serv, .np-grande .np-item-serv {
    grid-template-columns: minmax(0, 1fr) 62px 22px;
  }
  .np-cat-cab-serv span:nth-child(1), .np-grande .np-item-serv .np-item-cat { display: none; }
}
/* El panel derecho era una lista plana de 320px. Ahora lleva árbol (240px) +
   catálogo en rejilla de 6 columnas, que pide ~420px, así que la columna fija de
   320px estrangulaba la izquierda hasta dejarla en una palabra por línea.

   `minmax(0, ...)` en las dos y `min-width: 0` en los hijos: `1fr` es
   `minmax(auto, 1fr)` y ese mínimo `auto` es justo lo que deja que el contenido
   decida el ancho. Es la tercera vez que aparece en el proyecto. */
.builder-wrap {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
}
.builder-wrap > .builder-left,
.builder-wrap > .builder-right { min-width: 0; }

/* Por debajo de 1150px las dos columnas no caben: se apilan y el catálogo pasa
   debajo con altura propia, en vez de comprimir el formulario. */
@media (max-width: 1150px) {
  .builder-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
    overflow: visible;
  }
  .builder-wrap > .builder-left { overflow: visible; }
  .builder-right-arbol { min-height: 420px; max-height: 60vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSTRUCTOR DE PRESUPUESTOS — dos modos

   El problema era mezclar dos trabajos en la misma columna: meter material y
   reestructurar el documento. Al lado del catálogo había inputs de renombrar
   sección, flechas de subir/bajar, un aspa por fila y campos de descuento, así
   que metiendo material se podía tocar algo sin querer.

   Modo material (por defecto): el catálogo manda, la izquierda es casi de
   lectura y solo se ajustan cantidades.
   Modo personalizar: el catálogo se va, la izquierda ocupa todo y ahí sí está
   todo editable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Todo lo estructural se esconde salvo en modo personalizar. */
.pres-solo-personalizar { display: none !important; }
.modo-personalizar .pres-solo-personalizar { display: flex !important; }
.modo-personalizar #pres-forma { display: block !important; }

/* En modo material el catálogo es lo grande (se pidió la lista más grande). */
.builder-wrap { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }

/* En personalizar desaparece el catálogo y la izquierda ocupa todo el ancho. */
.modo-personalizar .builder-wrap { grid-template-columns: minmax(0, 1fr); }
.modo-personalizar .builder-right { display: none; }

#btn-personalizar { white-space: nowrap; }

/* ── Datos del presupuesto: tira de una línea ────────────────────────────── */
.pres-datos {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  margin-bottom: 12px;
}
.pres-datos-fila { display: flex; gap: 10px; align-items: flex-end; }
.pres-datos-extra {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border);
}
.pres-dato { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pres-dato > span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-soft);
}
.pres-dato input, .pres-dato select, .pres-dato textarea {
  width: 100%; font-family: inherit; font-size: 13px;
  padding: 7px 9px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.pres-dato input:focus, .pres-dato select:focus, .pres-dato textarea:focus {
  outline: none; border-color: var(--accent);
}
.pres-dato-ancho { flex: 1 1 100%; }
.pres-datos-mas {
  flex-shrink: 0; height: 33px; padding: 0 11px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-soft);
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition);
}
.pres-datos-mas:hover { border-color: var(--border-med); color: var(--text); }
.pres-datos-mas.abierto { background: var(--accent); border-color: var(--accent); color: #fff; }
.pres-forma-fila { display: flex; gap: 12px; align-items: flex-end; }

/* ── Filas en modo material: casi de lectura ─────────────────────────────── */
.pres-mat-desc { font-size: 13px; line-height: 1.4; }
.pres-mat-desc em {
  display: block; font-style: normal; font-size: 11px; color: var(--text-soft);
}
.pres-mat-precio, .pres-mat-sub {
  text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.pres-mat-sub { font-weight: 650; }
/* Sección en modo material: se ve, no se toca. */
.pres-section-ro .pres-section-cell { padding: 4px 0; }
.pres-section-nom {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft);
}

/* ── Contadores de cantidad ──────────────────────────────────────────────── */
.pres-cant, .pc-cant {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface);
}
.pres-cant button, .pc-cant button {
  width: 26px; height: 28px; flex-shrink: 0;
  background: var(--bg); border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text-soft);
  transition: background var(--transition), color var(--transition);
}
.pres-cant button:hover, .pc-cant button:hover { background: var(--accent); color: #fff; }
.pres-cant input {
  width: 42px; height: 28px; border: 0; text-align: center;
  font-family: inherit; font-size: 13px; font-weight: 650;
  font-variant-numeric: tabular-nums; background: var(--surface); color: var(--text);
  -moz-appearance: textfield;
}
.pres-cant input::-webkit-outer-spin-button,
.pres-cant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pres-cant input:focus { outline: none; background: rgba(var(--acento-rgb), 0.05); }
/* En el catálogo la cantidad es más pequeña: la fila mide 30px. */
.pc-cant { height: 22px; }
.pc-cant button { width: 20px; height: 20px; font-size: 12px; }
.pc-cant b {
  min-width: 22px; text-align: center; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent);
}

/* ── Columna de orden en modo personalizar ──────────────────────────────── */
.pres-orden { text-align: center; white-space: nowrap; }
.pres-orden .pres-section-move { margin: 0 1px; }

/* ── El catálogo, más grande y más legible ──────────────────────────────── */
/* Se pidió "la lista así como la tienes pero más grande". Filas más altas y
   texto un punto mayor; el ítem pasa de <button> a <div role=button> porque
   ahora contiene botones (el contador) y un botón no puede anidar botones. */
.builder-right-arbol .np-item {
  min-height: 30px;
  font-size: 12.5px;
  cursor: pointer;
  align-items: center;
}
.builder-right-arbol .np-item:hover { background: var(--bg-hover); }
.builder-right-arbol .np-item.puesto {
  background: rgba(var(--acento-rgb), 0.045);
}
.builder-right-arbol .np-item:focus-visible {
  outline: 2px solid rgba(var(--acento-rgb), 0.5); outline-offset: -2px;
}
.builder-right-arbol .np-item-nom { font-weight: 500; }
.builder-right-arbol .np-arbol-lista .np-nodo { min-height: 28px; }

@media (max-width: 1150px) {
  .builder-wrap, .modo-personalizar .builder-wrap { grid-template-columns: minmax(0, 1fr); }
  .pres-datos-fila { flex-wrap: wrap; }
  .pres-dato { flex: 1 1 200px; }
}
/* El catálogo del constructor tiene su propia rejilla de 4 columnas (el de la
   ficha de proyecto sigue con 6; usan renderizadores distintos). Y el árbol baja
   a 200px: con 240 la columna del nombre se quedaba sin espacio. */
.builder-right-arbol { grid-template-columns: 200px minmax(0, 1fr); }
.builder-right-arbol .np-cat-cab,
.builder-right-arbol .np-item {
  grid-template-columns: 52px minmax(0, 1fr) 74px 58px;
  gap: 8px;
}
.builder-right-arbol .np-cat-cab span:nth-child(3) { text-align: right; }
.builder-right-arbol .np-item-eur { text-align: right; }
.builder-right-arbol .np-item-mas { text-align: center; }
/* El modo servicios mantiene sus 5 columnas propias. */
.builder-right-arbol .np-cat-cab-serv,
.builder-right-arbol .np-item-serv {
  grid-template-columns: 96px minmax(0, 1fr) 56px 74px 30px;
}
@media (max-width: 1250px) {
  .builder-right-arbol { grid-template-columns: 176px minmax(0, 1fr); }
  .builder-right-arbol .np-cat-cab,
  .builder-right-arbol .np-item { grid-template-columns: 46px minmax(0, 1fr) 66px 54px; gap: 6px; }
}
/* Descuento global e IVA: visibles siempre, editables solo en personalizar. */
.pres-totals-row input:disabled {
  background: none; border-color: transparent; color: var(--text-soft);
  cursor: default; font-weight: 650;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTOR DE MATERIAL — modelo Rentman
   Un solo árbol donde las carpetas se despliegan en línea, casilla en cada fila
   y un único botón "Añadir". Filas cuadradas, densas y sin adornos: lo que hace
   que la lista de Rentman se lea de un vistazo es que todas las filas miden lo
   mismo y la sangría es la única jerarquía.
   ═══════════════════════════════════════════════════════════════════════════ */

.builder-wrap { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }

.pk {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ── Cabecera: cuenta de seleccionados + añadir ─────────────────────────── */
.pk-cab {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2, var(--bg));
}
.pk-cab-x {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-xs);
  color: var(--text-soft); cursor: pointer; visibility: hidden;
}
.pk-cab-x:hover { background: var(--border); color: var(--text); }
.pk-cab-n {
  flex: 1; min-width: 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-soft);
}
.pk-add {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  height: 27px; padding: 0 10px;
  background: var(--accent); border: 0; border-radius: var(--radius-xs);
  font-family: inherit; font-size: 12.5px; font-weight: 650; color: #fff;
  cursor: pointer; transition: filter var(--transition);
}
.pk-add:hover:not(:disabled) { filter: brightness(1.08); }
.pk-add:disabled { background: var(--border); color: var(--text-xsoft); cursor: default; }

/* ── Buscador ───────────────────────────────────────────────────────────── */
.pk-busca-wrap { position: relative; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.pk-busca-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-xsoft); pointer-events: none;
}
.pk-busca-wrap input {
  width: 100%; height: 34px; padding: 0 11px 0 32px;
  border: 0; background: none; font-family: inherit; font-size: 12.5px; color: var(--text);
}
.pk-busca-wrap input:focus { outline: none; background: rgba(var(--acento-rgb), 0.03); }

/* ── La lista ───────────────────────────────────────────────────────────── */
.pk-lista { flex: 1; overflow-y: auto; min-height: 0; }
.pk-res-info {
  padding: 6px 11px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-xsoft);
  background: var(--bg); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.pk-vacio { padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--text-soft); }

/* Filas cuadradas, todas del mismo alto. La sangría (--niv) es la jerarquía. */
.pk-fila {
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px 0 calc(10px + var(--niv, 0) * 15px);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px; cursor: pointer;
  transition: background 0.1s ease;
}
.pk-fila:last-child { border-bottom: 0; }
.pk-fila:hover { background: var(--bg); }

/* Casilla: cuadrada, como en Rentman. */
.pk-check {
  width: 15px; height: 15px; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--border-med);
  border-radius: 0; cursor: pointer; color: #fff;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pk-check:hover:not(:disabled) { border-color: var(--accent); }
.pk-check.todo { background: var(--accent); border-color: var(--accent); }
.pk-check.parte { background: var(--surface); border-color: var(--accent); }
.pk-check.parte i { width: 7px; height: 2px; background: var(--accent); border-radius: 0; }
.pk-check:disabled { opacity: 0.3; cursor: default; }

.pk-chev {
  width: 15px; height: 15px; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--text-soft); cursor: pointer;
  transition: transform 0.16s ease;
}
.pk-chev.abierto { transform: rotate(90deg); }
.pk-chev:disabled { visibility: hidden; }

.pk-carpeta { flex-shrink: 0; color: var(--text-xsoft); }
.pk-cat { background: rgba(43,45,66,0.022); }
.pk-cat .pk-nom { font-weight: 650; }
.pk-cat:hover { background: rgba(43,45,66,0.05); }

.pk-guion {
  flex-shrink: 0; width: 11px; text-align: center;
  color: var(--text-xsoft); font-size: 11px; line-height: 1;
}
.pk-nom {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-cuenta {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-xsoft);
}
.pk-cod {
  flex-shrink: 0; width: 46px; text-align: right;
  font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--text-xsoft);
}
.pk-eur {
  flex-shrink: 0; width: 62px; text-align: right;
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-soft);
}
.pk-ya { flex-shrink: 0; color: var(--accent); font-weight: 700; font-size: 11px; }

/* Fila seleccionada: barra roja a la izquierda, como el azul de Rentman. */
.pk-item.sel {
  background: rgba(var(--acento-rgb), 0.05);
  box-shadow: inset 2px 0 0 var(--accent);
}
.pk-item.sel .pk-nom { font-weight: 600; }
.pk-item.puesto .pk-nom { color: var(--text-soft); }

/* En personalizar el selector desaparece y el documento ocupa todo. */
.modo-personalizar .pk { display: none; }
.modo-personalizar .builder-wrap { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1150px) {
  .builder-wrap { grid-template-columns: minmax(0, 1fr); }
  .pk { min-height: 400px; max-height: 60vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA LATERAL — estructura de Rentman con nuestra paleta

   Qué hace que la de Rentman se lea de un vistazo, y que aquí se copia:
     · TODO cuadrado. Ni una esquina redondeada. Las píldoras con margen que
       había antes flotaban; una fila cuadrada de borde a borde se lee como una
       lista, que es lo que es.
     · El activo ocupa el ancho COMPLETO, sin márgenes laterales.
     · El padre de un grupo lleva icono a la izquierda y el chevron a la
       DERECHA; los hijos van sangrados y SIN icono. Esa diferencia es la que
       hace que la jerarquía se entienda sin leer.
     · Filas densas y del mismo alto. Cero animaciones de movimiento.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sin padding lateral: las filas llegan a los dos bordes. */
.sidebar-nav { padding: 0 0 16px; gap: 0; }

.nav-fijos {
  gap: 0; padding-bottom: 0; margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* ── Filas ──────────────────────────────────────────────────────────────── */
.sidebar .nav-item {
  border-radius: 0;
  padding: 0 14px;
  height: 34px;
  gap: 11px;
  font-size: 13px;
  font-weight: 500;
}
.sidebar .nav-item.active,
.sidebar .nav-item.active:hover {
  border-radius: 0;
  background: var(--sidebar-rojo);
  font-weight: 600;
}
/* La marca de -8px ya no tiene sentido sin padding lateral. */
.sidebar .nav-item::before { display: none; }
.sidebar .nav-item:hover::before { display: none; }
.sidebar .nav-item:hover { background: rgba(255,255,255,0.05); }
.nav-icon { width: 15px; height: 15px; }

/* ── Cabecera de grupo: icono + nombre + chevron a la derecha ───────────── */
.nav-group-head {
  border-radius: 0;
  height: 34px;
  padding: 0 14px;
  gap: 11px;
  font-size: 12.5px;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.62);
}
.nav-group-head:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-group-ico { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.62; }
.nav-group-head:hover .nav-group-ico { opacity: 1; }
.nav-group-nombre { flex: 1; text-align: left; }

/* El chevron apunta abajo abierto y a la izquierda cerrado, como Rentman. */
.nav-group-chevron {
  width: 11px; height: 11px; flex-shrink: 0;
  opacity: 0.45; transform: none;
  transition: transform 0.18s ease, opacity 0.15s ease;
}
.nav-group.cerrado .nav-group-chevron { transform: rotate(-90deg); }
.nav-group-head:hover .nav-group-chevron { opacity: 0.9; }

/* ── Hijos: sangrados y sin icono ───────────────────────────────────────── */
/* Es la diferencia clave con lo que había: el icono lo lleva el padre, y el
   hijo se identifica por la sangría. Con icono en las dos alturas no se
   distinguía el nivel. */
.nav-group-items {
  padding-left: 0; margin-left: 0;
  gap: 0;
  background: rgba(0,0,0,0.16);
}
.nav-group-items .nav-item { padding-left: 40px; height: 32px; font-size: 12.5px; }
.nav-group-items .nav-item .nav-icon { display: none; }
.nav-group-items .nav-item.active { background: var(--sidebar-rojo); }

/* Punto del grupo cerrado con la página activa dentro. */
.nav-group-activo { width: 5px; height: 5px; margin-right: 2px; }

/* ── Barra contraída: los iconos vuelven, sin sangría ni grupos ─────────── */
.sidebar.collapsed .nav-group-items { background: none; }
.sidebar.collapsed .nav-group-items .nav-item { padding: 0; height: 36px; }
.sidebar.collapsed .nav-group-items .nav-item .nav-icon { display: block; }
.sidebar.collapsed .nav-item { height: 36px; }
.sidebar.collapsed .nav-fijos { border-bottom: 1px solid rgba(255,255,255,0.07); }

/* Cabecera del logo, también cuadrada y a juego de alto. */
.sidebar-logo { padding: 0 14px; height: 52px; margin-bottom: 0; }
.logo-mark { width: 28px; height: 28px; border-radius: 0; }
.logo-mark img { width: 22px !important; height: 22px !important; }
.sidebar-collapse-btn { border-radius: 0; }
.sidebar.collapsed .sidebar-collapse-btn { border-radius: 0; }
.sidebar-user { border-radius: 0; }
.sidebar-avatar { border-radius: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROLES — modernización global

   Los filtros parecían de 1999 por tres motivos concretos, todos de fondo:

   1. `.filter-select` NO tenía `appearance: none`, así que los 50 <select> de la
      web pintaban el cromo del sistema: en Safari/macOS, la doble flecha con
      bisel. Eso es lo que cantaba.
   2. Llevaban `box-shadow: var(--shadow-xs)`, que sobre un borde de 1px da
      exactamente el relieve de un control de Windows 98.
   3. `.form-group select` sí tenía `appearance: none` pero SIN flecha propia, o
      sea que esos se quedaban sin ninguna pista de que fueran desplegables. Dos
      errores opuestos conviviendo.

   Se arregla en el primitivo, no pantalla por pantalla: una flecha propia en
   SVG, alturas iguales entre <select> e <input> (con `height`, no con padding,
   que en los select se comporta distinto), foco de acento y nada de relieve.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Una sola definición de la flecha, en SVG, del color del texto suave. */
:root {
  --sel-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%238d99ae' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.3l4 4 4-4'/%3E%3C/svg%3E");
  --ctrl-alto: 34px;
}

/* ── Todos los desplegables de la app ───────────────────────────────────── */
select.filter-select,
select.form-control,
.form-group select,
.pres-dato select,
.rev-wz-cuerpo select,
.filters-bar select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: var(--sel-flecha);
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 30px !important;
  cursor: pointer;
  /* Sin relieve: era la mitad del aspecto antiguo. */
  box-shadow: none;
}
/* Firefox pinta el texto del select con un color propio si no se le dice. */
select.filter-select, select.form-control, .form-group select { text-shadow: none; }

/* ── Alturas iguales para que una barra de filtros quede alineada ───────── */
.filters-bar .filter-select,
.filters-bar .filter-input,
.filters-bar .form-control,
.filters-bar select,
.filters-bar input,
.filters-bar .btn {
  height: var(--ctrl-alto);
  padding-top: 0; padding-bottom: 0;
  font-size: 13px;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.filters-bar { gap: 7px; align-items: center; }

/* ── Aspecto base, limpio ───────────────────────────────────────────────── */
.filter-select, .filter-input, .form-control {
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
  color: var(--text);
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.filter-select:hover, .filter-input:hover, .form-control:hover {
  border-color: var(--border-med);
  background-color: var(--surface);
}
.filter-select:focus, .filter-input:focus, .form-control:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.13);
  background-color: var(--surface);
}
/* El foco global metía un `border-radius` que rompía la forma del control. */
:where(.btn, .filter-input, .filter-select, .form-control):focus-visible {
  border-radius: var(--radius-sm);
}

/* ── Campos de formulario, mismo lenguaje ───────────────────────────────── */
.form-group input, .form-group select, .form-group textarea {
  /* `background-color` y NO el atajo `background`: el atajo resetea
     `background-image` a `none` y se llevaba por delante la flecha de los
     <select> declarada más arriba. Los selects de los modales se quedaban sin
     ninguna pista de que fueran desplegables. */
  background-color: var(--surface);
  border-color: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  height: auto;
  min-height: 36px;
}
.form-group textarea { min-height: 76px; padding: 9px 11px; }

/* ── Fechas: el icono nativo del calendario también delataba la edad ───── */
input[type="date"], input[type="time"], input[type="month"] {
  -webkit-appearance: none;
          appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.14s ease;
  filter: grayscale(1);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }

/* ── Números: fuera las flechitas del sistema ──────────────────────────── */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Casillas y radios: en azul del sistema, ahora del acento ──────────── */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  width: 15px; height: 15px;
  cursor: pointer;
}

/* ── Botones pequeños de acción (los grises de las tablas) ─────────────── */
/* Eran cajas grises con relieve. Ahora: sin fondo, borde de 1px muy suave y
   el color solo al pasar por encima. Dejan de competir con los datos. */
.btn-sm {
  height: 26px;
  padding: 0 9px;
  font-size: 11.5px;
  border-radius: var(--radius-xs);
  box-shadow: none;
}
.btn-ghost.btn-sm {
  background: transparent;
  border-color: var(--border);
  color: var(--text-soft);
  box-shadow: none;
}
.btn-ghost.btn-sm:hover {
  background: var(--bg);
  border-color: var(--border-med);
  color: var(--text);
}
/* Los ghost grandes tampoco necesitan relieve. */
.btn-ghost { box-shadow: none; }
.btn-ghost:hover { box-shadow: none; }

/* ── "Limpiar" y demás acciones de una barra de filtros ───────────────── */
.filters-bar .btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-soft);
  font-weight: 550;
}
.filters-bar .btn-ghost:hover {
  background: var(--bg); border-color: var(--border-med); color: var(--text);
}

/* La barra de filtros de vehículos y la del histórico de revisiones usan sus
   propias rejillas; heredan el aspecto pero conservan su reparto. */
.rev-hist-filtros .form-control,
.veh-barra .filter-input { height: var(--ctrl-alto); padding-top: 0; padding-bottom: 0; }
/* Unificar el radio: había controles a 6px (--radius-xs, de una capa anterior) y
   otros a 8px. Un solo radio para todos los campos de la app. */
.filter-select, .filter-input, .form-control,
.form-group input, .form-group select, .form-group textarea,
.pres-dato input, .pres-dato select, .pres-dato textarea {
  border-radius: var(--radius-sm);
}
/* NOTA: el bloque `.pres-tpl-*` (línea ~5160) es CSS del selector de plantillas
   de presupuesto, eliminado el 27/08/2026. Ya no se usa nada; se deja por si se
   reaprovecha para otra rejilla de tarjetas, pero se puede borrar. */

/* ═══════════════════════════════════════════════════════════════════════════
   MENOS ESQUINA REDONDA — "así es más limpio"
   Se bajan los radios de los tokens en vez de ir clase por clase: así cambia
   toda la app de una vez y las proporciones se mantienen coherentes.
   No se pone todo a 0: un 3-4px sigue leyéndose como intencionado y evita el
   aspecto de tabla HTML sin CSS. Lo que era 14px pasa a 4, lo que era 10 a 3.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --radius-lg:  4px;   /* era 14px */
  --radius:     3px;   /* era 10px */
  --radius-sm:  3px;   /* era  8px */
  --radius-xs:  2px;   /* era  6px */
  /* --radius-pill se queda: los chips y las píldoras de estado sí deben ser
     redondos, es lo que los distingue de un botón. */
}

/* Las tarjetas y paneles pierden también la sombra difusa, que acompañaba al
   redondeo. Un borde de 1px define mejor el límite. */
.card, .form-card, .stat-card, .dash-widget, .builder-section,
.veh-plegable, .pk, .pres-datos, .modal {
  box-shadow: none;
  border: 1px solid var(--border);
}
.modal { box-shadow: 0 18px 50px rgba(43,45,66,0.20); }

/* Avatares y puntos de color siguen redondos: son marcas, no contenedores. */
.sidebar-avatar, .emp-avatar, .avatar,
.pk-check, .usr-radio span { border-radius: 0; }
.rev-pend-proy i, .pres-mini-dot, .proy-dot, .gantt-leg-dot,
.veh-alerta-pt, .nav-group-activo, .pk-cat i { border-radius: 50%; }

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLA DE ACCESO — dos mitades
   Izquierda la marca sobre negro, derecha el formulario sobre blanco. El
   contraste entre las dos mitades es lo que da el efecto; no hace falta una
   foto de stock, y además así no hay que cargar ni servir una imagen grande:
   el fondo es la propia palmera de Palma Pictures a gran tamaño.
   ═══════════════════════════════════════════════════════════════════════════ */

.login-screen {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--surface);
  overflow: hidden;
}

/* ── Mitad izquierda ────────────────────────────────────────────────────── */
.login-marca {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 46px 52px;
  background: #08080a;
  overflow: hidden;
  isolation: isolate;
}
/* Un resplandor rojo muy bajo, abajo a la izquierda: rompe el negro plano sin
   convertirse en un degradado de plantilla. */
.login-marca::before {
  content: '';
  position: absolute; z-index: -2;
  left: -18%; bottom: -28%;
  width: 78%; aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(var(--acento-rgb), 0.30) 0%,
    rgba(var(--acento-rgb), 0.10) 42%,
    transparent 70%);
  pointer-events: none;
}
/* Vela de textura muy fina para que el negro no se vea "digital". */
.login-marca::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(255,255,255,0.045) 0%, transparent 55%);
  pointer-events: none;
}

.login-marca-palma {
  position: absolute; z-index: -1;
  right: -8%; bottom: -12%;
  width: 62%; max-width: 460px;
  opacity: 0.10;
  pointer-events: none;
}
.login-marca-palma img {
  width: 100%; height: auto; display: block;
  filter: invert(1);                 /* el PNG es la palmera negra */
}

.login-marca-cuerpo { position: relative; }
.login-marca-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
  margin-bottom: 18px;
}
.login-marca-tit {
  font-family: var(--font-display, inherit);
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 20px;
}
.login-marca-txt {
  max-width: 34ch;
  font-size: 14.5px; line-height: 1.62;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.login-marca-pie {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
}
.login-marca-pie-ico { width: 17px; height: 17px; filter: invert(1); opacity: 0.6; }

/* ── Mitad derecha ──────────────────────────────────────────────────────── */
.login-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 44px;
  background: var(--surface);
}
.login-form-wrap { width: 100%; max-width: 348px; }

.login-form-cab { margin-bottom: 26px; }
.login-form-cab h2 {
  font-size: 25px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--text); margin: 0 0 6px;
}
.login-form-cab p { font-size: 13.5px; color: var(--text-soft); margin: 0; }

.login-campo { display: block; margin-bottom: 15px; }
.login-campo > span {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft);
}
.login-campo input {
  width: 100%; height: 42px; padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14.5px; color: var(--text);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.login-campo input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.13);
}
.login-campo input::placeholder { color: var(--text-xsoft); }

/* Ojo para ver la contraseña */
.login-pass-wrap { position: relative; }
.login-pass-wrap input { padding-right: 42px; }
.login-ver {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-xs);
  color: var(--text-xsoft); cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}
.login-ver:hover { color: var(--text-soft); background: var(--bg); }
.login-ver.activo { color: var(--accent); }

.login-btn {
  width: 100%; height: 44px; margin-top: 6px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 15px; font-weight: 650;
  cursor: pointer; transition: filter 0.14s ease;
}
.login-btn:hover  { filter: brightness(1.08); }
.login-btn:active { filter: brightness(0.94); }
.login-btn:disabled { opacity: 0.6; cursor: default; }

.login-error {
  margin: 4px 0 12px; padding: 9px 11px;
  background: rgba(var(--acento-rgb), 0.07);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 13px; color: var(--accent);
}

.login-ayuda {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.6; color: var(--text-soft);
}
.login-ayuda strong { color: var(--text); font-weight: 600; }

/* ── Estrecho: se apila y la marca queda como cabecera ─────────────────── */
@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .login-marca { padding: 30px 26px 26px; min-height: 210px; }
  .login-marca-tit { font-size: clamp(30px, 9vw, 40px); }
  .login-marca-txt { display: none; }
  .login-marca-pie { display: none; }
  .login-marca-palma { width: 46%; right: -6%; bottom: -18%; }
  .login-panel { padding: 30px 26px 44px; align-items: flex-start; }
}
/* La regla de la línea ~806 es `#login-screen` (selector de id) y gana a
   `.login-screen` por especificidad, así que seguía en `display:flex` centrando
   las dos mitades como si fueran dos cajas pequeñas. Se repite el id para
   igualar la especificidad. */
#login-screen.login-screen {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  place-items: stretch;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: var(--surface);
}
@media (max-width: 900px) {
  #login-screen.login-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENTOS DE LOS CALENDARIOS — rediseño
   Los tres calendarios se quedan claros como estaban. Lo que se rehace son las
   BARRAS de evento, que es lo que se veía mal.

   Qué llevaba cada barra apilado (en los tres calendarios, igual):
     · `border-radius: 0` — píldora, cuando se pidió cuadrado;
     · `box-shadow: inset 0 -1px 0 rgba(0,0,0,.12)` — un bisel falso abajo;
     · un `::after` con degradado blanco encima — brillo de botón de 2008;
     · `text-shadow: 0 1px 3px rgba(0,0,0,.4)` — para tapar que el texto no
       contrastaba, en vez de arreglar el color del texto;
     · `box-shadow: var(--shadow-sm)` al pasar el ratón;
     · una marca vertical blanca translúcida al inicio del tramo.
   Seis efectos para pintar un rectángulo de color.

   Ahora: relleno plano, esquina viva, y el contraste resuelto de verdad por
   luminancia (clase `txt-oscuro`, que ya calculaba el JS y solo usaba uno de
   los tres calendarios). La legibilidad sale del color del texto, no de una
   sombra que lo emborrona.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --cal-bar-radius: 0px; }

/* ── Base común a las barras de los tres calendarios ───────────────────── */
.gantt-bar,
.proy-cal-barra-p,
.cal-veh-td-day .cal-cell-inner.filled {
  border-radius: 0;
  box-shadow: none;
  transition: filter 0.14s ease, outline-color 0.14s ease;
}
/* Fuera el brillo de degradado del gantt */
.gantt-bar::after { display: none !important; }

/* Al pasar el ratón: solo brillo, y un contorno fino que no descoloca nada
   (una sombra desplazaba visualmente la barra respecto a su día). */
.gantt-bar:hover,
.proy-cal-barra-p:hover {
  filter: brightness(1.06);
  box-shadow: none;
  outline: 1px solid rgba(255,255,255,0.55);
  outline-offset: -1px;
}

/* ── Texto: contraste de verdad, sin sombras ───────────────────────────── */
.gantt-bar-txt,
.proy-cal-barra-txt,
.cal-run-label,
.cal-proy-sub {
  text-shadow: none;
}
.gantt-bar, .proy-cal-barra-p { color: #fff; }
/* Sobre un color claro (amarillo, beis, gris claro) el texto pasa a tinta. */
.gantt-bar.txt-oscuro, .gantt-bar.txt-oscuro .gantt-bar-txt,
.proy-cal-barra-p.txt-oscuro, .proy-cal-barra-p.txt-oscuro .proy-cal-barra-txt {
  color: #17181f;
}
.proy-cal-barra-txt { color: inherit; }
.gantt-bar-txt, .proy-cal-barra-txt {
  font-size: 11px; font-weight: 650; letter-spacing: -0.005em;
}
.cal-run-label { font-size: 11.5px; font-weight: 680; letter-spacing: -0.005em; }
.cal-proy-sub  { font-size: 10px;  font-weight: 550; opacity: 0.9; }
/* `.cal-veh-table .cal-proy-sub` (líneas 5330 y 5603) es más específico que la
   clase sola, así que su `text-shadow` ganaba. Se igualan los selectores. */
.cal-veh-table .cal-run-label,
.cal-veh-table .cal-proy-sub,
.cal-veh-table .cal-run-label:not(.cal-proy-sub) { text-shadow: none; }

/* ── Marca de inicio de tramo ──────────────────────────────────────────── */
/* Una franja sólida más oscura del propio color, no un blanco translúcido:
   funciona sobre cualquier tono y no ensucia el relleno. */
.cal-veh-td-day.cal-run-start .cal-cell-inner::before,
.cal-veh-td-day.cal-run-solo .cal-cell-inner::before {
  width: 3px;
  background: rgba(0,0,0,0.30);
  border-radius: 0;
}
.cal-veh-td-day.cal-run-start .cal-cell-inner.txt-oscuro::before,
.cal-veh-td-day.cal-run-solo  .cal-cell-inner.txt-oscuro::before {
  background: rgba(0,0,0,0.20);
}

/* ── Tramos: esquinas vivas y separación de 1px entre eventos seguidos ─── */
.cal-veh-td-day.cal-run-solo .cal-cell-inner,
.cal-veh-td-day.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-run-mid .cal-cell-inner,
.cal-veh-td-day.cal-run-end .cal-cell-inner {
  border-radius: 0;
  box-shadow: none;
}
/* Los márgenes laterales dejaban huecos de 3px dentro del propio tramo. El
   tramo pasa a ser continuo y el corte se marca solo al principio y al final. */
.cal-veh-td-day.cal-run-solo  .cal-cell-inner { margin: 0 1px; }
.cal-veh-td-day.cal-run-start .cal-cell-inner { margin: 0 0 0 1px; }
.cal-veh-td-day.cal-run-end   .cal-cell-inner { margin: 0 1px 0 0; }
/* Aire vertical. OJO: aquí había `align-self: center`, y como `.cal-cell-wrap`
   es un flex en COLUMNA, el eje transversal es el horizontal — así que centrar
   encogía la barra al ancho de su contenido. Los tramos `mid` se salvaban por
   tener `width: 100%` explícito, pero los de inicio y fin se quedaban en 7px:
   un evento de tres días se pintaba como astilla + bloque + astilla.
   El aire se da con padding en el contenedor, que no toca la alineación. */
.cal-veh-td-day .cal-cell-wrap { padding: 4px 0; }
.cal-veh-td-day .cal-cell-inner.filled { align-self: stretch; }
/* Los tramos de inicio y fin ocupan su celda entera, como los del centro.
   OJO con el eje: `.cal-cell-wrap` es un flex en COLUMNA, así que
     · el ANCHO se controla con `align-self` (eje transversal),
     · el ALTO se controla con `flex` (eje principal).
   Aquí había `flex: 1 1 auto`, que arreglaba el ancho de rebote pero hacía
   CRECER en vertical: el inicio y el fin salían a 52px de alto y el centro a 36,
   o sea un bloque más gordo en los dos extremos de cada tramo. */
.cal-veh-td-day.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-run-end   .cal-cell-inner,
.cal-veh-td-day.cal-run-solo  .cal-cell-inner {
  flex: 0 0 auto;        /* no crecer en alto */
  align-self: stretch;   /* sí ocupar todo el ancho */
  width: auto;
}

/* Y una sola altura para los tres tipos de tramo, para que un evento se lea como
   una barra continua y no como bloques de distinto grosor. */
.cal-veh-td-day .cal-cell-inner.filled,
.cal-veh-td-day.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-run-mid   .cal-cell-inner,
.cal-veh-td-day.cal-run-end   .cal-cell-inner,
.cal-veh-td-day.cal-run-solo  .cal-cell-inner {
  height: 34px;
  min-height: 0;
}

/* Los rellenos laterales de inicio (7-8px) y fin (6px) eran para el texto cuando
   iba en el flujo. Ahora la etiqueta va posicionada y centrada en el tramo, así
   que ese padding solo desplazaba el bloque dentro de su casilla. */
.cal-veh-td-day.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-run-end   .cal-cell-inner,
.cal-veh-td-day.cal-run-solo  .cal-cell-inner { padding-left: 0; padding-right: 0; }

.cal-veh-row:hover .cal-cell-inner.filled {
  box-shadow: none;
  filter: brightness(1.05);
}

/* ── Continuación fuera de rango (calendario de proyectos) ─────────────── */
/* El borde de puntos blanco se veía sucio. Una muesca en diagonal dice "sigue"
   mucho mejor y no añade color. */
.proy-cal-barra-p.corta-izq, .proy-cal-barra-p.corta-der,
.proy-cal-barra-p.corta-izq.corta-der { border-radius: 0; border-left: 0; border-right: 0; }
.proy-cal-barra-p.corta-izq {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7px);
          mask-image: linear-gradient(to right, transparent 0, #000 7px);
}
.proy-cal-barra-p.corta-der {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 7px);
          mask-image: linear-gradient(to left, transparent 0, #000 7px);
}
.proy-cal-barra-p.corta-izq.corta-der {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%);
}

/* ── Alturas y aire ───────────────────────────────────────────────────── */
.gantt-bar { top: 5px; bottom: 5px; padding: 0 8px; }
.proy-cal-barra-p { top: 7px; bottom: 7px; padding: 0 8px; }
/* Un proyecto acabado se atenúa, pero no tanto que no se lea. */
.proy-cal-barra-p.fin { opacity: 0.55; }
/* La línea 5604 usa `.cal-veh-table .cal-cell-inner:not(.txt-oscuro) .cal-run-label`
   — tres clases y un `:not()` — y gana a cualquier selector más corto. Se repite
   la forma exacta para poder quitarle la sombra.
   La sombra estaba ahí para que el blanco se leyera sobre colores medios, pero
   eso ya lo resuelve `txt-oscuro` eligiendo el color del texto por luminancia:
   la sombra solo emborronaba las letras. */
.cal-veh-table .cal-cell-inner:not(.txt-oscuro) .cal-run-label,
.cal-veh-table .cal-cell-inner:not(.txt-oscuro) .cal-proy-sub {
  text-shadow: none;
}
/* Filas de presupuesto en economía: la fila entera lleva al presupuesto, así que
   tiene que parecerlo. */
.eco-fila-pres { cursor: pointer; transition: background var(--transition); }
.eco-fila-pres:hover { background: rgba(var(--acento-rgb), 0.04); }
.eco-fila-pres:hover a { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   LUZ DE LA BARRA LATERAL — la palmera se enciende bajo el cursor
   La marca de agua estaba al 5 % y en hover subía al 9 %: no se notaba. Subirla
   más ensucia el menú, así que en vez de iluminar TODO se ilumina solo el
   círculo donde está el cursor. La palmera aparece y desaparece al pasar por
   encima, como si la enfocaras con una linterna.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar { --luz-x: 50%; --luz-y: 60%; }

.sidebar-luz {
  position: absolute; inset: 0;
  z-index: 0;                 /* debajo de .sidebar-nav, que va en z-index: 1 */
  pointer-events: none;
  display: flex;
  align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.42s ease;
  /* El círculo que revela. Se mueve con las dos variables que pone el JS. */
  -webkit-mask-image: radial-gradient(210px 210px at var(--luz-x) var(--luz-y),
                        #000 0%, rgba(0,0,0,0.55) 42%, transparent 72%);
          mask-image: radial-gradient(210px 210px at var(--luz-x) var(--luz-y),
                        #000 0%, rgba(0,0,0,0.55) 42%, transparent 72%);
}
.sidebar.con-luz .sidebar-luz { opacity: 1; }

.sidebar-luz img {
  width: 116%;                /* grande y desbordando: se ve "dentro" de la barra */
  max-width: none;
  height: auto;
  filter: invert(1);          /* el PNG es la palmera negra */
  opacity: 0.17;
  transform: translateY(2%);
}

/* Un tinte rojo muy leve en el mismo círculo: ata el efecto a la marca sin
   pintar la barra de rojo. */
.sidebar-luz::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(200px 200px at var(--luz-x) var(--luz-y),
                rgba(var(--acento-rgb), 0.10) 0%,
                rgba(var(--acento-rgb), 0.03) 45%,
                transparent 70%);
}

/* Plegada la barra mide 64px: el círculo se reduce para no ser una mancha. */
.sidebar.collapsed .sidebar-luz {
  -webkit-mask-image: radial-gradient(120px 120px at var(--luz-x) var(--luz-y),
                        #000 0%, transparent 72%);
          mask-image: radial-gradient(120px 120px at var(--luz-x) var(--luz-y),
                        #000 0%, transparent 72%);
}
.sidebar.collapsed .sidebar-luz img { width: 200%; opacity: 0.14; }

/* Sin luz, la marca de agua de la esquina sigue como estaba. */
.sidebar.con-luz .sidebar-palm-watermark { opacity: 0.05; }

@media (prefers-reduced-motion: reduce) {
  .sidebar-luz { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDARIO DE FLOTA — limpieza al estilo de la referencia (Jira Timeline)
   Qué lo hacía ilegible:
     · una línea vertical por CADA día → 31 líneas, una reja;
     · columnas de 54px, así que solo cabían 7 días y no se veía el mes;
     · dos filas de cabecera (semana + día) más la letra del día: tres etiquetas
       por columna;
     · 26 filas seguidas sin ninguna jerarquía;
     · una barra de navegación arriba robando una franja de alto.

   Lo que hace limpia la referencia y se ha copiado: pocas líneas, columnas
   estrechas para ver el rango entero, grupos plegables con una banda que dice
   qué hay dentro, y el mando flotando abajo a la derecha.
   ═══════════════════════════════════════════════════════════════════════════ */

#page-veh-calendar { position: relative; }
.cal-veh-mes {
  font-size: 14px; font-weight: 600; color: var(--text-soft);
  margin-left: 14px; letter-spacing: -0.01em;
}

/* ── La reja se va: solo una línea por semana (los lunes) ───────────────── */
.cal-veh-td-day, .cal-veh-th-day { border-right: 0 !important; }
.cal-veh-td-day.cal-lunes, .cal-veh-th-day.cal-lunes {
  box-shadow: inset 1px 0 0 var(--border-med);
}
/* El fin de semana se marca con un tinte, no con bordes. */
.cal-veh-td-day.cal-weekend { background: rgba(43,45,66,0.028); }
.cal-veh-th-day.cal-weekend { background: rgba(43,45,66,0.02); }

/* ── Cabecera: una sola etiqueta por columna ────────────────────────────── */
.cal-veh-th-day { padding: 0; height: 30px; }
.cal-day-num {
  font-size: 10px; font-weight: 500; color: var(--text-xsoft);
  font-variant-numeric: tabular-nums;
}
.cal-veh-th-day.cal-lunes .cal-day-num { font-weight: 750; color: var(--text-soft); }
.cal-veh-th-day.cal-today-col .cal-day-num { color: #fff; font-weight: 750; }
.cal-day-name { display: none; }          /* la letra del día sobra con 31 columnas */
/* La banda de semanas se queda pero mucho más discreta. */
.cal-veh-th-week-row th { height: 20px; }
.cal-week-label { font-size: 9px; font-weight: 650; letter-spacing: 0.07em; opacity: 0.55; }

/* ── Columna de vehículo: más ligera ───────────────────────────────────── */
.cal-veh-name { font-size: 12.5px; font-weight: 620; }
.cal-veh-mat  { font-size: 10px; opacity: 0.7; }
.cal-veh-logo-cell { transform: scale(0.86); transform-origin: left center; }
.cal-veh-td-veh, .cal-veh-th-veh { padding-left: 10px; padding-right: 8px; }

/* ── Filas: ritmo constante y sin cebra (la cebra con 31 columnas vibra) ── */
.cal-veh-row { height: 42px; }
.cal-veh-row.cal-row-alt { background: transparent; }
.cal-veh-table tbody tr { border-bottom: 1px solid var(--border); }
.cal-veh-row:hover { background: rgba(43,45,66,0.02); }

/* ── Cabecera de grupo ─────────────────────────────────────────────────── */
.cal-grupo td { background: var(--bg); border-bottom: 1px solid var(--border-med); }
.cal-grupo-cab {
  position: sticky; left: 0; z-index: 8;
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px;
  background: var(--bg) !important;
  cursor: pointer; user-select: none;
  box-shadow: inset -1px 0 0 var(--border-med);
}
.cal-grupo-cab:hover { background: var(--border) !important; }
.cal-grupo-chev {
  display: flex; flex-shrink: 0; color: var(--text-soft);
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}
.cal-grupo.cerrado .cal-grupo-chev { transform: none; }
.cal-grupo-nom {
  flex: 1; font-size: 11px; font-weight: 750; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2, var(--text));
}
.cal-grupo-n {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-xsoft);
  background: var(--surface); padding: 1px 6px; border-radius: var(--radius-pill);
}
/* Banda de proyectos del grupo: el equivalente a los "sprints" de la
   referencia. Dice qué hay dentro sin tener que desplegarlo. */
.cal-grupo-banda {
  padding: 0 10px; white-space: nowrap; overflow: hidden;
  background: var(--bg) !important;
}
.cal-grupo-chip {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px; margin-right: 4px;
  border-left: 3px solid var(--c, var(--text-soft));
  background: var(--surface);
  font-size: 10px; font-weight: 620; color: var(--text-2, var(--text));
  max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
.cal-grupo-chip.cal-grupo-mas { border-left-color: transparent; color: var(--text-xsoft); }

/* ── Mando flotante ────────────────────────────────────────────────────── */
.cal-mando {
  position: absolute; right: 18px; bottom: 18px; z-index: 30;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px rgba(43,45,66,0.16);
}
.cal-mando button {
  height: 28px; min-width: 28px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-pill);
  font-family: inherit; font-size: 12px; font-weight: 620; color: var(--text-soft);
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.cal-mando button:hover { background: var(--bg); color: var(--text); }
.cal-mando-hoy { padding: 0 11px !important; }
.cal-mando-sep { width: 1px; height: 18px; background: var(--border-med); margin: 0 3px; }
.cal-mando-plegar svg { transition: transform 0.18s ease; }
.cal-mando-plegar.plegado svg { transform: rotate(-90deg); }

@media (max-width: 900px) {
  .cal-mando { right: 12px; bottom: 12px; }
}
/* Con `table-layout: auto` (el defecto) el ANCHO lo decide el contenido, así que
   las etiquetas de los eventos (`white-space: nowrap`) ensanchaban las columnas
   y el `<colgroup>` de 31px se ignoraba: la tabla medía 2120px en vez de 1147 y
   el mes no cabía nunca. Con `fixed`, el colgroup manda. */
.cal-veh-table { table-layout: fixed; }
/* Los `min-width: 62px` de las líneas 2839 y 2923 ganan al `colgroup` y al
   `table-layout: fixed`: son lo que mantenía la tabla en 2120px. */
.cal-veh-th-day, .cal-veh-td-day { min-width: 32px; }

/* La etiqueta del tramo SÍ puede salir de su casilla: un tramo son varias
   casillas seguidas con el mismo fondo, así que el texto se lee sobre el propio
   tramo. Si se recortara a 32px no cabría ni una palabra. */
.cal-veh-td-day { overflow: visible; }
.cal-cell-inner { min-width: 0; overflow: visible; }
.cal-run-label, .cal-proy-sub {
  max-width: none;
  /* El texto se centra en la casilla del medio del tramo y crece hacia los dos
     lados sin empujar nada, porque no participa en el flujo. */
  position: absolute; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}
/* Con dos líneas (conductor + proyecto) hay que separarlas a mano, ya que las
   dos están posicionadas. */
.cal-cell-inner.con-label .cal-run-label:not(.cal-proy-sub) { top: 7px; }
.cal-cell-inner.con-label .cal-proy-sub { bottom: 7px; }
/* Un tramo de un solo día no muestra etiqueta (no cabe): la info va en el
   tooltip, que ya la tiene completa. */
.cal-veh-td-day.cal-run-solo .cal-run-label { display: none; }
/* El contenedor NO recorta: la etiqueta del evento está posicionada y tiene que
   poder salir de su casilla para ocupar el tramo entero. El relleno no necesita
   recorte porque mide exactamente lo que su casilla (`align-self: stretch`). */
.cal-cell-wrap { overflow: visible; }
.cal-cell-inner.filled { overflow: visible; }
/* La línea de semana no se dibuja sobre un evento: un tramo de 12 días tiene que
   leerse como UNA barra, no como bloques cortados cada lunes. La rejilla va
   detrás de las barras, como en la referencia. */
.cal-veh-td-day.cal-lunes.cal-assigned { box-shadow: none; }
/* Pero el inicio de un tramo que cae en lunes sí conserva su marca, que es la
   que dice dónde empieza. */
.cal-veh-td-day.cal-lunes.cal-run-start { box-shadow: inset 1px 0 0 var(--border-med); }

/* ═══════════════════════════════════════════════════════════════════════════
   TEXTO DE LOS EVENTOS — estilo Apple Calendar
   Lo que hace legible el texto de Apple y aquí no estaba:
     · arranca en el BORDE IZQUIERDO del evento, no centrado. Centrado, en una
       barra de 12 días, el texto queda a 6 días del principio y hay que buscar
       con la vista dónde empieza la reserva;
     · cuerpo de verdad (12.5px) y peso medio-alto, no 11px light;
     · dos alturas de texto con jerarquía clara: título y dato secundario;
     · el recorte lo hace el navegador con puntos suspensivos sobre el ancho real
       del tramo, no un contador de caracteres (una "i" y una "W" no miden igual).
   ═══════════════════════════════════════════════════════════════════════════ */

.cal-ev-txt {
  position: absolute;
  left: 7px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: 0;
  /* Ancho real del tramo: días × ancho de columna (que publica
     _calMedirColumna) menos el margen del principio y un poco de aire. */
  max-width: calc(var(--cal-col-w, 32px) * var(--run-len, 1) - 14px);
  min-width: 0;
  z-index: 2;
  line-height: 1.18;
  overflow: hidden;
}

.cal-ev-tit {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ev-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.006em;
  opacity: 0.82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El conductor sigue siendo clicable para editarlo, así que necesita puntero y
   una pista al pasar por encima — pero sin la píldora de antes, que competía
   con el título. */
.cal-ev-sub.cal-cond-chip,
.cal-ev-sub.cal-cond-add {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto;
  cursor: pointer;
  text-decoration-color: transparent;
  transition: opacity 0.14s ease;
}
.cal-ev-sub.cal-cond-chip:hover { opacity: 1; text-decoration: underline; }
.cal-ev-sub.cal-cond-add { opacity: 0.6; font-style: italic; }
.cal-ev-sub.cal-cond-add:hover { opacity: 0.95; }

/* Un solo día: no hay sitio para dos líneas, solo el título y en 11px. */
.cal-veh-td-day.cal-run-solo .cal-ev-txt { left: 4px; max-width: calc(var(--cal-col-w, 32px) - 8px); }
.cal-veh-td-day.cal-run-solo .cal-ev-tit { font-size: 11px; }
.cal-veh-td-day.cal-run-solo .cal-ev-sub { display: none; }

/* Las etiquetas viejas ya no se emiten; si quedara alguna, que no estorbe. */
.cal-run-label:not(.cal-ev-tit):not(.cal-ev-sub) { position: static; transform: none; }
/* `.cal-veh-table .cal-cell-inner.con-label > *` (dos clases y un combinador)
   gana a `.cal-ev-txt` por especificidad y le ponía `max-width: none` y
   `overflow: visible`, así que el ancho calculado del tramo no se aplicaba y el
   texto se cortaba a 39px. Se repite la forma del selector para superarla. */
.cal-veh-table .cal-cell-inner.con-label > .cal-ev-txt {
  max-width: calc(var(--cal-col-w, 32px) * var(--run-len, 1) - 14px);
  overflow: hidden;
}
.cal-veh-table .cal-cell-inner.con-label > .cal-ev-txt > .cal-ev-tit,
.cal-veh-table .cal-cell-inner.con-label > .cal-ev-txt > .cal-ev-sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-veh-td-day.cal-run-solo .cal-veh-table .cal-cell-inner.con-label > .cal-ev-txt,
.cal-veh-table .cal-veh-td-day.cal-run-solo .cal-cell-inner.con-label > .cal-ev-txt {
  max-width: calc(var(--cal-col-w, 32px) - 8px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — DEPARTAMENTOS EN LA FICHA DE PROYECTO
   Tarjeta por departamento con barra proporcional al que más factura. Cuadrado
   y en gris como el resto: el color solo aparece en el punto de identidad.
   ═══════════════════════════════════════════════════════════════════════════ */
.dep-cards { display: flex; flex-direction: column; gap: 6px; }

.dep-card { border: 1px solid var(--border); background: var(--surface); }
.dep-card.abierta { border-color: var(--text-soft); }

.dep-card-cab {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--text);
}
.dep-card-cab:hover { background: var(--surface-2); }
.dep-card-punto { width: 8px; height: 8px; }
.dep-card-nom { min-width: 0; font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-card-sub { display: block; font-weight: 400; font-size: 11px; color: var(--text-soft); }
.dep-card-n {
  min-width: 22px; padding: 1px 6px; text-align: center;
  font-size: 11px; color: var(--text-2); background: var(--surface-2);
}
.dep-card-eur { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }

.dep-card-barra { height: 2px; background: var(--surface-2); }
.dep-card-barra > span { display: block; height: 100%; background: var(--text-soft); }

.dep-detalle { padding: 8px 11px 10px; border-top: 1px solid var(--border); }
.dep-detalle-acciones {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.fleet-link.dep-borrar { color: var(--red); }

.dep-sueltos-tit {
  margin: 14px 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-soft);
}
.dep-total {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
}
.dep-total-n { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--text-soft); }
.dep-total-eur { font-variant-numeric: tabular-nums; }

/* Modal de alta en lote */
.dep-modal-nota { margin: 0 0 10px; font-size: 12px; color: var(--text-soft); }
.dep-modal-lista { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.dep-op {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; cursor: pointer; font-size: 13px;
  border: 1px solid transparent;
}
.dep-op:hover { background: var(--surface-2); }
.dep-op.ya { cursor: default; color: var(--text-soft); }
.dep-op.ya:hover { background: none; }
.dep-op-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-op-ya { margin-left: auto; font-size: 11px; color: var(--text-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — FILTROS DEL REGISTRO DE ACTIVIDAD
   Chips por área arriba (con su contador, que es lo que dice de un vistazo
   dónde ha pasado algo) y la letra pequeña de los filtros debajo.
   ═══════════════════════════════════════════════════════════════════════════ */
.act-filtros { margin-bottom: 16px; }

.act-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.act-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; font: inherit; font-size: 12.5px;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border); cursor: pointer;
}
.act-chip:hover { background: var(--surface-2); color: var(--text); }
.act-chip.sel { background: var(--text); border-color: var(--text); color: var(--surface); }
.act-chip > i {
  font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.act-chip.sel > i { color: var(--surface); opacity: .7; }

.act-filtros-fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.act-filtros-fila .form-control { width: auto; min-width: 150px; font-size: 12.5px; padding: 5px 9px; }
.act-filtros-fila .act-busca { flex: 1 1 240px; min-width: 200px; }

/* Etiqueta de área dentro de cada apunte: es un botón, filtra por esa área. */
.act-area {
  padding: 1px 6px; font: inherit; font-size: 11px;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); cursor: pointer;
}
.act-area:hover { color: var(--text); border-color: var(--text-soft); }
.act-verbo-borrar {
  padding: 1px 6px; font-size: 11px;
  color: var(--red); border: 1px solid currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — CREW (personas y permisos)
   La tabla de seis columnas no aguantaba nueve áreas: cada persona es ahora una
   tarjeta con su puesto y SOLO las áreas donde tiene acceso. Lo que no sale es
   lo que no puede — leer ausencias es más rápido que leer nueves "ninguno".
   ═══════════════════════════════════════════════════════════════════════════ */
.crew-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px;
}
.crew-barra .form-control { width: auto; font-size: 12.5px; padding: 6px 9px; }
.crew-busca { flex: 1 1 260px; min-width: 200px; }
.crew-cuenta { margin-left: auto; font-size: 12px; color: var(--text-soft); }

.crew-cards {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.crew-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 13px; background: var(--surface); border: 1px solid var(--border);
}
.crew-card.baja { opacity: .55; }

.crew-card-cab { display: flex; align-items: center; gap: 10px; }
.crew-avatar {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
}
.crew-avatar.es-admin { color: var(--surface); background: var(--text); border-color: var(--text); }
.crew-ident { min-width: 0; flex: 1; }
.crew-nombre {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crew-user { font-size: 11.5px; color: var(--text-soft); }
.crew-baja-tag { font-size: 11px; font-weight: 400; color: var(--red); }
.crew-puesto {
  flex: 0 0 auto; padding: 2px 7px; font-size: 11px;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
}
.crew-puesto.es-admin { color: var(--surface); background: var(--text); border-color: var(--text); }

.crew-acceso { display: flex; flex-wrap: wrap; gap: 4px; }
.crew-area {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 2px 7px; font-size: 11.5px;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border);
}
.crew-area > i { font-style: normal; font-size: 10px; color: var(--text-soft); }
/* El nivel se marca con el borde izquierdo, no con el fondo: siete etiquetas de
   colores distintos convierten la tarjeta en un semáforo ilegible. */
.crew-niv-lectura { border-left: 2px solid var(--text-soft); }
.crew-niv-edicion { border-left: 2px solid var(--text-2); }
.crew-niv-total   { border-left: 2px solid var(--text); }

.crew-todo, .crew-sin { font-size: 12px; color: var(--text-soft); }
.crew-sin { color: var(--red); }

.crew-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.crew-cap {
  padding: 1px 6px; font-size: 10.5px; color: var(--text-soft);
  border: 1px dashed var(--border);
}

.crew-acciones {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 9px; border-top: 1px solid var(--border);
}
.crew-baja-btn:hover { color: var(--red); }
.crew-nota { font-size: 11px; color: var(--text-soft); }

/* ── Matriz de permisos: grupos ── */
.usr-matriz-grupo { margin-top: 10px; }
.usr-matriz-grupo-tit {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; margin-bottom: 2px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-soft); border-bottom: 1px solid var(--border);
}
.usr-grupo-todo {
  padding: 0; font: inherit; font-size: 10.5px; text-transform: none; letter-spacing: 0;
  color: var(--text-soft); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.usr-grupo-todo:hover { color: var(--text); }
.usr-grupo-todo:first-of-type { margin-left: auto; }

.usr-cap-ui {
  margin-left: auto; padding: 1px 6px; font-size: 10px;
  color: var(--text-soft); border: 1px dashed var(--border); cursor: help;
}

/* Área deducida del texto (apuntes anteriores al registro por ruta): se marca
   con borde discontinuo y una interrogación. Presentarla igual que la que puso
   el servidor sería vender como exacto algo que es una suposición. */
.act-area.inferida { border-style: dashed; }
.act-area.inferida > i { font-style: normal; margin-left: 3px; opacity: .55; }

/* La cabecera de columnas se repite por grupo (ver app.js): sticky no agarraba
   porque quien hace scroll es el modal, no la matriz. Repetida, se aligera para
   que no compita con el título del grupo. */
.usr-matriz-grupo .usr-matriz-cab { padding-top: 2px; padding-bottom: 2px; opacity: .75; }

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — PESTAÑAS

   `.main` pasa a ser una columna: la barra arriba, fija, y el contenido
   desplazándose debajo. Antes `.main` era el propio contenedor con scroll y el
   padding; ahora eso lo hace `.main-scroll`, para que la barra no se vaya hacia
   arriba justo cuando hace falta para cambiar de sitio.
   ═══════════════════════════════════════════════════════════════════════════ */
.main {
  display: flex; flex-direction: column;
  overflow: hidden;           /* quien hace scroll ahora es .main-scroll */
  padding: 0;
}
.main-scroll {
  flex: 1; min-height: 0;     /* sin esto un hijo alto desborda en vez de scrollear */
  overflow-y: auto;
  padding: 28px 30px;
}

.tabbar {
  display: flex; align-items: stretch; gap: 1px;
  flex: 0 0 auto;
  padding: 0 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar:empty { display: none; }

.tab {
  display: flex; align-items: center; gap: 8px;
  /* Se encogen para que quepan más, pero con suelo: por debajo de ~110px el
     título se convierte en "Proye…" y la pestaña deja de servir para nada.
     Pasado ese punto es mejor que la barra desplace. */
  flex: 0 1 auto; min-width: 110px; max-width: 230px;
  padding: 8px 8px 8px 13px;
  font-size: 12.5px; color: var(--text-2);
  background: transparent;
  border-right: 1px solid var(--border);
  cursor: pointer; user-select: none;
  position: relative;
}
.tab:hover { background: var(--bg-hover); color: var(--text); }

/* La activa se pinta como la hoja de delante: mismo fondo que el contenido y
   una banda arriba. Sin la banda, con fondos tan claros, no se distingue. */
.tab.activa {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}
.tab.activa::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent);
}

.tab-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tab-tit {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Segunda línea para el contexto (el proyecto al que pertenece un presupuesto,
   por ejemplo): dos pestañas "Presupuesto" sin más no se distinguen. */
.tab-sub {
  font-size: 10.5px; font-weight: 400; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tab-x {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 18px; height: 18px; padding: 0;
  color: var(--text-soft); background: none; border: 0;
  border-radius: var(--radius-xs); cursor: pointer;
  opacity: 0;                 /* aparece al pasar por encima, como el navegador */
}
.tab:hover .tab-x, .tab.activa .tab-x { opacity: 1; }
.tab-x:hover { background: var(--border-med); color: var(--text); }

@media (max-width: 700px) {
  .main-scroll { padding: 14px; }
  .tab { max-width: 150px; padding-left: 10px; }
  .tab-sub { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — FICHA DE PROYECTO A PÁGINA COMPLETA

   Criterio, tomado de la referencia de Rentman que mandó el usuario: mucho
   blanco, filas finas separadas por una línea de 1px y nada más, sin cajas
   dentro de cajas, y el color reservado al punto de identidad del proyecto y a
   lo que avisa. Todo con tokens, para que el modo oscuro lo herede.
   ═══════════════════════════════════════════════════════════════════════════ */
.pf { max-width: 1180px; }
.pf-vacia { padding: 48px 0; text-align: center; color: var(--text-soft); }

.pf-volver {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 14px; padding: 0;
  font: inherit; font-size: 12.5px; color: var(--text-soft);
  background: none; border: 0; cursor: pointer;
}
.pf-volver:hover { color: var(--text); }

/* ── Cabecera ── */
.pf-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 18px;
}
.pf-cab-izq { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.pf-punto {
  flex: 0 0 auto; width: 10px; height: 10px; margin-top: 9px;
  background: var(--proy-color, var(--text-soft));
}
.pf-nombre {
  margin: 0; font-family: var(--font-display);
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.pf-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 5px; font-size: 12.5px; color: var(--text-soft);
}
.pf-tarde { color: var(--red); }
.pf-cab-der { flex: 0 0 auto; display: flex; gap: 8px; }

/* ── Franja de cifras ── */
.pf-cifras {
  display: grid; gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pf-cifra { display: flex; flex-direction: column; gap: 3px; padding-right: 18px; }
.pf-cifra + .pf-cifra { padding-left: 18px; border-left: 1px solid var(--border); }
.pf-cifra-n {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums;
}
/* Solo se enciende lo que ya está cobrado; el resto es informativo. */
.pf-cifra.bien .pf-cifra-n { color: var(--green); }
.pf-cifra-l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-soft);
}
.pf-progreso { grid-column: 1 / -1; margin-top: 14px; }
.pf-progreso-track { height: 3px; background: var(--surface-sunk); }
.pf-progreso-fill { height: 100%; background: var(--proy-color, var(--text-soft)); }
.pf-progreso-pie {
  display: flex; justify-content: space-between;
  margin-top: 5px; font-size: 11px; color: var(--text-soft);
}

/* ── Secciones internas ── */
.pf-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin: 0 0 22px; border-bottom: 1px solid var(--border);
}
.pf-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 14px; margin-bottom: -1px;
  font: inherit; font-size: 13px; color: var(--text-soft);
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer;
}
.pf-tab:hover { color: var(--text); }
.pf-tab.activa { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.pf-tab > i {
  font-style: normal; font-size: 10.5px; padding: 1px 5px;
  color: var(--text-soft); background: var(--surface-2);
}

.pf-cols {
  display: grid; gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.pf-sec { margin-bottom: 30px; }
.pf-sec-tit {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-soft);
}
.pf-sec-n {
  padding: 1px 6px; font-size: 11px; letter-spacing: 0; text-transform: none;
  color: var(--text-2); background: var(--surface-2);
}
.pf-sec-eur {
  margin-left: auto; font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.pf-sec-add {
  margin-left: auto; padding: 0; font: inherit; font-size: 11px;
  letter-spacing: 0; text-transform: none;
  color: var(--text-soft); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.pf-sec-add:hover { color: var(--text); }
.pf-sec-ayuda { margin: -6px 0 10px; font-size: 12px; color: var(--text-soft); }
.pf-acciones-sec { display: flex; gap: 8px; margin-bottom: 20px; }

.pf-nada {
  padding: 26px 0; font-size: 13px; color: var(--text-soft); line-height: 1.6;
}

/* ── Datos ── */
.pf-datos { margin: 0; display: flex; flex-direction: column; }
.pf-dato {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.pf-dato dt { font-size: 12.5px; color: var(--text-soft); }
.pf-dato dd { margin: 0; font-size: 13px; color: var(--text); }
.pf-notas {
  margin-top: 14px; padding: 12px 14px; font-size: 12.5px; line-height: 1.6;
  color: var(--text-2); background: var(--surface-2); white-space: pre-wrap;
}

/* ── Contactos ── */
.pf-contactos { display: flex; flex-direction: column; }
.pf-contacto {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.pf-contacto-ini {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: var(--text-2);
  background: var(--surface-2);
}
.pf-contacto-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pf-contacto-nom { font-size: 13px; font-weight: 600; color: var(--text); }
.pf-contacto-rol { font-size: 11.5px; color: var(--text-soft); }
.pf-contacto-vias { display: flex; gap: 10px; }
.pf-contacto-vias a { font-size: 12px; color: var(--accent); text-decoration: none; }
.pf-contacto-vias a:hover { text-decoration: underline; }

/* ── Presupuestos ── */
.pf-pres-lista { display: flex; flex-direction: column; }
.pf-pres {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 110px minmax(0, 1fr) auto auto 92px;
  width: 100%; padding: 11px 8px; margin: 0 -8px;
  font: inherit; text-align: left; color: var(--text);
  background: none; border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.pf-pres:hover { background: var(--bg-hover); }
.pf-pres-num { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-pres-cli { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pres-dep {
  padding: 1px 7px; font-size: 11px; color: var(--text-2); background: var(--surface-2);
}
.pf-pres-fec { font-size: 12px; color: var(--text-soft); }
.pf-pres-eur { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Tablas simples de la ficha ── */
.pf-tabla { display: flex; flex-direction: column; }
.pf-tabla-cab, .pf-tabla-fila {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 100px minmax(0, 1fr) 170px 70px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.pf-tabla-cab {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-soft);
}
.pf-tabla-fila { font-size: 13px; color: var(--text); }
.pf-tabla-fila .mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); }
.pf-tabla-fila .suave { color: var(--text-soft); font-size: 12.5px; }
.pf-tabla-fila .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Flota ── */
.pf-flota {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pf-veh {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--border); background: var(--surface);
}
.pf-veh-ico { flex: 0 0 auto; color: var(--text-soft); display: grid; place-items: center; }
.pf-veh-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pf-veh-nom {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-veh-mat { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
.pf-veh-cond { font-size: 11.5px; color: var(--text-soft); }

@media (max-width: 860px) {
  .pf-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .pf-cifra + .pf-cifra { padding-left: 0; border-left: 0; }
  .pf-cifra:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--border); }
  .pf-pres { grid-template-columns: 90px minmax(0, 1fr) 80px; }
  .pf-pres-dep, .pf-pres-fec { display: none; }
  .pf-tabla-cab, .pf-tabla-fila { grid-template-columns: minmax(0, 1fr) 70px; }
  .pf-tabla-cab span:nth-child(1), .pf-tabla-fila span:nth-child(1),
  .pf-tabla-cab span:nth-child(3), .pf-tabla-fila span:nth-child(3) { display: none; }
}

/* La fila de proyecto es un enlace entero: se avisa con el cursor y un realce,
   porque una fila que no parece pulsable no se pulsa. */
.proy-fila-click { cursor: pointer; }
.proy-fila-click:hover { background: var(--bg-hover); }

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — MODO OSCURO

   No se duplica ni una regla: se redefinen los TOKENS y todo lo que ya está
   escrito con `var(--…)` cambia solo. Por eso ha merecido la pena escribir las
   capas nuevas de esta sesión usando únicamente tokens.

   El tema se marca en `<html data-tema="oscuro|claro">`. Si el usuario no ha
   elegido nada se sigue al sistema (`prefers-color-scheme`), que es lo que la
   gente espera hoy; en cuanto toca el interruptor, manda su elección.

   Dos cosas que NO son un simple "invertir":

   1. `--green` en claro es el azul marino oscuro (#2b2d42): en esta paleta lo
      "bueno" se marca con el color serio, no con verde. Sobre fondo oscuro eso
      desaparece, así que en oscuro pasa a un verde real y legible.
   2. El rojo de marca (#ef233c) sobre negro vibra y cansa. Se sube el brillo y
      se baja un punto la saturación (#ff4d5f) para que el contraste sea el
      mismo sin quemar.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-tema="oscuro"] {
  --space-indigo:  #e9eaf0;
  --lavender-grey: #8b90a3;
  --platinum:      #17171c;
  --punch-red:     #ff4d5f;
  --flag-red:      #ff6b7a;

  --bg:            #0f0f13;
  --surface:       #17171d;
  --surface-2:     #1e1e26;
  --surface-sunk:  #0b0b0f;

  --border:        rgba(255,255,255,0.10);
  --border-med:    rgba(255,255,255,0.17);
  --border-strong: rgba(255,255,255,0.30);

  --text:        #e9eaf0;
  --text-2:      rgba(233,234,240,0.76);
  --text-soft:   #8b90a3;
  --text-xsoft:  rgba(139,144,163,0.55);

  --blue:        #ff4d5f;
  --blue-hover:  #ff6b7a;
  --blue-light:  rgba(255,77,95,0.12);

  /* Ver nota 1 de la cabecera */
  --green:       #4ade80;
  --green-dark:  #22c55e;
  --orange:      #a8b0c2;
  --orange-dark: #c2c8d6;
  --red:         #ff4d5f;
  --red-dark:    #ff6b7a;
  --indigo:      #e9eaf0;

  /* Las sombras en oscuro no pueden ser tinta azulada sobre negro: no se ven y
     solo ensucian. Se usan negras y más marcadas. */
  --shadow-xs:   none;
  --shadow-sm:   none;
  --shadow:      0 4px 14px rgba(0,0,0,0.50), 0 0 0 0.5px rgba(255,255,255,0.06);
  --shadow-md:   0 12px 34px rgba(0,0,0,0.60), 0 0 0 0.5px rgba(255,255,255,0.07);
  --shadow-lift: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.06);
  --ring:        0 0 0 3px rgba(255,77,95,0.28);

  --accent:         var(--punch-red);
  --accent-blue:    var(--punch-red);
  --accent-hover:   var(--flag-red);
  --bg-card:        var(--surface);
  --bg-hover:       rgba(255,255,255,0.055);
  --border-light:   var(--border);
  --border-color:   var(--border-med);
  --text-primary:   var(--text);
  --text-secondary: var(--text-2);
  --text-muted:     var(--text-soft);

  /* La barra lateral ya era oscura. En modo oscuro tiene que seguir siendo la
     zona MÁS oscura o el contenido deja de separarse de ella. */
  --sidebar-bg:     #050507;   /* casi negra: en oscuro tiene que ser MÁS oscura que el contenido, o menú y página se funden */
  --sidebar-bg-alt: #0a0a0d;

  color-scheme: dark;   /* barras de scroll y controles nativos del navegador */
}

/* Sin elección explícita se sigue al sistema. Se repiten los tokens con la
   misma definición en vez de encadenar selectores: encadenarlos obligaba a que
   `data-tema` estuviera puesto siempre, y en el primer pintado todavía no lo
   está — la página parpadeaba en claro antes de ponerse oscura. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --space-indigo:  #e9eaf0;
    --lavender-grey: #8b90a3;
    --platinum:      #17171c;
    --punch-red:     #ff4d5f;
    --flag-red:      #ff6b7a;
    --bg:            #0f0f13;
    --surface:       #17171d;
    --surface-2:     #1e1e26;
    --surface-sunk:  #0b0b0f;
    --border:        rgba(255,255,255,0.10);
    --border-med:    rgba(255,255,255,0.17);
    --border-strong: rgba(255,255,255,0.30);
    --text:        #e9eaf0;
    --text-2:      rgba(233,234,240,0.76);
    --text-soft:   #8b90a3;
    --text-xsoft:  rgba(139,144,163,0.55);
    --blue:        #ff4d5f;
    --blue-hover:  #ff6b7a;
    --blue-light:  rgba(255,77,95,0.12);
    --green:       #4ade80;
    --green-dark:  #22c55e;
    --orange:      #a8b0c2;
    --orange-dark: #c2c8d6;
    --red:         #ff4d5f;
    --red-dark:    #ff6b7a;
    --indigo:      #e9eaf0;
    --shadow-xs:   none;
    --shadow-sm:   none;
    --shadow:      0 4px 14px rgba(0,0,0,0.50), 0 0 0 0.5px rgba(255,255,255,0.06);
    --shadow-md:   0 12px 34px rgba(0,0,0,0.60), 0 0 0 0.5px rgba(255,255,255,0.07);
    --shadow-lift: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.06);
    --ring:        0 0 0 3px rgba(255,77,95,0.28);
    --accent:         var(--punch-red);
    --accent-blue:    var(--punch-red);
    --accent-hover:   var(--flag-red);
    --bg-card:        var(--surface);
    --bg-hover:       rgba(255,255,255,0.055);
    --border-light:   var(--border);
    --border-color:   var(--border-med);
    --text-primary:   var(--text);
    --text-secondary: var(--text-2);
    --text-muted:     var(--text-soft);
    --sidebar-bg:     #050507;   /* casi negra: en oscuro tiene que ser MÁS oscura que el contenido, o menú y página se funden */
    --sidebar-bg-alt: #0a0a0d;
    color-scheme: dark;
  }
}

/* Interruptor de tema, al final de la barra de pestañas: es el único sitio que
   está siempre a la vista sin robarle espacio al contenido. */
.tabbar-fila {
  display: flex; align-items: stretch;
  flex: 0 0 auto; min-width: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tabbar-fila > .tabbar { flex: 1; min-width: 0; border-bottom: 0; }

.tema-btn {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 40px; padding: 0;
  color: var(--text-soft); background: none;
  border: 0; border-left: 1px solid var(--border);
  cursor: pointer;
}
.tema-btn:hover { color: var(--text); background: var(--bg-hover); }
/* Se enseña el icono de a DÓNDE vas, no el de dónde estás: en claro se ofrece
   la luna. Al revés hay que pararse a pensar qué significa. */
.tema-ico-luna { display: block; }
.tema-ico-sol  { display: none; }
:root[data-tema="oscuro"] .tema-ico-luna { display: none; }
:root[data-tema="oscuro"] .tema-ico-sol  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema-ico-luna { display: none; }
  :root:not([data-tema="claro"]) .tema-ico-sol  { display: block; }
}

/* ── Modo oscuro: remates que los tokens no alcanzan ──────────────────────
   Cuatro sitios que fijaban blanco o casi-blanco a pelo. La columna de
   vehículos del calendario es `position: sticky`, así que su fondo tiene que
   ser OPACO sí o sí (el contenido pasa por debajo); lo que no puede es ser
   blanco fijo. */
.cal-veh-td-veh,
.cal-veh-table tbody .cal-veh-td-veh { background: var(--surface); }
.cal-veh-table tbody tr:hover .cal-veh-td-veh { background: var(--surface-2); }

/* Etiqueta de evento del Gantt: llevaba fondo blanco fijo para taparse a sí
   misma sobre la barra. Ahora se tapa con el fondo del tema. */
.gantt-event-label.gantt-label-link { background: var(--surface); color: var(--text); }

.tel-pill-dot { background: var(--text-soft); }

/* La cabecera de la columna de vehículos lleva un fondo OSCURO fijo puesto por
   el rediseño estilo Jira, que gana a la regla de más arriba. Como ese fondo no
   cambia con el tema, su texto tampoco puede: claro en ambos. Se descubrió al
   sustituir a ciegas `color:#fff` por `var(--surface)` en las reglas invertidas
   — sirve para las que invierten de verdad, no para las de fondo fijo. */
.cal-veh-th-veh,
.cal-veh-th-week-cell,
.cal-veh-table .cal-veh-th-day,
.cal-veh-table .cal-veh-th-day.cal-weekend { color: rgba(255,255,255,0.9); }
.cal-veh-table .cal-veh-th-day .cal-veh-th-dia,
.cal-veh-table .cal-veh-th-day small { color: rgba(255,255,255,0.55); }

/* Bandas cebra del calendario de flota y del Gantt: estaban en gris claro fijo,
   que en modo oscuro son dos rayas blancas en mitad de la tabla. Se sustituyen
   por el token hundido, que es gris claro en claro y casi negro en oscuro —
   mismo efecto de banda, en los dos temas. */
.cal-veh-row.cal-row-alt .cal-veh-td-veh,
.cal-veh-table .cal-veh-row.cal-row-alt .cal-veh-td-veh { background: var(--surface-2); }
.cal-veh-row.cal-row-alt .cal-veh-td-day:not(.cal-assigned),
.cal-veh-table .cal-veh-row.cal-row-alt .cal-veh-td-day.cal-weekend:not(.cal-assigned) {
  background: var(--surface-2);
}
.gantt-event-row:nth-child(even) .gantt-event-label { background: var(--surface-2); }

/* Logo en las fichas QR: la palmera junto al nombre. Antes solo había texto.
   El fichero es el mismo favicon.png (5 KB) que ya se sirve, así que no añade
   ninguna descarga nueva. */
.ficha-empresa { display: flex; align-items: center; gap: 5px; }
.ficha-logo { flex: 0 0 auto; display: block; object-fit: contain; }

/* Al imprimir, los fondos y los logos se van si el navegador no los fuerza. */
@media print {
  .ficha-logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — VEHÍCULOS EN CUADRÍCULA
   La foto manda: es lo que hace reconocible un vehículo de un vistazo. Debajo,
   matrícula y las tres fechas por las que se entra a esta pantalla.
   ═══════════════════════════════════════════════════════════════════════════ */
.veh-vista-barra { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.veh-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.veh-grid-vacio { padding: 36px; text-align: center; color: var(--text-soft); }

.veh-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; overflow: hidden;
}
.veh-card:hover { border-color: var(--border-strong); }

.veh-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  display: grid; place-items: center;
  overflow: hidden;
}
.veh-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veh-card-sinfoto { display: grid; place-items: center; opacity: .55; transform: scale(1.6); }
.veh-card-estado { position: absolute; top: 7px; right: 7px; }

.veh-card-txt { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.veh-card-nom {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.veh-card-sub { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-soft); }
.veh-card-mat {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em;
  color: var(--text-2); padding: 1px 5px; background: var(--surface-2);
}
.veh-card-marca {
  font-size: 11.5px; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.veh-card-docs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
}
.veh-card-docs span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.veh-card-docs em {
  font-style: normal; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-soft);
}
.veh-card-docs b {
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — CABECERA DE INVENTARIO EN CHIPS
   Sustituye a la fila de ocho tarjetas de colores. Mismo componente y mismo
   gesto que la barra de Vehículos: gris, y solo se enciende el activo.
   Las reglas `.inv-dash-*` de más arriba quedan sin uso; se dejan en su sitio
   en vez de borrarlas a mano en un fichero de 10.000 líneas donde el orden es
   la resolución de conflictos.
   ═══════════════════════════════════════════════════════════════════════════ */
.inv-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.inv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  font: inherit; font-size: 12.5px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.inv-chip:hover { background: var(--surface-2); color: var(--text); }
.inv-chip.activo {
  background: var(--text); border-color: var(--text); color: var(--surface);
  font-weight: 600;
}
.inv-chip-nom { white-space: nowrap; }
.inv-chip-n {
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-soft);
}
.inv-chip.activo .inv-chip-n { color: var(--surface); opacity: .72; }

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — BUSCADOR GLOBAL Y CENTRO DE NOTIFICACIONES

   La barra crece al enfocarla y levanta una sombra: el gesto dice "esto se ha
   abierto y ahora manda", que es lo que hace falta cuando el desplegable va a
   tapar la página. Todo con tokens, así que hereda el modo oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-barra {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  /* La barra tiene que crear su PROPIO contexto de apilamiento por encima de
     las tarjetas que vienen después en el DOM. El `z-index: 60` del
     desplegable no bastaba: sin z-index en un antepasado posicionado, el
     desplegable compite dentro del contexto raíz y las tarjetas, al ir
     después, se pintan encima. */
  position: relative; z-index: 60;
}

.busca-caja {
  position: relative; z-index: 1; flex: 1; min-width: 0; max-width: 640px;
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.busca-caja:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
/* :focus-within y no :focus — quien recibe el foco es el input de dentro. */
.busca-caja:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring), var(--shadow-sm);
  transform: translateY(-1px);
}
.busca-ico { flex: 0 0 auto; color: var(--text-soft); transition: color .16s ease; }
.busca-caja:focus-within .busca-ico { color: var(--accent); }

.busca-input {
  flex: 1; min-width: 0;
  padding: 11px 0; font: inherit; font-size: 13.5px;
  color: var(--text); background: none; border: 0; outline: none;
}
.busca-input::placeholder { color: var(--text-soft); }
/* La cruz nativa de <input type=search> se sale del diseño y duplica la nuestra */
.busca-input::-webkit-search-cancel-button { display: none; }

.busca-kbd {
  flex: 0 0 auto;
  padding: 2px 6px; font-family: var(--font); font-size: 10.5px;
  color: var(--text-soft); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
}
.busca-caja:focus-within .busca-kbd { opacity: 0; }
.busca-limpiar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 20px; height: 20px; padding: 0;
  color: var(--text-soft); background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
}
.busca-limpiar:hover { background: var(--surface-2); color: var(--text); }

/* ── Desplegable ── */
.busca-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  max-height: 62vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-med); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 5px;
}
.busca-grupo + .busca-grupo { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
.busca-grupo-tit {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 9px 4px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-soft);
}
.busca-fila {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; font: inherit; text-align: left;
  color: var(--text); background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-sm);
}
.busca-fila.sel, .busca-fila:hover { background: var(--surface-2); }
.busca-fila-ico { flex: 0 0 auto; color: var(--text-soft); display: grid; place-items: center; }
.busca-fila.sel .busca-fila-ico { color: var(--accent); }
.busca-fila-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.busca-fila-tit {
  font-size: 13px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca-fila-sub {
  font-size: 11.5px; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca-fila-extra {
  flex: 0 0 auto; font-size: 11px; color: var(--text-soft);
  padding: 1px 6px; background: var(--surface-2); border-radius: var(--radius-xs);
}
.busca-pop mark {
  background: rgba(var(--acento-rgb), .18); color: inherit;
  padding: 0 1px; border-radius: 0;
}
.busca-todos {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 4px; padding: 9px;
  font: inherit; font-size: 12.5px; color: var(--text-2);
  background: var(--surface-2); border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
}
.busca-todos:hover { background: var(--bg-hover); color: var(--text); }
.busca-todos kbd {
  font-family: var(--font); font-size: 10px; padding: 1px 5px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
}
.busca-vacio { padding: 20px 14px; font-size: 13px; color: var(--text-soft); }
.busca-vacio-nota { display: block; margin-top: 5px; font-size: 11.5px; opacity: .8; }

/* ── Página de resultados ── */
.busca-pag { max-width: 1100px; }
.busca-pag-vacio { padding: 46px 0; text-align: center; color: var(--text-soft); }
.busca-pag-tit {
  margin: 0; font-family: var(--font-display);
  font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
}
.busca-pag-nota { margin: 5px 0 26px; font-size: 12.5px; color: var(--text-soft); }
.busca-pag-grupos {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.busca-pag-grupo-tit {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-soft);
}
.busca-pag-grupo-ico { display: grid; place-items: center; }
.busca-pag-n {
  margin-left: auto; padding: 1px 6px; font-size: 11px; letter-spacing: 0;
  color: var(--text-2); background: var(--surface-2);
}
.busca-pag-lista { display: flex; flex-direction: column; }
.busca-tarjeta {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 10px; margin: 0 -10px;
  font: inherit; text-align: left; color: var(--text);
  background: none; border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s ease, padding-left .12s ease;
}
.busca-tarjeta:hover { background: var(--bg-hover); padding-left: 15px; }
.busca-tarjeta-color { flex: 0 0 auto; width: 4px; align-self: stretch; }
.busca-tarjeta-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.busca-tarjeta-tit {
  font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca-tarjeta-sub {
  font-size: 12px; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca-tarjeta-extra { flex: 0 0 auto; font-size: 11.5px; color: var(--text-soft); }
.busca-tarjeta mark { background: rgba(var(--acento-rgb), .18); color: inherit; }
.busca-pag-mas { padding: 10px 0; font-size: 12px; color: var(--text-soft); }

/* ── Campana y panel ── */
.notif-btn {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-med); border-radius: var(--radius);
  cursor: pointer;
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.notif-btn:hover {
  border-color: var(--border-strong); box-shadow: var(--shadow-xs);
  transform: translateY(-1px); color: var(--text);
}
.notif-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--text); }
.notif-btn.urgente { color: var(--red); border-color: rgba(var(--acento-rgb), .35); }

.notif-punto {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--red);
  border: 2px solid var(--bg); border-radius: var(--radius-pill);
}

/* Popup anclado a la campana. Antes era una tira de 420px suelta debajo del
   buscador: se leía como un bloque más del dashboard, no como algo desplegado,
   y empujaba el contenido al abrirse. Ahora sale de la campana, flota por
   encima y no mueve nada. */
.notif-wrap { position: relative; flex: 0 0 auto; }

.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border-med); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  /* Nace desde la campana en vez de aparecer de golpe: dice de dónde sale. */
  transform-origin: top right;
  animation: notifAparece .13s ease-out;
}
@keyframes notifAparece {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
/* Piquito hacia la campana */
.notif-panel::before {
  content: ''; position: absolute; top: -5px; right: 14px;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--surface);
  border-left: 1px solid var(--border-med); border-top: 1px solid var(--border-med);
}

.notif-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; color: var(--text);
}
.notif-cerrar {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  color: var(--text-soft); background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-xs);
}
.notif-cerrar:hover { background: var(--surface-2); color: var(--text); }

.notif-filtros { display: flex; gap: 4px; padding: 8px 12px 4px; flex-wrap: wrap; }
.notif-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; font: inherit; font-size: 11.5px;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
}
.notif-chip > i { font-style: normal; font-size: 10.5px; color: var(--text-soft); }
.notif-chip:hover { border-color: var(--border-med); }
.notif-chip.sel { background: var(--text); color: var(--surface); }
.notif-chip.sel > i { color: var(--surface); opacity: .7; }
.notif-chip.nv-urgente { color: var(--red); }
.notif-chip.nv-urgente.sel { background: var(--red); color: #fff; }

.notif-lista { max-height: min(52vh, 420px); overflow-y: auto; padding: 4px 6px 8px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px; font: inherit; text-align: left;
  color: var(--text); background: none; border: 0;
  border-left: 2px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer;
}
.notif-item:disabled { cursor: default; }
.notif-item:not(:disabled):hover { background: var(--surface-2); }
.notif-item.nv-urgente { border-left-color: var(--red); }
.notif-item.nv-aviso   { border-left-color: var(--text-soft); }
.notif-item-ico { flex: 0 0 auto; margin-top: 1px; color: var(--text-soft); display: grid; place-items: center; }
.notif-item.nv-urgente .notif-item-ico { color: var(--red); }
.notif-item-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.notif-item-tit { font-size: 12.5px; font-weight: 500; }
.notif-item-det { font-size: 11.5px; color: var(--text-soft); }
.notif-item-fecha {
  flex: 0 0 auto; font-size: 11px; color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.notif-vacio { padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--text-soft); }
.notif-vacio-ok { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }

@media (max-width: 700px) {
  .busca-caja { max-width: none; }
  .notif-panel { width: calc(100vw - 32px); right: -8px; }
  .busca-kbd { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — DASHBOARD PERSONALIZABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-cab-der { display: flex; align-items: center; gap: 14px; }
.dash-personalizar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; font: inherit; font-size: 12px;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-med); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.dash-personalizar:hover {
  color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs);
}

.dash-panel {
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border-med); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dash-panel-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.dash-panel-cab strong { display: block; font-size: 13.5px; color: var(--text); }
.dash-panel-cab span { display: block; margin-top: 3px; font-size: 12px; color: var(--text-soft); }
.dash-panel-x {
  flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  color: var(--text-soft); background: none; border: 0; cursor: pointer; border-radius: var(--radius-xs);
}
.dash-panel-x:hover { background: var(--surface-2); color: var(--text); }

.dash-panel-lista { padding: 4px 8px; }
.dash-panel-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px; border-bottom: 1px solid var(--border);
}
.dash-panel-fila:last-child { border-bottom: 0; }
.dash-panel-fila.no-disp { opacity: .5; }
.dash-panel-check {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer;
}
.dash-panel-fila.no-disp .dash-panel-check { cursor: default; }
.dash-panel-txt { min-width: 0; display: flex; flex-direction: column; }
.dash-panel-txt strong { font-size: 13px; font-weight: 600; color: var(--text); }
.dash-panel-txt small { font-size: 11.5px; color: var(--text-soft); }

.dash-panel-mover { flex: 0 0 auto; display: flex; gap: 3px; }
.dash-panel-mover button {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-xs); cursor: pointer;
}
.dash-panel-mover button:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.dash-panel-mover button:disabled { opacity: .3; cursor: default; }

.dash-panel-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2);
}

/* "Cerrar todo": no es una pestaña, así que no puede parecerlo. Va al final,
   sin fondo y en letra pequeña, y solo se distingue al pasar por encima. */
.tab-cerrar-todas {
  flex: 0 0 auto; align-self: center;
  margin-left: 8px; padding: 3px 9px;
  font: inherit; font-size: 11px; white-space: nowrap;
  color: var(--text-soft); background: none;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer;
}
.tab-cerrar-todas:hover { color: var(--text); border-color: var(--border-med); }

/* La barra de pestañas vacía no se esconde: dice para qué sirve. Esconderla
   hacía creer que las pestañas se habían perdido, y la página daba un salto al
   abrirse la primera. */
.tabbar:empty { display: flex; }
.tabbar-vacia {
  align-self: center; padding: 0 4px;
  font-size: 11.5px; color: var(--text-xsoft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — CONSTRUCTOR DE PRESUPUESTOS A SANGRE (referencia: Rentman)

   Petición del usuario, con captura delante: *"tiene que ser más grande, que
   cubra más… no me gusta el estilo ventanas… que se vea como en rentman"*.

   Lo que se copia de la referencia y por qué:
     · **Toda la ventana.** Montar un presupuesto de cuarenta líneas dentro de un
       margen de 30px y una tarjeta redondeada deja un hueco ridículo.
     · **Dos paneles pegados**, separados por UNA línea de 1px. Nada de dos
       tarjetas flotando con un canal de aire entre medias.
     · **Cabecera fija** con las acciones a la derecha, sin scroll.
     · **Filas finas y planas.** Aquí se leen precios en columna; el adorno
       estorba y las esquinas redondeadas rompen la alineación de la rejilla.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El contenedor con scroll deja de tener márgenes mientras el constructor está
   abierto: es lo que permite llegar a los bordes de la ventana. */
body.constructor-abierto .main-scroll { padding: 0; overflow: hidden; }
/* La cadena de alturas tiene que llegar ENTERA desde .main-scroll hasta los dos
   paneles: basta con que un eslabón se quede en `auto` para que el constructor
   se encoja a lo que ocupe su contenido. Medido: se rompía en #pres-layout. */
body.constructor-abierto #page-presupuestos,
body.constructor-abierto #pres-layout { height: 100%; min-height: 0; }
body.constructor-abierto #pres-list-view,
body.constructor-abierto #pres-catalog-view { display: none !important; }

body.constructor-abierto #pres-builder-view {
  display: flex !important; flex-direction: column;
  height: 100%; min-height: 0;
}

/* ── Cabecera ── */
body.constructor-abierto #pres-builder-view > .page-header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0; padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
body.constructor-abierto #pres-builder-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin: 0;
}
body.constructor-abierto #pres-builder-view > .page-header .page-actions {
  display: flex; align-items: center; gap: 8px;
}

/* ── Los dos paneles ── */
body.constructor-abierto .builder-wrap {
  flex: 1; min-height: 0; height: auto;
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  gap: 0;                       /* pegados: los separa una línea, no un canal */
  overflow: hidden;
}
body.constructor-abierto .pk,
body.constructor-abierto .builder-left {
  min-width: 0; min-height: 0;
  background: var(--surface);
  border: 0; border-radius: 0; box-shadow: none;
  overflow-y: auto;
}
body.constructor-abierto .pk {
  border-right: 1px solid var(--border);   /* la única separación entre paneles */
  display: flex; flex-direction: column; overflow: hidden;
}
body.constructor-abierto .pk-lista { flex: 1; min-height: 0; overflow-y: auto; }
body.constructor-abierto .builder-left { padding: 16px 18px 60px; }

/* En "Personalizar" el árbol sobra y el documento ocupa todo. */
body.constructor-abierto.modo-personalizar .builder-wrap { grid-template-columns: minmax(0, 1fr); }
body.constructor-abierto.modo-personalizar .pk { display: none; }

/* ── Nada de tarjetas dentro del constructor ── */
body.constructor-abierto .pres-datos,
body.constructor-abierto .pres-tabla-wrap,
body.constructor-abierto .pres-totales,
body.constructor-abierto .pres-seccion {
  border-radius: 0; box-shadow: none;
}

/* Debajo de 1000px los dos paneles no caben: se apilan, el árbol arriba con
   altura propia y el documento debajo. */
@media (max-width: 1000px) {
  body.constructor-abierto .builder-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 42vh) minmax(0, 1fr);
  }
  body.constructor-abierto .pk { border-right: 0; border-bottom: 1px solid var(--border); }
  body.constructor-abierto .builder-left { padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — AJUSTES PEDIDOS

   1) La campana, pegada al borde derecho. El buscador tiene ancho máximo, así
      que sin esto la campana quedaba flotando en mitad de la fila.
   2) La cabecera del calendario de flota seguía el tema en el texto pero NO en
      el fondo: llevaba un gris casi negro fijo del rediseño estilo Jira, así
      que en modo CLARO salía una franja oscura en medio de una página blanca.
      Ahora el fondo también es un token y el texto se resuelve por contraste.
   ═══════════════════════════════════════════════════════════════════════════ */
.notif-wrap { margin-left: auto; }

/* ── Cabecera del calendario de flota: sigue el tema ── */
.cal-veh-table .cal-veh-th-day,
.cal-veh-table .cal-veh-th-day.cal-weekend,
.cal-veh-th-veh,
.cal-veh-th-week-cell,
.cal-veh-table .cal-veh-th-week-cell {
  background: var(--surface-2);
  color: var(--text-2);
}
.cal-veh-th-veh, .cal-veh-th-week-cell {
  /* La fila de rótulos, un punto más marcada que la de números */
  background: var(--surface-sunk);
  color: var(--text);
}
.cal-veh-table .cal-veh-th-day .cal-day-num { color: var(--text); }
.cal-veh-table .cal-veh-th-day .cal-day-name { color: var(--text-soft); }
.cal-veh-table .cal-veh-th-day.cal-weekend { background: var(--surface-sunk); }

/* La columna de HOY se sigue marcando en rojo de marca: es la referencia que
   más se usa al leer un calendario. */
.cal-veh-table .cal-veh-th-day.cal-today-col {
  background: rgba(var(--acento-rgb), 0.10);
}
.cal-veh-table .cal-veh-th-day.cal-today-col .cal-day-num,
.cal-veh-table .cal-veh-th-day.cal-today-col .cal-day-name {
  color: var(--accent); font-weight: 750;
}
.cal-veh-th-week-span.cal-today-col { color: var(--accent); }

/* Filas que se abren con doble clic. El cursor y el realce son el único aviso
   de que se puede: una fila que no parece pulsable no se pulsa. */
.fila-abrible { cursor: pointer; }
.fila-abrible:hover { background: var(--bg-hover); }

/* ── Ficha de dispositivo (IT Stock) ───────────────────────────────────────
   Reutiliza el armazón `.pf-*` de la ficha de proyecto: misma estructura, mismo
   aspecto, una sola cosa que mantener. Solo se añade lo propio del parque. */
.disp-ico {
  flex: 0 0 auto; width: 40px; height: 40px; margin-top: 2px;
  display: grid; place-items: center;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border);
}
.disp-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* El estado de la garantía es lo que más se consulta, así que es lo único de la
   franja que se permite encenderse. */
.disp-gar-bien  .pf-cifra-n { color: var(--green); }
.disp-gar-aviso .pf-cifra-n { color: var(--accent); }
.disp-gar-mal   .pf-cifra-n { color: var(--red); }
.disp-gar-nd    .pf-cifra-n { color: var(--text-soft); font-weight: 500; }

.disp-hist .pf-tabla-cab,
.disp-hist .pf-tabla-fila {
  grid-template-columns: minmax(0, 1.2fr) 110px 110px minmax(0, 1fr);
}
.disp-hist em { color: var(--green); font-style: normal; font-weight: 600; }

.pf-cab-izq .mono, .pf-datos .mono {
  font-family: var(--font-mono); font-size: 12px;
}

@media (max-width: 860px) {
  .disp-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disp-hist .pf-tabla-cab, .disp-hist .pf-tabla-fila { grid-template-columns: minmax(0,1fr) 92px; }
  .disp-hist .pf-tabla-cab span:nth-child(n+3), .disp-hist .pf-tabla-fila span:nth-child(n+3) { display: none; }
}

/* ── Campos editables en sitio (ficha de línea) ────────────────────────────
   Se guardan al salir del campo. Parecen texto hasta que los tocas: una ficha
   llena de cajas de formulario se lee como un formulario, no como una ficha. */
.lf-datos .pf-dato { align-items: center; }
.lf-input {
  width: 100%; padding: 5px 8px; margin: -5px -8px;
  font: inherit; font-size: 13px; color: var(--text);
  background: transparent; border: 1px solid transparent;
  border-radius: 0;
}
.lf-input:hover  { border-color: var(--border); background: var(--surface-2); }
.lf-input:focus  { border-color: var(--accent); background: var(--surface); outline: none; }
.lf-input.mono   { font-family: var(--font-mono); font-size: 12.5px; }
.lf-input::placeholder { color: var(--text-xsoft); }
select.lf-input { cursor: pointer; }

.lf-notas {
  width: 100%; min-height: 88px; margin: 0; padding: 9px 11px;
  border-color: var(--border); background: var(--surface-2);
  resize: vertical; line-height: 1.55;
}
.lf-notas:hover { background: var(--surface-2); }

/* ── Chips de cabecera para IT Stock y Telefonía ───────────────────────────
   Mismo componente que la barra de Inventario: tres pantallas que hacen lo
   mismo (contar y filtrar) tienen que hacerlo igual. Gris salvo el activo, y
   los que avisan de algo pendiente llevan el rojo de marca en la cifra. */
.it-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.it-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px;
  font: inherit; font-size: 12.5px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); cursor: pointer;
}
.it-chip:hover { background: var(--surface-2); color: var(--text); }
.it-chip > i {
  font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.it-chip.aviso > i { color: var(--red); font-weight: 700; }
.it-chip.activo {
  background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 600;
}
.it-chip.activo > i { color: var(--surface); opacity: .72; }

/* ── Logos de marca vectoriales ────────────────────────────────────────────
   Un solo recurso para los dos temas: el SVG hereda `currentColor`, así que
   sale negro sobre fondo claro y blanco sobre fondo oscuro sin mantener dos
   imágenes. Y ocupa exactamente la misma caja que los logos en PNG, que es lo
   que hacía que unas marcas se vieran más grandes que otras. */
.veh-brand-svg {
  display: grid; place-items: center;
  color: var(--text);
  background: transparent; border: 0;
}
.veh-logo-svg {
  width: 78%; height: 78%;
  display: block;
}

/* ── Cabeceras ordenables ──────────────────────────────────────────────────
   La flecha solo aparece en la columna activa; en las demás basta el cursor y
   el cambio de color al pasar por encima. Poner una flecha gris en todas
   ensucia la cabecera y no ayuda a nadie. */
.th-orden { cursor: pointer; user-select: none; white-space: nowrap; }
.th-orden:hover { color: var(--text); }
.th-orden.orden-activa { color: var(--text); font-weight: 700; }
.th-orden.orden-activa::after {
  content: '↑'; margin-left: 5px; font-size: 10px; opacity: .75;
}
.th-orden.orden-activa.orden-desc::after { content: '↓'; }

/* Selector de subproyecto en el constructor: va pegado al del proyecto porque
   es la misma decisión (a qué cuelga esto), con el "+" a mano para crear uno
   sin salir de aquí. */
.pres-sub-fila { display: flex; align-items: stretch; gap: 0; }
.pres-sub-fila select { flex: 1; min-width: 0; }
.pres-sub-nuevo {
  flex: 0 0 auto; width: 30px;
  display: grid; place-items: center;
  font: inherit; font-size: 16px; line-height: 1;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-left: 0;
  cursor: pointer;
}
.pres-sub-nuevo:hover { background: var(--bg-hover); color: var(--accent); }

/* ── Selector con búsqueda ─────────────────────────────────────────────────
   La lista se ve entera desde el principio y se filtra escribiendo. Cabe una
   docena sin desplazar; a partir de ahí se desplaza, que es cuando el filtro
   empieza a hacer falta de verdad. */
.elegir-ayuda { margin: 0 0 12px; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }

.elegir-busca {
  display: flex; align-items: center; gap: 8px;
  padding: 0 11px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border-med);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.elegir-busca:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.elegir-busca > svg { flex: 0 0 auto; color: var(--text-soft); }
.elegir-busca input {
  flex: 1; min-width: 0; padding: 9px 0;
  font: inherit; font-size: 13.5px; color: var(--text);
  background: none; border: 0; outline: none;
}

.elegir-lista {
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--border); background: var(--surface);
}
.elegir-op {
  display: flex; align-items: center; width: 100%;
  padding: 9px 12px; font: inherit; text-align: left;
  color: var(--text); background: none; border: 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.elegir-op:last-child { border-bottom: 0; }
.elegir-op.sel { background: var(--surface-2); }
/* La barra izquierda marca la fila activa sin cambiarle el tamaño: un borde
   completo movería el texto un pixel al recorrer con las flechas. */
.elegir-op.sel { box-shadow: inset 2px 0 0 var(--accent); }
.elegir-op-txt { min-width: 0; display: flex; flex-direction: column; }
.elegir-op-tit { font-size: 13.5px; font-weight: 500; }
.elegir-op-sub { font-size: 11.5px; color: var(--text-soft); }
.elegir-vacio { padding: 22px 14px; text-align: center; font-size: 13px; color: var(--text-soft); }

/* ── Botón que se comporta como desplegable ────────────────────────────────
   Para listas que no caben en un <select> nativo (el árbol de inventario son
   705 categorías). Se ve igual que un desplegable para que no haya que
   aprender nada nuevo, pero al pulsarlo abre el selector con búsqueda. */
.selector-boton {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer;
  font: inherit; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-med);
  padding-right: 9px !important;
}
.selector-boton > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selector-boton > svg { flex: 0 0 auto; color: var(--text-soft); }
.selector-boton:hover { border-color: var(--border-strong); color: var(--text); }
.selector-boton.con-valor { color: var(--text); font-weight: 600; border-color: var(--border-strong); }

/* ── Pulido de los desplegables nativos ──────────────────────────────────── */
select.filter-select:hover,
select.form-control:hover,
.form-group select:hover,
.filters-bar select:hover { border-color: var(--border-strong); }

select.filter-select:focus,
select.form-control:focus,
.form-group select:focus,
.filters-bar select:focus {
  border-color: var(--accent); box-shadow: var(--ring); outline: none;
}
/* Las opciones heredan el tema: en oscuro, Safari las pintaba en blanco. */
select option { background: var(--surface); color: var(--text); }

/* ── Crew: resumen compacto ────────────────────────────────────────────────
   La tarjeta enseñaba las 9 áreas y las 5 capacidades: catorce etiquetas por
   persona. Ahora salen solo las áreas donde puede TOCAR algo, y lo demás se
   cuenta con el detalle en el `title`. */
.crew-resumen { display: flex; flex-direction: column; gap: 7px; }
.crew-areas { display: flex; flex-wrap: wrap; gap: 4px; }
.crew-extra {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11.5px; color: var(--text-soft);
}
.crew-extra span { cursor: help; border-bottom: 1px dotted var(--border-med); }

.usr-copiar {
  margin-left: auto; padding: 0;
  font: inherit; font-size: 11.5px; text-transform: none; letter-spacing: 0;
  color: var(--accent); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.usr-copiar:hover { color: var(--accent-hover); }
.usr-bloque-tit { display: flex; align-items: center; gap: 10px; }

/* El año aproximado de ITV no se pinta como una fecha: en la hoja del mecánico
   hay ITVs anotadas solo con el año, y enseñarlo igual que "26/11/2026" haría
   creer que se sabe el día. */
.veh-aprox { font-style: italic; opacity: .75; }
.veh-doc-linea.veh-cita em { color: var(--accent); }

/* ── Logos de marca en modo oscuro ─────────────────────────────────────────
   Los que son negro sobre transparente se invierten y quedan blancos. Se marca
   cuáles con la clase `logo-mono`, puesta desde el mapa de marcas, en vez de
   invertirlos todos: Ford lleva su óvalo AZUL y al invertirlo saldría naranja.
   Se comprobó midiendo los píxeles de cada PNG, no mirándolos. */
:root[data-tema="oscuro"] .logo-mono { filter: invert(1) brightness(1.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-mono { filter: invert(1) brightness(1.6); }
}

/* Proyecto y subproyecto en la lista de presupuestos: el subproyecto va debajo
   y más pequeño, porque es el matiz — con dos presupuestos del mismo rodaje es
   lo único que los distingue. */
.pres-proy { display: block; font-size: 13px; color: var(--text); }
.pres-sub {
  display: inline-block; margin-top: 2px; padding: 1px 6px;
  font-size: 11px; color: var(--text-2); background: var(--surface-2);
  border-left: 2px solid var(--accent);
}

/* ── Eventos del calendario: un pelín de redondeo ──────────────────────────
   Petición literal: *"SUPER poco redondeado. Pero super poco. Que se note un
   pelín. Que no sea cuadrado completo."*

   2px. Es suficiente para que la esquina no corte y para que las barras
   contiguas se distingan una de otra, y lo bastante poco como para no romper la
   alineación de la rejilla ni pelearse con el resto de la app, que es cuadrada.
   Se toca el token, así que afecta a los tres calendarios a la vez. */
:root { --cal-bar-radius: 2px; }

.gantt-bar,
.gantt-event-bar,
.cal-ev,
.cal-vev,
.cal-cell-inner.con-label,
.proy-cal-barra {
  border-radius: var(--cal-bar-radius);
}
/* Las barras que continúan de un día al siguiente solo redondean su extremo:
   redondear los cuatro lados partiría visualmente un evento de cinco días en
   cinco trozos. */
.cal-run-ini { border-radius: var(--cal-bar-radius) 0 0 var(--cal-bar-radius); }
.cal-run-fin { border-radius: 0 var(--cal-bar-radius) var(--cal-bar-radius) 0; }
.cal-run-med { border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — DESPLEGABLE DE CATEGORÍAS
   Anclado al botón y por encima del contenido: el inventario se sigue viendo
   detrás mientras se elige, que es lo que un modal impedía.
   ═══════════════════════════════════════════════════════════════════════════ */
.cat-dd-wrap { position: relative; display: inline-flex; }

.cat-dd {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 55;
  width: 340px; max-width: calc(100vw - 40px);
  background: var(--surface);
  border: 1px solid var(--border-med);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}

.cat-dd-busca {
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px; border-bottom: 1px solid var(--border);
}
.cat-dd-busca > svg { flex: 0 0 auto; color: var(--text-soft); }
.cat-dd-busca input {
  flex: 1; min-width: 0; padding: 9px 0;
  font: inherit; font-size: 13px; color: var(--text);
  background: none; border: 0; outline: none;
}

/* Doce filas visibles: suficiente para abarcar una rama entera sin desplazar,
   y poco para que el desplegable no tape media pantalla. */
.cat-dd-lista { max-height: 340px; overflow-y: auto; padding: 3px 0; }

.cat-dd-cab {
  padding: 7px 12px 4px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-soft);
}

.cat-dd-fila {
  display: flex; align-items: center; gap: 6px;
  /* La sangría marca el nivel; el chevron ocupa su hueco aunque no haya hijos,
     para que los nombres queden alineados en columna. */
  padding: 6px 10px 6px calc(10px + var(--niv, 0) * 15px);
  font-size: 13px; color: var(--text); cursor: pointer;
}
.cat-dd-fila:hover { background: var(--surface-2); }
.cat-dd-fila.activa {
  background: var(--surface-2); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.cat-dd-todas { border-bottom: 1px solid var(--border); margin-bottom: 3px; }

.cat-dd-chev {
  flex: 0 0 auto; width: 16px; height: 16px;
  display: grid; place-items: center; padding: 0;
  color: var(--text-soft); background: none; border: 0; cursor: pointer;
  transition: transform .12s ease;
}
.cat-dd-chev.abierta { transform: rotate(90deg); }
.cat-dd-chev:hover { color: var(--text); }
.cat-dd-chev.vacio { cursor: default; }

.cat-dd-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-dd-ruta {
  flex: 0 1 auto; min-width: 0; font-size: 11px; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-dd-n {
  margin-left: auto; flex: 0 0 auto;
  font-size: 11px; color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.cat-dd-vacio { padding: 20px 12px; text-align: center; font-size: 12.5px; color: var(--text-soft); }
/* Anclado por la derecha cuando por la izquierda se saldría de la pantalla. */
.cat-dd.a-la-derecha { left: auto; right: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — BARRA LATERAL MÁS GRANDE Y GRUPO ACTIVO

   1) Un 15 % más grande. El usuario dudaba entre 10 y 20: a 10 % apenas se
      nota y no habría valido la pena tocarlo; a 20 % la barra se come 54px de
      contenido, que en una tabla de inventario con siete columnas se paga.
      15 % es donde se nota que respira sin quitarle sitio al trabajo.
      Se escala TODO junto —ancho, altura de fila, texto e iconos— porque subir
      solo la fuente deja las filas apretadas y subir solo el alto las deja
      vacías.

   2) Estando dentro de un grupo, el grupo ENTERO se tiñe un poco. El item
      activo sigue en rojo; el grupo solo cambia lo justo para que de un vistazo
      sepas en qué bloque estás, sin competir con el rojo. Antes esa pista solo
      existía con el grupo plegado (un punto rojo), y abierto no había ninguna.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --sidebar-w: 252px; }
/* 308 era demasiado: se comía 40px de contenido y el usuario lo notó enseguida.
   Y no hacía falta — medido, la etiqueta más larga ("Calendario de Flota") pide
   unos 195px con su sangría, más el distintivo: con 252 sobra sitio. Queda
   incluso MÁS estrecha que el original (268) y con el texto más grande, que era
   lo que se buscaba: filas que respiran sin robarle ancho a las tablas. */

.sidebar .nav-item {
  padding: 10px 12px;                  /* 8/10 */
  font-size: 15px;                     /* 13.5 */
  gap: 11px;                           /* 9 */
  letter-spacing: -0.005em;
}
.sidebar .nav-icon { width: 18px; height: 18px; }   /* 16 */

.sidebar .nav-group-head {
  padding: 11px 13px 11px 11px;        /* 9/11/9/9 */
  gap: 9px;
  font-size: 12px;                     /* 11 */
  letter-spacing: 0.075em;
}
.sidebar .nav-group-ico { width: 18px; height: 18px; }
.sidebar .nav-group-items { gap: 4px; padding-left: 9px; margin-left: -9px; }
.sidebar-nav { gap: 4px; }
.sidebar-user { padding: 13px 14px 18px; }
.sidebar-user .sidebar-user-nombre, .sidebar-user strong { font-size: 14px; }

/* ── El grupo donde estás ────────────────────────────────────────────────── */
/* Un lavado muy tenue y una línea a la izquierda que abarca el grupo entero.
   Nada de rojo aquí: el rojo es del item activo y si se repite deja de señalar.
   Es blanco al 3,5 %, que sobre la barra casi negra se ve como un escalón de
   luz — se nota que ese bloque está "encendido" sin leerlo. */
.sidebar .nav-group.tiene-activo {
  background: rgba(255,255,255,0.035);
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.16);
}
.sidebar .nav-group.tiene-activo > .nav-group-head {
  color: rgba(255,255,255,0.82);       /* de 0.46: el rótulo del grupo despierta */
}
.sidebar .nav-group.tiene-activo > .nav-group-head .nav-group-ico { opacity: 1; }

/* Plegado ya tenía su punto rojo; se conserva y se le suma el lavado. */
.sidebar .nav-group.cerrado.tiene-activo { background: rgba(255,255,255,0.05); }

@media (max-width: 900px) {
  /* En pantallas estrechas se aprieta un poco más. */
  :root { --sidebar-w: 234px; }
  .sidebar .nav-item { font-size: 13.5px; padding: 8px 10px; }
}

/* Los logos que son texto (ISUZU) necesitan más caja a lo ancho que un símbolo
   redondo como la estrella: la palabra es apaisada. */
.veh-logo-svg.veh-logo-texto { width: 94%; height: auto; }

/* Los items DENTRO de un grupo llevan su propia altura fija y su sangría, en
   una regla más específica (`.nav-group-items .nav-item`) que la de arriba. Sin
   escalarlas también, la fuente crecía pero la fila se quedaba en 32px y el
   texto salía apretado — que es peor que no haber tocado nada. */
.sidebar .nav-item { height: 39px; }                       /* 34 → 39 */
.sidebar .nav-group-items .nav-item {
  height: 37px;                                            /* 32 → 37 */
  padding-left: 40px;   /* la sangría no crece: con la barra más estrecha, cada
                            píxel de sangría es un píxel menos de etiqueta */
  font-size: 14.5px;                                       /* 12.5 → 14.5 */
}
.sidebar .nav-fijos .nav-item { font-size: 15px; }

@media (max-width: 900px) {
  .sidebar .nav-item { height: 34px; }
  .sidebar .nav-group-items .nav-item { height: 32px; padding-left: 40px; font-size: 12.5px; }
  .sidebar .nav-fijos .nav-item { font-size: 13px; }
}

/* Vehículo privado (el Volvo): no es flota de producción. Se marca en vez de
   esconderlo — sigue estando en la casa, pero nadie debería contar con él para
   un rodaje sin preguntar. */
.veh-privado {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-soft); border: 1px dashed var(--border-med);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA — UNA SOLA PALMERA, Y LA BARRA MÁS AIREADA

   La palmera se veía DOS veces y ahora se entiende por qué: son dos capas con
   la misma imagen pero colocadas distinto — la marca de agua anclada abajo
   (`align-items: flex-end`, ancho 100%) y la capa de luz centrada (ancho 116%).
   Nunca llegaron a solaparse, así que en vez de "una palmera que se ilumina
   bajo el cursor" se veían dos palmeras sueltas.

   Se alinean: misma caja, mismo ancho, mismo anclaje. Queda UNA, más grande, y
   la luz la recorre por dentro. El movimiento se baja de -1,2° a -0,35° y el
   salto de escala a la mitad: se nota que responde, no que salta.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-palm-watermark {
  align-items: flex-end;
  justify-content: center;
  /* Más grande, como se pidió. Sube desde el borde inferior, que es donde
     nace: `transform-origin` abajo hace que crecer no la despegue. */
  transform: scale(1.62) translateY(4%);
  transform-origin: 50% 100%;
  opacity: 0.075;
  /* La sombra roja se rebaja: encendía media barra. */
  filter: drop-shadow(0 0 26px rgba(var(--acento-rgb), 0.16));
  transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.sidebar-palm-watermark img { width: 100%; height: auto; transform: none; }

/* Hover: apenas se mueve. Antes giraba 1,2° y saltaba de 1,28 a 1,36. */
.sidebar:hover .sidebar-palm-watermark {
  opacity: 0.13;
  transform: scale(1.66) translateY(2.5%) rotate(-0.35deg);
}
.sidebar:hover .sidebar-palm-watermark img { transform: none; }

/* La capa de luz deja de ser una segunda palmera: se coloca EXACTAMENTE encima
   de la marca de agua para que sea la misma, iluminada. */
.sidebar-luz {
  align-items: flex-end;
  justify-content: center;
}
.sidebar-luz img {
  width: 100%;
  transform: scale(1.62) translateY(4%);
  transform-origin: 50% 100%;
  opacity: 0.16;
}
.sidebar:hover .sidebar-luz img { transform: scale(1.66) translateY(2.5%) rotate(-0.35deg); }
.sidebar.collapsed .sidebar-luz img { width: 100%; transform: scale(1.2) translateY(8%); opacity: 0.12; }
.sidebar.collapsed .sidebar-palm-watermark { transform: scale(1.2) translateY(8%); opacity: 0.05; }

/* ── Barra lateral: menos letra, más aire ────────────────────────────────────
   Petición: *"no pongas el texto tan grande, solo quiero que cada texto tenga
   más separación"*. Así que la fuente vuelve casi a su tamaño original y lo que
   crece es la CAJA: más alto de fila y más hueco entre ellas. */
.sidebar .nav-item { font-size: 13.5px; height: 40px; padding: 0 12px; }
.sidebar .nav-group-items .nav-item { font-size: 13px; height: 38px; padding-left: 40px; }
.sidebar .nav-fijos .nav-item { font-size: 13.5px; }
.sidebar .nav-group-items { gap: 6px; }      /* 4 → 6 entre hermanos */
.sidebar-nav { gap: 7px; }                   /* 4 → 7 entre grupos */
.sidebar .nav-group-head { font-size: 11px; padding: 12px 13px 12px 11px; }
.sidebar .nav-group.tiene-activo { padding-bottom: 3px; }

@media (max-width: 900px) {
  .sidebar .nav-item { height: 36px; }
  .sidebar .nav-group-items .nav-item { height: 34px; }
  .sidebar .nav-group-items { gap: 4px; }
  .sidebar-nav { gap: 5px; }
}

/* ── Una sola palmera, de verdad ─────────────────────────────────────────────
   Dos correcciones sobre lo de arriba, las dos medidas y no supuestas:

   1. La imagen de la marca de agua se quedaba en 128px porque una regla
      anterior le pone `max-width: 128px`, y un `width: 100%` NO anula un
      max-width. Hay que reponerlo a `none`.
   2. Alinear dos capas con la misma imagen es pelearse con la especificidad
      cada vez que se toque algo. Se elimina la SEGUNDA imagen: la palmera pasa
      a ser una sola —la marca de agua— y la capa de luz se queda solo con su
      halo, que es lo que sigue al cursor. Menos piezas, mismo efecto y más
      difícil de romper. */
.sidebar-palm-watermark img {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  transform: none;
}

/* La capa de luz ya no lleva palmera: solo el halo. */
.sidebar-luz img { display: none; }
.sidebar-luz {
  /* Sin imagen, la máscara sobra: el halo se pinta en ::after. */
  -webkit-mask-image: none;
          mask-image: none;
  opacity: 1;                 /* el ::after ya nace transparente si no hay cursor */
}
.sidebar-luz::after {
  background: radial-gradient(240px 240px at var(--luz-x, 50%) var(--luz-y, 50%),
                rgba(255,255,255,0.055) 0%,
                rgba(var(--acento-rgb), 0.055) 38%,
                transparent 68%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sidebar.con-luz .sidebar-luz::after { opacity: 1; }
.sidebar.collapsed .sidebar-luz { -webkit-mask-image: none; mask-image: none; }

/* ── Calendario de flota: mando de mes y zoom en la cabecera ─────────────── */
.cal-cab-mando { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cal-mes-btn {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-med); cursor: pointer;
}
.cal-mes-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.cal-cab-mando .cal-veh-mes {
  min-width: 130px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.cal-mes-hoy {
  padding: 0 11px; height: 28px;
  font: inherit; font-size: 12.5px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-med); cursor: pointer;
}
.cal-mes-hoy:hover { color: var(--text); border-color: var(--border-strong); }
.cal-cab-sep { width: 1px; height: 20px; background: var(--border-med); margin: 0 4px; }

.cal-zoom {
  display: flex; align-items: center;
  border: 1px solid var(--border-med); background: var(--surface);
}
.cal-zoom button {
  width: 26px; height: 28px; padding: 0;
  font: inherit; font-size: 15px; line-height: 1;
  color: var(--text-2); background: none; border: 0; cursor: pointer;
}
.cal-zoom button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.cal-zoom button:disabled { opacity: .3; cursor: default; }
.cal-zoom span {
  min-width: 44px; text-align: center;
  font-size: 11.5px; color: var(--text-soft); font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  line-height: 28px;
}

/* Al hacer zoom, las celdas siguen al token. Se fija aquí para que las reglas
   que llevan el ancho a pelo no ganen. */
.cal-veh-table .cal-veh-th-day,
.cal-veh-table .cal-veh-td-day {
  width: var(--cal-zoom-w, 62px);
  min-width: var(--cal-zoom-w, 62px);
  max-width: var(--cal-zoom-w, 62px);
}

@media (max-width: 820px) {
  .cal-cab-mando { flex-wrap: wrap; }
  .cal-zoom, .cal-cab-sep { display: none; }   /* con ratón no hay pellizco */
}

/* ═══════════════════════════════════════════════════════════════════════════
   MANTENIMIENTO  (prefijo .mo-*)

   Plano a propósito: nada de tarjetas redondeadas ni sombras. La rejilla de
   cifras y la tabla van pegadas al fondo y se separan con líneas de 1px, que es
   como se lee un panel de taller de un vistazo.

   Los tres colores de aviso (ámbar, rojo, verde) se definen como tokens aquí y
   se redefinen en oscuro: son los únicos colores que se salen de la paleta de
   la casa, y lo hacen porque "vencido" tiene que gritar.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --mo-alerta:     #c62828;
  --mo-alerta-bg:  rgba(198,40,40,0.08);
  --mo-aviso:      #a86416;
  --mo-aviso-bg:   rgba(168,100,22,0.10);
  --mo-ok:         #2f6b46;
  --mo-ok-bg:      rgba(47,107,70,0.10);
  --mo-neutro-bg:  rgba(43,45,66,0.06);
}
:root[data-tema="oscuro"] {
  --mo-alerta:     #ff6b6b;
  --mo-alerta-bg:  rgba(255,107,107,0.13);
  --mo-aviso:      #e0a458;
  --mo-aviso-bg:   rgba(224,164,88,0.13);
  --mo-ok:         #6fcf97;
  --mo-ok-bg:      rgba(111,207,151,0.13);
  --mo-neutro-bg:  rgba(255,255,255,0.07);
}

/* ── Cifras de cabecera ─────────────────────────────────────────────────── */
.mo-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  border: 1px solid var(--border);
  border-left: none;
  margin-bottom: 20px;
  background: var(--surface);
}
.mo-kpi {
  padding: 14px 16px;
  border-left: 1px solid var(--border);
}
.mo-kpi-num {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.035em; color: var(--text);
}
.mo-kpi-eur .mo-kpi-num { font-size: 20px; }
.mo-kpi-lbl {
  margin-top: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-soft);
}
/* Solo se enciende cuando la cifra significa que algo va mal y hay que actuar.
   Si se encendiera siempre, dejaría de mirarse. */
.mo-kpi-alerta .mo-kpi-num { color: var(--mo-alerta); }

/* ── Pestañas internas ──────────────────────────────────────────────────── */
.mo-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.mo-tab {
  background: none; border: none; cursor: pointer;
  padding: 9px 15px; margin-bottom: -1px;
  font-size: 13.5px; font-weight: 600; color: var(--text-soft);
  border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 7px;
  transition: color var(--transition), border-color var(--transition);
}
.mo-tab:hover { color: var(--text); }
.mo-tab.active { color: var(--text); border-bottom-color: var(--red); }
.mo-tab-n {
  font-size: 11px; font-weight: 700; padding: 1px 6px;
  background: var(--mo-neutro-bg); color: var(--text-soft);
}
.mo-tab.active .mo-tab-n { color: var(--text); }
.mo-tab-n.rojo { background: var(--mo-alerta-bg); color: var(--mo-alerta); }

/* ── Etiquetas de estado y prioridad ────────────────────────────────────── */
.mo-pill {
  display: inline-block; padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--mo-neutro-bg); color: var(--text-soft);
}
.mo-e-abierta { background: var(--mo-aviso-bg);   color: var(--mo-aviso); }
.mo-e-taller  { background: var(--mo-alerta-bg);  color: var(--mo-alerta); }
.mo-e-pieza   { background: var(--mo-neutro-bg);  color: var(--text); }
.mo-e-cerrada { background: var(--mo-ok-bg);      color: var(--mo-ok); }
.mo-e-venc    { background: var(--mo-alerta-bg);  color: var(--mo-alerta); }
.mo-e-urg     { background: var(--mo-aviso-bg);   color: var(--mo-aviso); }
.mo-e-prox    { background: var(--mo-neutro-bg);  color: var(--text-soft); }

/* La prioridad se lee de reojo: solo las dos que importan llevan color, y las
   otras dos se quedan en gris para no competir con ellas. */
.mo-prio { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.mo-p-alta { color: var(--mo-aviso); }
.mo-p-crit { color: var(--mo-alerta); font-weight: 700; }

.mo-tabla td { vertical-align: top; }
.mo-tabla tbody tr { cursor: pointer; }
.mo-sub  { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
.mo-nada { color: var(--text-xsoft); }
.mo-num, .mo-dias { text-align: right; white-space: nowrap; }
.mo-vencida { color: var(--mo-alerta); font-weight: 700; }
.mo-link { color: var(--red); text-decoration: none; }
.mo-link:hover { text-decoration: underline; }
.mo-nota {
  font-size: 12.5px; color: var(--text-soft);
  margin: 0 0 14px; max-width: 78ch; line-height: 1.5;
}
.mo-vacio { padding: 56px 20px; text-align: center; }
.mo-vacio-tit { font-size: 16px; font-weight: 600; margin: 10px 0 5px; }
.mo-vacio-sub { font-size: 13.5px; color: var(--text-soft); }

/* ── Ficha de la orden ──────────────────────────────────────────────────── */
.mo-ficha-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 0;
}
.mo-ficha-tit    { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.mo-ficha-activo { font-size: 13px; color: var(--text-soft); }

/* Barra de estados: es lo que más se toca, así que va arriba y a tamaño de
   botón de verdad, no escondida en un desplegable. */
.mo-est-barra {
  display: flex; gap: 0; flex-wrap: wrap;
  border: 1px solid var(--border); border-top: none;
  margin-bottom: 20px; background: var(--surface);
}
.mo-est-btn {
  flex: 1; min-width: 120px;
  padding: 10px 12px; border: none; border-right: 1px solid var(--border);
  background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  transition: background var(--transition), color var(--transition);
}
.mo-est-btn:last-child { border-right: none; }
.mo-est-btn:hover  { background: var(--bg-hover); color: var(--text); }
.mo-est-btn.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--red); }
.mo-est-btn.active.mo-e-taller  { background: var(--mo-alerta-bg); }
.mo-est-btn.active.mo-e-cerrada { background: var(--mo-ok-bg); }
.mo-est-btn.active.mo-e-abierta { background: var(--mo-aviso-bg); }

.mo-ficha-cols { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .mo-ficha-cols { grid-template-columns: 1fr; } }
.mo-bloque-tit {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft);
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
  margin: 0 0 14px;
}
.mo-ficha-main .mo-bloque-tit:not(:first-child) { margin-top: 28px; }
.mo-campo { margin-bottom: 13px; }
.mo-campo label {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--text-soft);
}
.mo-input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border-med); background: var(--surface);
  color: var(--text); font-size: 13.5px; font-family: inherit;
  border-radius: 0;
}
.mo-input:focus { outline: none; border-color: var(--red); }
.mo-input:disabled { background: var(--surface-2); color: var(--text-soft); cursor: default; }
.mo-input textarea, textarea.mo-input { resize: vertical; line-height: 1.5; }
.mo-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mo-elige {
  width: 100%; text-align: left; padding: 8px 10px;
  border: 1px solid var(--border-med); background: var(--surface);
  color: var(--text); font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.mo-elige:hover { border-color: var(--red); }
.mo-meta {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-soft); line-height: 1.7;
}

/* Hilo de seguimiento: cada nota con su autor y su fecha. */
.mo-nota-nueva { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; }
.mo-nota-nueva textarea { flex: 1; }
.mo-nota-item { padding: 9px 0; border-bottom: 1px solid var(--border); }
.mo-nota-item:last-child { border-bottom: none; }
.mo-nota-meta { font-size: 11px; color: var(--text-soft); margin-bottom: 3px; }
.mo-nota-txt  { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }

/* El tema tiene tres estados: claro forzado, oscuro forzado y automático (sin
   atributo). Sin este bloque los avisos de mantenimiento se quedarían con los
   colores de claro para quien no ha tocado el interruptor y tiene el sistema
   en oscuro — que es la mayoría. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --mo-alerta:     #ff6b6b;
    --mo-alerta-bg:  rgba(255,107,107,0.13);
    --mo-aviso:      #e0a458;
    --mo-aviso-bg:   rgba(224,164,88,0.13);
    --mo-ok:         #6fcf97;
    --mo-ok-bg:      rgba(111,207,151,0.13);
    --mo-neutro-bg:  rgba(255,255,255,0.07);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ECONOMÍA  (prefijo .eco-*, capa nueva)

   Mismo lenguaje que Mantenimiento: rejillas planas separadas por líneas de
   1px, sin tarjetas flotantes ni franjas de color. Las clases antiguas
   (.eco-stat-card, .eco-panel…) siguen en el archivo pero ya no se usan: el
   render nuevo no las emite.

   Los cuatro tonos de las barras NO son decorativos — codifican cuánto de firme
   es el dinero, de lo más seguro (facturado, tono lleno) a lo más incierto
   (borrador, casi transparente). Por eso van del mismo color en distinta
   intensidad y no de cuatro colores distintos: la escala tiene un orden y los
   colores tienen que enseñarlo.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --eco-firme:  #2b2d42;
  --eco-gasto:  #c62828;
}
:root[data-tema="oscuro"] { --eco-firme: #cdd3e0; --eco-gasto: #ff6b6b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --eco-firme: #cdd3e0; --eco-gasto: #ff6b6b; }
}

.eco-t-cont  { background: var(--eco-firme); }
.eco-t-acep  { background: color-mix(in srgb, var(--eco-firme) 62%, transparent); }
.eco-t-env   { background: color-mix(in srgb, var(--eco-firme) 34%, transparent); }
.eco-t-borr  { background: color-mix(in srgb, var(--eco-firme) 16%, transparent); }
.eco-t-gasto { background: var(--eco-gasto); }

/* ── Cifras ─────────────────────────────────────────────────────────────── */
.eco-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  border: 1px solid var(--border); border-left: none;
  background: var(--surface); margin-bottom: 26px;
}
.eco-kpi { padding: 15px 17px; border-left: 1px solid var(--border); }
.eco-kpi-num {
  font-size: 22px; font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.15; color: var(--text);
}
.eco-kpi-lbl {
  margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-soft);
}
.eco-kpi-sub { margin-top: 3px; font-size: 11.5px; color: var(--text-xsoft); }
.eco-kpi-gasto .eco-kpi-num { color: var(--eco-gasto); }

/* ── Secciones ──────────────────────────────────────────────────────────── */
.eco-seccion { margin-bottom: 30px; }
.eco-tit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft);
  padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.eco-tit-n {
  font-size: 11px; letter-spacing: 0; padding: 1px 6px;
  background: var(--mo-neutro-bg); color: var(--text-soft);
}
.eco-leyenda { display: flex; gap: 13px; flex-wrap: wrap; margin-left: auto; }
.eco-lg {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: 0.04em; color: var(--text-soft);
}
.eco-lg i { width: 9px; height: 9px; display: block; }
.eco-nota { font-size: 12.5px; color: var(--text-soft); margin: -6px 0 12px; }
.eco-sinDatos { padding: 26px 0; color: var(--text-soft); font-size: 13px; }

/* ── Embudo ─────────────────────────────────────────────────────────────── */
.eco-embudo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--border); border-left: none; background: var(--surface);
}
.eco-etapa { padding: 13px 15px; border-left: 1px solid var(--border); }
.eco-etapa-cab { display: flex; align-items: center; gap: 7px; }
.eco-etapa-txt { font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.eco-etapa-n {
  font-size: 10.5px; font-weight: 700; padding: 0 5px;
  background: var(--mo-neutro-bg); color: var(--text-soft);
}
.eco-etapa-val {
  margin: 5px 0 8px; font-size: 18px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text);
}
.eco-etapa-barra { height: 3px; background: var(--mo-neutro-bg); }
.eco-etapa-barra i {
  display: block; height: 100%;
  background: color-mix(in srgb, var(--eco-firme) 40%, transparent);
}
.eco-etapa-fin .eco-etapa-barra i { background: var(--eco-firme); }
.eco-etapa-fin .eco-etapa-val { color: var(--text); }

/* ── Gráfico mensual ────────────────────────────────────────────────────── */
.eco-graf {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border); background: var(--surface);
  padding: 16px 16px 10px;
}
/* El eje da la referencia que faltaba: sin un número arriba, una barra alta no
   dice si son mil euros o cien mil. */
/* La altura del eje tiene que ser EXACTAMENTE la del área de barras (180px) y
   empezar en la misma línea, o el "0" del eje no cae donde apoyan las barras y
   toda la referencia queda corrida. */
.eco-eje {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 180px; margin-top: 19px;
  font-size: 10px; color: var(--text-xsoft); text-align: right;
  white-space: nowrap; border-right: 1px solid var(--border); padding-right: 9px;
}
/* `overflow-x: auto` también recorta por arriba, y la cifra de la columna más
   alta vive justo encima de la barra. Estos 19px son el sitio donde cabe; el
   eje lleva el mismo margen para que su "0" siga cayendo en la base. */
.eco-cols {
  flex: 1; display: flex; align-items: flex-end; gap: 3px;
  overflow-x: auto; min-width: 0; padding-top: 19px;
}
.eco-col { flex: 1; min-width: 34px; display: flex; flex-direction: column; }
/* La cifra va pegada a SU barra, no en una fila fija arriba: con un mes flojo
   el número se quedaba flotando lejos de la columna que describía. */
.eco-col-cima {
  position: absolute; left: 0; right: 0;
  font-size: 9.5px; color: var(--text-soft);
  text-align: center; white-space: nowrap; pointer-events: none;
}
.eco-col-pistas {
  position: relative;
  height: 180px; display: flex; align-items: flex-end;
  justify-content: center; gap: 2px;
}
/* Ingreso y gasto van uno al lado del otro, no apilados: apilarlos sugeriría
   que suman, cuando en realidad se restan. */
.eco-col-ingreso, .eco-col-gasto {
  display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
}
.eco-col-ingreso { width: 60%; max-width: 30px; }
.eco-col-gasto   { width: 26%; max-width: 12px; }
.eco-col-ingreso i, .eco-col-gasto i { display: block; width: 100%; }
.eco-col:hover .eco-col-ingreso i { filter: brightness(1.15); }
.eco-col-mes {
  padding-top: 6px; font-size: 10px; color: var(--text-soft);
  text-align: center; white-space: nowrap;
}

/* ── Por proyecto ───────────────────────────────────────────────────────── */
.eco-proy {
  display: grid; grid-template-columns: minmax(120px, 200px) 1fr 42px 100px;
  align-items: center; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.eco-proy:last-child { border-bottom: none; }
.eco-proy-nom {
  font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eco-proy-n {
  font-size: 10px; font-weight: 700; padding: 0 5px; flex-shrink: 0;
  background: var(--mo-neutro-bg); color: var(--text-soft);
}
.eco-proy-barra { display: flex; height: 12px; background: var(--mo-neutro-bg); }
.eco-proy-barra i { display: block; height: 100%; }
.eco-proy-pct { font-size: 11.5px; color: var(--text-soft); text-align: right; }
.eco-proy-eur { font-size: 13.5px; font-weight: 700; text-align: right; white-space: nowrap; }

@media (max-width: 720px) {
  .eco-proy { grid-template-columns: 1fr 60px; }
  .eco-proy-barra, .eco-proy-pct { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRESUPUESTOS: DOCUMENTO, SELLOS Y PAPELERA

   Dos colores con significado, y solo dos:
     · VERDE  = contabilizado. Está cerrado y cobrado, no hay nada que hacer.
     · ROJO   = anulado. Existe, pero no cuenta.
   Se pintan sobre la FILA ENTERA, no en un icono al final: la pregunta "¿cuál
   de estos ya está?" se responde barriendo la lista con la vista, no leyendo
   columna por columna.

   El rojo de la casa (--accent) se usa aquí para lo accionable —el botón de
   editar, el número del documento, la línea del estado activo—, que es lo que
   pedía más contraste. El rojo de "anulado" es OTRO tono, más apagado, para que
   no compita con él.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --pres-ok:      #2f6b46;
  --pres-ok-bg:   rgba(47,107,70,0.09);
  --pres-ok-bd:   rgba(47,107,70,0.30);
  --pres-no:      #a33a3a;
  --pres-no-bg:   rgba(163,58,58,0.09);
  --pres-no-bd:   rgba(163,58,58,0.30);
}
:root[data-tema="oscuro"] {
  --pres-ok:      #6fcf97;
  --pres-ok-bg:   rgba(111,207,151,0.11);
  --pres-ok-bd:   rgba(111,207,151,0.34);
  --pres-no:      #e57373;
  --pres-no-bg:   rgba(229,115,115,0.11);
  --pres-no-bd:   rgba(229,115,115,0.34);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --pres-ok:    #6fcf97;
    --pres-ok-bg: rgba(111,207,151,0.11);
    --pres-ok-bd: rgba(111,207,151,0.34);
    --pres-no:    #e57373;
    --pres-no-bg: rgba(229,115,115,0.11);
    --pres-no-bd: rgba(229,115,115,0.34);
  }
}

/* ── Filas teñidas ──────────────────────────────────────────────────────── */
/* El borde izquierdo es lo que hace que se lea como una fila marcada y no como
   un fallo de zebra: el fondo solo, tan tenue, se confunde con el hover. */
.tabla tbody tr.pres-fila-contab {
  background: var(--pres-ok-bg);
  box-shadow: inset 3px 0 0 var(--pres-ok);
}
.tabla tbody tr.pres-fila-contab:hover { background: color-mix(in srgb, var(--pres-ok-bg) 170%, transparent); }
.tabla tbody tr.pres-fila-anulada {
  background: var(--pres-no-bg);
  box-shadow: inset 3px 0 0 var(--pres-no);
  opacity: 0.78;
}
.tabla tbody tr.pres-fila-anulada:hover { opacity: 1; }
/* Tachado solo en el número: tachar la fila entera la vuelve ilegible, y sigue
   habiendo que poder leer de quién era y por cuánto. */
.tabla tbody tr.pres-fila-anulada .pres-td-num { text-decoration: line-through; }

.pres-td-num {
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 600; color: var(--text-soft);
}
.pres-fila-contab .pres-td-num { color: var(--pres-ok); }
.pres-fila-anulada .pres-td-num { color: var(--pres-no); }

.pres-sello-ok {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  background: var(--pres-ok-bg); color: var(--pres-ok);
  border: 1px solid var(--pres-ok-bd);
}

/* Botón de contabilizar: cuadrado como todo lo demás. Antes llevaba el verde
   #34C759 y un radio de 6px metidos a pelo en el HTML — el único botón
   redondeado de la pantalla. */
/* El texto del botón no puede ser blanco fijo: en claro el verde es oscuro
   (#2f6b46) y pide blanco, pero en oscuro es claro (#6fcf97) y el blanco sobre
   él no se lee. `--pres-ok-txt` lleva el color que contrasta en cada tema. */
:root { --pres-ok-txt: #fff; }
:root[data-tema="oscuro"] { --pres-ok-txt: #10241a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --pres-ok-txt: #10241a; }
}
.btn.btn-contab {
  background: var(--pres-ok); color: var(--pres-ok-txt);
  border: 1px solid var(--pres-ok); border-radius: 0;
  font-weight: 600;
}
.btn.btn-contab:hover { filter: brightness(1.08); }
.btn.pd-borrar:hover, .btn.pres-borrar-def:hover {
  color: var(--pres-no); border-color: var(--pres-no-bd);
}
.seg-btn.seg-btn-papelera.active { color: var(--pres-no); }

/* ── Barra del documento ────────────────────────────────────────────────── */
.pd-barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0 13px; margin-bottom: 0;
  border-bottom: 2px solid var(--accent);
}
.pd-ident { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Aquí es donde pega el rojo de la casa: es la identidad del documento que
   estás mirando, y con ella la pantalla deja de ser gris sobre gris. */
.pd-num {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--accent);
}
.pd-cli { font-size: 12px; color: var(--text-soft); }
.pd-total { margin-left: auto; text-align: right; }
.pd-total-n { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.pd-acciones { display: flex; gap: 6px; flex-wrap: wrap; }

.pd-sello {
  display: inline-block; margin-left: 6px; padding: 2px 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
}
.pd-sello-ok { background: var(--pres-ok-bg); color: var(--pres-ok); border: 1px solid var(--pres-ok-bd); }
.pd-sello-no { background: var(--pres-no-bg); color: var(--pres-no); border: 1px solid var(--pres-no-bd); }

.pd-cinta {
  padding: 9px 14px; font-size: 12.5px; line-height: 1.5;
  border-left: 3px solid;
}
.pd-cinta-ok { background: var(--pres-ok-bg); color: var(--pres-ok); border-left-color: var(--pres-ok); }
.pd-cinta-no { background: var(--pres-no-bg); color: var(--pres-no); border-left-color: var(--pres-no); }
.pd-cinta-motivo { font-style: italic; opacity: 0.85; }

/* ── El papel ───────────────────────────────────────────────────────────── */
/* Fondo hundido y sombra bajo la hoja: es el único sitio de la web donde una
   sombra está justificada, porque lo que hay dentro ES una hoja de papel y
   tiene que leerse como tal, no como otro panel de la interfaz. */
.pd-lienzo {
  background: var(--surface-sunk);
  border: 1px solid var(--border); border-top: none;
  padding: 22px; display: flex; justify-content: center;
  min-height: 60vh;
  /* Con la ventana estrecha la hoja no cabe y hay que poder arrastrarla, no
     verla cortada: el documento tiene un ancho de papel, no responsive. */
  overflow-x: auto;
}
@media (max-width: 820px) { .pd-lienzo { padding: 10px; } }
/* El ancho, el alto y la escala los pone `_pdAjustarEscala()` en JS: dependen
   del formato de hoja configurado (A3/A4) y del sitio disponible. */
.pd-lienzo { display: block; overflow: hidden; }
.pd-lienzo iframe {
  display: block; margin: 0 auto;
  border: none; background: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PESTAÑAS DE TAMAÑO FIJO

   Antes eran `flex: 0 1 auto` entre 110 y 230px: cada pestaña medía según su
   título y todas cambiaban de ancho al abrir o cerrar otra. Con anchos que
   bailan, el aspa nunca está dos veces en el mismo sitio y cerrar exige
   apuntar. Ahora todas miden lo mismo y el aspa cae siempre en el mismo píxel
   relativo, con un hueco claro respecto al texto.
   ═══════════════════════════════════════════════════════════════════════════ */
.tabbar .tab {
  flex: 0 0 208px;
  width: 208px; min-width: 208px; max-width: 208px;
  gap: 10px;                 /* separación evidente entre el texto y el aspa */
  padding: 8px 6px 8px 13px;
}
/* El texto ocupa lo que sobra y se recorta con puntos suspensivos; el aspa no
   se encoge nunca. Ese es el mecanismo que la fija en su sitio. */
.tabbar .tab .tab-txt { flex: 1 1 auto; min-width: 0; }
.tabbar .tab .tab-x   { flex: 0 0 auto; margin-left: 0; }

/* Con anchos fijos, la barra desplaza cuando no caben. Es lo correcto: antes
   se estrujaban hasta ser ilegibles. */
.tabbar { scroll-behavior: smooth; }

/* NO se encogen en pantallas estrechas. Se pidió expresamente que el ancho no
   varíe nunca: una pestaña que mide distinto según la ventana vuelve a mover el
   aspa de sitio, que era justo el problema que se arregló. Si no caben, la
   barra desplaza. */

/* ═══════════════════════════════════════════════════════════════════════════
   CABECERA DE LA BARRA LATERAL: MÁS ALTA Y PULSABLE
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-logo {
  height: 66px;              /* 52 → 66 */
  padding: 0 14px;
  cursor: pointer;
  transition: background var(--transition);
}
.sidebar-logo:hover { background: var(--bg-hover); }
.sidebar-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sidebar-logo .logo-title { font-size: 15px; }
.sidebar-logo .logo-sub   { font-size: 11px; }
.sidebar-logo .logo-mark img { width: 32px !important; height: 32px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PALMERA: HOVER UN 15% MÁS VISTOSO
   Sube la opacidad (0,13 → 0,15), el salto de escala y el giro. Sigue siendo
   un gesto contenido —no salta—, solo se nota más que responde.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar:hover .sidebar-palm-watermark {
  opacity: 0.15;
  transform: scale(1.70) translateY(2%) rotate(-0.5deg);
  filter: drop-shadow(0 0 30px rgba(var(--acento-rgb), 0.22));
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODO CLARO: CONTRASTE

   El oscuro funciona porque el rojo cae sobre un fondo casi negro. El claro no
   tenía ese salto, y medido se veía por qué:

     · --text-soft (#8d99ae) sobre blanco = 2,88:1. El mínimo legible es 4,5.
       Y ese token pinta CASI TODO el texto secundario: rótulos, subtítulos,
       cabeceras de tabla, etiquetas de cifras. De ahí la sensación de lavado.
     · --bg contra --surface = 1,13:1. Las tarjetas no se despegaban del fondo.
     · --accent (#ef233c) sobre blanco = 4,22:1, justo por debajo del listón
       tanto como texto rojo como con texto blanco encima.

   Se corrigen los tres. No se toca --text (13,49:1, ya estaba bien) ni nada del
   modo oscuro. El rojo se oscurece lo justo para cruzar la línea (4,89:1): es
   el mismo rojo a la vista, solo que legible.

   Va scopeado a los DOS estados claros —el forzado y el automático— porque un
   `:root` suelto aquí, al final del archivo, pisaría también al oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-tema="claro"],
:root:not([data-tema="oscuro"]) {
  /* Texto secundario: 2,88 → 5,38:1 */
  --text-soft:     #5f6b80;
  /* Terciario: sigue siendo el más flojo, pero ya se lee (≈3,6:1) */
  --text-xsoft:    #7b8698;
  --text-2:        rgba(43,45,66,0.86);

  /* El fondo se aleja del blanco para que las superficies se despeguen */
  --bg:            #dde5eb;
  --surface-sunk:  #d3dde4;
  --surface-2:     #eef2f5;

  /* Bordes de verdad: con 9% de opacidad las líneas de 1px no existían */
  --border:        rgba(43,45,66,0.15);
  --border-med:    rgba(43,45,66,0.26);
  --border-strong: rgba(43,45,66,0.40);
  --bg-hover:      rgba(43,45,66,0.06);

  /* Rojo de la casa, un punto más profundo SOLO en claro: 4,22 → 4,89:1 */
  --punch-red:     #e01230;
  --acento-rgb:    224, 18, 48;
}
/* En automático solo debe aplicarse si el sistema está en claro; el bloque de
   arriba usa :not([data-tema="oscuro"]), que también atrapa el automático. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --text-soft:     #8b93a8;
    --text-xsoft:    rgba(139,147,168,0.66);
    --text-2:        rgba(233,234,240,0.76);
    --bg:            #0f0f13;
    --surface-sunk:  #0b0b0f;
    --surface-2:     #1e1e26;
    --border:        rgba(255,255,255,0.10);
    --border-med:    rgba(255,255,255,0.17);
    --border-strong: rgba(255,255,255,0.30);
    --bg-hover:      rgba(255,255,255,0.05);
    --punch-red:     #ff4d5f;
    --acento-rgb:    255, 77, 95;
  }
}

/* ── Ficha de vehículo: bloques agrupados ─────────────────────────────────── */
.vf-bloques {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px;
  align-items: start; margin-bottom: 22px;
}
@media (max-width: 900px) { .vf-bloques { grid-template-columns: 1fr; gap: 16px; } }
.vf-bloque { margin-bottom: 22px; }
.vf-bloque-tit {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft);
  padding-bottom: 7px; border-bottom: 1px solid var(--border); margin-bottom: 13px;
}
.vf-notas { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.vf-menor { font-size: 11.5px; font-weight: 400; color: var(--text-soft); }
.eco-tit-ayuda {
  font-size: 10px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text-xsoft);
}

/* El desplegable genérico ocupa el ancho de su campo, no el del texto. */
.cat-dd-wrap.dd-bloque { display: flex; width: 100%; }
.cat-dd-wrap.dd-bloque > .selector-boton {
  width: 100%; justify-content: space-between;
  display: flex; align-items: center; gap: 8px;
}
.cat-dd-wrap.dd-bloque > .selector-boton.vacio { color: var(--text-soft); }
.cat-dd-wrap.dd-bloque .cat-dd { min-width: 100%; }
.pres-sub-fila .cat-dd-wrap.dd-bloque { flex: 1; min-width: 0; }
/* Fila resaltada con las flechas del teclado */
.cat-dd-fila.resaltada { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }

/* ── Ajustes generales ────────────────────────────────────────────────────── */
.aj-seccion { margin-bottom: 32px; max-width: 900px; }
.aj-tit {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft);
  padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.aj-nota { font-size: 12.5px; color: var(--text-soft); line-height: 1.55; margin: 0 0 14px; }
.aj-nota code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--mo-neutro-bg); padding: 1px 5px;
}
.aj-aviso {
  padding: 9px 14px; margin-bottom: 22px;
  background: var(--mo-neutro-bg); color: var(--text-soft);
  font-size: 12.5px; border-left: 3px solid var(--border-med);
}

/* Se elige mirando, no leyendo: cada plantilla enseña una miniatura de cómo
   queda el papel. Con cuatro nombres a secas nadie sabe cuál es cuál. */
.aj-plantillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.aj-plantilla {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-family: inherit;
  transition: border-color var(--transition), background var(--transition);
}
.aj-plantilla:hover:not(:disabled) { border-color: var(--border-med); }
.aj-plantilla:disabled { cursor: default; opacity: 0.7; }
.aj-plantilla.activa { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.aj-pl-nom { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.aj-pl-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 1px 5px; background: var(--accent); color: #fff;
}
.aj-pl-desc { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; }

/* Miniatura: una hoja con su banda de cabecera y tres renglones. */
.aj-pl-vista {
  display: block; height: 74px; padding: 8px;
  background: #fff; border: 1px solid var(--border-med); overflow: hidden;
}
.aj-pl-vista i { display: block; background: #c9ced8; height: 4px; margin-bottom: 5px; }
.aj-pl-vista .aj-pl-cab { height: 13px; margin-bottom: 8px; }
.aj-pl-vista .corta { width: 55%; }
.aj-pl-palma  .aj-pl-cab { background: #ef233c; }
.aj-pl-clasico .aj-pl-cab { background: #1d1d1f; }
.aj-pl-moderno .aj-pl-cab { background: #8d99ae; height: 18px; }
.aj-pl-cine   { background: #17171d; }
.aj-pl-cine .aj-pl-cab { background: #ef233c; }
.aj-pl-cine i:not(.aj-pl-cab) { background: #444a58; }

.aj-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.aj-campo { display: block; }
.aj-campo > span {
  display: block; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--text-soft);
}
.aj-campo input {
  width: 100%; padding: 7px 10px; border-radius: 0;
  border: 1px solid var(--border-med); background: var(--surface);
  color: var(--text); font-size: 13.5px; font-family: inherit;
}
.aj-campo input:focus { outline: none; border-color: var(--accent); }
.aj-campo input:disabled { background: var(--surface-2); color: var(--text-soft); }
.aj-campo em { display: block; margin-top: 4px; font-size: 11px; font-style: normal; color: var(--text-xsoft); }
.pres-sello-fac {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--accent); color: #fff; vertical-align: 1px;
}
.btn.pres-facturar:hover { color: var(--accent); border-color: var(--accent); }

/* ── IT Stock: secciones del parque ───────────────────────────────────────── */
.it-familias { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.it-fam {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-soft); font-family: inherit; font-size: 13px; font-weight: 600;
  transition: border-color var(--transition), color var(--transition);
}
.it-fam:hover { color: var(--text); border-color: var(--border-med); }
.it-fam i {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 1px 6px; background: var(--mo-neutro-bg); color: var(--text-soft);
}
.it-fam.activa { color: var(--text); border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.it-fam.activa i { background: var(--accent); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA LATERAL: LA PALMERA SIN CAJA, Y EL AVATAR SIN EL ROJO

   El logo vivía dentro de un cuadrado de 36px con fondo y borde que le comía
   la silueta: una palmera recortada dentro de una caja no se lee como un logo,
   se lee como un icono metido a la fuerza. Fuera la caja — queda la palmera y,
   al lado, el nombre.

   El avatar llevaba fondo y borde rojos con la inicial en AZUL (#4FC3FF).
   Además de ser el único azul de toda la web, el rojo ahí no significaba nada:
   en el resto de la interfaz el rojo es "esto se puede pulsar" o "esto va mal",
   y una inicial no es ninguna de las dos.
   ═══════════════════════════════════════════════════════════════════════════ */
.logo-mark,
.sidebar-logo .logo-mark {
  width: 40px; height: 40px;
  background: none;
  border: none;
  overflow: visible;
}
.sidebar-logo:hover .logo-mark {
  background: none;
  border: none;
}
.logo-mark img,
.sidebar-logo .logo-mark img {
  width: 40px !important; height: 40px !important;
  object-fit: contain;
  filter: invert(1) brightness(1.08);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.sidebar-logo:hover .logo-mark img { transform: scale(1.06); }
.sidebar.collapsed .logo-mark,
.sidebar.collapsed .logo-mark img { width: 32px !important; height: 32px !important; }

/* Avatar: gris neutro con la inicial legible, del mismo material que el resto
   de la barra. */
.sidebar-avatar {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.88);
}
.perfil-avatar-img,
.perfil-avatar-placeholder { border-color: var(--border-med); }

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDARIO DE FLOTA: EL EVENTO OCUPA LA FILA ENTERA

   La barra medía 38px dentro de una fila de 60, así que flotaba con 11px de
   aire arriba y abajo. Ocupando el alto completo la rejilla se lee como una
   hoja de cálculo: la celda está pintada o no lo está, sin ambigüedad, y el
   ojo puede seguir una columna de días de arriba abajo sin saltos.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Dos cosas hacían que no bastara con `height: 100%`:

     1. La barra no cuelga del `td` sino de un `.cal-cell-wrap` intermedio, que
        además llevaba `padding: 4px 0` — cuatro píxeles arriba y abajo que
        impedían llegar al borde.
     2. La altura real la fijaba una regla MÁS ESPECÍFICA por posición dentro
        del tramo (`.cal-veh-td-day.cal-run-start .cal-cell-inner`, etc.) con
        34px. Una regla de un solo nivel no la gana.

   Así que se anula el padding del envoltorio y se pone la altura en las mismas
   posiciones de tramo, que son las que mandan. */
.cal-veh-td-day .cal-cell-wrap { padding: 0; gap: 0; }
.cal-veh-td-day .cal-cell-inner.filled,
.cal-veh-td-day.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-run-mid   .cal-cell-inner,
.cal-veh-td-day.cal-run-end   .cal-cell-inner,
.cal-veh-td-day.cal-run-solo  .cal-cell-inner,
.cal-veh-table .cal-veh-td-day .cal-cell-inner {
  height: 100%;
  min-height: 0;
  /* Sin margen lateral: los tramos de días consecutivos tienen que tocarse,
     como en una hoja de cálculo. */
  margin: 0;
  justify-content: center;
}

/* El relieve se rebaja: a 38px daba volumen a una píldora; a toda altura,
   sobre una rejilla, ese brillo interior solo ensucia la línea de la celda. */
.cal-cell-inner.filled {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}
.cal-cell-inner.filled::after {
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.02) 50%,
    rgba(0,0,0,0.07) 100%);
}
/* La etiqueta se centra también en horizontal cuando el tramo es de un solo
   día: pegada a la izquierda en una celda estrecha se corta enseguida. */
.cal-veh-td-day.cal-run-solo .cal-cell-inner { align-items: center; }

/* ── Pedir un texto ───────────────────────────────────────────────────────── */
.mt-ayuda { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; margin: 0 0 14px; }
.mt-input {
  width: 100%; padding: 9px 11px; border-radius: 0;
  border: 1px solid var(--border-med); background: var(--surface);
  color: var(--text); font-size: 14px; font-family: inherit;
}
.mt-input:focus { outline: none; border-color: var(--accent); }
.mt-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.mt-sug {
  padding: 4px 10px; cursor: pointer; font-family: inherit; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-soft);
}
.mt-sug:hover { color: var(--text); border-color: var(--accent); }

/* ── Ficha de material ────────────────────────────────────────────────────── */
/* Con la ficha abierta se esconde el resto de la sección. Es una clase en la
   página y no cirugía en el HTML: la lista, el panel de cifras y los filtros
   son hermanos sueltos sin contenedor común. */
#page-inventario.mat-ficha-abierta > *:not(#mat-ficha) { display: none !important; }

.mat-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 2px solid var(--accent); margin-bottom: 18px;
}
.mat-ident { min-width: 0; }
.mat-nombre { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.mat-ruta { font-size: 12px; color: var(--text-soft); }

.mat-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--border); border-left: none;
  background: var(--surface); margin-bottom: 26px;
}
.mat-cifra { padding: 13px 16px; border-left: 1px solid var(--border); }
.mat-cifra b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.035em; }
.mat-cifra span {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-soft);
}

.mat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .mat-cols { grid-template-columns: 1fr; gap: 20px; } }
.mat-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--border); }
.mat-dato { padding: 10px 12px; background: var(--surface); }
.mat-dato-etq { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.mat-dato-val { margin-top: 3px; font-size: 13.5px; font-weight: 600; }

.mat-hist-fila {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.mat-hist-fila:last-child { border-bottom: none; }
.mat-hist-fila:hover .mat-hist-proy { color: var(--accent); }
.mat-hist-proy { font-size: 13.5px; font-weight: 600; }
.mat-hist-meta { grid-column: 1; font-size: 11.5px; color: var(--text-soft); }
.mat-hist-dias { grid-row: 1 / span 2; align-self: center; font-size: 13px; font-weight: 700; color: var(--text-soft); }
.mat-vacio { padding: 22px 0; font-size: 13px; color: var(--text-soft); }

/* El widget de material más alquilado lleva a la ficha */
.topmat-fila.topmat-clic { cursor: pointer; }
.topmat-fila.topmat-clic:hover .topmat-nombre { color: var(--accent); text-decoration: underline; }

/* ── Mi Perfil: el resumen ────────────────────────────────────────────────── */
#mp-resumen { margin-bottom: 30px; }
.mp-bloque { margin-bottom: 28px; }
.mp-admin, .mp-plantilla {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-size: 11px; font-weight: 600; color: var(--text-soft);
}
.mp-admin { color: var(--accent); }

/* Mapa de permisos: las áreas SIN acceso también salen. Ver lo que no tienes
   es la mitad de la información. */
.mp-permisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px; background: var(--border); }
.mp-perm { padding: 10px 12px; background: var(--surface); }
.mp-perm-area { display: block; font-size: 13px; font-weight: 600; }
.mp-perm-nivel {
  display: block; margin-top: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.mp-n-ninguno            { opacity: 0.55; }
.mp-n-ninguno .mp-perm-nivel { color: var(--text-xsoft); }
.mp-n-lectura .mp-perm-nivel { color: var(--text-soft); }
.mp-n-edicion .mp-perm-nivel { color: var(--mo-aviso); }
.mp-n-total   .mp-perm-nivel { color: var(--accent); }
.mp-n-total   { box-shadow: inset 2px 0 0 var(--accent); }

.mp-caps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mp-cap {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  background: var(--mo-neutro-bg); color: var(--text-soft);
}

.mp-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--border); border-left: none;
  background: var(--surface); margin-bottom: 16px;
}
.mp-cifra { padding: 13px 15px; border-left: 1px solid var(--border); }
.mp-cifra b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.035em; }
.mp-cifra span {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-soft);
}
.mp-cifra i { display: block; margin-top: 2px; font-size: 11px; font-style: normal; color: var(--text-xsoft); }

.mp-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.mp-fila:last-child { border-bottom: none; }
.mp-fila:hover .mp-fila-txt { color: var(--accent); }
.mp-fila-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-soft); }
.mp-fila-txt { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.mp-fila-eur { font-size: 13.5px; font-weight: 700; white-space: nowrap; }

.mp-areas { display: grid; gap: 7px; margin-bottom: 16px; }
.mp-area { display: grid; grid-template-columns: 120px 1fr 40px; align-items: center; gap: 12px; }
.mp-area-nom { font-size: 12.5px; font-weight: 600; }
.mp-area-barra { height: 10px; background: var(--mo-neutro-bg); }
.mp-area-barra i { display: block; height: 100%; background: var(--eco-firme); }
.mp-area-n { font-size: 12px; color: var(--text-soft); text-align: right; }

.mp-lista-log .mp-log {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.mp-lista-log .mp-log:last-child { border-bottom: none; }
.mp-log-ts { color: var(--text-xsoft); font-size: 11px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR DE PLANTILLAS
   Tres columnas: los bloques que puedes meter, la hoja, y las propiedades de
   lo seleccionado. La hoja va sobre fondo hundido y en blanco siempre —también
   en modo oscuro— porque lo que se está montando es papel, y el papel se
   imprime blanco.
   ═══════════════════════════════════════════════════════════════════════════ */
.pl-barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 13px; border-bottom: 2px solid var(--accent); margin-bottom: 0;
}
.pl-nombre { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.pl-sub { font-size: 12px; color: var(--text-soft); }
.pl-sucio {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 8px; background: var(--mo-aviso-bg); color: var(--mo-aviso);
}

.pl-cols {
  display: grid; grid-template-columns: 210px 1fr 260px;
  gap: 0; align-items: stretch;
  border: 1px solid var(--border); border-top: none;
  min-height: 70vh;
}
@media (max-width: 1100px) { .pl-cols { grid-template-columns: 180px 1fr; } .pl-props { display: none; } }
@media (max-width: 780px)  { .pl-cols { grid-template-columns: 1fr; } .pl-paleta { display: none; } }

.pl-paleta, .pl-props { padding: 14px; background: var(--surface); overflow-y: auto; max-height: 78vh; }
.pl-paleta { border-right: 1px solid var(--border); }
.pl-props  { border-left: 1px solid var(--border); }
.pl-props-vacio { font-size: 12.5px; color: var(--text-soft); line-height: 1.55; }
.pl-props-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

.pl-pieza {
  padding: 8px 10px; margin-bottom: 6px; cursor: grab;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color var(--transition);
}
.pl-pieza:hover { border-color: var(--accent); }
.pl-pieza:active { cursor: grabbing; }
.pl-pieza-nom  { display: block; font-size: 12.5px; font-weight: 600; }
.pl-pieza-desc { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-soft); line-height: 1.35; }

.pl-lienzo { background: var(--surface-sunk); padding: 22px; overflow-y: auto; max-height: 78vh; }
/* La hoja siempre blanca: se está montando papel. */
.pl-hoja {
  max-width: 720px; margin: 0 auto; min-height: 60vh;
  background: #fff; color: #1d1d1f;
  padding: 34px 38px; box-shadow: 0 2px 14px rgba(0,0,0,0.18);
}
.pl-hoja-vacia { padding: 70px 20px; text-align: center; color: #98a0ae; font-size: 13.5px; line-height: 1.7; }

.pl-bloque { position: relative; padding: 4px 0; cursor: grab; border: 1px dashed transparent; }
.pl-bloque:hover { border-color: #d7dbe3; }
.pl-bloque.sel { border-color: var(--accent); background: rgba(239,35,60,0.03); }
.pl-bloque.encima { border-top: 2px solid var(--accent); }
.pl-bloque-eti {
  position: absolute; top: -9px; left: 0; z-index: 2;
  display: none; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; padding: 1px 4px 1px 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
}
.pl-bloque:hover .pl-bloque-eti, .pl-bloque.sel .pl-bloque-eti { display: flex; }
.pl-bloque-x { background: none; border: none; color: #fff; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 4px; }
.pl-bloque-x:hover { opacity: 0.7; }

.pl-vista.al-centro   { text-align: center; }
.pl-vista.al-derecha  { text-align: right; }
.pl-vista.tam-pequeno { font-size: 11px; }
.pl-vista.tam-normal  { font-size: 13px; }
.pl-vista.tam-grande  { font-size: 16px; }

/* Vistas de cada bloque, con los datos de ejemplo */
.plv-logo { display: flex; align-items: center; gap: 10px; }
.plv-logo img { width: 34px; height: 34px; object-fit: contain; }
.plv-logo span { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
/* Los colores salen del estilo de la plantilla (variables puestas en la hoja),
   para que el editor enseñe lo mismo que va a salir impreso. */
.plv-empresa { color: var(--doc-suave, #55607a); line-height: 1.6; font-size: 11.5px; }
.plv-titulo { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0; color: var(--doc-titulo, #1d1d1f); }
.plv-titulo span { color: var(--doc-acento, var(--accent)); }
.plv-etq { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--doc-suave, #98a0ae); margin-bottom: 3px; opacity: 0.85; }
.plv-cliente { background: color-mix(in srgb, var(--doc-th-bg, #2b2d42) 10%, transparent); padding: 10px 13px; }
.plv-menor { color: var(--doc-suave, #55607a); font-size: 11.5px; }
.plv-fechas { display: flex; gap: 22px; color: var(--doc-suave, #55607a); font-size: 11.5px; }
.plv-tabla { width: 100%; border-collapse: collapse; font-size: 11px; }
.plv-tabla th { background: var(--doc-th-bg, #2b2d42); color: var(--doc-th-tx, #fff); text-align: left; padding: 6px 8px; font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.plv-tabla td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--doc-suave, #55607a) 25%, transparent); }
.plv-tabla .n { text-align: right; }
.plv-totales { margin-left: auto; max-width: 260px; font-size: 12px; }
.plv-totales > div { display: flex; justify-content: space-between; padding: 4px 0; }
.plv-totales .plv-total { border-top: 2px solid var(--doc-th-bg, #2b2d42); margin-top: 4px; padding-top: 7px; font-size: 15px; font-weight: 700; }
.plv-notas, .plv-texto { color: var(--doc-suave, #55607a); font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; }
.plv-firma { display: inline-block; min-width: 200px; }
.plv-firma span { font-size: 10.5px; color: var(--doc-suave, #98a0ae); }
.plv-firma i { display: block; height: 40px; border-bottom: 1px solid color-mix(in srgb, var(--doc-suave, #55607a) 55%, transparent); }
.plv-sep { height: 1px; background: color-mix(in srgb, var(--doc-suave, #55607a) 35%, transparent); margin: 6px 0; }

.pl-seg { display: flex; border: 1px solid var(--border-med); }
.pl-seg button {
  flex: 1; padding: 5px 4px; cursor: pointer; font-family: inherit; font-size: 11.5px;
  background: none; border: none; border-right: 1px solid var(--border);
  color: var(--text-soft);
}
.pl-seg button:last-child { border-right: none; }
.pl-seg button.activo { background: var(--accent); color: #fff; font-weight: 600; }

.aj-pl-editar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA CERRADA: REABRE LA PALMERA, NO EL BOTÓN

   Cerrada, la barra es una tira estrecha y el botón de reabrir era un cuadrito
   más dentro de ella: había que apuntar. La palmera ya está ahí, es lo más
   grande y lo único que se reconoce de un vistazo, así que es ella la que
   reabre. El botón se retira mientras está cerrada —no hay dos formas de hacer
   lo mismo compitiendo por el mismo sitio— y vuelve al abrirla, que es cuando
   sí hace falta un control explícito para cerrar.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar.collapsed .sidebar-collapse-btn { display: none; }
.sidebar.collapsed .sidebar-logo {
  cursor: pointer;
  justify-content: center;
  padding: 0;
}
/* La palmera crece un poco y se enciende al pasar por encima: es la señal de
   que ahí se pulsa. */
.sidebar.collapsed .logo-mark img {
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), filter 0.22s;
}
.sidebar.collapsed .sidebar-logo:hover .logo-mark img {
  transform: scale(1.16);
  filter: invert(1) brightness(1.3) drop-shadow(0 0 10px rgba(var(--acento-rgb), 0.55));
}
.sidebar.collapsed .sidebar-logo:hover { background: rgba(255,255,255,0.06); }

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDARIO DE FLOTA: RAYAS CONTINUAS, HOVER DE TRAMO, TEXTO Y "HOY"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Las rayas de ITV y mantenimiento continúan de un día al siguiente ──
   Cada celda pintaba su propio degradado desde SU esquina, así que el patrón
   se reiniciaba en cada día y las diagonales se rompían en cada línea de la
   rejilla. Desplazando el origen del fondo por la posición de la celda dentro
   del mes (`--cal-dia`, que ya venía en el `<td>`), las diagonales de un tramo
   de cinco días se leen como una sola banda continua. */
.cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner {
  /* El desfase lo calcula `_calSincronizarRayas()` en JS con la posición REAL
     de la celda. Calcularlo en CSS a partir del ancho teórico no valía: entre
     celda y celda hay 1px de borde, así que el patrón se iba desviando un
     píxel por día y las diagonales acababan sin cuadrar. Aquí solo se declara
     el valor de partida. */
  background-position: var(--raya-x, 0px) 0;
  background-repeat: repeat;
}

/* ── 2. El hover cubre el TRAMO entero, no una celda ──
   Un evento de cinco días es una sola cosa; iluminar solo el cuadrado bajo el
   cursor lo partía en cinco. La clase la pone `_calResaltarTramo()`, que
   recorre los días contiguos del mismo vehículo y el mismo evento. */
.cal-veh-td-day.tramo-hover .cal-cell-inner {
  filter: brightness(1.13) saturate(1.04);
}
.cal-veh-td-day.tramo-hover { background: rgba(var(--acento-rgb), 0.04); }
/* El realce de una sola celda se retira: lo sustituye el del tramo. */
.cal-veh-td-day.cal-assigned .cal-cell-inner:hover,
.cal-veh-table .cal-veh-td-day.cal-assigned .cal-cell-inner:hover { filter: none; }

/* ── 3. Texto un punto más grande ──
   Con la barra a 38px el texto a 10px era lo que cabía. Ahora ocupa los 60px
   de la fila y ese tamaño se queda pequeño para el espacio que tiene. */
.cal-veh-table .cal-cell-label,
.cal-cell-label { font-size: 11.5px; letter-spacing: -0.005em; }
.cal-veh-td-day .cal-cell-inner { font-size: 12px; }

/* ── 4. "Hoy" como en el calendario del dashboard ──
   Allí el día actual se marca tiñendo la columna y poniendo en rojo el número
   y el nombre del día. Aquí era una raya azul de 2px sobre CADA celda de la
   columna: una línea horizontal repetida 30 veces que se confundía con la
   rejilla en vez de señalar la columna. */
.cal-veh-td-day.cal-today-col::before { display: none; }
.cal-veh-table .cal-veh-th-day.cal-today-col,
.cal-veh-th-day.cal-today-col {
  background: rgba(var(--acento-rgb), 0.14) !important;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.cal-veh-th-day.cal-today-col .cal-day-num {
  color: var(--accent) !important; font-weight: 800;
}
.cal-veh-th-day.cal-today-col .cal-day-name {
  color: var(--accent) !important; opacity: 1;
}
.cal-veh-table .cal-veh-td-day.cal-today-col,
.cal-veh-table .cal-veh-td-day.cal-weekend.cal-today-col {
  background: rgba(var(--acento-rgb), 0.055);
}

/* ── Ajustes: empresa y fondo ─────────────────────────────────────────────── */
.aj-textarea {
  width: 100%; padding: 8px 10px; border-radius: 0; resize: vertical;
  border: 1px solid var(--border-med); background: var(--surface);
  color: var(--text); font-size: 13.5px; font-family: inherit; line-height: 1.5;
}
.aj-textarea:focus { outline: none; border-color: var(--accent); }
.aj-falta { color: var(--mo-alerta) !important; font-weight: 600; }

.aj-fondo { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
/* La proporción de la vista previa es la de la hoja, no un cuadrado: un fondo
   se juzga por cómo cae en la página. */
.aj-fondo-vista {
  width: 148px; aspect-ratio: 1 / 1.414;
  border: 1px solid var(--border-med); background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  flex-shrink: 0;
}
.aj-fondo-vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aj-fondo-vista span { font-size: 11.5px; color: #98a0ae; }
.aj-fondo-acciones { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.aj-fondo-nota { font-size: 11.5px; color: var(--text-soft); max-width: 34ch; line-height: 1.5; }

/* ── Editor de plantillas: hoja con su formato real y su fondo ────────────── */
/* La hoja del editor mide lo que va a medir el documento. Antes era una caja
   de ancho fijo sin relación con el papel, así que se montaba a ciegas: lo que
   parecía media página podía salir ocupando dos. */
.pl-hoja { position: relative; }
.pl-hoja.hoja-a4 { max-width: 700px; aspect-ratio: 210 / 297; }
.pl-hoja.hoja-a3 { max-width: 760px; aspect-ratio: 297 / 420; }
/* `aspect-ratio` marca la proporción de la PRIMERA página; si los bloques
   ocupan más, la hoja crece (como crecería el documento). */
.pl-hoja.hoja-a4, .pl-hoja.hoja-a3 { height: auto; min-height: 0; }
.pl-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
/* Los bloques van POR ENCIMA del fondo, y con un velo blanco muy leve detrás
   del texto para que se lea sobre fondos oscuros sin tapar el diseño. */
.pl-hoja > .pl-bloque, .pl-hoja > .pl-hoja-vacia { position: relative; z-index: 1; }

/* ── Proyectos: calendario resumido arriba de General ─────────────────────── */
/* Duplica la vista del calendario en corto. Va plegado en un <details> para
   que no coma pantalla: quien viene a la lista tiene la lista a un clic, y
   quien viene a ver fechas ya las tiene delante. */
.proy-cal-mini {
  background: var(--surface); border: 1px solid var(--border);
  margin-bottom: 16px;
}
.proy-cal-mini > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-soft);
}
.proy-cal-mini > summary::-webkit-details-marker { display: none; }
.proy-cal-mini > summary::before {
  content: ''; width: 0; height: 0; flex-shrink: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.2s ease;
}
.proy-cal-mini[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.proy-cal-mini > summary:hover { color: var(--text); }
.pcm-sub {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: 11.5px; color: var(--text-xsoft);
}
.pcm-ver {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--accent);
}
.pcm-ver:hover { text-decoration: underline; }
#proy-cal-mini-grid { padding: 0 14px 12px; }
/* Más bajo que el completo: aquí se mira el conjunto, no cada barra. */
#proy-cal-mini-grid .proy-cal-fila { min-height: 26px; }
#proy-cal-mini-grid .proy-cal-etq { font-size: 11.5px; }
#proy-cal-mini-grid .proy-cal-barra-txt { font-size: 10.5px; }
#proy-cal-mini-grid .proy-cal-vacio { padding: 20px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   ITV Y MANTENIMIENTO: COLOR DE TALLER Y ETIQUETA LEGIBLE

   El ámbar anterior tiraba a naranja de aviso y competía con los colores de
   los proyectos. La ITV y el mantenimiento no son proyectos: son taller, así
   que van en azul acero y grafito —el color de las herramientas— y quedan
   claramente fuera de la paleta de los rodajes.

   Se distinguen entre sí por tono, no por saturación: la ITV en acero (es un
   trámite, previsible) y el mantenimiento en grafito rojizo (algo se rompió).
   ═══════════════════════════════════════════════════════════════════════════ */
.cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-solo .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-mid .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-end .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-solo .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-start .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-mid .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-end .cal-cell-inner {
  background-image: repeating-linear-gradient(-45deg,
    #5c7d99, #5c7d99 7px, #4d6b83 7px, #4d6b83 14px) !important;
}
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-solo .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-mid .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-end .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-solo .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-start .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-mid .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-end .cal-cell-inner {
  background-image: repeating-linear-gradient(-45deg,
    #8f5a52, #8f5a52 7px, #7a4a43 7px, #7a4a43 14px) !important;
}

/* La etiqueta, más grande y con sombra: sobre un rayado, el texto fino a 10px
   se pierde entre las diagonales. */
.cal-veh-td-day.cal-event-itv .cal-cell-label,
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-label,
.cal-veh-table .cal-veh-td-day.cal-event-itv .cal-cell-label,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento .cal-cell-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  max-width: none;
}

/* Los chips del selector de arriba, con los mismos colores que pintan. */
.cal-veh-chip-itv, .cal-tipo-itv { border-color: #5c7d99 !important; color: #7d9db8 !important; }
.cal-veh-chip-mant, .cal-tipo-mantenimiento { border-color: #8f5a52 !important; color: #b07d74 !important; }
/* La etiqueta real de estos eventos es `.cal-ev-tit` dentro de `.cal-ev-txt`,
   no `.cal-cell-label`. Se le aplica lo mismo. */
.cal-veh-td-day.cal-event-itv .cal-ev-tit,
.cal-veh-td-day.cal-event-mantenimiento .cal-ev-tit,
.cal-veh-table .cal-veh-td-day.cal-event-itv .cal-ev-tit,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento .cal-ev-tit {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Dentro de un mismo tramo de ITV o mantenimiento no se pinta la línea que
   separa los días: con la fase del rayado ya sincronizada, ese 1px era lo
   último que seguía partiendo la banda en trozos. La línea sí se mantiene al
   final del tramo, que es donde de verdad separa algo. */
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-start,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-mid,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-start,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-mid,
.cal-veh-td-day.cal-event-itv.cal-run-start,
.cal-veh-td-day.cal-event-itv.cal-run-mid,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-start,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-mid {
  border-right-color: transparent;
}
/* Y el remate: una línea fina arriba y abajo que cierra la banda de punta a
   punta, para que se lea como una sola pieza. */
.cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.22) !important;
}

/* ── La causa real de la asimetría ────────────────────────────────────────
   El primer y el último día de un tramo llevaban 3px de margen y un padding
   distinto —el redondeo tipo "píldora" de los eventos de proyecto—, así que
   medían 48px mientras los del medio medían 50. Como el degradado se origina
   en el CENTRO de su caja, dos cajas de distinto ancho tienen distinta fase:
   por eso las diagonales cuadraban entre los días centrales y se rompían justo
   en los extremos.

   Para ITV y mantenimiento la banda va a sangre: mismo ancho en todas las
   celdas, sin margen, sin padding lateral y sin redondeo. Los eventos de
   proyecto conservan su píldora, que ahí sí tiene sentido. */
.cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-solo .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-mid .cal-cell-inner,
.cal-veh-td-day.cal-event-itv.cal-run-end .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-solo .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-start .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-mid .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-itv.cal-run-end .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-solo .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-start .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-mid .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-end .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-solo .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-start .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-mid .cal-cell-inner,
.cal-veh-table .cal-veh-td-day.cal-event-mantenimiento.cal-run-end .cal-cell-inner {
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
}
/* La marca vertical de inicio de tramo tampoco: parte la banda. */
.cal-veh-td-day.cal-event-itv .cal-cell-inner::before,
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner::before { display: none !important; }
/* El velo vertical de volumen se quita: sobre un rayado solo lo ensucia. */
.cal-veh-td-day.cal-event-itv .cal-cell-inner::after,
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner::after { display: none !important; }
/* La etiqueta necesita su hueco ahora que no hay padding en la celda. */
.cal-veh-td-day.cal-event-itv.cal-run-start .cal-ev-txt,
.cal-veh-td-day.cal-event-itv.cal-run-solo .cal-ev-txt,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-start .cal-ev-txt,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-solo .cal-ev-txt { padding-left: 8px; }

/* ── La palmera SÍ se ve con la barra cerrada ─────────────────────────────
   Había una regla de la época en que el botón de contraer ocupaba ese hueco:
   `.sidebar.collapsed .logo-mark { opacity: 0; width: 0 }`. Como ahora la
   palmera ES el botón de reabrir, esa regla la dejaba invisible — el elemento
   estaba ahí, con su tamaño y su imagen cargada, pero a opacidad 0. Por eso la
   cabecera salía en blanco.

   Es también la razón de que las comprobaciones de posición y tamaño no
   detectaran nada: lo único mal era la opacidad del PADRE. */
.sidebar.collapsed .logo-mark {
  opacity: 1;
  width: 34px;
  margin: 0;
  overflow: visible;
}
.sidebar.collapsed .logo-mark img { width: 34px !important; height: 34px !important; }

/* ── Avatares por defecto: rojo y negro, planos y variados ────────────────
   Todos llevaban el mismo degradado rojo→negro. Con 42 empleados la lista se
   convertía en una pared repetida y las iniciales dejaban de distinguir a
   nadie. Seis variantes planas dentro de la paleta de la casa, repartidas por
   el nombre para que cada persona tenga siempre la suya. */
.emp-avatar {
  background: var(--accent) !important;
  color: #fff;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
}
.emp-avatar[data-av="1"] { background: var(--text) !important; color: #fff; }
.emp-avatar[data-av="2"] {
  background: transparent !important; color: var(--accent);
  border-color: var(--accent);
}
.emp-avatar[data-av="3"] {
  background: transparent !important; color: var(--text);
  border-color: var(--border-strong);
}
.emp-avatar[data-av="4"] { background: #a3122a !important; color: #fff; }
.emp-avatar[data-av="5"] {
  background: var(--mo-neutro-bg) !important; color: var(--text);
  border-color: var(--border-med);
}

/* ── Ajustes: cada plantilla con su botón de editar debajo ────────────────── */
.aj-pl-caja {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); background: var(--surface);
}
.aj-pl-caja.activa { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.aj-pl-caja .aj-plantilla { border: none; background: none; flex: 1; }
.aj-pl-caja .aj-plantilla:hover:not(:disabled) { background: var(--bg-hover); }
.aj-pl-editar {
  border: none; border-top: 1px solid var(--border);
  background: none; cursor: pointer; font-family: inherit;
  padding: 8px; font-size: 12px; font-weight: 600; color: var(--text-soft);
  transition: color var(--transition), background var(--transition);
}
.aj-pl-editar:hover { color: var(--accent); background: var(--bg-hover); }
.pl-seg-tipo { max-width: 240px; }

/* ── La barra de pestañas no cambia de tamaño nunca ───────────────────────
   Ni las pestañas se encogen, ni la barra pierde altura cuando no hay ninguna.
   Antes, al cerrar la última, la barra se quedaba baja y todo el contenido de
   debajo pegaba un salto hacia arriba; y al abrir una, otro salto hacia abajo.
   Con altura fija la página se queda quieta. */
.tabbar {
  min-height: 45px;
  height: 45px;
  flex: 0 0 45px;
  box-sizing: border-box;
}
.tabbar:empty, .tabbar:has(.tabbar-vacia) { display: flex; align-items: center; }

/* El logo de marca dentro de la píldora del widget de flota: pequeño y sin
   caja, para que acompañe al nombre sin robarle sitio. */
/* Tres formas de logo conviven: SVG en línea (Mercedes, Renault…), PNG y el
   distintivo de texto de reserva. Las tres tienen que medir lo mismo aquí. */
.fleet-pill-icon .veh-brand-logo-wrap { width: 18px; height: 18px; min-width: 18px; }
.fleet-pill-icon .veh-brand-logo-img  { max-width: 18px; max-height: 14px; }
.fleet-pill-icon .veh-logo-svg        { width: 16px; height: 16px; }
.fleet-pill-icon .veh-logo-svg.veh-logo-texto { width: 18px; height: auto; }
.fleet-pill-icon .veh-brand-badge     { font-size: 7.5px; padding: 1px 3px; }
.fleet-pill-icon { display: flex; align-items: center; }
.btn.pres-enviar-fac:hover { color: var(--accent); border-color: var(--accent); }

/* ── Cerrar sesión: lo último de la barra lateral ─────────────────────────── */
.sidebar-salir {
  display: flex; align-items: center; gap: 11px;
  width: 100%; flex-shrink: 0;
  padding: 13px 16px;
  background: none; border: none; border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-align: left;
  position: relative; z-index: 2;
  transition: background var(--transition), color var(--transition);
}
.sidebar-salir svg { flex-shrink: 0; }
/* Rojo al pasar por encima: es la única acción de la barra que te saca de la
   web, y conviene que se note antes de pulsarla, no después. */
.sidebar-salir:hover { background: rgba(var(--acento-rgb), 0.16); color: #fff; }
.sidebar-salir:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Cerrada: solo el icono, centrado como el resto de la barra. */
.sidebar.collapsed .sidebar-salir { justify-content: center; padding: 13px 0; gap: 0; }
.sidebar.collapsed .sidebar-salir .nav-label { display: none; }

/* ── MiFi: PIN y PUK en una columna ───────────────────────────────────────── */
.mifi-claves { font-variant-numeric: tabular-nums; line-height: 1.35; }
.mifi-pin { display: block; font-size: 13px; font-weight: 700; }
/* El PUK, más discreto: solo hace falta cuando el PIN ya ha fallado tres veces.
   Y si no está registrado se dice, porque es justo cuando hace falta. */
.mifi-puk { display: block; font-size: 11px; color: var(--text-soft); }
.mifi-puk:not(:empty) { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENÚ DE ACCIONES
   Panel flotante anclado al botón de tres puntos. Va en `position: fixed` y
   colgado del <body>: dentro de la tabla lo recortaría el `overflow` del
   contenedor con desplazamiento.
   ═══════════════════════════════════════════════════════════════════════════ */
.menu-acc {
  position: fixed; z-index: 9000;
  min-width: 232px; max-width: 300px;
  padding: 5px 0;
  background: var(--surface);
  border: 1px solid var(--border-med);
  box-shadow: var(--shadow-md);
  animation: menuAcc 0.11s ease-out;
}
@keyframes menuAcc { from { opacity: 0; transform: translateY(-3px); } }

.menu-acc-item {
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%; padding: 8px 13px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13.5px; color: var(--text);
  transition: background var(--transition);
}
.menu-acc-item:hover, .menu-acc-item.resaltado { background: var(--bg-hover); }
.menu-acc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu-acc-txt { display: block; min-width: 0; }
/* La segunda línea explica lo que hace la acción: «Descontabilizar» a secas no
   dice que devuelve los días al inventario. */
.menu-acc-txt em {
  display: block; margin-top: 1px;
  font-style: normal; font-size: 11.5px; color: var(--text-soft); line-height: 1.35;
}
.menu-acc-ico { flex: 0 0 0; }
.menu-acc-item.destacado { font-weight: 650; }
.menu-acc-item.destacado .menu-acc-txt { color: var(--accent); }
/* Las destructivas, en rojo y siempre al final tras un separador: hay que
   llegar a ellas a propósito. */
.menu-acc-item.peligro .menu-acc-txt { color: var(--pres-no); }
.menu-acc-item.peligro:hover { background: var(--pres-no-bg); }
.menu-acc-sep { height: 1px; background: var(--border); margin: 5px 0; }
.menu-acc-tit {
  padding: 7px 13px 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-soft);
}

/* El botón de tres puntos */
.btn.pres-mas { padding: 4px 7px; line-height: 0; }
.btn.pres-mas[aria-expanded="true"] { background: var(--bg-hover); color: var(--text); }

/* ── Editor de plantillas: panel de estilo ────────────────────────────────── */
.pl-estilo { margin-bottom: 18px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.pl-estilo > summary {
  cursor: pointer; list-style: none; padding-bottom: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-soft);
  display: flex; align-items: center; gap: 7px;
}
.pl-estilo > summary::-webkit-details-marker { display: none; }
.pl-estilo > summary::before {
  content: ''; width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.2s ease;
}
.pl-estilo[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.pl-colores { display: grid; gap: 4px; margin-bottom: 12px; }
.pl-color { display: flex; align-items: center; gap: 9px; font-size: 12.5px; cursor: pointer; }
.pl-color input[type="color"] {
  width: 30px; height: 24px; padding: 0; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--border-med); background: none; border-radius: 0;
}
.pl-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 10px 0; cursor: pointer; }
.pl-estilo-cuerpo input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ── Ajustes: barra de guardado ───────────────────────────────────────────
   Pegada arriba mientras se recorre la página: los ajustes son largos y el
   botón al final se pierde de vista justo cuando hay algo que guardar. */
.aj-barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; margin-bottom: 22px;
  background: var(--surface); border: 1px solid var(--border);
}
.aj-barra-txt { flex: 1; font-size: 12.5px; color: var(--text-soft); }
/* Se enciende solo cuando hay algo pendiente: si estuviera siempre en rojo
   dejaría de significar nada. */
.aj-barra.sucia { border-color: var(--mo-aviso); background: var(--mo-aviso-bg); }
.aj-barra.sucia .aj-barra-txt { color: var(--mo-aviso); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   MiFi: TABLERO
   El color dice el estado sin leer: verde libre, rojo en rodaje, gris parado.
   Es lo que permite contestar «¿cuál cojo?» de un vistazo, que es la pregunta
   que se hace todos los días.
   ═══════════════════════════════════════════════════════════════════════════ */
#mifis-dashboard { display: none; }   /* lo sustituyen las cifras del tablero */
.mifi-vista-barra { display: flex; justify-content: flex-end; margin: 4px 0 14px; }

.mf-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border: 1px solid var(--border); border-left: none;
  background: var(--surface); margin-bottom: 14px;
}
.mf-cifra { padding: 12px 15px; border-left: 1px solid var(--border); }
.mf-cifra b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.mf-cifra span {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-soft);
}
.mf-cifra.libre b { color: var(--pres-ok); }
.mf-cifra.fuera b { color: var(--accent); }
.mf-cifra.mant  b { color: var(--mo-aviso); }
.mf-cifra.aviso b { color: var(--mo-aviso); }

.mf-enproy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mf-enproy-tit { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.mf-enproy-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; font-size: 12.5px; font-weight: 600;
  background: rgba(var(--acento-rgb), 0.10); color: var(--accent);
}
.mf-enproy-chip i { font-style: normal; font-size: 11px; opacity: 0.75; }

.mf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.mf-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px 14px 12px;
  background: var(--surface); border: 1px solid var(--border);
  /* La banda de color va a la izquierda, no de fondo: teñir la tarjeta entera
     compite con el texto y con seis tarjetas cansa. */
  box-shadow: inset 3px 0 0 var(--border-med);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.mf-card:hover { border-color: var(--border-med); }
.mf-libre { box-shadow: inset 3px 0 0 var(--pres-ok); }
.mf-fuera { box-shadow: inset 3px 0 0 var(--accent); }
.mf-mant  { box-shadow: inset 3px 0 0 var(--mo-aviso); }
.mf-baja  { opacity: 0.55; }

.mf-card-cab { display: flex; align-items: center; gap: 8px; }
.mf-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  padding: 1px 6px; background: var(--mo-neutro-bg); color: var(--text-soft);
}
.mf-estado {
  margin-left: auto; font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-soft);
}
.mf-libre .mf-estado { color: var(--pres-ok); }
.mf-fuera .mf-estado { color: var(--accent); }
.mf-mant  .mf-estado { color: var(--mo-aviso); }
.mf-nombre { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }

.mf-destino { padding: 7px 9px; background: var(--surface-2); font-size: 12.5px; }
.mf-destino-proy { display: block; font-weight: 700; }
.mf-destino-meta { display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-soft); }
.mf-destino-libre { color: var(--text-soft); font-style: italic; }

.mf-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.mf-datos dt {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-xsoft);
}
.mf-datos dd { margin: 1px 0 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mf-falta { color: var(--mo-aviso); font-weight: 500; font-size: 11px; }
.mf-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ── Empleados: vista en lista ────────────────────────────────────────────── */
.emp-vista-barra { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.emp-grupo-tit {
  font-size: 11px; font-weight: 700; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.06em; margin: 18px 0 10px;
}
.emp-avatar-sm { width: 30px; height: 30px; font-size: 11.5px; }
.emp-tabla td { vertical-align: middle; }
.emp-tabla a { color: var(--text-soft); text-decoration: none; }
.emp-tabla a:hover { color: var(--accent); text-decoration: underline; }

/* ── IT Stock: en proyectos ───────────────────────────────────────────────── */
.it-tab-n {
  margin-left: 6px; font-size: 11px; font-weight: 700;
  padding: 1px 6px; background: var(--mo-neutro-bg); color: var(--text-soft);
}
.it-tab-n.rojo { background: var(--mo-alerta-bg); color: var(--mo-alerta); }
.it-tab-n:empty { display: none; }
.tabla tbody tr.itp-vencido { background: var(--mo-alerta-bg); }
.it-salida-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ── Empleados: chips de departamento ─────────────────────────────────────── */
.emp-deps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.emp-dep-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-soft); font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: color var(--transition), border-color var(--transition);
}
.emp-dep-chip:hover { color: var(--text); border-color: var(--border-med); }
.emp-dep-chip i {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 0 5px; background: var(--mo-neutro-bg); color: var(--text-soft);
}
.emp-dep-chip.activo { color: #fff; background: var(--accent); border-color: var(--accent); }
.emp-dep-chip.activo i { background: rgba(255,255,255,0.22); color: #fff; }

/* ── Microsoft 365: pantalla de sincronización ────────────────────────────── */
.ms-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.ms-tab {
  background: none; border: none; cursor: pointer; margin-bottom: -1px;
  padding: 9px 14px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-soft); border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 7px;
}
.ms-tab:hover { color: var(--text); }
.ms-tab.activa { color: var(--text); border-bottom-color: var(--accent); }
.ms-tab i {
  font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px;
  background: var(--mo-neutro-bg); color: var(--text-soft);
}
.ms-tab.activa i { color: var(--text); }
.ms-badge {
  margin-left: 7px; padding: 1px 6px; font-size: 10px; font-weight: 700;
  background: var(--mo-neutro-bg); color: var(--text-soft);
}
.tabla tbody tr.ms-inactivo { opacity: 0.55; }
/* Barra de acción pegada abajo: con 127 filas, el botón al final de la tabla
   queda a un scroll de distancia justo cuando ya has decidido. */
.ms-barra {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-top: 14px;
  background: var(--surface); border: 1px solid var(--accent);
  box-shadow: 0 -4px 14px rgba(0,0,0,0.12);
}
.ms-barra span { flex: 1; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MICROSOFT 365 · ALTA DE USUARIO  (_ma*)
   ═══════════════════════════════════════════════════════════════════════════ */

.ma-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 18px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ma-sw {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ma-sw:hover { color: var(--text); }
.ma-sw.activa { background: var(--accent); color: #fff; }

/* ── Pantalla de bloqueo ─────────────────────────────────────────────────── */
.ma-bloqueo {
  max-width: 680px;
  margin: 24px auto;
  padding: 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ma-bloqueo-icono { font-size: 34px; line-height: 1; margin-bottom: 12px; }
.ma-bloqueo h2 { margin: 0 0 8px; font-size: 19px; }
.ma-bloqueo > p { margin: 0; color: var(--text-soft); }
.ma-bloqueo-porque {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: left;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
}
.ma-bloqueo-porque p { margin: 0 0 12px; }
.ma-bloqueo-porque b { color: var(--text); }
.ma-bloqueo-porque code {
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--surface-2, rgba(127,127,127,.14));
  font-size: 12.5px;
}
.ma-cmd {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: #14161a;
  color: #d8dee9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  overflow-x: auto;
}

/* ── Formulario ──────────────────────────────────────────────────────────── */
.ma-form {
  max-width: 720px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ma-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  margin: 20px 0 4px;
}
.ma-ancho { grid-column: 1 / -1; }
.ma-campo { display: flex; flex-direction: column; gap: 6px; }
.ma-campo label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ma-campo label i { color: var(--accent); font-style: normal; }
.ma-campo input,
.ma-campo select,
.ma-correo input,
.ma-correo select {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.ma-campo input:focus,
.ma-campo select:focus,
.ma-correo input:focus,
.ma-correo select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ma-correo { display: flex; align-items: center; gap: 8px; }
.ma-correo input { flex: 1 1 auto; min-width: 0; }
.ma-correo > span { color: var(--text-soft); font-size: 15px; }
.ma-correo select { flex: 0 1 auto; max-width: 240px; }
.ma-pista { margin: 2px 0 0; font-size: 12.5px; color: var(--text-soft); }
.ma-pista b { color: var(--text); font-weight: 600; }

.ma-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 14px;
  cursor: pointer;
}
.ma-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── Resultado: la contraseña, una vez ───────────────────────────────────── */
.ma-hecho {
  max-width: 640px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ma-hecho-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.ma-tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: #1f9d5522;
  color: #1f9d55;
  font-size: 20px;
  font-weight: 700;
}
.ma-hecho-cab h2 { margin: 0; font-size: 18px; }
.ma-hecho-cab p { margin: 2px 0 0; color: var(--text-soft); font-size: 13.5px; }

.ma-pass {
  padding: 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.ma-pass > label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ma-pass-fila { display: flex; align-items: center; gap: 10px; }
.ma-pass-fila code {
  flex: 1 1 auto;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  letter-spacing: .06em;
  user-select: all;
  overflow-x: auto;
}
.ma-pass-aviso {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-soft);
}
.ma-pass-aviso b { color: var(--text); }
.ma-hecho-acciones {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .ma-rejilla { grid-template-columns: 1fr; }
  .ma-correo { flex-wrap: wrap; }
  .ma-correo select, .ma-correo input { max-width: none; width: 100%; }
  .ma-correo > span { display: none; }
}

/* El código de la contraseña es largo y se comía el botón de copiar. */
.ma-pass-fila code { min-width: 0; }
.ma-pass-fila .btn { flex: 0 0 auto; white-space: nowrap; }

/* ── Alta de usuario · licencias ─────────────────────────────────────────── */
.ma-bloque-lic { margin-top: 22px; }
.ma-bloque-tit {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ma-lic-lista {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--border);
}
.ma-lic {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  background: var(--bg);
  cursor: pointer;
  transition: background .12s;
}
.ma-lic:hover { background: var(--surface-2, var(--surface)); }
.ma-lic-nombre { flex: 1 1 auto; font-size: 14px; }
.ma-lic-plazas {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}
.ma-lic-plazas i { font-style: normal; font-weight: 400; opacity: .65; }
.ma-lic-plazas.cero { color: var(--accent); }
.ma-lic.agotada .ma-lic-nombre { color: var(--text-soft); }

.ma-lic-alerta {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Resultado */
.ma-lic-res {
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-soft);
}
.ma-lic-res.bien { border-color: #1f9d5566; color: var(--text); }
.ma-lic-res.mal {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
}
.ma-lic-res.mal b { display: block; margin-bottom: 6px; }
.ma-lic-res.mal p { margin: 0 0 6px; font-size: 12.5px; color: var(--text-soft); }
.ma-lic-res.mal p:last-child { margin-bottom: 0; }

.ma-lic-plazas.gratis { color: var(--text-soft); opacity: .8; font-weight: 400; }
.ma-lic-mas {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ma-lic-mas:hover { color: var(--text); }
.ma-lic-lista.gratis { margin-top: 9px; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════════════════
   ALTA DE USUARIO · pantalla nueva (.mn*)
   ═══════════════════════════════════════════════════════════════════════════ */
.mn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
.mn-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.mn-bloque {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.mn-bloque h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
}
.mn-num {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.mn-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.mn-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mn-campo.ancho { grid-column: 1 / -1; }
.mn-campo label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.mn-campo input,
.mn-correo input,
.mn-correo select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color .14s, box-shadow .14s;
}
.mn-campo input:focus,
.mn-correo input:focus,
.mn-correo select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.mn-correo { display: flex; align-items: center; gap: 9px; }
.mn-correo input { flex: 1 1 auto; min-width: 0; }
.mn-correo > span { flex: 0 0 auto; color: var(--text-soft); }
.mn-correo select { flex: 0 1 auto; width: auto; max-width: 250px; }
.mn-pista { margin: 10px 0 0; font-size: 12.5px; color: var(--text-soft); }
.mn-pista b { color: var(--text); font-weight: 600; }

/* ── Licencias como tarjetas seleccionables ──────────────────────────────── */
.mn-lics { display: flex; flex-direction: column; gap: 8px; }
.mn-lics.gratis { margin-top: 8px; }
.mn-lic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.mn-lic:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.mn-lic.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.mn-lic input { position: absolute; opacity: 0; pointer-events: none; }
.mn-tick {
  flex: 0 0 auto;
  position: relative;
  width: 19px; height: 19px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  transition: background .14s, border-color .14s;
}
.mn-lic.on .mn-tick { background: var(--accent); border-color: var(--accent); }
.mn-lic.on .mn-tick::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mn-lic-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mn-lic-txt b { font-size: 13.5px; font-weight: 500; }
.mn-lic-txt i { font-style: normal; font-size: 11.5px; color: var(--text-soft); }
.mn-lic-txt i.cero { color: var(--accent); font-weight: 600; }
.mn-lic.agotada .mn-lic-txt b { color: var(--text-soft); }

.mn-mas {
  margin-top: 10px; padding: 0;
  border: 0; background: none;
  color: var(--text-soft);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.mn-mas:hover { color: var(--text); }
.mn-alerta {
  margin: 12px 0 0;
  padding: 10px 13px;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Tarjeta de resumen ──────────────────────────────────────────────────── */
.mn-lado { position: sticky; top: 16px; }
.mn-tarjeta {
  padding: 24px 20px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.mn-avatar {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--accent) 85%, #000),
    color-mix(in srgb, var(--accent) 45%, #000));
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .04em;
}
.mn-nombre { font-size: 16px; font-weight: 600; word-break: break-word; }
.mn-nombre i, .mn-mail i { font-style: normal; color: var(--text-soft); opacity: .55; font-weight: 400; }
.mn-mail { margin-top: 3px; font-size: 12.5px; color: var(--text-soft); word-break: break-all; }
.mn-sub { margin-top: 7px; font-size: 12px; color: var(--text-soft); }
.mn-sep { height: 1px; margin: 18px 0; background: var(--border); }

.mn-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mn-chip {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 500;
}
.mn-chip.cero { background: var(--accent); color: #fff; }
.mn-chip.vacio { background: transparent; border: 1px dashed var(--border); color: var(--text-soft); }

.mn-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 16px;
  text-align: left;
  font-size: 12.5px;
  cursor: pointer;
}
.mn-crear, .mn-limpiar { width: 100%; justify-content: center; }
.mn-limpiar { margin-top: 8px; }

@media (max-width: 900px) {
  .mn { grid-template-columns: 1fr; }
  .mn-lado { position: static; }
  .mn-rejilla { grid-template-columns: 1fr; }
}

/* ── Empleados: filtro por área + departamento ───────────────────────────── */
.emp-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
/* `.cat-dd-wrap` es display:block, así que sin base fija los desplegables se
   estiraban a todo el ancho y se apilaban uno debajo de otro. */
.emp-dd { flex: 0 0 auto; width: 230px; }
.emp-dd .selector-boton { width: 100%; }
.emp-cuenta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
}
.emp-limpiar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.emp-limpiar:hover { color: var(--text); }

@media (max-width: 620px) {
  .emp-dd { min-width: 0; flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MICROSOFT 365 · BUZONES Y GRUPOS  (.bz* y .gr*)
   ═══════════════════════════════════════════════════════════════════════════ */
.bz-elige {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.bz-elige > label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-soft);
}
.bz-dd { flex: 0 0 auto; width: 300px; }
.bz-dd .selector-boton { width: 100%; }
.bz-quien { font-size: 12.5px; color: var(--text-soft); }
.bz-vacio {
  padding: 40px 24px; text-align: center; color: var(--text-soft);
  border: 1px dashed var(--border); border-radius: var(--radius-lg);
}

.bz-paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.bz-panel {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.bz-panel h3 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px; font-size: 14.5px; font-weight: 600;
}
.bz-cuenta {
  padding: 1px 7px; border-radius: var(--radius-xs);
  background: var(--mo-neutro-bg); color: var(--text-soft);
  font-size: 11px; font-weight: 700;
}

.bz-estado { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.bz-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--text-soft); }
.bz-estado.on .bz-punto { background: #1f9d55; box-shadow: 0 0 0 3px #1f9d5533; }
.bz-estado.off { color: var(--text-soft); }

.bz-seg { display: flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bz-seg-b {
  flex: 1 1 0; padding: 7px 10px; border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-soft);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .14s, color .14s;
}
.bz-seg-b:hover { color: var(--text); }
.bz-seg-b.activa { background: var(--accent); color: #fff; }
.bz-seg.chico .bz-seg-b { padding: 5px 8px; font-size: 11.5px; }

.bz-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.bz-fechas label, .bz-campo label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-soft);
}
.bz-campo { margin-top: 16px; }
.bz-fechas input, .bz-campo textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px;
  resize: vertical;
}
.bz-fechas input:focus, .bz-campo textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.bz-acciones {
  display: flex; justify-content: flex-end; gap: 9px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}

.bz-grupos { display: flex; flex-direction: column; gap: 7px; }
.bz-grupo {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
}
.bz-grupo-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bz-grupo-txt b { font-size: 13px; font-weight: 500; }
.bz-grupo-txt i { font-style: normal; font-size: 11.5px; color: var(--text-soft); }
.bz-nota { font-size: 11.5px; color: var(--text-soft); }
.bz-anadir { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.bz-anadir > label {
  display: block; margin-bottom: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-soft);
}
.bz-anadir .bz-dd { width: 100%; }

/* ── Grupos ─────────────────────────────────────────────────────────────── */
.gr-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.gr-barra .filter-input { flex: 1 1 220px; min-width: 0; }
.gr-lista { display: flex; flex-direction: column; gap: 7px; }
.gr-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.gr-item.abierto { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.gr-cab {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 12px 14px; border: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.gr-flecha { flex: 0 0 12px; color: var(--text-soft); font-size: 11px; }
.gr-nombre { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gr-nombre b { font-size: 13.5px; font-weight: 500; }
.gr-nombre i { font-style: normal; font-size: 11.5px; color: var(--text-soft); }
.gr-tipo {
  flex: 0 0 auto; padding: 3px 9px; border-radius: var(--radius-xs);
  background: var(--mo-neutro-bg); color: var(--text-soft);
  font-size: 11px; font-weight: 600;
}
.gr-tipo.t-microsoft365 { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.gr-tipo.t-dinamico { background: color-mix(in srgb, #d19a00 22%, transparent); color: #d19a00; }
.gr-cuerpo { padding: 4px 14px 16px 37px; border-top: 1px solid var(--border); }
.gr-cuerpo > .mn-pista:first-child { margin-top: 12px; }
.gr-miembros { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.gr-miembro {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
}
.gr-ini {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent); font-size: 12px; font-weight: 700;
}
.gr-m-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gr-m-txt b { font-size: 13px; font-weight: 500; }
.gr-m-txt i { font-style: normal; font-size: 11.5px; color: var(--text-soft); }

@media (max-width: 700px) {
  .bz-dd { width: 100%; }
  .bz-paneles { grid-template-columns: 1fr; }
  .bz-fechas { grid-template-columns: 1fr; }
  .gr-cuerpo { padding-left: 14px; }
}
.bz-formato {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.5;
  color: #d19a00;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN · EL FOCO  (.lfx*)
   Los valores los pone el JS en variables; aquí solo se dice qué hacer con
   ellos. Así el fotograma no toca estilos uno a uno, solo cuatro variables.
   ═══════════════════════════════════════════════════════════════════════════ */
.login-marca {
  --lfx-x: 50%;
  --lfx-y: 62%;
  --lfx-fuerza: 0.45;
  --lfx-destello: 0;
  --lfx-px: 0px; --lfx-py: 0px;
  --lfx-tx: 0px; --lfx-ty: 0px;
}

/* El haz. Va detrás de todo (z-index -3) para que no tape ni el texto ni la
   palmera: enciende la escena, no se pone delante. */
.lfx-foco {
  position: absolute; inset: 0; z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle 42vmax at var(--lfx-x) var(--lfx-y),
      rgba(var(--acento-rgb), calc(0.26 * var(--lfx-fuerza) + 0.30 * var(--lfx-destello))) 0%,
      rgba(var(--acento-rgb), calc(0.11 * var(--lfx-fuerza))) 28%,
      transparent 62%),
    radial-gradient(circle 16vmax at var(--lfx-x) var(--lfx-y),
      rgba(255, 236, 226, calc(0.10 * var(--lfx-fuerza) + 0.14 * var(--lfx-destello))) 0%,
      transparent 70%);
  transition: opacity .5s ease;
}

.lfx-polvo {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
}

/* Profundidad: la palmera del fondo se desplaza más que el texto de delante, y
   en sentido contrario al ratón. Es lo que hace que parezca que hay hueco. */
.login-marca-palma {
  transform: translate3d(var(--lfx-px), var(--lfx-py), 0);
  transition: opacity .4s ease;
}
.login-marca:hover .login-marca-palma { opacity: 0.15; }

.login-marca-cuerpo,
.login-marca-pie {
  transform: translate3d(var(--lfx-tx), var(--lfx-ty), 0);
}

/* El título se enciende un pelín cuando el foco anda cerca. */
.login-marca-tit {
  transition: text-shadow .45s ease;
}
.login-marca:hover .login-marca-tit {
  text-shadow: 0 0 38px rgba(var(--acento-rgb), 0.34);
}

@media (prefers-reduced-motion: reduce) {
  .lfx-polvo { display: none; }
  .lfx-foco { transition: none; }
  .login-marca-palma,
  .login-marca-cuerpo,
  .login-marca-pie { transform: none; }
}

/* En pantallas estrechas la mitad negra desaparece o se encoge: el adorno sobra. */
@media (max-width: 860px) {
  .lfx-polvo { display: none; }
}

/* ── Selects adoptados: el nativo se esconde pero sigue ahí ──────────────── */
select.sel-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
/* El envoltorio hereda las clases del select para caer en el mismo hueco, pero
   NO debe pintarse: quien se ve es el botón de dentro. Se le quita todo lo
   decorativo con `!important` porque las reglas originales (`.filter-select`,
   `.form-input`) son más específicas que esta. */
.sel-dd {
  position: relative;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  color: inherit !important;
  font: inherit !important;
  appearance: none !important;
}
.sel-dd > .selector-boton { width: 100%; }
.sel-dd > .selector-boton.desactivado { opacity: .55; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   PASADA DE COHERENCIA

   La web había crecido por capas y cada sección traía sus medidas: campos de
   32, 34, 36 y 42 píxeles de alto, y el avatar del perfil redondo mientras el
   de la barra lateral era cuadrado — la misma persona con dos formas.

   Esto no inventa un estilo nuevo: iguala al que ya usaba la mayoría.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Campos: todos con el mismo alto ─────────────────────────────────────── */
.filter-input,
.form-input,
.form-control,
.selector-boton,
input[type="text"]:not(.busca-input),
input[type="search"]:not(.busca-input),
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="password"]:not(#login-pass),
textarea {
  font-size: 13.5px;
  font-family: var(--font);
}
.filter-input,
.form-input,
.form-control,
.selector-boton,
input[type="text"]:not(.busca-input):not(.cat-dd-busca input),
input[type="search"]:not(.busca-input),
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="password"]:not(#login-pass) {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* El avatar del perfil, cuadrado como el de la barra lateral. */
.perfil-avatar,
.perfil-avatar-img { border-radius: var(--radius-sm) !important; }

/* Los botones de acción de Revisiones traían su propio redondeo. */
.rev-accion { border-radius: var(--radius-sm) !important; }

/* Los desplegables salían 2px más altos que los campos de texto: el botón lleva
   dentro un span y un icono, y su altura de línea es mayor que la de un input.
   Se fija el alto en vez de perseguir la altura de línea. */
.selector-boton {
  box-sizing: border-box;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.selector-boton > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.selector-boton > svg { flex: 0 0 auto; opacity: .6; }

/* El panel de un select adoptado no debe ser mucho más ancho que su botón:
   antes salía a 340px fijos aunque el botón midiera 130 y quedaba descolgado. */
.sel-dd > .cat-dd { min-width: 100%; width: max-content; max-width: min(420px, 90vw); }

/* ── Estados vacíos ──────────────────────────────────────────────────────── */
.vacio-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 46px 24px;
  text-align: center;
}
.vacio-icono {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 20px;
  opacity: .75;
}
.vacio-estado h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.vacio-estado p {
  max-width: 420px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
.vacio-estado .btn { margin-top: 10px; }
.vacio-pista { font-size: 12px !important; opacity: .8; }
.vacio-fila td { padding: 0 !important; background: none !important; border: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODO CLARO · LOS GRISES QUE SE QUEDARON DEL OSCURO

   `--text-soft` se corrigió en su día, pero `--text-xsoft` y `--lavender-grey`
   se quedaron con tonos pensados para fondo negro. Sobre blanco daban entre
   2,88 y 3,68 de contraste (el mínimo legible es 4,5): fechas, subtítulos,
   etiquetas de gráfico y las pistas bajo los títulos salían lavadas.

   No es un ajuste a ojo: son 83 reglas que usan `--text-xsoft`, así que se
   arregla el token y no las 83. En oscuro no se toca nada.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-tema="claro"],
html[data-tema="claro"] {
  /* #596478 pasa el 4,5 en LOS TRES fondos que tiene la web: tarjeta blanca
     (5,97), fondo de página #dde5eb (4,68) y superficie intermedia (5,30).
     Con #6b7689 se quedaba en 3,60 sobre el fondo de página, que es justo
     donde viven las pistas y los subtítulos. */
  --text-xsoft:     #596478;   /* antes #7b8698 → 2,89:1 */
  --lavender-grey:  #596478;   /* antes #8d99ae → 2,88:1 */
  /* `--text-soft` (#5f6b80) daba 5,38 sobre tarjeta blanca —correcto— pero
     4,22 sobre el fondo de página, y ahí es donde viven los contadores y las
     fechas. Un punto más oscuro y pasa en los dos sitios. */
  --text-soft:      #596478;
  --text-muted:     #596478;
  /* El rojo de marca sobre blanco se queda en 3,31 cuando hace de TEXTO
     (enlaces, avisos, chips). Un punto más oscuro sirve igual de fondo con
     texto blanco encima, así que vale para los dos usos. */
  --red:            #d1102c;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --text-xsoft:     #596478;
    --lavender-grey:  #596478;
    --text-soft:      #596478;
    --text-muted:     #596478;
    --red:            #d1102c;
  }
}

/* Los dos últimos colores fijos que se quedaban cortos en claro. Van dentro del
   tema para no tocar el oscuro, donde ya se ven bien. */
:root[data-tema="claro"],
html[data-tema="claro"] {
  --orange-dark: #5c6577;   /* era #6b7589 → 4,12:1 en las fechas de la agenda */
  --mo-alerta:   #b21c1c;   /* era #c62828 → 3,92:1 en los contadores de taller */
  --eco-gasto:   #b21c1c;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --orange-dark: #5c6577;
    --mo-alerta:   #b21c1c;
    --eco-gasto:   #b21c1c;
  }
}

/* `.badge-borrador` era el único badge con un gris fijo (#6E6E73) en vez de un
   token: en oscuro daba 2,67 sobre su propio fondo y costaba leerlo. El resto
   ya usaban `var(--text-soft)`, que se adapta al tema. */
.badge-borrador { color: var(--text-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   CABECERA DE SECCIÓN

   `.page-subtitle` no tenía NINGUNA regla: heredaba el color del texto normal
   y salía tan marcado como el título, en las 22 secciones. Parecía un segundo
   titular en vez de una explicación.

   Y la cabecera era un flex sin `wrap`: en pantalla estrecha el subtítulo se
   cortaba a media palabra en vez de bajar a su línea.
   ═══════════════════════════════════════════════════════════════════════════ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 20px;
}
.page-header h1,
.page-header .page-title { flex: 0 0 auto; margin: 0; }

.page-subtitle {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-soft);
}
.page-actions { flex: 0 0 auto; margin-left: auto; }
.page-date { flex: 0 0 auto; }

/* En estrecho cada cosa a su línea, y las acciones alineadas a la izquierda
   como todo lo demás en vez de colgando a la derecha. */
@media (max-width: 720px) {
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-subtitle { flex: 1 1 auto; }
  .page-actions { margin-left: 0; width: 100%; }
}

/* ── Menú en pantalla estrecha ───────────────────────────────────────────── */
.menu-movil {
  display: none;               /* solo aparece cuando la barra se esconde */
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-left: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.menu-movil:hover { color: var(--text); border-color: var(--border-med); }

.menu-velo {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  animation: menu-velo-entra .16s ease;
}
@keyframes menu-velo-entra { from { opacity: 0 } to { opacity: 1 } }

@media (max-width: 720px) {
  .menu-movil { display: inline-flex; }

  /* La barra deja de ocupar sitio y pasa a deslizarse por encima. `display`
     vuelve a ser normal —estaba en `none`, y lo que no se pinta no se puede
     animar ni leer con el teclado. */
  .sidebar {
    display: flex !important;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 901;
    width: min(280px, 86vw);
    transform: translateX(-102%);
    transition: transform .22s cubic-bezier(.2,.9,.3,1);
    box-shadow: none;
  }
  body.menu-movil-abierto .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 42px rgba(0,0,0,.5);
  }
  /* Con el menú fuera, el fondo no debe poder desplazarse detrás. */
  body.menu-movil-abierto { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .menu-velo { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLA DE ACCESO · misma cara que la web de presentación

   Se rehace la mitad izquierda con el lenguaje de la web: papel milimetrado,
   el logo de Stock It, Archivo para el titular e IBM Plex Mono para las
   etiquetas. El foco que sigue al ratón y el polvo del haz se quedan — son
   de esta pantalla y no chocan con la retícula.

   Va al final del archivo a propósito: sobrescribe las reglas de arriba sin
   tocarlas, que es como está montado el resto de este CSS.
   ═══════════════════════════════════════════════════════════════════════════ */
.login-screen {
  --lg-tinta:  #eaecf2;
  --lg-tinta2: #a6adbc;
  --lg-tinta3: #838a9a;
  --lg-regla:  rgba(255,255,255,.10);
  --lg-trama:  rgba(255,255,255,.045);
  --lg-sello:  #ff4d5f;
}

/* ── Mitad izquierda ─────────────────────────────────────────────────────── */
.login-marca {
  background: #0b0b0d;
  padding: 46px 52px;
}
/* La retícula de la web, fija bajo el contenido. El foco que ya existía la
   revela alrededor del cursor, igual que en la página de presentación. */
.login-marca::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  left: auto; bottom: auto; width: 100%; height: 100%;
  aspect-ratio: auto;
  background:
    linear-gradient(to right,  var(--lg-trama) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lg-trama) 1px, transparent 1px);
  background-size: 58px 58px;
}
.login-marca::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, transparent 55%);
}

.login-marca-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--lg-tinta3);
  margin-bottom: 22px;
}
.login-punto { width: 7px; height: 7px; background: var(--lg-sello); flex: 0 0 auto; }

.login-marca-tit {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(38px, 4.4vw, 62px);
  letter-spacing: -0.045em;
  line-height: .98;
  color: var(--lg-tinta);
  margin: 0;
}
.login-marca-txt {
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; line-height: 1.6;
  color: var(--lg-tinta2);
  max-width: 42ch;
  margin-top: 22px;
}

.login-marca-pie {
  display: flex; align-items: center; gap: 11px;
  position: relative;
}
.login-logo { display: block; width: 20px; height: 20px; color: var(--lg-tinta); }
.login-logo path { fill: currentColor; }
.login-marca-pie span {
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: 16px; letter-spacing: -0.035em;
  color: var(--lg-tinta);
}

/* ── Mitad derecha: el formulario ────────────────────────────────────────── */
.login-logo-form {
  width: 26px; height: 26px;
  margin-bottom: 20px;
  color: var(--text);
}
.login-form-cab h2 {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; letter-spacing: -0.035em;
}
.login-form-cab p { font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; }

.login-campo > span {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.login-campo input,
.login-btn {
  border-radius: var(--radius-sm);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}
/* El botón, igual que los de la web: versalita monoespaciada y ancha. */
.login-btn {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
}
.login-ayuda { font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; }

/* La retícula se mueve un poco con el ratón, como hacía la palmera. */
.login-marca::before { transform: translate3d(var(--lfx-px, 0), var(--lfx-py, 0), 0); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO DE STOKIT EN LA BARRA LATERAL

   Las reglas de arriba estaban escritas para un PNG de palmera (`img`, con
   `filter: invert(1)` para pasarlo a blanco). Ahora es un SVG que hereda el
   color, así que no hace falta invertir nada — y de paso funciona igual en
   claro que en oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */
.marca-logo { display: block; }
.marca-logo path { fill: currentColor; }

/* La marca de agua del fondo: el logo, grande y muy tenue, apoyado abajo. */
.sidebar-palm-watermark { align-items: flex-end; justify-content: center; }
.sidebar-palm-watermark .marca-logo {
  width: 62%; height: auto; object-fit: contain;
  color: var(--text);
  margin-bottom: -8%;
}
/* En la luz no va ninguna imagen: la pinta un pseudo-elemento. Si se cuela
   un logo aquí sale a toda potencia, porque la regla que ocultaba el `img`
   original no alcanza a un `svg`. */
.sidebar-luz .marca-logo { display: none; }

/* El de la cabecera: cuadrado, sin caja, y toma el rojo al pasar por encima. */
.logo-mark { display: grid; place-items: center; background: none !important; border: 0 !important; }
.logo-mark .marca-logo {
  width: 24px; height: 24px;
  color: var(--text);
  transition: color .2s ease;
}
.sidebar-logo:hover .logo-mark .marca-logo { color: var(--red); }
/* Con la barra plegada, el logo es lo que la reabre: tiene que verse. */
.sidebar.collapsed .logo-mark { opacity: 1 !important; width: auto !important; overflow: visible !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   REVISIONES · el parte del día

   Lo que falta va primero y en rojo; lo que está bien se resume en una línea.
   La jerarquía es la de una lista de tareas, no la de un panel de estadísticas:
   aquí se viene a ver a quién hay que llamar.
   ═══════════════════════════════════════════════════════════════════════════ */
.rvh {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.rvh-libre {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--text-soft);
}
.rvh-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--text-soft); flex: 0 0 auto; }
.rvh-punto.ok { background: #1f9d55; box-shadow: 0 0 0 3px rgba(31,157,85,.18); }

.rvh-cifras { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 4px; }
.rvh-cifra { display: flex; flex-direction: column; gap: 1px; }
.rvh-cifra b {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.rvh-cifra span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft);
}
.rvh-cifra.ok b    { color: #1f9d55; }
.rvh-cifra.falta b { color: var(--red); }

.rvh-bloque { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.rvh-tit {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 10px; color: var(--text-soft);
}
.rvh-bloque.falta .rvh-tit { color: var(--red); }
.rvh-bloque.ok    .rvh-tit { color: #1f9d55; }

.rvh-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--border-fina, var(--border)); }
.rvh-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--bg);
}
.rvh-veh { font-weight: 600; font-size: 14px; }
.rvh-mat { font-size: 12px; color: var(--text-soft); }
.rvh-proy { margin-inline-start: auto; font-size: 12.5px; color: var(--text-soft); }
.rvh-bloque.falta .rvh-item { border-inline-start: 3px solid var(--red); }
.rvh-nota { margin: 10px 0 0; font-size: 12.5px; color: var(--text-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   FOTOS DEL MATERIAL

   Cuadrícula de miniaturas con la portada marcada. Las acciones aparecen al
   pasar por encima para que la rejilla se lea como fotos y no como una tabla
   de botones.
   ═══════════════════════════════════════════════════════════════════════════ */
.mfo { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.mfo-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.mfo-tit {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft);
}
.mfo-n {
  padding: 1px 7px; background: var(--mo-neutro-bg);
  font-size: 11px; font-weight: 700; color: var(--text-soft);
}
.mfo-rejilla {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
}
.mfo-foto {
  position: relative; margin: 0; aspect-ratio: 4 / 3;
  border: 1px solid var(--border); background: var(--surface-sunk, var(--surface));
  overflow: hidden;
}
.mfo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfo-foto.portada { border-color: var(--red); }
.mfo-marca {
  position: absolute; left: 0; bottom: 0;
  padding: 3px 8px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.mfo-acciones {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 4px;
  opacity: 0; transition: opacity .16s;
}
.mfo-foto:hover .mfo-acciones,
.mfo-foto:focus-within .mfo-acciones { opacity: 1; }
.mfo-acciones button {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; background: rgba(0,0,0,.62); color: #fff;
  font-size: 12px; cursor: pointer;
}
.mfo-acciones button:hover { background: #000; }
.mfo-acciones .mfo-borrar:hover { background: var(--red); }

/* La zona de soltar es una casilla más de la rejilla, no un cajón aparte. */
.mfo-soltar {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; aspect-ratio: 4 / 3; cursor: pointer; text-align: center;
  border: 1px dashed var(--border-med); color: var(--text-soft);
  transition: border-color .16s, color .16s, background .16s;
}
.mfo-soltar:hover, .mfo-soltar.encima { border-color: var(--red); color: var(--text); background: rgba(127,127,127,.05); }
.mfo-soltar.subiendo { opacity: .55; pointer-events: none; }
.mfo-mas { font-size: 22px; line-height: 1; }
.mfo-txt { font-size: 12px; display: grid; gap: 2px; }
.mfo-txt small { font-size: 11px; opacity: .75; }

/* ═══════════════════════════════════════════════════════════════════════════
   GESTIÓN DE CATEGORÍAS

   Lista con sangría por nivel, no un árbol con líneas: con 107 categorías y
   cuatro niveles, las guías de conexión ensucian más de lo que aclaran. La
   sangría sola ya dice la jerarquía.
   ═══════════════════════════════════════════════════════════════════════════ */
.modal.modal-ancho { max-width: 720px; width: 100%; }

.gc-cab {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.gc-cab .mn-pista { margin: 0; flex: 1 1 240px; }

.gc-lista { max-height: 56vh; overflow-y: auto; display: grid; gap: 1px; }
.gc-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  padding-inline-start: calc(10px + var(--nivel, 0) * 20px);
  background: var(--bg);
  border-inline-start: 2px solid transparent;
}
.gc-fila:hover { background: var(--surface); border-inline-start-color: var(--border-med); }
.gc-nombre { font-size: 13.5px; }
.gc-n {
  padding: 1px 7px; background: var(--mo-neutro-bg); color: var(--text-soft);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Las acciones solo al pasar por encima: con 107 filas, tres botones en cada
   una convierten la lista en una pared de botones. */
.gc-acciones {
  margin-inline-start: auto; display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s;
}
.gc-fila:hover .gc-acciones,
.gc-fila:focus-within .gc-acciones { opacity: 1; }
.gc-acciones button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  font: inherit; font-size: 11.5px; padding: 3px 9px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.gc-acciones button:hover { color: var(--text); border-color: var(--border-med); }
.gc-acciones .gc-borrar:hover { color: var(--red); border-color: var(--red); }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA LATERAL

   Tres problemas medidos, no de percepción:

     · Los encabezados de grupo eran blanco puro a 13,5px — más brillantes y del
       mismo tamaño que los enlaces. La jerarquía estaba invertida: los títulos
       gritaban más que la navegación de debajo.
     · Los enlaces iban a `rgba(255,255,255,.62)`, que sobre este fondo se queda
       corto de contraste.
     · El elemento activo era un bloque de rojo saturado a sangre. Es el rasgo
       que más abarata: el rojo de marca funciona como MARCA, no como relleno.

   Se rehace con el lenguaje de la web de presentación: etiquetas en versalita
   monoespaciada, superficies sobrias y el rojo reducido a un filo.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar {
  --sb-texto:   rgba(255,255,255,.80);
  --sb-apagado: rgba(255,255,255,.50);   /* .42 daba 4,1 de contraste; el mínimo es 4,5 */
  --sb-vivo:    #fff;
  --sb-hover:   rgba(255,255,255,.055);
  --sb-activo:  rgba(255,255,255,.085);
  padding-inline: 10px;
}

/* ── Encabezados de grupo: etiquetas, no titulares ───────────────────────── */
.sidebar .nav-group-head {
  display: flex; align-items: center; gap: 9px;
  width: 100%; height: 30px;
  margin-top: 14px; padding-inline: 10px;
  border: 0; background: none; cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sb-apagado);
  transition: color var(--transition);
}
.sidebar .nav-group-head:hover { color: var(--sb-texto); }
.sidebar .nav-group-ico { width: 13px; height: 13px; opacity: .8; flex: 0 0 auto; }
.sidebar .nav-group:first-of-type .nav-group-head { margin-top: 6px; }

/* ── Enlaces ─────────────────────────────────────────────────────────────── */
.sidebar .nav-item {
  position: relative;
  height: 34px;
  padding-inline: 10px;
  border-radius: var(--radius-sm);
  color: var(--sb-texto);
  font-size: 13px; font-weight: 450;
  transition: background var(--transition), color var(--transition);
}
.sidebar .nav-group-items .nav-item {
  padding-inline-start: 32px;              /* alineados bajo el texto del grupo */
  /* NO se atenúan. Al principio los puse a la misma opacidad que las etiquetas
     de grupo (.42) y el contraste caía a 4,0 — justo el «contrasta mal» que
     había que arreglar. La jerarquía la da que la etiqueta sea diminuta, en
     versalita y monoespaciada; no hace falta apagar los enlaces. */
  color: var(--sb-texto);
}
.sidebar .nav-item:hover { background: var(--sb-hover); color: var(--sb-vivo); }
.sidebar .nav-group-items .nav-item:hover { color: var(--sb-vivo); }

/* El activo: superficie discreta y un filo rojo. La marca señala, no rellena. */
.sidebar .nav-item.active,
.sidebar .nav-group-items .nav-item.active {
  background: var(--sb-activo);
  color: var(--sb-vivo);
  font-weight: 550;
}
.sidebar .nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 2px; height: 18px;
  background: var(--red);
  transform: translateY(-50%);
}

/* ── Ritmo ───────────────────────────────────────────────────────────────── */
.sidebar .nav-group-items { display: grid; gap: 1px; margin-top: 2px; }
.sidebar .nav-fijos { display: grid; gap: 1px; }
.sidebar-logo { padding-block: 16px 14px; }

/* Pie separado por una regla, no flotando. */
.sidebar-user { border-top: 1px solid rgba(255,255,255,.08); padding-block: 11px; }

/* Un punto más de ancho: «Calendario de Flota» y «Microsoft 365» iban
   apretados contra el borde a 234px. */
:root { --sidebar-w: 264px; }
@media (max-width: 1180px) { :root { --sidebar-w: 248px; } }
@media (max-width: 900px)  { :root { --sidebar-w: 238px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   AVISO DE SIN CONEXIÓN

   Fijo abajo y a lo ancho. Arriba competiría con la barra de pestañas, y en una
   esquina se confunde con un aviso pasajero — esto no se va hasta que vuelva la
   red, así que tiene que ocupar sitio.
   ═══════════════════════════════════════════════════════════════════════════ */
.offline-barra {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9000;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  background: #4a1218; color: #ffe9ec;
  border-top: 2px solid var(--red);
  font-size: 13.5px;
  animation: offline-entra .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes offline-entra { from { transform: translateY(100%) } to { transform: none } }
.offline-punto {
  width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: 0 0 auto;
  animation: offline-late 1.6s ease-in-out infinite;
}
@keyframes offline-late { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.offline-txt { flex: 1 1 auto; }
.offline-txt b { color: #fff; font-weight: 600; }
.offline-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #ffe9ec;
  font: inherit; font-size: 12.5px; padding: 5px 12px; cursor: pointer;
  transition: background .15s;
}
.offline-btn:hover { background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) {
  .offline-barra { animation: none; }
  .offline-punto { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN · claro / oscuro

   Un interruptor de verdad, con la bola que se desliza: la gracia de estos
   controles es que se ven cambiar, y aquí hay sitio de sobra. Va abajo a la
   derecha del panel del formulario, lejos de los campos.
   ═══════════════════════════════════════════════════════════════════════════ */
.login-tema {
  position: absolute; right: 26px; bottom: 22px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: none; cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-soft);
  transition: color .18s;
}
.login-tema:hover { color: var(--text); }

.login-tema-pastilla {
  position: relative; width: 40px; height: 22px; flex: 0 0 auto;
  border: 1px solid var(--border-med); border-radius: 999px;
  background: var(--surface);
  transition: background .3s, border-color .3s;
}
.login-tema-bola {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-soft);
  transition: transform .32s cubic-bezier(.2,1.3,.4,1), background .3s;
}
/* En oscuro la bola se va a la derecha y se pone del rojo de marca: el
   recorrido es la mitad de la gracia. */
.login-tema.es-oscuro .login-tema-bola { transform: translateX(18px); background: var(--red); }
.login-tema:hover .login-tema-pastilla { border-color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .login-tema-bola { transition: none; }
}
@media (max-width: 720px) { .login-tema { right: 20px; bottom: 16px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FONDO MÁS CLARO Y SELECCIÓN SÓLIDA EN LA BARRA

   Dos cosas pedidas juntas, y van juntas de verdad:

   1. El fondo estaba en #0f0f13 — casi negro. Sube a #16161c, y las superficies
      con él. Sigue siendo oscuro, pero deja de parecer un agujero: las tarjetas
      se separan del fondo por tono en vez de por borde.

   2. La selección de la barra. La anterior era un matiz sutil con un filo rojo
      y no se veía; la de antes era rojo saturado a sangre y quedaba barata. La
      referencia que pasó Xavi hace lo correcto: un BLOQUE SÓLIDO, macizo, en
      color NEUTRO —no el de acento— y con el texto invertido. Como aquí la
      barra es oscura, el bloque va claro y el texto oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠ AQUÍ METÍ LA PATA: puse estos valores oscuros en `:root`, que es la
   definición del tema CLARO. Resultado: el modo claro se volvió oscuro y con
   los bordes en blanco translúcido, ilegible. Los valores oscuros van SOLO en
   sus dos bloques (media query y `[data-tema="oscuro"]`), nunca en `:root`. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg:         #16161c;
    --surface:    #1e1e25;
    --surface-2:  #26262f;
    --sidebar-bg: #101015;
  }
}
:root[data-tema="oscuro"] {
  --bg:         #16161c;
  --surface:    #1e1e25;
  --surface-2:  #26262f;
  --sidebar-bg: #101015;
}

/* Y lo que se pedía del claro era otra cosa: que el fondo dejara de ser tan
   gris y tirara a blanco. Era #dde5eb —un gris azulado bastante cargado—;
   ahora es casi blanco y las tarjetas se separan por borde, no por tono. */
:root[data-tema="claro"],
html[data-tema="claro"] {
  --bg:        #f7f8fa;
  --surface:   #ffffff;
  --surface-2: #f0f2f5;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --bg:        #f7f8fa;
    --surface:   #ffffff;
    --surface-2: #f0f2f5;
  }
}

/* ── La selección ─────────────────────────────────────────────────────────── */
.sidebar .nav-item {
  border-radius: 7px;                 /* la referencia va redondeada, no a canto vivo */
  margin-inline: 2px;
}

/* Fuera el filo rojo del intento anterior: la referencia no usa el color de
   acento para señalar, usa contraste. */
.sidebar .nav-item.active::before { display: none; }

.sidebar .nav-item.active,
.sidebar .nav-group-items .nav-item.active {
  background: #f2f2f5;
  color: #14141a;
  font-weight: 600;
}
.sidebar .nav-item.active:hover,
.sidebar .nav-group-items .nav-item.active:hover {
  background: #fff;
  color: #14141a;
}
/* Los iconos y contadores de dentro tienen que invertirse también, o se quedan
   claros sobre claro. */
.sidebar .nav-item.active svg { color: #14141a; opacity: .9; }
.sidebar .nav-item.active .nav-badge {
  background: var(--red); color: #fff;
}

/* La marca de agua del fondo de la barra se diseñó para la palmera, sobre un
   fondo casi negro. Con el fondo aclarado, un logo al 7,5% deja de leerse como
   textura y se lee como una mancha — se veía un borrón rojizo justo encima del
   usuario. Fuera: la barra se sostiene sin adornos. */
.sidebar-palm-watermark { display: none; }

/* ── Diálogo de importación ──────────────────────────────────────────────── */
.imp-soltar {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 20px; cursor: pointer; text-align: left;
  border: 1px dashed var(--border-med); color: var(--text-soft);
  transition: border-color .16s, color .16s, background .16s;
}
.imp-soltar:hover, .imp-soltar.encima {
  border-color: var(--red); color: var(--text); background: rgba(127,127,127,.05);
}
.imp-ico { flex: 0 0 auto; opacity: .8; }
.imp-txt { display: grid; gap: 3px; }
.imp-txt b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.imp-txt small { font-size: 12px; }

.imp-resumen {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 11px 13px;
  background: var(--surface-2); border-inline-start: 3px solid var(--red);
  font-size: 13px;
}
.imp-arch { font-weight: 600; }
.imp-peso, .imp-cargando { color: var(--text-soft); font-size: 12px; }
.imp-cargando { margin-inline-start: auto; }

/* La plantilla, al final y separada: es la salida de quien no sabe qué
   columnas hacen falta, no una opción del mismo rango que importar. */
.imp-pie {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.imp-pie-txt { flex: 1 1 auto; margin: 0; font-size: 13px; color: var(--text-soft); }

/* ── Proyectos: filtros plegables ────────────────────────────────────────── */
.proy-barra-filtros { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#proy-btn-filtros { display: inline-flex; align-items: center; gap: 7px; }
#proy-btn-filtros.activo { color: var(--text); border-color: var(--border-med); }
#proy-btn-filtros.con-filtros { border-color: var(--red); color: var(--text); }
.proy-filtros-n {
  display: none; min-width: 17px; padding: 0 5px;
  background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  border-radius: 999px;
}
.proy-filtros-n.hay { display: inline-block; }

/* ── Editar sobre la ficha de material ───────────────────────────────────── */
.mat-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit; font-size: 13.5px;
}
.mat-input:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}
.mat-input-nombre { font-size: 19px; font-weight: 600; padding: 6px 10px; }
/* Mientras se edita, la ficha se marca: sin señal, no se distingue de la
   versión de lectura y se pierde el hilo de si hay cambios sin guardar. */
.mat-editando { box-shadow: inset 3px 0 0 var(--red); }
.mat-editando .mat-dato { background: var(--surface-2); }

/* ── Editar sobre la ficha de dispositivo ────────────────────────────────── */
.pf-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 13.5px;
}
.pf-input:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}
.pf-editando { box-shadow: inset 3px 0 0 var(--red); }
.pf-editando .pf-dato[data-campo] { background: var(--surface-2); }
.pf-input-titulo { font-size: 21px; font-weight: 700; padding: 6px 10px; }

/* La línea vertical que marcaba el grupo con la sección activa. Tenía sentido
   cuando el elemento activo era un matiz sutil y hacía falta una segunda pista;
   con el bloque sólido sobra, y además el rasgo —una guía de árbol— es de otra
   época. El bloque ya dice dónde estás. */
.sidebar .nav-group.tiene-activo { box-shadow: none; }