/* ============================================================
   ALK ERP — DESIGN SYSTEM v5.0
   Estética Industrial Cobalt — Unificada con ALK Tools/Mosquiteras 2026
   Recupera TODO el carisma visual original + coherencia de sistema
   ============================================================ */

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

/* ================================================================
   TOKENS — única fuente de verdad
   ================================================================ */
:root {
  --cobalt:         #2563eb;
  --cobalt-hover:   #1d4ed8;
  --cobalt-dim:     rgba(37,99,235,0.12);
  --cobalt-ring:    rgba(37,99,235,0.18);
  --canvas:         #dde3ec;
  --card-bg:        #e8edf5;
  --steel-bg:       #cbd5e1;
  --input-bg:       #f1f5f9;
  --steel-text:     #1e293b;
  --muted:          #64748b;
  --muted-light:    #94a3b8;
  --border:         #94a3b8;
  --border-light:   #b8c4d0;
  --sidebar-bg:     #0f172a;
  --sidebar-deep:   #020617;
  --sidebar-nav:    #1e293b;
  --sidebar-width:  220px;
  --danger:         #ef4444;
  --danger-bg:      #fee2e2;
  --danger-border:  #fca5a5;
  --warning:        #f59e0b;
  --warning-bg:     #fef3c7;
  --warning-border: #fcd34d;
  --success:        #10b981;
  --success-bg:     #d1fae5;
  --success-border: #6ee7b7;
  --info-bg:        #dbeafe;
  --info-border:    #93c5fd;
  --info-text:      #1e40af;
  --purple-bg:      #ede9fe;
  --purple-text:    #5b21b6;
  --shadow-card:    inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.07);
  --shadow-hover:   0 4px 20px rgba(37,99,235,0.10);
  --shadow-active:  0 0 0 3px rgba(37,99,235,0.14);
  --shadow-deep:    0 25px 50px rgba(0,0,0,0.3);
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl:14px;
  /* compat */
  --bg-body:      var(--canvas);
  --bg-card:      var(--card-bg);
  --text-main:    var(--steel-text);
  --text-muted:   var(--muted);
  --border-color: var(--border);
  --table-header: var(--steel-bg);
  --primary-bg:   var(--sidebar-bg);
  --accent:       var(--cobalt);
}

body.dark-mode {
  --canvas:        #0f172a;
  --card-bg:       #1e293b;
  --steel-bg:      #162032;
  --input-bg:      #1a2744;
  --steel-text:    #f1f5f9;
  --muted:         #94a3b8;
  --muted-light:   #64748b;
  --border:        #334155;
  --border-light:  #2d3f55;
  --bg-body:       #0f172a;
  --bg-card:       #1e293b;
  --text-main:     #f1f5f9;
  --text-muted:    #94a3b8;
  --border-color:  #334155;
  --table-header:  #1e293b;
  --shadow-card:   inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.3);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--canvas);
  color: var(--steel-text);
  display: flex;
  min-height: 100vh;
  letter-spacing: -0.01em;
  line-height: 1.5;
  transition: background 0.25s ease, color 0.25s ease;
}

a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.sidebar-header {
  flex-shrink: 0;
  padding: 16px 14px 12px;
  border-bottom: 1px solid #1a2540;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-header a { display: flex; align-items: center; gap: 8px; text-decoration: none; }

.logo-alk { max-width: 96px; height: auto; display: block; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; }
.sidebar-title { color: #f1f5f9; font-weight: 800; font-size: 13px; letter-spacing: -0.03em; }

.sidebar-nav {
  flex-grow: 1; padding: 8px 0;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: #334155 transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.nav-divider {
  padding: 14px 16px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; color: #334155;
}

.nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px; color: #64748b; text-decoration: none;
  font-size: 12px; font-weight: 500; transition: all 0.15s;
  border-left: 2px solid transparent; white-space: nowrap;
}
.nav-link:hover { color: #cbd5e1; background: rgba(255,255,255,0.04); border-left-color: #334155; text-decoration: none; }
.nav-link.active { color: white; background: var(--cobalt-dim); border-left-color: var(--cobalt); }
.nav-link span:first-child { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }

.sidebar-footer { flex-shrink: 0; padding: 10px 12px; border-top: 1px solid #1a2540; }
.btn-dark-mode {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; background: rgba(255,255,255,0.04);
  border: 1px solid #1e293b; border-radius: var(--r-sm);
  color: #94a3b8; font-size: 11px; font-weight: 500;
  cursor: pointer; margin-bottom: 5px; font-family: 'Inter', sans-serif; transition: all 0.15s;
}
.btn-dark-mode:hover { background: rgba(255,255,255,0.07); color: #e2e8f0; }
.logout { color: #ef4444 !important; border-left-color: transparent !important; }
.logout:hover { background: rgba(239,68,68,0.08) !important; }

/* ================================================================
   CONTENT
   ================================================================ */
.content {
  flex: 1; margin-left: var(--sidebar-width);
  padding: 28px 32px; width: calc(100% - var(--sidebar-width));
  min-height: 100vh; transition: all 0.25s ease;
}

/* ================================================================
   PAGE HEADERS
   ================================================================ */
/* Header simple con línea */
.dash-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.dash-title { font-size: 20px; font-weight: 900; letter-spacing: -0.04em; }
.dash-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px;
}
.dash-sub .dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--success); border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}

/* Header oscuro con acento cobalt (para módulos tipo seguros, citas, etc.) */
.page-header-dark {
  background: linear-gradient(135deg, var(--sidebar-nav) 0%, var(--sidebar-bg) 100%);
  color: white;
  padding: 22px 26px;
  border-radius: var(--r-xl);
  margin-bottom: 22px;
  border-left: 4px solid var(--cobalt);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.page-header-dark .page-title { color: white; font-size: 20px; font-weight: 900; letter-spacing: -0.04em; margin: 0; }
.page-header-dark .page-subtitle { color: #94a3b8; font-size: 11px; margin-top: 3px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; }

/* Header genérico flex */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
}
.page-title { font-size: 20px; font-weight: 900; letter-spacing: -0.04em; color: var(--steel-text); margin: 0; }
.page-subtitle { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; }

/* ================================================================
   CARDS
   ================================================================ */
.card {
  background: var(--card-bg); border: 1px solid var(--border-light);
  border-radius: var(--r-md); padding: 20px 22px; margin-bottom: 18px;
  box-shadow: var(--shadow-card); color: var(--steel-text);
  transition: background 0.25s, border-color 0.25s;
}
.card h1,.card h2,.card h3,.card h4 { color: var(--steel-text); }

/* Panel con cabecera oscura (como panel de citas, panel de usuario) */
.panel-dark {
  background: var(--card-bg);
  border: 1.5px solid var(--border-light);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: sticky;
  top: 20px;
  box-shadow: var(--shadow-card);
}
.panel-dark-head {
  background: linear-gradient(135deg, var(--sidebar-nav) 0%, var(--sidebar-bg) 100%);
  color: white;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 10px;
}
body.dark-mode .panel-dark-head { background: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--sidebar-deep) 100%); }
.panel-dark-head h3 { margin: 0; font-size: 14px; font-weight: 700; flex: 1; }
.panel-dark-body { padding: 20px; }

/* ================================================================
   STAT CHIPS Y STAT CARDS
   ================================================================ */
.stat-chip {
  background: var(--card-bg); border: 1px solid var(--border-light);
  border-radius: var(--r-md); padding: 8px 14px;
  text-align: center; min-width: 64px; box-shadow: var(--shadow-card);
}
.stat-chip-val {
  font-size: 20px; font-weight: 800; color: var(--cobalt);
  font-family: 'JetBrains Mono', monospace; letter-spacing: -0.04em; display: block;
}
.stat-chip-lbl {
  font-size: 9px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-family: 'JetBrains Mono', monospace; display: block; margin-top: 2px;
}

/* Stat cards con borde lateral de color (seguros, kpis) */
.stat-card {
  background: var(--card-bg); border: 1px solid var(--border-light);
  border-radius: var(--r-xl); padding: 18px 20px;
  box-shadow: var(--shadow-card); transition: box-shadow 0.2s;
}
.stat-card:hover { box-shadow: var(--shadow-hover); }
.stat-card.vigente  { border-left: 4px solid var(--success); }
.stat-card.alerta   { border-left: 4px solid var(--warning); }
.stat-card.vencido  { border-left: 4px solid var(--danger); }
.stat-card.cobalt   { border-left: 4px solid var(--cobalt); }
.stat-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.stat-value {
  font-size: 30px; font-weight: 900; letter-spacing: -0.04em; color: var(--steel-text);
  font-family: 'JetBrains Mono', monospace;
}
.stat-value.cobalt { color: var(--cobalt); }

/* KPI boxes (detalle_trabajo) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-box {
  background: var(--card-bg); border: 1px solid var(--border-light);
  border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-card);
}
.kpi-box.verde   { border-left: 3px solid var(--success); }
.kpi-box.rojo    { border-left: 3px solid var(--danger); }
.kpi-box.azul    { border-left: 3px solid var(--cobalt); }
.kpi-box.naranja { border-left: 3px solid var(--warning); }
.kpi-label { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }
.kpi-val   { font-size: 20px; font-weight: 900; letter-spacing: -0.04em; color: var(--steel-text); }
.kpi-sub   { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* Informe stats */
.informe-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
.informe-stat { background: var(--canvas); border: 1px solid var(--border-light); border-radius: var(--r-md); padding: 14px; text-align: center; }
.informe-stat-val { font-size: 22px; font-weight: 800; color: var(--cobalt); font-family: 'JetBrains Mono', monospace; }
.informe-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; margin-top: 3px; }

/* ================================================================
   TABLAS
   ================================================================ */
.table-container {
  width: 100%; overflow-x: auto;
  background: var(--card-bg); border-radius: var(--r-lg);
  border: 1px solid var(--border-light); max-height: 700px;
  overflow-y: auto; box-shadow: var(--shadow-card);
}
table { width: 100%; border-collapse: collapse; color: var(--steel-text); font-size: 0.875rem; }
th {
  background: var(--steel-bg); padding: 10px 14px; text-align: left;
  font-size: 9px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 5;
  font-family: 'JetBrains Mono', monospace;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(37,99,235,0.04); }

/* Mini-tabla (detalle_trabajo) */
.mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini-table th { padding: 8px 10px; background: var(--steel-bg); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-family: 'JetBrains Mono', monospace; border-bottom: 1px solid var(--border); text-align: left; }
.mini-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.mini-table tr:last-child td { border-bottom: none; }
.mini-table tr:hover td { background: rgba(37,99,235,0.04); }

/* ================================================================
   BOTONES
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-sm); border: none;
  font-size: 11px; font-weight: 700; cursor: pointer;
  text-decoration: none; font-family: 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: all 0.15s; white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-blue, .btn-primary, .btn-cobalt {
  background: var(--cobalt); color: white;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-blue:hover, .btn-primary:hover, .btn-cobalt:hover {
  background: var(--cobalt-hover); transform: translateY(-1px);
}
.btn-gray, .btn-secondary {
  background: var(--steel-bg); color: var(--steel-text); border: 1px solid var(--border);
}
.btn-gray:hover, .btn-secondary:hover { border-color: var(--cobalt); color: var(--cobalt); }
.btn-danger, .btn-red { background: var(--danger-bg); color: #991b1b; border: 1px solid var(--danger-border); }
.btn-danger:hover, .btn-red:hover { background: var(--danger); color: white; border-color: var(--danger); }
.btn-success, .btn-green { background: var(--success-bg); color: #065f46; border: 1px solid var(--success-border); }
.btn-success:hover, .btn-green:hover { background: var(--success); color: white; }
.btn-sm { padding: 4px 10px; font-size: 10px; }

/* ================================================================
   INPUTS / FORMULARIOS
   ================================================================ */
input, select, textarea {
  padding: 8px 11px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--input-bg);
  color: var(--steel-text); font-size: 12px;
  font-family: 'Inter', sans-serif; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cobalt);
  background: white; box-shadow: 0 0 0 3px var(--cobalt-ring);
}
body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { background: var(--input-bg); }

label {
  display: block; font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.fg { margin-bottom: 12px; }
.fg label { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }
.fg-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fg-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* Separador tipo "sección" con línea (usuarios, citas) */
.sec-lbl {
  font-size: 9px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin: 18px 0 10px; display: flex; align-items: center; gap: 8px;
}
.sec-lbl::before, .sec-lbl::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

/* Divider label (usuarios) */
.divider-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 16px 0 10px; display: flex; align-items: center; gap: 8px;
}
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

/* Sección con gradiente (Telegram, info destacada) */
.tg-section {
  background: linear-gradient(135deg, #eff6ff 0%, var(--info-bg) 100%);
  border: 1.5px solid var(--info-border);
  border-radius: var(--r-lg); padding: 14px; margin-bottom: 14px;
}
body.dark-mode .tg-section { background: var(--cobalt-dim); border-color: var(--info-text); }
.tg-section-title { font-size: 11px; font-weight: 700; color: var(--info-text); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }

/* Nota box con gradiente amarillo */
.nota-box {
  background: linear-gradient(135deg, #fffbeb 0%, var(--warning-bg) 100%);
  border: 1.5px solid var(--warning-border);
  border-radius: var(--r-md); padding: 14px; margin-bottom: 14px;
}
.nota-box .nota-title { font-size: 11px; font-weight: 700; color: #92400e; margin-bottom: 8px; }

/* Admin box (partes) */
.admin-box { background: linear-gradient(135deg, #eff6ff 0%, var(--info-bg) 100%); border: 1px solid var(--info-border); padding: 15px; border-radius: var(--r-lg); margin-bottom: 20px; }
.admin-extras { background: linear-gradient(135deg, #fffbeb 0%, var(--warning-bg) 100%); border: 1px dashed var(--warning-border); padding: 15px; border-radius: var(--r-lg); margin-top: 15px; }

/* Form section collapsible (detalle_trabajo) */
.form-section { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--r-md); overflow: hidden; margin-bottom: 16px; }
.form-section-header {
  background: var(--steel-bg); border-bottom: 1px solid var(--border);
  padding: 10px 16px; display: flex; align-items: center;
  justify-content: space-between; cursor: pointer;
}
.form-section-header h4 { margin: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.form-section-body { padding: 16px; }

/* Inputs con borde más visible (seguros form) */
.form-input, .form-select, .form-textarea {
  padding: 10px 13px; border: 2px solid var(--border-light);
  border-radius: var(--r-md); font-size: 13px; font-family: inherit;
  transition: all 0.2s; background: var(--input-bg); color: var(--steel-text); width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-ring);
}
.form-textarea { resize: vertical; min-height: 80px; }

/* Grid de formulario 2 cols */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

/* Ro badge (citas read-only indicator) */
.ro-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cobalt-dim); border: 1px solid var(--cobalt);
  color: var(--cobalt); padding: 4px 10px; border-radius: var(--r-md);
  font-size: 11px; font-weight: 700; margin-bottom: 16px;
}

/* ================================================================
   BADGES / STATUS
   ================================================================ */
.badge, .status-badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.03em; text-transform: uppercase;
}
/* Estados trabajo */
.status-en-proceso, .badge-info     { background: var(--info-bg);    color: var(--info-text);  border: 1px solid var(--info-border); }
.status-finalizado, .badge-ok       { background: var(--success-bg); color: #065f46;           border: 1px solid var(--success-border); }
.status-pendiente,  .badge-warn     { background: var(--warning-bg); color: #92400e;           border: 1px solid var(--warning-border); }
.status-presupuesto-rechazado       { background: #fef2f2;           color: #991b1b;           border: 1px solid #fecaca; }
.badge-danger                        { background: var(--danger-bg);  color: #991b1b;           border: 1px solid var(--danger-border); }
.badge-extra                         { background: var(--success-bg); color: #065f46;           border: 1px solid var(--success-border); font-weight: 700; }
.badge-alert                         { background: var(--danger-bg);  color: #991b1b; font-weight: 700; padding: 2px 6px; border-radius: var(--r-xs); font-size: .75rem; border: 1px solid var(--danger-border); }
.available                           { background: var(--success-bg); color: #065f46; border: 1px solid var(--success); }
.coming-soon                         { background: #f1f5f9;           color: #475569; border: 1px solid var(--muted-light); }
.beta                                { background: var(--warning-bg); color: #92400e; border: 1px solid var(--warning); }
/* Seguros */
.badge-vigente  { background: var(--success-bg); color: #065f46; }
.badge-vencido  { background: var(--danger-bg);  color: #991b1b; }
.badge-cancelado{ background: #f1f5f9;            color: #475569; }
.badge-tipo     { background: var(--info-bg);    color: var(--info-text); padding: 3px 8px; font-size: 9px; }
/* Fases detalle_trabajo */
.badge-fase     { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: var(--r-xs); }
.badge-recibido { background: var(--success-bg); color: #065f46; border: 1px solid var(--success-border); }
.badge-incidencia{ background: var(--danger-bg); color: #991b1b; border: 1px solid var(--danger-border); }
.badge-parcial  { background: var(--info-bg);    color: var(--info-text); border: 1px solid var(--info-border); }
.badge-aceptado { background: var(--success-bg); color: #065f46; border: 1px solid var(--success-border); }
.badge-rechazado{ background: var(--danger-bg);  color: #991b1b; }
.badge-borrador { background: #f1f5f9;            color: #475569; }
.badge-enviado  { background: var(--info-bg);    color: var(--info-text); }
/* Usuarios pills */
.usr-pill        { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.pill-admin      { background: var(--danger-bg);  color: #991b1b; }
.pill-direccion  { background: var(--warning-bg); color: #92400e; }
.pill-oficina    { background: var(--info-bg);    color: var(--info-text); }
.pill-trabajador { background: #f1f5f9;            color: #475569; }
.pill-tg-ok      { background: var(--success-bg); color: #065f46; }
.pill-tg-off     { background: #f1f5f9;            color: #94a3b8; }
.pill-euro       { background: var(--purple-bg);   color: var(--purple-text); }
/* Operarios tipo */
.op-tipo { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px; display: inline-block; margin-top: 2px; }
.op-fab  { background: var(--info-bg); color: var(--info-text); }
.op-col  { background: var(--success-bg); color: #065f46; }
.op-otro { background: var(--warning-bg); color: #92400e; }

/* ================================================================
   FILTROS / BARRAS
   ================================================================ */
.filtros-bar {
  background: var(--card-bg); border: 1px solid var(--border-light);
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}
.filtros-bar input, .filtros-bar select { width: auto; padding: 7px 10px; font-size: 12px; }
.filters-bar {
  background: var(--card-bg); border: 1px solid var(--border-light);
  border-radius: var(--r-xl); padding: 14px 18px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.filter-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }

/* Filtros pill (vehiculos eventos) */
.ev-filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ev-filtro {
  padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 700;
  border: 1.5px solid var(--border-light); background: var(--canvas);
  color: var(--muted); cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.ev-filtro.activo, .ev-filtro:hover { border-color: var(--cobalt); color: var(--cobalt); background: var(--cobalt-dim); }

/* ================================================================
   MENSAJES / ALERTAS
   ================================================================ */
.msg-bar { padding: 10px 16px; border-radius: var(--r-md); margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.msg-ok    { background: var(--success-bg); color: #065f46; border: 1px solid var(--success-border); border-left: 3px solid var(--success); }
.msg-error { background: var(--danger-bg);  color: #991b1b; border: 1px solid var(--danger-border); border-left: 3px solid var(--danger); }

.aviso { padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid #ccc; font-size: 0.875rem; }
.urgencia-alta  { background: var(--danger-bg);  border-color: var(--danger);  color: #991b1b; }
.urgencia-media { background: var(--warning-bg); border-color: var(--warning); color: #92400e; }

.alert-vencimiento { background: var(--warning-bg); border-left: 4px solid var(--warning); padding: 8px 12px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; color: #92400e; }
.alert-vencido     { background: var(--danger-bg);  border-left: 4px solid var(--danger);  padding: 8px 12px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; color: #991b1b; }

.step-info { display: flex; gap: 12px; margin-bottom: 18px; background: var(--cobalt-dim); padding: 12px 14px; border-radius: var(--r-sm); border-left: 3px solid var(--cobalt); color: var(--info-text); font-size: 0.875rem; }

/* ================================================================
   TABS
   ================================================================ */
.tabs-container {
  background: var(--card-bg); border-radius: var(--r-md);
  border: 1px solid var(--border-light); overflow: hidden;
  margin-top: 18px; box-shadow: var(--shadow-card);
}
.tabs-header { display: flex; background: var(--steel-bg); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab-btn {
  padding: 11px 16px; cursor: pointer; border: none; background: none;
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); border-bottom: 2px solid transparent; transition: all 0.15s;
  font-family: 'Inter', sans-serif; white-space: nowrap;
}
.tab-btn.active { color: var(--cobalt); border-bottom-color: var(--cobalt); background: var(--card-bg); }
.tab-btn:hover  { color: var(--steel-text); }
.tab-content        { display: none; padding: 20px 22px; }
.tab-content.active { display: block; }

/* Tabs nav (detalle_trabajo .tab-nav-btn) */
.tabs-nav { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tab-nav-btn {
  padding: 10px 14px; border: none; background: none;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all 0.15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; font-family: 'Inter', sans-serif;
}
.tab-nav-btn:hover  { color: var(--cobalt); }
.tab-nav-btn.activa { color: var(--cobalt); border-bottom-color: var(--cobalt); }
.tab-panel          { display: none; }
.tab-panel.activa   { display: block; }

/* Panel tabs (vehiculos) */
.panel-tabs  { display: flex; border-bottom: 1px solid var(--border-light); background: var(--canvas); overflow-x: auto; }
.panel-tab   { padding: 10px 18px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; border: none; background: none; color: var(--muted); transition: all 0.15s; border-bottom: 2px solid transparent; white-space: nowrap; }
.panel-tab.activo { color: var(--cobalt); border-bottom-color: var(--cobalt); background: var(--card-bg); }
.panel-tab:hover  { color: var(--cobalt); }
.panel-body-inner { padding: 20px; }

/* ================================================================
   NAV PILLS
   ================================================================ */
.nav-pills {
  background: var(--steel-bg); border: 1px solid var(--border);
  padding: 4px; border-radius: var(--r-md); display: inline-flex; gap: 2px;
}
.nav-pills button, .nav-pills a {
  padding: 7px 16px; font-weight: 700; font-size: 11px; color: var(--steel-text);
  border-radius: var(--r-sm); border: none; background: none; cursor: pointer;
  transition: all 0.2s; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;
}
.nav-pills button.active, .nav-pills a.active { background: var(--cobalt); color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.nav-pills button:hover:not(.active), .nav-pills a:hover:not(.active) { background: var(--cobalt-dim); }

/* ================================================================
   PRICE / TOTALES
   ================================================================ */
.price-display, .total-highlight, .resumen-total {
  background: var(--sidebar-bg); color: white; border-radius: var(--r-md);
  padding: 20px 18px; text-align: center; margin-bottom: 14px;
  border: 1px solid #1a2540; border-left: 4px solid var(--cobalt);
}
.num-big, .total-val {
  font-family: 'JetBrains Mono', monospace; font-size: 2.4rem;
  font-weight: 700; line-height: 1; letter-spacing: -0.05em;
  color: var(--cobalt); display: block; margin-top: 4px;
}

/* ================================================================
   POST-ITS + PLANNING DASHBOARD
   ================================================================ */
.planning-wrap {
  background: var(--card-bg); border: 1px solid var(--border-light);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); margin-bottom: 20px;
}
.planning-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--steel-bg); border-bottom: 1px solid var(--border);
}
.planning-header-bar h3 { margin: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
.week-chip { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

.dias-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.dia-columna { border-right: 1px solid var(--border-light); min-height: 460px; display: flex; flex-direction: column; }
.dia-columna:last-child { border-right: none; }
.dia-header { padding: 10px 10px 8px; background: var(--steel-bg); border-bottom: 2px solid var(--border); text-align: center; }
.dia-nombre { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.dia-num { font-size: 18px; font-weight: 900; letter-spacing: -0.04em; color: var(--steel-text); line-height: 1; margin-top: 2px; }
.dia-num.es-hoy { color: var(--cobalt); }
.sortable-list { flex-grow: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.post-it {
  padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; position: relative;
  font-size: 11px; color: #1e293b;
  transition: all 0.15s; border-left: 3px solid rgba(0,0,0,0.18);
  margin-bottom: 5px;
}
.post-it:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.13); }
.post-it.finalizada { opacity: 0.4; text-decoration: line-through; filter: grayscale(0.7); }

.badge-tipo-post {
  font-family: 'JetBrains Mono', monospace; font-size: 7.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; display: block; margin-bottom: 4px;
}
.post-it-row     { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.post-it-hora    { font-weight: 900; font-size: 13px; letter-spacing: -0.04em; }
.post-it-cliente { font-weight: 600; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tooltip en post-it */
.post-it::after {
  content: attr(data-info);
  position: absolute; bottom: calc(100% + 6px); left: 0;
  background: #0f172a; color: #e2e8f0;
  font-size: 10px; font-family: 'Inter', sans-serif; font-weight: 400;
  padding: 7px 10px; border-radius: var(--r-sm); width: 180px; line-height: 1.4;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3); z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity 0.15s; white-space: normal;
}
.post-it:hover::after { opacity: 1; }

/* Fleet badges (alertas vehículos en dashboard) */
.fleet-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fleet-badge {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--card-bg); border: 1px solid var(--border-light);
  border-radius: var(--r-md); font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); cursor: help;
}
.fleet-badge.urgente { border-left: 3px solid var(--danger); }
.fleet-badge.normal  { border-left: 3px solid var(--warning); }
.fleet-tipo { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.fleet-tipo.urgente { color: var(--danger); }
.fleet-tipo.normal  { color: var(--warning); }

/* Trash zone drag&drop */
.trash-zone {
  position: fixed; bottom: 24px; right: 24px;
  width: 56px; height: 56px; background: #0f172a;
  border: 2px solid var(--danger); color: var(--danger);
  border-radius: 50%; display: none; align-items: center; justify-content: center;
  font-size: 22px; z-index: 2000; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ================================================================
   MODALES
   ================================================================ */
#modalEditar, .modal {
  display: none; position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(15,23,42,0.7); z-index: 9999;
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
#modalEditar.active, .modal.active { display: flex; }

.modal-content {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); width: 95%; max-width: 600px;
  overflow: hidden; box-shadow: var(--shadow-deep); max-height: 90vh; overflow-y: auto;
}
.modal-top, .modal-header {
  padding: 14px 18px; background: var(--steel-bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-top h3, .modal-title { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel-text); }
.modal-body    { padding: 20px 22px; }
.modal-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.full-width    { grid-column: span 2; }
.modal-footer  { padding: 12px 18px; background: var(--steel-bg); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.btn-group     { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--border-light); }

.form-control-sm {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--canvas);
  color: var(--steel-text); font-size: 12px; font-family: 'Inter', sans-serif;
}
.form-control-sm:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 2px var(--cobalt-ring); }

/* ================================================================
   MÓDULO CITAS
   ================================================================ */
.citas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.citas-stats  { display: flex; gap: 8px; flex-wrap: wrap; }
.citas-lista  { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 280px); overflow-y: auto; padding-right: 2px; }

.cita-row {
  background: var(--card-bg); border: 1.5px solid var(--border-light);
  border-radius: var(--r-lg); padding: 14px 16px;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; position: relative;
}
.cita-row:hover  { border-color: var(--cobalt); box-shadow: 0 2px 12px rgba(37,99,235,0.08); }
.cita-row.activa { border-color: var(--cobalt); box-shadow: var(--shadow-active); }

.cita-row-top    { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cita-hora       { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; color: var(--cobalt); min-width: 44px; }
.cita-fecha-tag  { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); }
.cita-nombre     { font-weight: 700; font-size: 14px; color: var(--steel-text); flex: 1; }
.cita-row-meta   { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.cita-row-actions{ display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); }

.worker-cita-box   { background: var(--canvas); border: 1px solid var(--border-light); border-radius: var(--r-md); padding: 16px; margin-bottom: 16px; }
.worker-cita-campo { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.worker-cita-campo strong { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; min-width: 70px; flex-shrink: 0; }
.empty-panel       { text-align: center; padding: 50px 20px; color: var(--muted); }

/* ================================================================
   MÓDULO USUARIOS
   ================================================================ */
.usr-layout { display: grid; grid-template-columns: 1fr 370px; gap: 20px; align-items: start; }
.usr-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }

.usr-card {
  background: var(--card-bg); border: 1.5px solid var(--border-light);
  border-radius: var(--r-2xl); padding: 18px; position: relative;
  transition: box-shadow 0.2s, border-color 0.2s; cursor: pointer;
  box-shadow: var(--shadow-card);
}
.usr-card:hover  { box-shadow: 0 4px 20px rgba(37,99,235,0.1); border-color: var(--info-border); }
.usr-card.activo { border-color: var(--cobalt); box-shadow: var(--shadow-active); }

.usr-avatar      { width: 46px; height: 46px; border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: white; flex-shrink: 0; }
.usr-card-head   { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.usr-nombre      { font-weight: 800; font-size: 15px; color: var(--steel-text); }
.usr-username    { font-size: 11px; color: var(--muted); margin-top: 1px; }
.usr-meta        { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Acciones que aparecen al hover */
.usr-card-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.usr-card:hover .usr-card-actions { opacity: 1; }
.usr-action-btn {
  width: 28px; height: 28px; border-radius: var(--r-md);
  border: 1px solid var(--border-light); background: var(--card-bg);
  cursor: pointer; font-size: 13px; text-decoration: none;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.usr-action-btn:hover     { background: var(--input-bg); }
.usr-action-btn.del:hover { background: var(--danger-bg); border-color: var(--danger-border); }

/* Panel usuario */
.usr-panel { background: var(--card-bg); border: 1.5px solid var(--border-light); border-radius: var(--r-2xl); overflow: hidden; position: sticky; top: 20px; box-shadow: var(--shadow-card); }
.usr-panel-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--sidebar-nav) 0%, var(--sidebar-bg) 100%);
  color: white;
}
body.dark-mode .usr-panel-header { background: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--sidebar-deep) 100%); }
.usr-panel-header h3 { margin: 0; font-size: 14px; font-weight: 700; }
.usr-panel-body { padding: 20px; }

.usr-stat     { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--r-lg); padding: 10px 16px; text-align: center; min-width: 70px; box-shadow: var(--shadow-card); }
.usr-stat-val { font-size: 20px; font-weight: 800; color: var(--cobalt); font-family: 'JetBrains Mono', monospace; }
.usr-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; }

/* Toggle nuevo usuario */
.nuevo-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; cursor: pointer; user-select: none; font-weight: 700; font-size: 13px; color: var(--steel-text); transition: background 0.15s; }
.nuevo-toggle:hover { background: rgba(37,99,235,0.04); }
.nuevo-body { padding: 0 20px 20px; display: none; }
.field-group label { display: block; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 5px; }
.field-input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border-light); border-radius: var(--r-md); font-size: 13px; background: var(--card-bg); color: var(--steel-text); transition: border-color 0.2s; box-sizing: border-box; }
.field-input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-ring); }

/* ================================================================
   MÓDULO VEHÍCULOS
   ================================================================ */
.flota-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.flota-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.veh-lista { display: flex; flex-direction: column; gap: 8px; }
.veh-item {
  background: var(--card-bg); border: 1.5px solid var(--border-light);
  border-radius: var(--r-lg); padding: 12px 14px;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.veh-item:hover  { border-color: var(--cobalt); }
.veh-item.activo { border-color: var(--cobalt); box-shadow: var(--shadow-active); }
.veh-matricula   { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: var(--cobalt); }
.veh-modelo      { font-size: 12px; font-weight: 600; color: var(--steel-text); margin-top: 2px; }
.veh-alertas     { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }

.panel-veh { background: var(--card-bg); border: 1.5px solid var(--border-light); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }

.ficha-grid      { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px; margin-bottom: 16px; }
.ficha-campo     { background: var(--canvas); border: 1px solid var(--border-light); border-radius: var(--r-md); padding: 10px 12px; }
.ficha-campo-lbl { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; font-family: 'JetBrains Mono', monospace; }
.ficha-campo-val { font-size: 13px; font-weight: 600; color: var(--steel-text); }

/* Eventos vehículos */
.evento-row { border: 1.5px solid var(--border-light); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; transition: border-color 0.15s; }
.evento-row.pendiente { border-left: 4px solid var(--danger); }
.evento-row.resuelta  { border-left: 4px solid var(--success); opacity: 0.75; }
.evento-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; background: var(--canvas); user-select: none; }
.evento-head:hover { background: var(--card-bg); }
.evento-titulo  { font-weight: 700; font-size: 13px; flex: 1; color: var(--steel-text); }
.evento-meta    { font-size: 11px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.evento-body    { padding: 14px 16px; border-top: 1px solid var(--border-light); display: none; background: var(--card-bg); }
.evento-body.open { display: block; }
.evento-detalle { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.6; }
.resuelto-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--success-bg); color: #065f46; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.form-evento { background: var(--canvas); border: 1.5px solid var(--border-light); border-radius: var(--r-lg); padding: 18px; margin-bottom: 16px; }
.form-evento-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }

/* ================================================================
   MÓDULO TRABAJOS
   ================================================================ */
.grid-trabajos { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 20px; margin-top: 20px; }
.trabajo-card { border-top: 5px solid var(--cobalt); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.2s, box-shadow 0.2s; }
.trabajo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.info-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.85rem; color: var(--muted); }
.alert-delete { background: var(--danger-bg); color: #991b1b; padding: 15px; border-radius: var(--r-md); margin-bottom: 20px; border: 1px solid var(--danger-border); display: flex; justify-content: space-between; align-items: center; }

/* Detalle trabajo — header oscuro */
.dt-header { background: var(--sidebar-bg); color: white; padding: 18px 24px; border-radius: var(--r-md); margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border: 1px solid #1a2540; }
.dt-title  { font-size: 18px; font-weight: 900; letter-spacing: -0.04em; }
.dt-sub    { font-size: 10px; color: #64748b; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; }

/* Stepper fases */
.fases-stepper { display: flex; background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--r-md); overflow: hidden; margin-bottom: 20px; flex-wrap: wrap; }
.fase-step { flex: 1; min-width: 80px; padding: 8px 6px; text-align: center; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'JetBrains Mono', monospace; color: var(--muted); border-right: 1px solid var(--border); }
.fase-step:last-child  { border-right: none; }
.fase-step.activa      { background: var(--cobalt); color: white; }
.fase-step.completada  { background: var(--steel-bg); color: var(--cobalt); }
.fase-step .fase-ico   { font-size: 13px; display: block; margin-bottom: 2px; }

/* Timeline */
.timeline           { position: relative; padding-left: 28px; }
.timeline::before   { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.tl-item            { position: relative; margin-bottom: 16px; }
.tl-dot             { position: absolute; left: -22px; top: 4px; width: 24px; height: 24px; background: var(--card-bg); border: 2px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.tl-card            { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--r-sm); padding: 10px 14px; font-size: 12px; }
.tl-card .tl-titulo { font-weight: 700; color: var(--steel-text); margin-bottom: 2px; }
.tl-card .tl-meta   { font-size: 9px; font-family: 'JetBrains Mono', monospace; color: var(--muted); text-transform: uppercase; }

/* Operarios */
.operarios-box   { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 20px; }
.operarios-box h4{ font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-family: 'JetBrains Mono', monospace; margin: 0 0 12px 0; }
.operarios-grid  { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 8px; }
.operario-chip   { display: flex; align-items: center; gap: 8px; background: var(--steel-bg); border: 1px solid var(--border-light); border-radius: var(--r-sm); padding: 8px 10px; }
.operario-avatar { width: 28px; height: 28px; border-radius: 50%; color: white; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
.operario-nombre { font-size: 11px; font-weight: 700; color: var(--steel-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.operario-horas  { font-size: 9px; color: var(--cobalt); font-family: 'JetBrains Mono', monospace; font-weight: 800; }

/* Mo config */
.mo-config-box  { background: var(--steel-bg); border: 1px solid var(--border-light); border-radius: var(--r-md); padding: 16px; margin-bottom: 16px; }
.mo-config-box h4{ margin: 0 0 14px 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--steel-text); }
.mo-cols        { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mo-col-header  { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; padding: 5px 10px; border-radius: var(--r-sm); }
.mo-col-fab     { background: var(--info-bg); color: var(--info-text); }
.mo-col-col     { background: var(--success-bg); color: #065f46; }
.op-checkbox-list { display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; padding: 4px 0; }
.op-checkbox-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.1s; font-size: 12px; }
.op-checkbox-item:hover { background: var(--cobalt-dim); }
.op-checkbox-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--cobalt); cursor: pointer; }

.rent-chart-wrap { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--r-md); padding: 16px; height: 220px; }
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ocr-box { font-family: 'JetBrains Mono', monospace; font-size: 10px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 8px; min-height: 80px; white-space: pre-wrap; width: 100%; resize: vertical; color: var(--steel-text); }

/* ================================================================
   MÓDULO SEGUROS
   ================================================================ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; margin-bottom: 24px; }
.seguros-table { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.seguros-table table { width: 100%; border-collapse: collapse; }
.seguros-table th { background: var(--steel-bg); padding: 12px 16px; text-align: left; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); border-bottom: 2px solid var(--border); font-family: 'JetBrains Mono', monospace; }
.seguros-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.seguros-table tr:hover td { background: rgba(37,99,235,0.04); }
.icono-tipo { font-size: 16px; margin-right: 6px; }

/* ================================================================
   CALENDARIOS
   ================================================================ */
/* Dashboard planning */
/* (columnas ya definidas en .dias-grid) */

/* Horarios mensual */
.calendario-grid    { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; margin-top: 20px; }
.calendario-header  { text-align: center; font-weight: 700; padding: 10px; background: var(--steel-bg); border-radius: var(--r-md); text-transform: uppercase; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; color: var(--muted); border: 1px solid var(--border); }
.dia-card           { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--r-lg); min-height: 120px; padding: 8px; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.dia-numero         { font-weight: 900; font-size: 1.1rem; margin-bottom: 8px; color: var(--muted); letter-spacing: -0.04em; }
.dia-vacio          { background: transparent; border: none; box-shadow: none; }
.hoy                { border: 2px solid var(--cobalt) !important; background: rgba(37,99,235,0.04); }
.finde              { background: var(--steel-bg); }

.entrada-trabajador {
  font-size: 0.7rem; padding: 4px 6px; margin-bottom: 4px;
  border-radius: var(--r-xs); background: var(--info-bg); color: var(--info-text);
  border-left: 3px solid var(--cobalt); cursor: pointer; position: relative; font-weight: 600;
}
.entrada-trabajador:hover::after {
  content: attr(data-tooltip); position: absolute; z-index: 100;
  background: var(--sidebar-bg); color: #e2e8f0;
  padding: 8px 10px; border-radius: var(--r-sm);
  width: 160px; bottom: 125%; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  white-space: pre-wrap; font-family: 'Inter', sans-serif; font-weight: 400;
}
.es-extra { background: var(--success-bg); color: #065f46; border-left-color: var(--success); }

/* ================================================================
   POST-ITS + UPLOAD + MISC
   ================================================================ */
.upload-zone, .import-box {
  border: 2px dashed var(--border); padding: 24px; text-align: center;
  border-radius: var(--r-md); background: var(--canvas); transition: all 0.2s; margin-bottom: 14px;
}
.upload-zone:hover, .import-box:hover { border-color: var(--cobalt); background: var(--cobalt-dim); }

canvas { max-width: 100%; }
.chart-box { padding: 14px; background: var(--card-bg); border-radius: var(--r-md); border: 1px solid var(--border-light); }

.incidencias-lista { font-size: 10px; color: #92400e; max-height: 80px; overflow-y: auto; background: var(--warning-bg); padding: 7px; border-radius: var(--r-sm); border: 1px solid var(--warning-border); white-space: pre-wrap; }

.welcome-box { background: var(--card-bg); padding: 20px 22px; border-radius: var(--r-md); margin-bottom: 18px; border: 1px solid var(--border-light); box-shadow: var(--shadow-card); }
.welcome-title    { color: var(--steel-text); margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: -0.04em; }
.welcome-subtitle { color: var(--muted); margin: 5px 0 0 0; font-size: 0.875rem; }

.price-display, .total-highlight, .resumen-total {
  background: var(--sidebar-bg); color: white; border-radius: var(--r-md);
  padding: 20px 18px; text-align: center; margin-bottom: 14px;
  border: 1px solid #1a2540; border-left: 4px solid var(--cobalt);
}
.num-big, .total-val { font-family: 'JetBrains Mono', monospace; font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--cobalt); display: block; margin-top: 4px; }

/* Partes */
.grid-form   { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }

/* ================================================================
   LOGIN
   ================================================================ */
body.login-body { display: flex; justify-content: center; align-items: center; background: var(--canvas); padding: 20px; flex-direction: row; }
.login-card { background: var(--card-bg); padding: 34px 30px; border-radius: var(--r-lg); box-shadow: var(--shadow-card), 0 12px 30px rgba(0,0,0,0.08); width: 100%; max-width: 380px; border: 1px solid var(--border-light); }
.logo-container  { text-align: center; margin-bottom: 18px; }
.main-logo       { max-width: 180px; height: auto; display: block; margin: 0 auto; }
.header-login    { text-align: center; margin-bottom: 22px; }
.header-login h2 { font-weight: 900; font-size: 20px; letter-spacing: -0.04em; color: var(--steel-text); }
.header-login p  { color: var(--muted); font-size: 10px; margin-top: 5px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; }
.form-group-login{ margin-bottom: 14px; }
.error-msg { background: var(--danger-bg); color: #991b1b; padding: 10px 14px; border-radius: var(--r-sm); font-size: 11px; margin-bottom: 14px; text-align: center; border: 1px solid var(--danger-border); border-left: 3px solid var(--danger); }
.footer-info { text-align: center; margin-top: 18px; font-size: 9px; color: var(--muted); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; }

/* ================================================================
   GRIDS / LAYOUTS
   ================================================================ */
.grid-dashboard  { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 18px; }
.grid-gestion    { display: grid; grid-template-columns: 320px 1fr; gap: 18px; }
.grid-revision   { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; }
.grid-analisis   { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.grid-info       { display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
.grid-postits    { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 18px; margin-bottom: 22px; }
.citas-layout    { display: grid; grid-template-columns: 1fr 400px; gap: 18px; align-items: start; }

/* ================================================================
   MOBILE TOPBAR + SIDEBAR
   ================================================================ */
.sidebar-close-btn { display: none; background: none; border: none; color: #64748b; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); transition: color 0.15s; line-height: 1; }
.sidebar-close-btn:hover { color: #f1f5f9; }

.mobile-topbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 52px; background: var(--sidebar-bg); z-index: 1100; align-items: center; padding: 0 14px; gap: 10px; border-bottom: 1px solid #1a2540; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.mobile-logo-link { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: 1; }
.mobile-logo-img  { max-height: 24px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.mobile-brand     { color: #f1f5f9; font-weight: 800; font-size: 14px; letter-spacing: -0.03em; }
.mobile-dark-btn  { background: none; border: 1px solid #334155; border-radius: var(--r-sm); color: #94a3b8; font-size: 16px; cursor: pointer; padding: 4px 8px; transition: all 0.15s; }
.mobile-dark-btn:hover { background: rgba(255,255,255,0.07); }
.hamburger-btn    { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 6px; }
.hamburger-btn span { display: block; width: 20px; height: 2px; background: #94a3b8; border-radius: 2px; transition: all 0.2s; }
.sidebar-overlay  { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; backdrop-filter: blur(2px); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1200px) {
  .grid-revision { grid-template-columns: 1fr; }
  .grid-analisis { grid-template-columns: 1fr; }
  .grid-info     { grid-template-columns: 1fr; }
  .citas-layout  { grid-template-columns: 1fr; }
  .charts-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  :root { --sidebar-width: 56px; }
  .nav-text, .nav-divider, .sidebar-title { display: none; }
  .nav-link { justify-content: center; padding: 11px 8px; }
  .nav-link span:first-child { font-size: 16px; width: auto; }
  .sidebar-header a { justify-content: center; }
  .logo-alk, .sidebar-title { display: none; }
  .btn-dark-mode .nav-text { display: none; }
  .btn-dark-mode { justify-content: center; padding: 8px; }
  .content { padding: 18px 16px; }
}
@media (max-width: 900px) {
  .dias-grid  { grid-template-columns: repeat(3,1fr); }
  .flota-layout { grid-template-columns: 1fr; }
  .usr-layout   { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  body { flex-direction: column; }
  .mobile-topbar { display: flex; }
  .content { margin-left: 0; padding: 72px 14px 20px; width: 100%; }
  .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; width: 240px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .sidebar-close-btn { display: block; }
  :root { --sidebar-width: 0px; }
  .grid-gestion { grid-template-columns: 1fr; }
  .grid-form    { grid-template-columns: 1fr 1fr; }
  .form-grid    { grid-template-columns: 1fr; }
  .modal-grid   { grid-template-columns: 1fr; }
  .full-width, .col-span-2, .col-span-3 { grid-column: span 1; }
  table { font-size: 0.75rem; }
  table td, table th { padding: 7px 8px; }
  .btn { font-size: 10px; padding: 7px 11px; }
  .calendario-grid { grid-template-columns: repeat(3,1fr); }
  .fg-row3 { grid-template-columns: 1fr 1fr; }
  .mo-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dias-grid  { grid-template-columns: repeat(2,1fr); }
  .grid-form  { grid-template-columns: 1fr; }
  .col-span-2, .col-span-3 { grid-column: span 1; }
  .fg-row, .fg-row3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   MÓVIL / TÁCTIL — comportamiento típico de app nativa
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Tablas con desplazamiento horizontal en lugar de romper el layout */
  .content table,
  .card table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-collapse: collapse;
  }

  /* El contenedor con overflow:hidden recortaría el scroll horizontal */
  .seguros-table { overflow: visible; }
  .seguros-table table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Evitar el auto-zoom de iOS al enfocar un campo */
  input, select, textarea,
  .field-input, .form-control, .form-control-sm {
    font-size: 16px !important;
  }

  /* Los inputs no deben forzar ancho intrínseco (evita desbordes) */
  input, select, textarea { min-width: 0; max-width: 100%; }

  /* Formularios y cabeceras en flex se apilan en lugar de desbordar */
  .content form { flex-wrap: wrap; }
  .content header { flex-wrap: wrap; gap: 10px; }
  .content form > * { flex: 1 1 auto; }
  .content form > .btn,
  .content form > button { flex: 0 0 auto; }

  /* Áreas táctiles más cómodas */
  .btn, button, .nav-link, .usr-action-btn,
  .tab, .panel-tab, .cita-row-actions .btn {
    min-height: 40px;
  }
  .usr-action-btn { min-width: 40px; }

  /* Modales a pantalla completa útil */
  .modal-content, .modal-box, .modal-card {
    width: 96% !important;
    max-width: 96% !important;
    max-height: 92vh;
    overflow-y: auto;
  }

  /* Contenido a lo ancho sin desbordar */
  .content { max-width: 100%; overflow-x: hidden; }
  img { max-width: 100%; height: auto; }

  /* Grids definidos inline en el HTML (no tienen clase) — se colapsan */
  [style*="1fr 1fr 1fr 1fr"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  [style*="1fr 1fr 1fr 1fr"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="1fr 1fr"]:not([style*="1fr 1fr 1fr"]) { grid-template-columns: 1fr !important; }
}

/* Respeta el notch / barra del sistema en móviles con PWA */
body {
  -webkit-tap-highlight-color: transparent;
}
@supports (padding: env(safe-area-inset-bottom)) {
  .content { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .mobile-topbar { padding-top: env(safe-area-inset-top); }
}