/* ════════════════════════════════════════════════════════════════
   TOKENS DE DISEÑO — Paleta cálida y colorida (sin oscuros)
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Fondos — gris pizarra neutro, software de gestión real */
  --ink:        #eef1f4;      /* fondo principal — gris azulado muy claro */
  --ink-2:      #ffffff;      /* paneles / sidebar / header — blanco puro */
  --ink-2-solid:#ffffff;      /* versión 100% opaca de --ink-2, para cabeceras sticky */
  --ink-3:      #ffffff;      /* tarjetas */
  --ink-4:      #f3f5f7;      /* inputs / hover / zebra de tablas */
  --edge:       #d7dce2;      /* bordes — gris acero */
  --mist:       #75808d;      /* texto inactivo — gris medio */

  /* Acento principal: azul acero corporativo (sin gradientes) */
  --amber:      #2954a3;
  --amber-dim:  #1f3f7d;
  --amber-glow: rgba(41,84,163,.10);

  /* Acento del editor/documento de reporte (estilo "Index 15"): naranja.
     Global para que el editor, la vista previa y el PDF/impresión usen
     exactamente el mismo color y las mismas clases .kdoc-*. */
  --k5doc-ink:#1c1c1c;
  --k5doc-accent:#d9631e;
  --k5doc-accent-dark:#a84710;
  --k5doc-line:#c9c9c9;
  --k5doc-muted:#6b6b6b;
  --k5doc-field-bg:#fafafa;

  /* Estados */
  --ok:         #1a7d4c;
  --warn:       #b3590f;
  --alert:      #c0312b;
  --info:       #5a4ba8;

  /* Tipografía */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Superficies — radios suaves, look cálido y moderno, no de hoja de cálculo */
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  18px;

  /* Transiciones */
  --ease:       cubic-bezier(.25,.8,.25,1);
  --dur:        150ms;

  /* Texto */
  --text:       #1a212b;      /* casi negro azulado */
  --text-sub:   #475160;      /* gris pizarra medio */

  /* Rail (sidebar) — sólido, no gradiente */
  --rail-bg:    #182233;
  --rail-bg-2:  #131c2b;
  --rail-text:  #c3cddc;
  --rail-active:#e2822f;
}

/* ════════════════════════════════════════════════════════════════
   MODO NOCHE — override de tokens, guardado por usuario (ver JS: darkmode)
   ════════════════════════════════════════════════════════════════ */
body.dark-mode {
  --ink:        #1b2027;
  --ink-2:      #232a33;
  --ink-2-solid:#232a33;
  --ink-3:      #262d37;
  --ink-4:      #313944;
  --edge:       #414b58;
  --mist:       #93a0b1;

  --amber:      #6b9fe0;
  --amber-dim:  #5786c4;
  --amber-glow: rgba(107,159,224,.16);

  --ok:         #3ec084;
  --warn:       #e5a04c;
  --alert:      #ea6c66;
  --info:       #9a8ce6;

  --text:       #edf0f4;
  --text-sub:   #b1bac7;

  --rail-bg:    #171c24;
  --rail-bg-2:  #12161d;
  --rail-text:  #b9c3d3;
  --rail-active:#e2822f;
}

/* Los documentos/reportes (editor, vista previa e impresión, clases
   .kdoc-*) se mantienen siempre con apariencia de "papel" —blanco,
   texto oscuro— igual que en modo día, para que coincidan con el PDF
   real; por eso sus variables --k5doc-* NO se sobrescriben aquí. */

/* Inputs, selects y textareas normales de la app SÍ deben adaptarse,
   para que no queden con fondo blanco y letras claras invisibles. */
body.dark-mode input:not(.kdoc-fill):not(.kdoc-img-desc),
body.dark-mode textarea:not(.kdoc-img-desc),
body.dark-mode select {
  background: var(--ink-4);
  color: var(--text);
  border-color: var(--edge);
}
body.dark-mode input:not(.kdoc-fill):not(.kdoc-img-desc)::placeholder,
body.dark-mode textarea:not(.kdoc-img-desc)::placeholder { color: var(--mist); }
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

/* Menú de usuario y otras tarjetas con fondo blanco fijo: se mantienen
   claras a propósito (son popovers cortos), pero se fuerza el color
   de texto para que nunca queden ilegibles. */
body.dark-mode .header-user-menu { color:#1a212b; }
body.dark-mode .header-user-menu button { color:#1a212b; }
body.dark-mode .kdoc-sig-popover-item { color:#1a212b; }
body.dark-mode .header-logo-img { background:#fff; border-radius:8px; padding:4px 8px; }


/* ════════════════════════════════════════════════════════════════
   RESET
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select {
  font-family: var(--font-body);
  background: #ffffff;
  border: 1.5px solid var(--edge);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  font-size: .9rem;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, textarea:focus, select:focus { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); }

/* ── Alias de color heredados (era dark mode) ────────────────── */
/* Cualquier hardcode de texto claro lo redirigimos a azul oscuro */

/* ════════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
   ════════════════════════════════════════════════════════════════ */
#app {
  display: none;
  grid-template-columns: 192px 1fr;
  grid-template-rows: 100px 1fr;
  grid-template-areas:
    "rail header"
    "rail main";
  height: 100vh;
}

/* ─── RAIL (sidebar ancha con etiquetas y secciones) ──────────── */
#rail {
  grid-area: rail;
  background:
    radial-gradient(130% 55% at 12% 100%, rgba(226,130,47,.20), transparent 62%),
    radial-gradient(90% 46% at 92% 4%, rgba(226,130,47,.12), transparent 58%),
    var(--rail-bg);
  border-right: 1px solid var(--rail-bg-2);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 16px;
  z-index: 100;
  position: relative;
  overflow: visible;
  width: 192px;
}

/* Difuminado naranja que aparece en los bordes del menú al hacer scroll */
.rail-fade {
  position: absolute;
  left: 0; right: 0;
  height: 38px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.rail-fade-top {
  top: 0;
  background: linear-gradient(180deg, rgba(226,130,47,.38), rgba(226,130,47,.10) 55%, transparent);
}
.rail-fade-bottom {
  bottom: 16px;
  background: linear-gradient(0deg, rgba(226,130,47,.38), rgba(226,130,47,.10) 55%, transparent);
}
.rail-fade.show { opacity: 1; }

.rail-logo {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  background: var(--rail-bg-2);
}
.rail-logo svg { color: var(--rail-active); }

.rail-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 14px 12px;
  overflow-y: auto;
  overflow-x: visible;
  width: 100%;
}
.rail-nav::-webkit-scrollbar { display: none; }

.nav-section-label {
  font-size: .66rem;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #5c6577;
  padding: 14px 10px 6px;
}
.nav-section-label:first-child { padding-top: 4px; }

.nav-item {
  position: relative;
  width: 100%;
  height: 46px;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 12px;
  color: var(--rail-text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-item:hover {
  background: rgba(255,255,255,.06);
  color: #d4dae3;
  transform: scale(1.045);
}
.nav-item.active {
  background: rgba(226,130,47,.16);
  color: #fff;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  background: var(--rail-active);
  border-radius: 0 2px 2px 0;
}
.nav-item.active .nav-icon-wrap {
  background: var(--rail-active);
  color: #fff;
  box-shadow: 0 4px 10px rgba(226,130,47,.35);
}
.nav-item.active .nav-label { color: #fff; font-weight: 600; }

.nav-item .nav-icon-wrap {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  color: var(--rail-text);
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-item:hover .nav-icon-wrap { transform: scale(1.12); }

/* Etiqueta junto al ícono */
.nav-item .nav-label {
  font-size: .84rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
  flex: 1;
}

/* Tooltip en hover */
.nav-item .tip {
  position: absolute;
  left: 58px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--text);
  border: 1px solid var(--rail-bg-2);
  color: #fff;
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.nav-item:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Badge de notificación */
.nav-badge {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--alert);
  border: 2px solid var(--rail-bg);
}

.rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rail-bg-2);
  width: 100%;
}

/* ─── HEADER ──────────────────────────────────────────────────── */
#header {
  grid-area: header;
  background: var(--ink-2);
  border-bottom: 1px solid var(--edge);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 20px;
  z-index: 50;
  box-shadow: none;
}

.header-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .01em;
}
.header-title span { color: var(--amber); }

.hdr-sys-badge {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--mist);
  background: var(--ink-4);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 2px 6px;
  line-height: 1.4;
}

.header-breadcrumb {
  font-size: .78rem;
  color: var(--mist);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

.header-spacer { flex: 1; }

/* Buscador global */
.global-search {
  position: relative;
  display: flex;
  align-items: center;
}
.global-search input {
  width: 240px;
  padding-left: 36px;
  background: var(--ink-3);
  border: 1px solid var(--edge);
  font-size: .85rem;
}
.global-search svg {
  position: absolute;
  left: 10px;
  color: var(--mist);
  pointer-events: none;
  width: 15px; height: 15px;
}

/* Reloj */
.header-clock {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--mist);
  min-width: 80px;
  text-align: right;
}
.header-clock strong { color: var(--amber); display: block; font-size: .95rem; }

/* Notificaciones header */
.hdr-notif {
  position: relative;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--mist);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hdr-notif:hover { background: var(--ink-4); color: var(--text); }
.hdr-notif .badge {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--alert);
  border: 2px solid var(--ink-2);
}

/* ─── MAIN ────────────────────────────────────────────────────── */
#main {
  grid-area: main;
  min-height: 0; /* evita que la fila 1fr se estire con el contenido y rompa el scroll interno */
  overflow-y: auto;
  overflow-x: hidden;
}
#main::-webkit-scrollbar { width: 5px; }
#main::-webkit-scrollbar-track { background: var(--ink); }
#main::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 3px; }

/* ─── PÁGINAS ─────────────────────────────────────────────────── */
.page { display: none; padding: 32px; }
.page.active { display: block; }

/* ════════════════════════════════════════════════════════════════
   DASHBOARD
   ════════════════════════════════════════════════════════════════ */

/* Franja superior: KPIs principales */
.dash-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

/* KPI grande (trabajo de hoy) */
.kpi-main {
  background: var(--ink-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: none;
  border-left: 3px solid var(--amber);
}
.kpi-main::after { content: none; }
.kpi-main-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--mist);
  text-transform: uppercase;
}
.kpi-main-value {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.kpi-main-sub { font-size: .72rem; color: var(--mist); line-height: 1.3; }

/* KPI pequeño */
.kpi-card {
  background: var(--ink-3);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.kpi-card:hover { border-color: var(--text-sub); }
.kpi-card.warn  { border-left-color: var(--warn); }
.kpi-card.alert { border-left-color: var(--alert); }
.kpi-card.ok    { border-left-color: var(--ok); }

.kpi-icon {
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--edge);
  flex-shrink: 0;
}
.kpi-icon svg { width:14px; height:14px; }
.kpi-icon.amber { background: var(--ink-4); color: var(--amber); }
.kpi-icon.warn  { background: var(--ink-4); color: var(--warn); }
.kpi-icon.alert { background: var(--ink-4); color: var(--alert); }
.kpi-icon.ok    { background: var(--ink-4); color: var(--ok); }

.kpi-card-body { display:flex; flex-direction:column; line-height:1.1; }
.kpi-num {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}
.kpi-label { font-size: .68rem; color: var(--mist); }

/* Barras horizontales genéricas para gráficas de resumen */
.hbar-row { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.hbar-row:last-child { margin-bottom:0; }
.hbar-label { width:118px; font-size:.76rem; color:var(--text-sub); flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar-track { flex:1; height:10px; background:var(--ink-4); border-radius:6px; overflow:hidden; }
.hbar-fill { height:100%; border-radius:6px; transition:width .3s var(--ease); }
.hbar-value { width:28px; text-align:right; font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:var(--text); flex-shrink:0; }

/* Gráfica de pastel (donut) */
.pie-wrap { display:flex; align-items:center; gap:22px; padding:4px 0; }
.pie-donut {
  width:128px; height:128px; border-radius:50%; flex-shrink:0;
  background: conic-gradient(var(--ink-4) 0deg 360deg);
  border: 1px solid var(--edge);
  position:relative;
  transition: background .3s var(--ease);
}
.pie-donut-center {
  position:absolute; inset:20px;
  border-radius:50%;
  background: var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
}
.pie-donut-center strong { font-size:1.15rem; font-family:var(--font-mono); color:var(--text); line-height:1; }
.pie-donut-center span { font-size:.62rem; color:var(--text-sub); margin-top:3px; text-transform:uppercase; letter-spacing:.03em; }
.pie-legend { flex:1; min-width:0; }
.pie-legend-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:.78rem; }
.pie-legend-row:last-child { margin-bottom:0; }
.pie-legend-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.pie-legend-label { color:var(--text-sub); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pie-legend-value { font-family:var(--font-mono); font-weight:700; color:var(--text); }

/* Fila secundaria */
.dash-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  margin-bottom: 24px;
}

/* Panel genérico */
.panel {
  background: var(--ink-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--edge);
  background: var(--ink-4);
}
.panel-title {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-sub);
  display: flex; align-items: center; gap: 8px;
}
.panel-title svg { color: var(--amber); width: 15px; height: 15px; }
.panel-action {
  font-size: .75rem;
  color: var(--amber);
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.panel-body { padding: 18px 22px; }

/* Acentos de color por panel — para que el dashboard no se vea plano */
.panel { border-top: 3px solid transparent; }
.panel.accent-blue   { border-top-color: #2954a3; }
.panel.accent-blue   .panel-title svg { color: #2954a3; }
.panel.accent-teal   { border-top-color: #0d9488; }
.panel.accent-teal   .panel-title svg { color: #0d9488; }
.panel.accent-red    { border-top-color: #c0312b; }
.panel.accent-red    .panel-title svg { color: #c0312b; }
.panel.accent-purple { border-top-color: #7c3aed; }
.panel.accent-purple .panel-title svg { color: #7c3aed; }
.panel.accent-orange { border-top-color: #b3590f; }
.panel.accent-orange .panel-title svg { color: #b3590f; }
.panel.accent-green  { border-top-color: #1a7d4c; }
.panel.accent-green  .panel-title svg { color: #1a7d4c; }

/* Lista de trabajos */
.work-list { display: flex; flex-direction: column; gap: 10px; }
.work-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--ink-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
  cursor: pointer;
}
.work-item:hover { border-color: var(--edge); }

.work-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.work-dot.high    { background: var(--alert); }
.work-dot.medium  { background: var(--warn); }
.work-dot.low     { background: var(--info); }
.work-dot.done    { background: var(--ok); }

.work-title { font-size: .85rem; color: var(--text); font-weight: 500; }
.work-meta  { font-size: .72rem; color: var(--mist); margin-top: 2px; }

.work-system {
  font-size: .68rem;
  font-family: var(--font-mono);
  color: var(--mist);
  background: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

.work-status {
  font-size: .68rem;
  padding: 3px 9px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.work-status.pending  { background: transparent; color: var(--info); }
.work-status.late     { background: transparent; color: var(--alert); }
.work-status.done     { background: transparent; color: var(--ok); }

/* Gráfica de barras semanal (canvas) */
.chart-wrap {
  position: relative;
  height: 160px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 4px;
}
.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.chart-bar-track {
  width: 100%;
  height: 130px;
  background: var(--ink-4);
  border-radius: 4px 4px 0 0;
  position: relative;
  overflow: hidden;
}
.chart-bar-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  border-radius: 2px 2px 0 0;
  background: var(--amber);
  transition: height .6s var(--ease);
}
.chart-bar-fill.done-bar { background: var(--ok); }
.chart-bar-label { font-size: .65rem; color: var(--mist); font-family: var(--font-mono); }

/* Sistemas overview */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.sys-tile {
  background: var(--ink-3);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--edge);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  text-align: left;
}
.sys-tile:hover { border-color: var(--amber); }
.sys-tile-icon {
  width: 26px; height: 26px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  background: var(--ink-4);
  border: 1px solid var(--edge);
}
.sys-tile-name { font-size: .72rem; color: var(--text-sub); line-height: 1.3; }
.sys-tile-count {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--amber);
  font-weight: 600;
}

/* Timeline de actividad */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0;
}
.tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  background: var(--ink-3);
  flex-shrink: 0;
  margin-top: 4px;
}
.tl-line { flex: 1; width: 1px; background: var(--edge); margin: 4px auto 0; }
.tl-item:last-child .tl-line { display: none; }
.tl-right { padding: 0 0 18px 8px; }
.tl-time { font-size: .68rem; color: var(--mist); font-family: var(--font-mono); margin-bottom: 2px; }
.tl-text { font-size: .82rem; color: var(--text); }
.tl-sys  { font-size: .7rem; color: var(--amber); margin-top: 2px; }

.tool-lent-list { display: flex; flex-direction: column; gap: 8px; }
.tool-lent-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--ink-4);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--warn);
}
.tool-lent-name { font-size: .83rem; flex: 1; color: var(--text); }
.tool-lent-who  { font-size: .72rem; color: var(--mist); }
.tool-lent-days {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--warn);
  background: rgba(240,165,0,.1);
  border-radius: 4px;
  padding: 2px 7px;
}

/* ════════════════════════════════════════════════════════════════
   CALENDARIO
   ════════════════════════════════════════════════════════════════ */
.cal-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  min-height: calc(100vh - 120px);
}

/* Controles de vista */
.cal-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cal-nav-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--ink-3);
  border: 1px solid var(--edge);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease);
}
.cal-nav-btn:hover { background: var(--ink-4); }
.cal-month-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  min-width: 160px;
}
.view-tabs {
  display: flex;
  background: var(--ink-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-left: auto;
}
.view-tab {
  padding: 6px 16px;
  font-size: .78rem;
  color: var(--mist);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.view-tab.active { background: var(--amber-glow); color: var(--amber); }

/* Grid mensual */
.cal-grid {
  background: var(--ink-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--edge);
}
.cal-wd {
  padding: 10px 14px;
  font-size: .7rem;
  color: var(--mist);
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-day {
  min-height: 100px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-right: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  padding: 8px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  position: relative;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--ink-4); }
.cal-day.today { background: var(--amber-glow); }
.cal-day.today .cal-day-num { color: var(--amber); }
.cal-day.other-month .cal-day-num { color: var(--mist); opacity: .4; }
.cal-day-num {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--mist);
  margin-bottom: 4px;
}
.cal-day.today .cal-day-num {
  width: 22px; height: 22px;
  background: var(--amber);
  color: var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

/* Evento en día */
.cal-ev {
  font-size: .67rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  cursor: pointer;
  font-weight: 500;
  max-width: 100%;
}
.cal-ev.high   { background: var(--ink-4); color: var(--alert); border-left: 2px solid var(--alert); }
.cal-ev.medium { background: var(--ink-4); color: var(--warn);  border-left: 2px solid var(--warn); }
.cal-ev.low    { background: var(--ink-4); color: var(--info);  border-left: 2px solid var(--info); }
.cal-ev.done   { background: var(--ink-4); color: var(--ok);    border-left: 2px solid var(--ok); opacity: .7; text-decoration: line-through; }

/* Panel lateral calendario */
.cal-sidebar { display: flex; flex-direction: column; gap: 16px; }

.cal-mini-agenda {
  background: var(--ink-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.agenda-date-header {
  background: var(--ink-4);
  border-bottom: 1px solid var(--edge);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-sub);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}
.agenda-items { padding: 8px 0; }
.agenda-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--edge);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.agenda-item:last-child { border-bottom: none; }
.agenda-item:hover { background: var(--ink-4); }
.agenda-time {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--mist);
  min-width: 44px;
  margin-top: 1px;
}
.agenda-content { flex: 1; }
.agenda-title { font-size: .8rem; color: var(--text); }
.agenda-sys { font-size: .68rem; color: var(--amber); margin-top: 2px; }

/* Evento no realizado */
.missed-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--edge);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.missed-item:last-child { border-bottom: none; }
.missed-item:hover { background: var(--ink-4); }
.missed-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--alert);
}
.missed-title { flex: 1; font-size: .8rem; color: var(--text); }
.missed-date  { font-size: .68rem; color: var(--text-sub); font-family: var(--font-mono); }
.btn-reschedule {
  font-size: .68rem;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(192,49,43,.08);
  color: var(--alert);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease);
}
.btn-reschedule:hover { background: rgba(192,49,43,.16); }

/* ════════════════════════════════════════════════════════════════
   MODAL GLOBAL
   ════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(45,31,14,.25);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--ink-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  width: 640px;
  max-width: 95vw;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: modal-in .2s var(--ease);
  box-shadow: 0 20px 50px rgba(20,30,45,.16);
}
.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-thumb { background: var(--edge); }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-head {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 22px 26px 18px;
  margin-bottom: 20px;
  /* Capa opaca (--ink-2-solid) debajo del degradado ámbar: evita que el
     contenido del modal-body se transparente detrás de la cabecera al
     hacer scroll (la cabecera es sticky). */
  background: linear-gradient(135deg, var(--amber-glow), rgba(255,255,255,0) 70%), var(--ink-2-solid);
  border-bottom: 1px solid var(--edge);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: sticky; top: 0; z-index: 2;
}
.modal-head::before {
  content: 'K5';
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--amber), var(--amber-dim));
  box-shadow: 0 6px 14px rgba(41,84,163,.28);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 800; color: #fff;
  letter-spacing: .02em;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mist);
  background: var(--ink-4);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal-close:hover { background: var(--alert); color: #fff; }

.modal-body { padding: 0 26px 26px; }

.modal-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 26px 26px;
  border-top: 1px solid var(--edge);
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════
   MODAL — TEMA OSCURO "GLASS GOLD"
   Se aplica a TODOS los modales (excepto #modal-new-reporte, que
   simula una hoja impresa y debe permanecer claro). El truco: se
   redefinen las variables de color dentro del alcance del overlay,
   así todo lo que ya usa var(--amber), var(--edge), var(--text), etc.
   se repinta automáticamente sin tocar cada modal uno por uno.
   ════════════════════════════════════════════════════════════════ */
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) {
  --ink:       rgba(18,23,34,.68);
  --ink-2:     rgba(27,35,51,.66);
  --ink-2-solid: #1b2333;
  --ink-3:     rgba(27,35,51,.66);
  --ink-4:     rgba(255,255,255,.05);
  --edge:      rgba(255,255,255,.12);
  --mist:      #8b96ab;
  --text:      #f2f4f8;
  --text-sub:  #97a2b6;
  --amber:     #e3a94e;
  --amber-dim: #b9812f;
  --amber-glow:rgba(227,169,78,.14);

  background: rgba(8,10,16,.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .modal {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--edge);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); }

.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .modal-head {
  padding: 24px 30px 20px;
  border-radius: 22px 22px 0 0;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .modal-head::before {
  box-shadow: 0 8px 18px rgba(227,169,78,.32);
}
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .modal-title { letter-spacing: .01em; }
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .modal-subtitle {
  font-size: .78rem; font-weight: 400; color: var(--text-sub); margin-top: 3px;
}

.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .modal-body,
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .modal-foot { padding-left: 30px; padding-right: 30px; }

/* Campos de formulario */
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) input,
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) select,
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) textarea {
  background: rgba(255,255,255,.045);
  border-radius: 12px;
}
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) input::placeholder,
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) textarea::placeholder { color: #616c80; }
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) input:hover,
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) select:hover,
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) textarea:hover { border-color: rgba(255,255,255,.2); }
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) select option { background: #1b2333; color: #f2f4f8; }

/* Botones */
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .btn-primary,
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .btn.btn-primary {
  box-shadow: 0 8px 18px rgba(227,169,78,.3);
}
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .btn-primary:hover,
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .btn.btn-primary:hover {
  box-shadow: 0 10px 24px rgba(227,169,78,.42);
}
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .btn-danger { color: #ff7a7a; border-color: rgba(255,122,122,.4); }
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .btn-danger:hover { background: rgba(255,122,122,.1); }

/* Zona de foto */
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .photo-upload-zone:hover { background: rgba(227,169,78,.08); }

/* Bloques resaltados con fondo var(--amber-glow) dentro del modal
   (p.ej. "Programar mantenimiento") heredan el tono dorado suave */
.modal-overlay:not(#modal-new-reporte):not(#modal-visita-detail):not(#modal-new-presupuesto):not(#modal-new-proyecto) .modal-wide { width: 900px; max-width: 95vw; }

/* ══════════════════════════════════════════════════════════════
   VISITAS — "Detalle de visita" (bitácora por día, gastos, cierre)
   se muestra como hoja de pantalla completa, con el mismo
   tratamiento visual A4 (acento naranja) que el editor de Reportes,
   porque ahí se trabaja el contenido de la visita día a día.
   "Nueva visita" (alta rápida: nombre/fechas/notas) es un modal
   clásico compacto — no es un documento, solo captura los datos;
   el diseño tipo PDF/A4 aparece únicamente al generar el Reporte
   de la Visita (Ver / Imprimir / Compartir).
   ══════════════════════════════════════════════════════════════ */
#modal-visita-detail.modal-overlay{
  background:#dfe3e8; backdrop-filter:none; padding:0;
  align-items:flex-start; justify-content:center; overflow-y:auto;
}
#modal-visita-detail .modal{
  background:transparent; border:none; border-radius:0;
  width:100%; max-width:900px; max-height:none; overflow:visible; animation:none;
}
#modal-visita-detail .modal-body{ padding:0 16px 60px; }
#modal-visita-detail{
  --k5doc-ink:#1c1c1c;
  --k5doc-accent:#d9631e;
  --k5doc-accent-dark:#a84710;
  --k5doc-line:#c9c9c9;
  --k5doc-muted:#6b6b6b;
  --k5doc-field-bg:#fafafa;
}
#modal-visita-detail .rdp-toolbar{ background:var(--k5doc-ink); }
#modal-visita-detail .rdp-badge{ background:var(--k5doc-accent); }
#modal-visita-detail .rdp-toolbar .btn-ghost{ background:rgba(255,255,255,.12); color:#eee; border:none; }
#modal-visita-detail .rdp-toolbar .btn-ghost:hover{ background:rgba(255,255,255,.22); }
#modal-visita-detail .btn-primary{ background:var(--k5doc-accent); }
#modal-visita-detail .btn-primary:hover{ background:var(--k5doc-accent-dark); }
#modal-visita-detail input:focus, #modal-visita-detail select:focus, #modal-visita-detail textarea:focus{
  border-color:var(--k5doc-accent); box-shadow:0 0 0 4px rgba(217,99,30,.12);
}


/* ══════════════════════════════════════════════════════════════
   EDITOR DE REPORTE — SIMULACIÓN DE HOJAS (reemplaza el modal clásico)
   ══════════════════════════════════════════════════════════════ */
#modal-new-reporte.modal-overlay{
  background:#dfe3e8; backdrop-filter:none; padding:0;
  align-items:flex-start; justify-content:center; overflow-y:auto;
}
#modal-new-reporte .modal{
  background:transparent; border:none; border-radius:0;
  width:100%; max-width:900px; max-height:none; overflow:visible; animation:none;
}
#modal-new-reporte .modal-body{ padding:0 16px 60px; }

/* FIX Safari/iOS — botones que no responden al toque (Guardar reporte,
   Imprimir, Compartir, etc.): antes ".rdp-toolbar" tenía a la vez
   "position:sticky", margen negativo y un "transform" — esa combinación
   es un bug conocido de WebKit en iOS: la barra se ve en el lugar
   correcto, pero la zona donde realmente registra el toque queda
   desalineada, sobre todo después de hacer scroll. Ahora el "sticky" y
   el margen negativo viven en un envoltorio vacío (.rdp-toolbar-stick);
   los botones quedan en un contenedor normal, sin sticky ni transform
   encima, así que su área de toque coincide con lo que se ve. */
.rdp-toolbar-stick{
  position:sticky; top:0; z-index:20;
  margin:0 -16px 22px;
}
.rdp-toolbar{
  background:var(--rail-bg); color:#fff;
  padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.rdp-toolbar .rdp-title{font-family:var(--font-display);font-weight:700;font-size:1.02rem;display:flex;align-items:center;gap:10px;}
.rdp-toolbar .rdp-badge{width:26px;height:26px;border-radius:7px;background:var(--amber);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;}
.rdp-toolbar .rdp-actions{display:flex;gap:8px;}
.rdp-toolbar .rdp-actions .btn-ghost{background:rgba(255,255,255,.12);color:#fff;}
.rdp-toolbar .rdp-actions .btn-ghost:hover{background:rgba(255,255,255,.2);}

.rdp-sheet{
  background:var(--ink-2); border:1px solid var(--edge); border-radius:var(--radius-lg);
  box-shadow:0 4px 22px rgba(20,30,45,.14);
  padding:26px 30px; margin:0 auto 22px; max-width:820px;
  position:relative;
}
.rdp-sheet-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:3px solid var(--amber); padding-bottom:10px; margin-bottom:16px;
}
.rdp-sheet-head .rdp-hoja-tag{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--mist);}
.rdp-sheet-head h3{margin:2px 0 0;font-family:var(--font-display);font-size:1rem;color:var(--text);}
.rdp-sheet-num{font-size:10px;color:var(--mist);font-weight:600;white-space:nowrap;}



/* ══════════════════════════════════════════════════════════════
   EDITOR DE REPORTE — hoja única + hoja(s) de fotos condicional
   (mismo comportamiento y color que "Index 15": naranja en vez
   de azul, solo para este editor)
   ══════════════════════════════════════════════════════════════ */
#modal-new-reporte{
  --k5doc-ink:#1c1c1c;
  --k5doc-accent:#d9631e;
  --k5doc-accent-dark:#a84710;
  --k5doc-line:#c9c9c9;
  --k5doc-muted:#6b6b6b;
  --k5doc-field-bg:#fafafa;
}
#modal-new-reporte .rdp-toolbar{ background:var(--k5doc-ink); }
#modal-new-reporte .rdp-badge{ background:var(--k5doc-accent); }
#modal-new-reporte .btn-primary{ background:var(--k5doc-accent); }
#modal-new-reporte .btn-primary:hover{ background:var(--k5doc-accent-dark); }
#modal-new-reporte .rdp-toolbar .btn-ghost{ background:rgba(255,255,255,.12); color:#eee; border:none; }
#modal-new-reporte .rdp-toolbar .btn-ghost:hover{ background:rgba(255,255,255,.22); }

/* ── Mismo tratamiento visual "hoja A4" para Presupuesto/Cotización ── */
#modal-new-presupuesto.modal-overlay{
  background:#dfe3e8; backdrop-filter:none; padding:0;
  align-items:flex-start; justify-content:center; overflow-y:auto;
}
#modal-new-presupuesto .modal{
  background:transparent; border:none; border-radius:0;
  width:100%; max-width:900px; max-height:none; overflow:visible; animation:none;
}
#modal-new-presupuesto .modal-body{ padding:0 16px 60px; }

#modal-new-presupuesto{
  --k5doc-ink:#1c1c1c;
  --k5doc-accent:#d9631e;
  --k5doc-accent-dark:#a84710;
  --k5doc-line:#c9c9c9;
  --k5doc-muted:#6b6b6b;
  --k5doc-field-bg:#fafafa;
}
#modal-new-presupuesto .rdp-toolbar{ background:var(--k5doc-ink); }
#modal-new-presupuesto .rdp-badge{ background:var(--k5doc-accent); }
#modal-new-presupuesto .btn-primary{ background:var(--k5doc-accent); }
#modal-new-presupuesto .btn-primary:hover{ background:var(--k5doc-accent-dark); }
#modal-new-presupuesto .rdp-toolbar .btn-ghost{ background:rgba(255,255,255,.12); color:#eee; border:none; }
#modal-new-presupuesto .rdp-toolbar .btn-ghost:hover{ background:rgba(255,255,255,.22); }
#modal-new-presupuesto .form-label{ color:var(--k5doc-muted); font-family:var(--font-body); }
#modal-new-presupuesto .kdoc-page{ padding-bottom:6mm; }
#modal-new-presupuesto .pres-line-row input,
#modal-new-presupuesto #pres-terminos-list textarea{ border:none; border-bottom:1.3px solid var(--k5doc-line); border-radius:0; background:var(--k5doc-field-bg); }

#modal-new-proyecto.modal-overlay{
  background:#dfe3e8; backdrop-filter:none; padding:0;
  align-items:flex-start; justify-content:center; overflow-y:auto;
}
#modal-new-proyecto .modal{
  background:transparent; border:none; border-radius:0;
  width:100%; max-width:900px; max-height:none; overflow:visible; animation:none;
}
#modal-new-proyecto .modal-body{ padding:0 16px 60px; }

#modal-new-proyecto{
  --k5doc-ink:#1c1c1c;
  --k5doc-accent:#d9631e;
  --k5doc-accent-dark:#a84710;
  --k5doc-line:#c9c9c9;
  --k5doc-muted:#6b6b6b;
  --k5doc-field-bg:#fafafa;
}
#modal-new-proyecto .rdp-toolbar{ background:var(--k5doc-ink); }
#modal-new-proyecto .rdp-badge{ background:var(--k5doc-accent); }
#modal-new-proyecto .btn-primary{ background:var(--k5doc-accent); }
#modal-new-proyecto .btn-primary:hover{ background:var(--k5doc-accent-dark); }
#modal-new-proyecto .rdp-toolbar .btn-ghost{ background:rgba(255,255,255,.12); color:#eee; border:none; }
#modal-new-proyecto .rdp-toolbar .btn-ghost:hover{ background:rgba(255,255,255,.22); }
#modal-new-proyecto .form-label{ color:var(--k5doc-muted); font-family:var(--font-body); }
#modal-new-proyecto .kdoc-page{ padding-bottom:6mm; }

.kdoc-page{
  background:#fff; border:1px solid var(--k5doc-line); border-radius:2px;
  box-shadow:0 4px 22px rgba(20,30,45,.16);
  width:210mm; min-height:297mm; box-sizing:border-box;
  padding:14mm; margin:0 auto 20px;
  display:none; flex-direction:column;
}
.kdoc-page.active{ display:flex; }

.kdoc-doc-header{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:3px solid var(--k5doc-accent); padding-bottom:10px; margin-bottom:16px; }
.kdoc-doc-header .kdoc-brand{ display:flex; gap:10px; align-items:center; }
.kdoc-doc-header .kdoc-logo{ width:40px; height:40px; border-radius:9px; background:linear-gradient(135deg,var(--k5doc-accent),var(--k5doc-accent-dark)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; flex-shrink:0; }
.kdoc-doc-header .kdoc-logo-img{ height:40px; width:auto; object-fit:contain; flex-shrink:0; }
.kdoc-doc-header .kdoc-co-name{ font-family:var(--font-display); font-size:15px; font-weight:700; line-height:1.15; color:var(--text); }
.kdoc-doc-header .kdoc-co-sub{ font-size:10px; color:var(--k5doc-muted); letter-spacing:.5px; text-transform:uppercase; }
.kdoc-doc-header .kdoc-doc-title{ text-align:right; }
.kdoc-doc-header .kdoc-doc-title h3{ font-family:var(--font-display); font-size:14px; margin:0; letter-spacing:.4px; color:var(--text); }
.kdoc-doc-header .kdoc-doc-title span{ font-size:10px; color:var(--k5doc-muted); }

.kdoc-section-label{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--k5doc-accent-dark);
  margin:26px 0 16px; padding-left:9px;
  border-left:3px solid var(--k5doc-accent);
}
.kdoc-section-label::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--k5doc-line), transparent);
}
.kdoc-section-label:first-child{ margin-top:0; }

.kdoc-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-bottom:16px; }
.kdoc-field{ display:flex; flex-direction:column; gap:6px; }
.kdoc-field.full{ grid-column:1/-1; }
.kdoc-field label{ font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--k5doc-muted); }
.kdoc-field label .req{ color:var(--k5doc-accent); }
.kdoc-field .kdoc-fill{
  border:1px solid var(--k5doc-line); border-bottom-width:1px; border-radius:7px;
  background:var(--k5doc-field-bg);
  box-shadow:inset 0 1px 2px rgba(20,20,20,.03);
  padding:10px 12px; font-size:12.5px; font-family:var(--font-body); color:var(--text);
  min-height:38px; width:100%;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.kdoc-field select.kdoc-fill{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0 Z' fill='%236b6b6b'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:9px 6px; padding-right:26px; }
.kdoc-field textarea.kdoc-fill{ resize:none; min-height:58px; line-height:1.55; }
.kdoc-field textarea.kdoc-fill.tall{ min-height:78px; }
.kdoc-field .kdoc-fill:focus{ outline:none; border-color:var(--k5doc-accent); background:#fff6f0; box-shadow:0 0 0 3px rgba(217,99,30,.10); }

.kdoc-img-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.kdoc-img-card{ border:1.2px solid var(--k5doc-line); border-radius:7px; overflow:hidden; display:flex; flex-direction:column; background:#fff; }
.kdoc-img-area{ aspect-ratio:4/3; background:var(--k5doc-field-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; cursor:pointer; font-size:10px; color:var(--k5doc-muted); text-align:center; padding:4px; }
.kdoc-img-area img{ width:100%; height:100%; object-fit:cover; }
.kdoc-img-area .kdoc-plus{ font-size:22px; color:var(--k5doc-accent); margin-bottom:2px; }
.kdoc-img-area .kdoc-remove{ position:absolute; top:3px; right:3px; background:rgba(0,0,0,.55); color:#fff; border:none; border-radius:50%; width:18px; height:18px; font-size:11px; line-height:1; cursor:pointer; z-index:2; }
.kdoc-img-num{ position:absolute; top:3px; left:3px; background:rgba(0,0,0,.5); color:#fff; font-size:8px; padding:1px 5px; border-radius:8px; z-index:2; }
.kdoc-img-desc{ border:none; border-top:1.2px solid var(--k5doc-line); font-size:9.5px; padding:5px 6px; font-family:var(--font-body); color:var(--text); background:#fff; min-height:30px; resize:none; line-height:1.3; width:100%; }
.kdoc-img-desc:focus{ outline:none; background:#fff6f0; }
.kdoc-img-count-note{ font-size:9.5px; color:var(--k5doc-muted); margin-top:8px; }

.kdoc-signature-block{ margin-top:auto; padding-top:2.2cm; }
.kdoc-sig-row{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:10px; }
.kdoc-sig-box{ text-align:center; }
.kdoc-sig-name{ font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--text); margin-top:8px; min-height:14px; letter-spacing:.2px; }
.kdoc-sig-name.placeholder{ color:var(--k5doc-muted); font-weight:400; font-style:italic; font-family:var(--font-body); }
.kdoc-sig-role{ font-size:8.5px; color:var(--k5doc-muted); text-transform:uppercase; letter-spacing:.9px; margin-top:3px; }
/* ── Firma como "hoja de papel": línea + ícono sutil para agregarla.
   El botón/ícono solo se muestra mientras NO hay firma elegida; en
   cuanto se elige una firma con imagen guardada, desaparece y solo
   queda la línea con la firma encima (igual que en el PDF final). Todo
   el recuadro sigue siendo clicable para poder cambiarla después. */
.kdoc-sig-visual{
  height:56px; display:flex; align-items:flex-end; justify-content:center;
  position:relative; cursor:pointer; border-radius:6px; transition:background .15s;
  border-bottom:1.4px solid var(--k5doc-accent-dark,#1a5fa8); padding-bottom:4px;
}
.kdoc-sig-visual:hover{ background:rgba(217,99,30,.07); }
.kdoc-sig-visual img{ max-height:52px; max-width:88%; object-fit:contain; pointer-events:none; }
.kdoc-sig-add-btn{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--k5doc-muted); background:none; border:none; cursor:pointer;
  padding:5px 12px 7px; border-radius:20px; pointer-events:none;
}
.kdoc-sig-visual:hover .kdoc-sig-add-btn{ color:var(--k5doc-accent); }
.kdoc-sig-add-btn svg{ opacity:.7; }
.kdoc-sig-add-label{ font-size:8px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; }
.kdoc-sig-select-hidden{ display:none !important; }
.kdoc-sig-hint{ font-size:9.5px; color:var(--k5doc-muted); text-align:center; margin-top:10px; }
.kdoc-sig-hint a{ color:var(--k5doc-accent-dark); }
/* Menú flotante para elegir/quitar firmante desde la hoja */
.kdoc-sig-popover{
  position:absolute; z-index:2000; background:#fff; border:1px solid var(--k5doc-line);
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.2); padding:7px; width:230px;
  max-height:280px; overflow-y:auto;
}
.kdoc-sig-popover-item{
  display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px;
  cursor:pointer; font-size:12px; color:var(--text); text-align:left;
}
.kdoc-sig-popover-item:hover{ background:var(--k5doc-field-bg); }
.kdoc-sig-popover-item img{ width:34px; height:22px; object-fit:contain; border:1px solid var(--k5doc-line); border-radius:3px; background:#fafafa; }
.kdoc-sig-popover-item .noimg{ width:34px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:6.5px; color:var(--k5doc-muted); border:1px dashed var(--k5doc-line); border-radius:3px; text-align:center; line-height:1.1; }
.kdoc-sig-popover-empty{ padding:7px 8px; border-radius:6px; cursor:pointer; font-size:11.5px; color:var(--k5doc-muted); text-align:left; }
.kdoc-sig-popover-empty:hover{ background:var(--k5doc-field-bg); }
.kdoc-sig-popover-divider{ height:1px; background:var(--k5doc-line); margin:5px 2px; }
.kdoc-sig-popover-manage{ display:block; text-align:center; font-size:10.5px; color:var(--k5doc-accent-dark); padding:6px; cursor:pointer; border-radius:6px; }
.kdoc-sig-popover-manage:hover{ background:var(--k5doc-field-bg); }
.kdoc-sig-popover-upload{ display:block; text-align:center; font-size:10.5px; font-weight:600; color:var(--k5doc-accent-dark); padding:6px; cursor:pointer; border-radius:6px; }
.kdoc-sig-popover-upload:hover{ background:var(--k5doc-field-bg); }



/* Formulario */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-col { display: flex; flex-direction: column; gap: 6px; }
.form-col.full { grid-column: 1 / -1; }
.form-label { font-size: .72rem; color: var(--text-sub); font-family: var(--font-body); letter-spacing: .03em; text-transform: uppercase; font-weight: 600; opacity: .85; }
.form-col input, .form-col select, .form-col textarea { width: 100%; }
.form-col textarea { resize: vertical; min-height: 80px; }

/* Botones */
.btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn {
  padding: 9px 22px;
  border-radius: var(--radius-sm);
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  font-family: var(--font-body);
}
.btn-primary {
  background: linear-gradient(135deg, var(--amber), var(--amber-dim));
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(41,84,163,.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(41,84,163,.32); }
.btn-secondary {
  padding: 9px 22px;
  border-radius: var(--radius-sm);
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  background: var(--ink-4);
  color: var(--text-sub);
  border: 1.5px solid var(--edge);
  transition: all var(--dur) var(--ease);
}
.btn-secondary:hover { background: var(--edge); color: var(--text); }
.btn-ghost { background: transparent; border: 1px solid var(--edge); color: var(--mist); }
.btn-ghost:hover { border-color: var(--amber-dim); color: var(--text); }
.btn-danger { background: transparent; color: var(--alert); border: 1px solid var(--alert); }
.btn-danger:hover { background: rgba(192,49,43,.08); }
.btn-view   { background: var(--ok); color: #ffffff; border: 1px solid var(--ok); }
.btn-view:hover   { background: #14603a; border-color: #14603a; }
.btn-edit   { background: var(--warn); color: #ffffff; border: 1px solid var(--warn); }
.btn-edit:hover   { background: #8f4409; border-color: #8f4409; }
.btn-use    { background: var(--info); color: #ffffff; border: 1px solid var(--info); }
.btn-baja   { background: #5b6472; color: #ffffff; border: 1px solid #5b6472; }
.btn-baja:hover   { background: #465059; border-color: #465059; }
.btn-use:hover    { background: #453a82; border-color: #453a82; }

/* Fila/tarjeta de acciones (Usar / Editar / Eliminar) — pills parejas y bien alineadas */
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row-actions .btn,
.mat-card-actions .btn {
  border-radius: 20px;
  font-weight: 600;
}
.row-actions .btn-danger,
.mat-card-actions .btn-danger {
  background: var(--alert); color: #ffffff; border: 1px solid var(--alert);
}
.row-actions .btn-danger:hover,
.mat-card-actions .btn-danger:hover { background: #a02824; border-color: #a02824; }

/* ════════════════════════════════════════════════════════════════
   NOTIFICACIONES — Centro
   ════════════════════════════════════════════════════════════════ */
.notif-panel {
  position: fixed;
  top: 56px; right: 0;
  width: 340px;
  height: calc(100vh - 56px);
  background: var(--ink-2);
  border-left: 1px solid var(--edge);
  z-index: 200;
  transform: translateX(100%);
  transition: transform .25s var(--ease);
  display: flex; flex-direction: column;
}
.notif-panel.open { transform: translateX(0); }
.notif-header { padding: 20px; border-bottom: 1px solid var(--edge); }
.notif-header h3 { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--text); }
.notif-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.notif-item {
  background: var(--ink-4);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.notif-item:hover { border-color: var(--amber-dim); }
.notif-item .ni-icon { flex-shrink: 0; margin-top: 1px; }
.notif-item .ni-text { flex: 1; }
.notif-item .ni-title { font-size: .82rem; color: var(--text); font-weight: 500; }
.notif-item .ni-sub   { font-size: .72rem; color: var(--mist); margin-top: 3px; }

/* ════════════════════════════════════════════════════════════════
   AGENDA DEL DÍA
   ════════════════════════════════════════════════════════════════ */
.agenda-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.agenda-layout .panel { border-radius: 6px; }
.agenda-panel-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-content: start;
  gap: 10px 16px;
  min-height: 420px;
  max-height: min(680px, calc(100vh - 300px));
  overflow-y: auto;
}
.agenda-panel-body::-webkit-scrollbar { width: 6px; }
.agenda-panel-body::-webkit-scrollbar-track { background: transparent; }
.agenda-panel-body::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 3px; }
.agenda-panel-body .day-task { margin-bottom: 0; }
.agenda-panel-body .empty-state,
.agenda-secondary-body .empty-state { grid-column: 1 / -1; padding: 24px 0; }

/* ── Vista de lista (alterna a la de tarjetas) ── */
.agenda-panel-body.agenda-list-mode {
  grid-template-columns: 1fr;
  gap: 6px;
}
.agenda-panel-body.agenda-list-mode .day-task {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  padding-left: 20px;
}
.agenda-panel-body.agenda-list-mode .dt-name { margin-bottom: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-panel-body.agenda-list-mode .dt-meta { flex: 0 0 auto; gap: 16px; }
.agenda-view-toggle { display: flex; gap: 4px; background: var(--ink-4); border-radius: var(--radius-sm); padding: 3px; }
.agenda-view-toggle button {
  padding: 6px 10px; font-size: .72rem; border-radius: 5px; color: var(--mist);
  display: flex; align-items: center; gap: 5px; transition: all var(--dur) var(--ease);
}
.agenda-view-toggle button.active { background: var(--ink-2); color: var(--text); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.agenda-view-toggle button:hover:not(.active) { color: var(--text); }

/* Fila compacta sin card: Mañana / Urgentes / Vencidos */
.agenda-secondary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.agenda-secondary-col {
  padding: 4px 20px;
  border-left: 1px solid var(--edge);
}
.agenda-secondary-col:first-child { border-left: none; padding-left: 0; }
.agenda-secondary-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-sub);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--edge);
}
.agenda-secondary-head svg { flex-shrink: 0; color: var(--mist); }
.agenda-secondary-head .day-tag { margin-left: auto; }
.agenda-secondary-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 8px 12px;
  min-height: 60px;
  max-height: 260px;
  overflow-y: auto;
}
.agenda-secondary-body::-webkit-scrollbar { width: 6px; }
.agenda-secondary-body::-webkit-scrollbar-track { background: transparent; }
.agenda-secondary-body::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 3px; }
.agenda-secondary-body .empty-state svg { width: 22px; height: 22px; }
.agenda-secondary-body .empty-state p { font-size: .72rem; }
.agenda-secondary-body .day-task { padding: 10px 12px; padding-left: 16px; margin-bottom: 0; }



/* ── Historial del mes (agenda) ── */
/* ── Tarjeta unificada de Agenda: Hoy / Mañana / Urgentes / Vencidos ── */
.agenda-unified-card {
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--edge);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px -16px rgba(16,24,40,.18);
  overflow: hidden;
}
.agenda-unified-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--mist); transition: background .2s var(--ease); z-index: 1;
}
.agenda-unified-card[data-active="hoy"]::before      { background: var(--warn); }
.agenda-unified-card[data-active="tomorrow"]::before  { background: var(--info); }
.agenda-unified-card[data-active="urgent"]::before    { background: var(--warn); }
.agenda-unified-card[data-active="late"]::before      { background: var(--alert); }
.agenda-unified-head {
  background: var(--ink-3);
  gap: 12px;
  flex-wrap: wrap;
}
.agenda-print-btn { padding: 7px 12px; font-size: .74rem; white-space: nowrap; }


.hist-mes-panel { margin-top: 18px; }
.hist-mes-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hist-mes-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hist-mes-label {
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-sub);
  text-transform: uppercase; letter-spacing: .05em; min-width: 120px; text-align: center;
}
.hist-mes-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
  padding: 14px 22px; border-bottom: 1px solid var(--edge);
}
.hist-mes-stat { text-align: center; }
.hist-mes-stat .n { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--text); }
.hist-mes-stat .l { font-size: .64rem; color: var(--mist); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.hist-mes-stat.ok .n { color: var(--ok); }
.hist-mes-stat.alert .n { color: var(--alert); }
.hist-mes-list { padding: 6px 0; max-height: 360px; overflow-y: auto; }
.hist-mes-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 22px; border-bottom: 1px solid var(--edge);
  cursor: pointer; transition: background var(--dur) var(--ease);
}
.hist-mes-item:last-child { border-bottom: none; }
.hist-mes-item:hover { background: var(--ink-4); }
.hist-mes-item-body { flex: 1; min-width: 0; }
.hist-mes-item-title { font-size: .82rem; color: var(--text); }
.hist-mes-item-meta { font-size: .68rem; color: var(--mist); margin-top: 2px; }
.hist-mes-item-motivo { font-size: .7rem; color: var(--warn); margin-top: 4px; }
.hist-mes-item-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

/* ── Historial de seguimiento (dentro de detalle de evento) ── */
.tk-hist-list { margin-top: 4px; }
.tk-hist-item {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--edge);
  font-size: .78rem;
}
.tk-hist-item:last-child { border-bottom: none; }
.tk-hist-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.tk-hist-dot.creado     { background: var(--mist); }
.tk-hist-dot.vencido    { background: var(--alert); }
.tk-hist-dot.reagendado { background: var(--warn); }
.tk-hist-dot.completado { background: var(--ok); }
.tk-hist-dot.reabierto  { background: var(--info); }
.tk-hist-txt { flex: 1; color: var(--text); }
.tk-hist-date { font-size: .66rem; color: var(--mist); font-family: var(--font-mono); margin-top: 2px; }
.tk-hist-motivo { color: var(--warn); margin-top: 2px; }
.tk-motivo-inline { display: flex; gap: 6px; margin-top: 6px; }
.tk-motivo-inline input {
  flex: 1; font-size: .76rem; padding: 6px 8px;
  background: var(--ink-4); border: 1px solid var(--edge); border-radius: 6px; color: var(--text);
}

.agenda-col-title {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.day-tag {
  font-size: .65rem;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 30px;
  border: 1px solid;
}
.day-tag.today  { color: var(--amber); border-color: var(--amber-dim); background: var(--amber-glow); }
.day-tag.tomorrow { color: var(--info); border-color: rgba(77,166,255,.3); background: rgba(77,166,255,.08); }
.day-tag.late   { color: var(--alert); border-color: rgba(232,80,80,.3); background: rgba(232,80,80,.08); }
.day-tag.urgent { color: var(--warn); border-color: rgba(240,165,0,.3); background: rgba(240,165,0,.08); }

/* Tarjeta de tarea del día */
.day-task {
  background: var(--ink-3);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  position: relative;
  padding-left: 20px;
}
.day-task::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
.day-task.high::before { background: var(--alert); }
.day-task.medium::before { background: var(--warn); }
.day-task.low::before { background: var(--info); }
.day-task.done { opacity: .55; }
.day-task.done::before { background: var(--ok); }
.day-task:hover { border-color: var(--edge); background: var(--ink-4); }
.dt-name { font-size: .85rem; color: var(--text); font-weight: 500; margin-bottom: 4px; }
.dt-meta { font-size: .72rem; color: var(--mist); display: flex; gap: 12px; flex-wrap: wrap; }
.dt-meta span { display: flex; align-items: center; gap: 4px; }
.dt-check {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--edge);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: all var(--dur) var(--ease);
}
.day-task.done .dt-check { background: var(--ok); border-color: var(--ok); color: var(--ink); }
.day-task .rep-sel-check { position:absolute; right:12px; top:50%; transform:translateY(-50%); }
.day-task.day-task-selected { border-color:var(--amber); background:var(--amber-glow); }
.dt-thumb { width:34px; height:34px; border-radius:6px; object-fit:cover; flex-shrink:0; border:1px solid var(--edge); float:left; margin-right:10px; cursor:pointer; }

/* Agenda — vista de tarjetas grandes (con foto), mismo estilo que Sistemas */
.agenda-task-card {
  position:relative; background:var(--ink-2); border:1px solid var(--edge); border-radius:var(--radius-md);
  overflow:hidden; cursor:pointer; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow:0 1px 3px rgba(0,0,0,.05); display:flex; flex-direction:column;
}
.agenda-task-card:hover { border-color:var(--card-accent, var(--text-sub)); box-shadow:0 2px 10px rgba(0,0,0,.09); }
.agenda-task-card.day-task-selected { border-color:var(--amber); background:var(--amber-glow); }
.agenda-task-card-status { height:3px; background:var(--card-accent, var(--edge)); flex-shrink:0; }
.agenda-task-card-img { width:100%; height:130px; object-fit:cover; display:block; background:var(--ink-4); }
.agenda-task-card-noimg { width:100%; height:130px; display:flex; align-items:center; justify-content:center; color:var(--mist); background:var(--ink-4); }
.agenda-task-card-noimg svg { width:34px; height:34px; }
.agenda-task-card-body { padding:12px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.agenda-task-card-name-row { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.agenda-task-card-name { font-weight:700; color:var(--text); font-size:.87rem; line-height:1.3; }
.agenda-task-card-time { font-family:var(--font-mono); font-size:.64rem; color:var(--mist); white-space:nowrap; flex-shrink:0; margin-top:2px; }
.agenda-task-card-stats { display:flex; gap:12px; flex-wrap:wrap; font-size:.68rem; color:var(--mist); border-top:1px solid var(--edge); padding-top:8px; margin-top:2px; }

/* ════════════════════════════════════════════════════════════════
   UTILIDADES
   ════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--mist);
  text-align: center;
}
.empty-state svg { opacity: .3; }
.empty-state p { font-size: .85rem; max-width: 200px; line-height: 1.5; }

.page-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.page-header-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--amber-glow);
  border: 1px solid rgba(13,148,136,.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--amber);
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
}
.page-header p { font-size: .8rem; color: var(--mist); margin-top: 2px; }

/* Fab crear */
.fab {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--amber);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(13,148,136,.40);
  cursor: pointer;
  z-index: 150;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fab:hover { transform: scale(1.07); box-shadow: 0 6px 28px rgba(232,168,51,.55); }

/* Toast */
#toast-container {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--ink-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: .82rem;
  color: var(--text);
  display: flex; align-items: center; gap: 10px;
  pointer-events: auto;
  animation: toast-in .2s var(--ease);
  box-shadow: 0 4px 20px rgba(13,148,136,.12);
}
.toast.ok  { border-color: rgba(52,199,123,.3); }
.toast.err { border-color: rgba(232,80,80,.3); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   MÓDULOS PARTE 2 — Estilos compartidos
   ════════════════════════════════════════════════════════════════ */

/* ── Tabla genérica ── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mist); padding:10px 14px;
  border-bottom:1px solid var(--edge); text-align:left; background:var(--ink-3);
}
.data-table td {
  padding:11px 14px; font-size:.83rem; color:var(--text);
  border-bottom:1px solid var(--edge); vertical-align:middle;
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--ink-4); }
.table-wrap { background:var(--ink-3); border:1px solid var(--edge); border-radius:var(--radius-md); overflow:hidden; }

/* ── Chips de estado ── */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:3px;
  font-family:var(--font-mono); font-size:.68rem; font-weight:600; white-space:nowrap;
}
.chip-ok       { background:transparent; color:var(--ok);   border:1px solid var(--ok); }
.chip-warn     { background:transparent; color:var(--warn); border:1px solid var(--warn); }
.chip-alert    { background:transparent; color:var(--alert);border:1px solid var(--alert); }
.chip-info     { background:transparent; color:var(--info); border:1px solid var(--info); }
.chip-mist     { background:var(--ink-4); color:var(--mist); border:1px solid var(--edge); }
.chip-amber    { background:transparent; color:var(--amber);border:1px solid var(--amber); }

/* ── Galería de fotos ── */
.photo-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px;
  margin-top:10px;
}
.photo-grid-lg {
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.photo-thumb {
  position:relative; aspect-ratio:1; border-radius:var(--radius-sm);
  overflow:hidden; cursor:pointer; border:1px solid var(--edge);
  background:var(--ink-4);
}
.photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.photo-thumb:hover img { transform:scale(1.05); }
/* Fotos del DETALLE de visita (una vez guardada la información): deben
   quedar 100% estáticas — sin zoom al pasar el mouse ni clic para
   ampliar — porque ese movimiento es lo que rompe la generación de la
   hoja/PDF. */
.photo-thumb-static,
.photo-thumb-static img { cursor:default; }
.photo-thumb-static:hover img,
.photo-thumb-static img { transform:none !important; }
.photo-thumb .photo-del {
  position:absolute; top:4px; right:4px; width:20px; height:20px;
  background:rgba(232,80,80,.85); border-radius:50%; color:#fff; display:none;
  align-items:center; justify-content:center; font-size:.65rem; cursor:pointer;
}
.photo-thumb:hover .photo-del { display:flex; }

/* Fotos con descripción del módulo de Visitas: máx. 2, cada una con su
   textarea fija (sin barra de redimensionar) para anotar qué se hizo.
   Grid FIJO de 3 columnas (nunca 2, nunca 4) para que las tarjetas se
   vean grandes y consistentes tanto al crear como en el detalle/PDF. */
.visita-foto-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; margin-top:10px;
}
.visita-foto-card { display:flex; flex-direction:column; gap:6px; }
.visita-foto-card .photo-thumb { width:100%; aspect-ratio:4/3; }
.visita-foto-caption {
  resize:none; height:78px; font-size:.78rem; line-height:1.35;
}

/* ── Barra de herramientas de fotos del detalle de Visita:
   Editar / Seleccionar / Compartir, todo dentro del modal (no en el PDF) ── */

.photo-upload-zone {
  border:2px dashed var(--edge); border-radius:var(--radius-md);
  padding:26px; text-align:center; cursor:pointer; color:var(--mist);
  background: var(--amber-glow);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
  font-size:.8rem;
}
.photo-upload-zone svg { color: var(--amber); }
.photo-upload-zone:hover { border-color:var(--amber); background:var(--ink-3); color:var(--text); transform: translateY(-1px); }
.photo-upload-zone input { display:none; }

/* Fila única de fotos (no salto de línea) + tile "ver todas" */
.photo-grid:has(.photo-more),
#rep-photo-preview, #hist-photo-preview {
  display:flex; flex-wrap:nowrap; overflow:hidden; gap:10px; margin-top:10px;
}
#rep-photo-preview .photo-thumb, #hist-photo-preview .photo-thumb {
  flex:0 0 92px; width:92px; height:92px;
}
.photo-thumb.photo-more {
  flex:0 0 92px; width:92px; height:92px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; background:var(--ink-4);
  color:var(--text); font-weight:700; font-size:.85rem; text-align:center; cursor:pointer;
}
.photo-thumb.photo-more span { font-size:.6rem; font-weight:500; color:var(--mist); }
.photo-thumb-wrap { display:flex; flex-direction:column; gap:4px; }
.photo-caption { font-size:.74rem; color:var(--mist); line-height:1.35; word-break:break-word; }

/* Modal de galería completa con descripción por foto */
#gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.gallery-card { border:1px solid var(--edge); border-radius:var(--radius-sm); overflow:hidden; background:var(--ink-4); }
.gallery-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:pointer; }
.gallery-card textarea {
  width:100%; border:none; border-top:1px solid var(--edge); background:transparent;
  color:var(--text); font-size:.78rem; font-family:inherit; padding:8px; resize:none;
  min-height:140px; line-height:1.4; box-sizing:border-box; overflow:hidden;
}
.gallery-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 8px 8px; font-size:.68rem; color:var(--mist); }
.gallery-card-counter { color:var(--mist); font-variant-numeric:tabular-nums; }
.gallery-card-del { color:#ef4444; cursor:pointer; font-weight:600; }
.gallery-card-del:hover { text-decoration:underline; }

/* Lightbox */
#lightbox {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(45,31,14,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
#lightbox.open { display:flex; }
#lightbox img { max-width:90vw; max-height:88vh; border-radius:var(--radius-sm); object-fit:contain; }
#lightbox-close {
  position:absolute; top:16px; right:20px; color:#fff;
  font-size:1.6rem; cursor:pointer; background:rgba(255,255,255,.1);
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* ── Reporte card ── */
.reporte-card {
  background:var(--ink-3); border:1px solid var(--edge); border-radius:var(--radius-md);
  margin-bottom:14px; overflow:visible;
  transition:border-color var(--dur) var(--ease);
}
.reporte-card:hover { border-color:var(--amber-dim); }
.reporte-card-head {
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  cursor:pointer; flex-wrap:wrap;
}
.reporte-card-body { padding:16px 20px; }
.reporte-id {
  font-family:var(--font-mono); font-size:.62rem; font-weight:600; color:var(--mist);
  background:var(--ink-4); border:1px solid var(--edge);
  border-radius:4px; padding:2px 6px; flex-shrink:0; letter-spacing:.2px;
}

/* ── Selección manual de reportes ── */
.rep-sel-check {
  width:18px; height:18px; flex-shrink:0;
  accent-color:var(--amber); cursor:pointer;
  border-radius:4px;
}
.reporte-card.rep-selected {
  border-color:var(--amber);
  background:var(--amber-glow);
}
.rep-sel-bar {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--ink-2);
  border-radius:50px; padding:12px 22px;
  display:flex; align-items:center; gap:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.22);
  z-index:9999; white-space:nowrap;
  animation:slideUp .22s var(--ease);
}
@keyframes slideUp {
  from { opacity:0; transform:translateX(-50%) translateY(16px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.rep-sel-bar span { font-size:.82rem; font-weight:600; }
.rep-sel-bar button {
  font-size:.78rem; font-weight:600; padding:6px 14px;
  border-radius:50px; border:none; cursor:pointer;
  transition:opacity .15s;
}
.rep-sel-bar button:hover { opacity:.85; }
.rep-sel-btn-gen  { background:var(--amber); color:#fff; }
.rep-sel-btn-all  { background:rgba(255,255,255,.15); color:#fff; }
.rep-sel-btn-cancel { background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }

/* ── Selección y acciones de tarjetas en la lista de Visitas
   (mismo patrón visual que la selección de Reportes) ── */
.visita-card { transition:border-color var(--dur) var(--ease); }
.visita-card.visita-selected { border-color:var(--amber); background:var(--amber-glow); }
.visita-card-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.reporte-title { font-weight:600; color:var(--text); flex:1; font-size:.9rem; }

/* ── Truncado "Ver más" para textos largos en tarjetas (título, seguimientos) ──
   Por defecto se recorta a 2 líneas; si el texto es largo se agrega un link
   "Ver más" que expande sin que la tarjeta crezca de ancho, solo de alto. */
.clamp-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.clamp-text.clamp-text-off {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.clamp-vermas {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--amber);
  cursor: pointer;
  margin-top: 2px;
}
.clamp-vermas:hover { text-decoration: underline; }
.reporte-meta  { font-size:.73rem; color:var(--mist); margin-top:3px; }

/* ── Etiquetas de tipo/prioridad + separador, estilo "empresarial" sutil ── */
.rep-tag-tipo{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.64rem; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  padding:3px 9px; border-radius:5px; white-space:nowrap; line-height:1.3;
}
.rep-tag-tipo.is-incidencia{ background:#fdf6ea; color:#96590a; border:1px solid #eeddb8; }
.rep-tag-tipo.is-actividad{ background:#eef3fb; color:#2b4f8f; border:1px solid #cddaef; }
.rep-tag-prio{ font-size:.7rem; color:var(--mist); font-weight:500; white-space:nowrap; }
.rep-meta-divider{ width:1px; height:12px; background:var(--edge); flex-shrink:0; }

/* ── Herramientas — grid responsivo con card vertical ── */
.tools-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; margin-bottom:20px;
}
.tool-card {
  background:var(--ink-3); border:1px solid var(--edge); border-radius:var(--radius-md);
  display:flex; flex-direction:column;
  cursor:pointer; transition:border-color var(--dur) var(--ease);
  position:relative; overflow:hidden;
}
.tool-card:hover { border-color:var(--amber-dim); }
.tool-card-status {
  position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
}
.tool-card-status.disponible { background:var(--ok); }
.tool-card-status.dañada     { background:var(--alert); }
.tool-card-status.reparacion { background:var(--info); }
.tool-card-status.baja       { background:var(--mist); }
.tool-card-photo {
  width:100%; height:150px;
  background:var(--ink-4); overflow:hidden;
  border-bottom:1px solid var(--edge);
  display:flex; align-items:center; justify-content:center; color:var(--mist);
  flex-shrink:0;
  cursor:pointer;
}
.tool-card-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.tool-card:hover .tool-card-photo img { transform:scale(1.04); }
.tool-card-photo .tool-photo-placeholder {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--mist); font-size:.7rem; text-align:center; padding:8px;
}
.tool-card-info { flex:1; padding:14px 16px 12px; display:flex; flex-direction:column; gap:7px; min-width:0; }
.tool-card-name-row { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.tool-card-name { font-weight:700; color:var(--text); font-size:.9rem; line-height:1.3; overflow-wrap:break-word; }
.tool-card-inv  { font-family:var(--font-mono); font-size:.72rem; color:var(--amber); font-weight:600; white-space:nowrap; flex-shrink:0; margin-top:2px; }
.tool-card-meta { font-size:.73rem; color:var(--mist); display:flex; gap:10px; flex-wrap:wrap; }
.tool-card-meta span { display:flex; align-items:center; gap:4px; }
.tool-card-lent { font-size:.72rem; color:var(--warn); }
.tool-card-actions {
  display:flex; align-items:stretch; gap:6px; flex-wrap:wrap;
  padding:10px 12px; border-top:1px solid var(--edge); flex-shrink:0;
}
.tool-card-actions .btn { flex:1 1 auto; white-space:nowrap; }


/* Toggle vista lista/card */
.view-toggle { display:flex; border:1px solid var(--edge); border-radius:8px; overflow:hidden; }
.view-toggle-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; background:var(--ink-3); border:none; color:var(--mist); cursor:pointer; transition:background .15s,color .15s; }
.view-toggle-btn:not(:last-child) { border-right:1px solid var(--edge); }
.view-toggle-btn:hover { color:var(--text); }
.view-toggle-btn.active { background:var(--amber); color:#fff; }

.tab-toggle { display:flex; border:1px solid var(--edge); border-radius:8px; overflow:hidden; flex-shrink:0; }
.tab-toggle-btn { display:flex; align-items:center; padding:0 16px; height:36px; font-size:.82rem; font-weight:600; white-space:nowrap; background:var(--ink-3); border:none; color:var(--mist); cursor:pointer; transition:background .15s,color .15s; }
.tab-toggle-btn:not(:last-child) { border-right:1px solid var(--edge); }
.tab-toggle-btn:hover { color:var(--text); }
.tab-toggle-btn.active { background:var(--amber); color:#fff; }

.tab-btn.active { background:var(--amber); color:#fff; border-color:var(--amber); }
.grp-block { border:1px solid var(--edge); border-radius:var(--radius-sm); margin-bottom:12px; overflow:hidden; background:var(--ink-3); }
.grp-head { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; user-select:none; }
.grp-head:hover { background:var(--ink-4); }
.grp-head .grp-caret { transition:transform .15s; color:var(--mist); flex-shrink:0; }
.grp-block.open .grp-head .grp-caret { transform:rotate(90deg); }
.grp-title { font-weight:600; color:var(--text); font-size:.88rem; }
.grp-count { font-size:.72rem; color:var(--mist); font-family:var(--font-mono); }
.grp-body { display:none; border-top:1px solid var(--edge); }
.grp-block.open .grp-body { display:block; }
.grp-item-row { display:flex; align-items:center; gap:10px; padding:9px 16px 9px 40px; border-top:1px solid var(--edge); font-size:.82rem; }
.grp-item-row:first-child { border-top:none; }
.grp-item-row:hover { background:var(--ink-4); }
.grp-item-name { flex:1; cursor:pointer; color:#dfe4ee; }
.grp-item-trash { cursor:pointer; color:var(--mist); font-size:.85rem; padding:2px 6px; }
.grp-item-trash:hover { color:var(--alert); }
.grp-item-buy { cursor:pointer; color:var(--amber); font-size:.72rem; padding:4px 10px; border:1px solid var(--amber); border-radius:6px; white-space:nowrap; flex-shrink:0; }
.grp-item-buy:hover { background:var(--amber); color:#fff; }

/* Herramientas — vista de lista */
.tools-list { display:flex; flex-direction:column; gap:8px; }
.tool-row {
  display:flex; align-items:center; gap:14px; background:var(--ink-3); border:1px solid var(--edge);
  border-radius:10px; padding:10px 14px; cursor:pointer; transition:border-color .15s;
}
.tool-row:hover { border-color:var(--amber-dim); }
.tool-row-photo {
  width:48px; height:48px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--ink-4);
  display:flex; align-items:center; justify-content:center; color:var(--mist);
}
.tool-row-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.tool-row-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.tool-row-status.disponible { background:var(--ok); }
.tool-row-status.dañada     { background:var(--alert); }
.tool-row-status.reparacion { background:var(--info); }
.tool-row-status.baja       { background:var(--mist); }
.tool-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tool-row-name-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tool-row-name { font-weight:700; color:var(--text); font-size:.87rem; }
.tool-row-inv { font-family:var(--font-mono); font-size:.72rem; color:var(--amber); font-weight:600; }
.tool-row-meta { font-size:.73rem; color:var(--mist); display:flex; gap:10px; flex-wrap:wrap; }
.tool-row-lent { font-size:.72rem; color:var(--warn); }
.tool-row-actions { display:flex; gap:6px; flex-shrink:0; }
.tool-row-actions .btn { white-space:nowrap; }


/* ── Presupuesto ── */
.pres-card {
  background:var(--ink-3); border:1px solid var(--edge); border-radius:var(--radius-md);
  margin-bottom:14px; overflow:visible;
}
.pres-card-head {
  display:flex; align-items:center; gap:14px; padding:16px 20px;
  border-bottom:1px solid var(--edge); cursor:pointer;
}
.pres-total {
  font-family:var(--font-body); font-size:1.4rem; font-weight:800; color:var(--amber);
}

/* Línea de presupuesto */
.pres-line-row {
  display:grid; grid-template-columns:2fr 80px 100px 90px 36px;
  gap:8px; align-items:center; margin-bottom:8px;
}
.pres-line-row input { font-size:.82rem; }

/* ══════════════════════════════════════════════════════════════
   OVERLAY DE IMPRESIÓN
══════════════════════════════════════════════════════════════ */
#print-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,12,16,.97);
  z-index: 9900;
  overflow-y: auto;
  padding: 0;
}

/* La barra vive pegada al borde superior del overlay (sin hueco arriba).
   Mismo diseño (fondo negro + acento naranja) que el editor de "Nuevo
   Reporte" (.rdp-toolbar dentro de #modal-new-reporte), para que Ver/
   Imprimir se vea consistente con crear/editar en vez del look viejo. */
.print-toolbar {
  position: sticky;
  top: 0;
  z-index: 9910;
  background: var(--k5doc-ink);
  color: #fff;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.print-toolbar h3 {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.print-toolbar h3::before {
  content: 'K5';
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--k5doc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  font-family: var(--font-body);
}
.print-toolbar .print-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.print-toolbar .print-toolbar-actions .btn {
  flex: 1 1 auto;
  white-space: nowrap;
  text-align: center;
}
.print-toolbar .print-toolbar-actions .btn-ghost {
  background: rgba(255,255,255,.12);
  color: #eee;
  border: none;
}
.print-toolbar .print-toolbar-actions .btn-ghost:hover {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.print-toolbar .print-toolbar-actions .btn-primary {
  background: var(--k5doc-accent);
}
.print-toolbar .print-toolbar-actions .btn-primary:hover {
  background: var(--k5doc-accent-dark);
}

/* El contenido del documento lleva su propio respiro,
   separado de la barra que se queda pegada arriba. */
.print-overlay-body {
  padding: 28px 24px 40px;
}



/* ── Documento en blanco ──────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap');

.pdoc {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 32px;
  background: #fff;
  color: #1a1a2e;
  font-family: 'Inter', sans-serif;
  font-size: 10pt;
  line-height: 1.5;
  position: relative;
  box-shadow: 0 12px 60px rgba(13,148,136,.18);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  page-break-after: always;
  break-after: page;
}
/* El último .pdoc no debe forzar una hoja extra después (aplica siempre,
   no solo en @media print, para que html2pdf/html2canvas también lo respete) */
.pdoc:last-child { page-break-after: auto !important; break-after: auto !important; }
.pdoc-section    { page-break-inside: avoid; break-inside: avoid; }
.pdoc-rep-item   { page-break-inside: avoid; break-inside: avoid; }
.pdoc-header     { page-break-inside: avoid; break-inside: avoid; }
.pdoc-footer     { page-break-inside: avoid; break-inside: avoid; page-break-before: avoid; break-before: avoid; }
.pdoc-accent-bot { page-break-before: avoid; break-before: avoid; }
.pdoc img        { page-break-inside: avoid; break-inside: avoid; max-width:100%; }

/* ── Paginación automática tipo Word: ningún bloque se corte a la mitad ── */
.pdoc {
  orphans: 3;
  widows: 3;
}
.pdoc-meta,
.pdoc-meta-block,
.pdoc-work-bar,
.pdoc-totals,
.pdoc-totals-box,
.pdoc-sigs,
.pdoc-sig-block,
.pdoc-terms,
.pdoc-notes,
.pdoc-rep-period,
.pdoc-rep-sum-box {
  page-break-inside: avoid;
  break-inside: avoid;
}
.pdoc-table tr {
  page-break-inside: avoid;
  break-inside: avoid;
}
/* El encabezado de una sección no debe quedar solo al final de una hoja */
.pdoc-section-hd {
  page-break-after: avoid;
  break-after: avoid;
}
/* Las listas/tablas largas SÍ pueden fluir entre hojas (solo se evita
   cortar cada fila/ítem individual, no el bloque completo) */
.pdoc-table,
.pdoc-rep-summary,
#print-doc {
  page-break-inside: auto;
  break-inside: auto;
}

/* ── Historial de seguimientos: la sección completa y la tarjeta de
   texto de cada seguimiento SÍ pueden fluir/partirse entre hojas — lo
   único que nunca se corta es un bloque de texto (folio+descripción+
   datos). La evidencia fotográfica es distinta a propósito: cada grupo
   de fotos (.pdoc-evidencia-hoja) es SIEMPRE un bloque fijo de 3x3 (9
   fotos, en 3 filas de 3) y se trata como ATÓMICO — o entra completo en
   lo que queda de la hoja actual, o salta completo a una hoja nueva.
   Nunca se reparte para "llenar" el espacio disponible: así la hoja
   nunca se corrompe ni se distorsiona, igual que en el diseño de
   referencia (index15). */
.pdoc-section-historial,
.pdoc-seg-card {
  page-break-inside: auto !important;
  break-inside: auto !important;
}
.pdoc-seg-card-info {
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: avoid;
  break-after: avoid;
}
.pdoc-evidencia-hoja {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}
.pdoc-evidencia-label {
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: avoid;
  break-after: avoid;
}
.pdoc-evidencia-grid {
  display: block;
}
/* Cada fila es de hasta 3 fotos (3x3 por hoja de evidencia). */
.pdoc-evidencia-row {
  display: flex;
  gap: 0 2.25%;
  margin-bottom: 8px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.pdoc-evidencia-row:last-child {
  margin-bottom: 0;
}
.pdoc-evidencia-item {
  width: 31.5%;
  page-break-inside: avoid;
  break-inside: avoid;
}
.pdoc-accent-top {
  height: 6px;
  background: #a84710;
}
.pdoc-accent-bot {
  height: 4px;
  background: #a84710;
}
/* En la vista previa paginada (.pdoc-page), la barra superior y el marco
   inferior completo (número de hoja + línea azul + pie de página) son
   "marco" fijo de cada hoja: van pegados a los bordes de CADA hoja
   generada, sin moverse con el contenido ni dejar huecos. Se agregan
   aparte a cada hoja en repaginarVistaPrevia() (no participan del
   reparto normal de contenido). */
.pdoc-page > .pdoc-accent-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
}
.pdoc-page-bottom-chrome {
  position: absolute;
  left: 0; right: 0; bottom: 0;
}
.pdoc-page-bottom-chrome .pdoc-page-number {
  position: static;
  text-align: right;
  padding: 0 14mm 5px;
}
.pdoc-page-bottom-chrome .pdoc-accent-bot {
  height: 4px;
}
.pdoc-page-bottom-chrome .pdoc-footer {
  margin: 0;
}

/* ── Paginación real de vista previa en pantalla (hojas A4 tipo Word) ──
   El documento "fuente" (.pdoc-source) se queda completo, sin recortar,
   posicionado fuera de pantalla — es lo que usan imprimir/PDF, intacto.
   La vista previa visible (.pdoc-preview) se arma aparte con .pdoc-page,
   clonando los bloques del documento fuente ya repartidos en hojas. */
.pdoc-source {
  position: fixed;
  left: -99999px;
  top: 0;
  z-index: -1;
}
.pdoc-page {
  width: 210mm;
  /* FIX: antes esto medía EXACTO 297mm — igual que el alto de hoja que usa
     el generador de PDF (html2pdf/jsPDF). Cuando el contenido mide justo
     el alto completo de una hoja, un error de redondeo de esa librería
     agrega una hoja EXTRA en blanco al final (confirmado generando el PDF
     real). Restamos un margen de seguridad para que la hoja siempre quede
     un poquito por debajo del alto exacto de página y así nunca dispare
     ese bug. La diferencia sigue siendo invisible a simple vista.
     NOTA: en Visita bastaba con 2px, pero en Reportes (otro tamaño de
     contenido/fotos) ese margen resultó insuficiente y seguía saliendo la
     hoja extra en blanco al imprimir/descargar PDF aunque la vista previa
     mostrara solo 1 hoja. Se sube a 1.5mm (~3 veces más margen) para
     cubrir ambos casos con margen de sobra. */
  height: calc(297mm - 1.5mm);
  margin: 0 auto 32px;
  background: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 60px rgba(13,148,136,.18);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pdoc-page-number {
  font-size: 7pt;
  font-family: 'JetBrains Mono', monospace;
  color: #9ca3af;
}

/* header */
.pdoc-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  padding: 24px 36px 16px;
  border-bottom: 2.5px solid #1a1a2e;
  position: relative;
}
.pdoc-header::after {
  content: "";
  position: absolute;
  left: 36px; right: 36px; bottom: -4px;
  height: 1px;
  background: #d9631e;
}
.pdoc-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 22pt;
  font-weight: 900;
  color: #1a1a2e;
  letter-spacing: -.02em;
  line-height: 1;
}
.pdoc-brand-name span { color: #d9631e; }
.pdoc-brand-sub {
  font-size: 7.5pt;
  color: #6b7280;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 3px;
}
.pdoc-brand-contact {
  margin-top: 10px;
  font-size: 8pt;
  color: #6b7280;
  line-height: 1.7;
}
.pdoc-quote-box {
  text-align: right;
  padding: 10px 18px;
  border: 1px solid #e5e0d8;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffaf3, #fff);
}
.pdoc-quote-label {
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6b7280;
}
.pdoc-quote-num {
  font-family: 'Playfair Display', serif;
  font-size: 21pt;
  font-weight: 900;
  color: #c9791a;
  line-height: 1.15;
  letter-spacing: .01em;
}
.pdoc-quote-date { font-size: 8pt; color: #6b7280; margin-top: 5px; }
.pdoc-status-chip {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pdoc-status-chip.pendiente { background:#fef3c7;color:#92400e;border:1px solid #fbbf24; }
.pdoc-status-chip.aceptado  { background:#d1fae5;color:#065f46;border:1px solid #34d399; }
.pdoc-status-chip.rechazado { background:#fee2e2;color:#991b1b;border:1px solid #f87171; }
.pdoc-status-chip.terminado { background:#e5e7eb;color:#374151;border:1px solid #9ca3af; }

/* meta grid */
.pdoc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 36px 0;
  border: 1.5px solid #1a1a2e;
  border-radius: 4px;
  overflow: hidden;
}
.pdoc-meta-block { padding: 14px 18px; }
.pdoc-meta-block:first-child { border-right: 1.5px solid #1a1a2e; }
.pdoc-title {
  font-family: 'Playfair Display', serif;
  font-size: 16pt;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.35;
  margin-top: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ece7df;
}
.pdoc-meta-title {
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e5e7eb;
}
.pdoc-meta-row { display: flex; justify-content: space-between; margin-bottom: 3px; }
.pdoc-meta-key { font-size: 8pt; color: #6b7280; }
.pdoc-meta-val { font-size: 8.5pt; font-weight: 600; color: #1a1a2e; }

/* titulo trabajo */
.pdoc-work-bar {
  margin: 16px 36px 0;
  padding: 11px 18px;
  background: #1a5fa8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pdoc-work-label {
  font-size: 7pt;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e8a833;
  white-space: nowrap;
}
.pdoc-work-name {
  font-family: 'Playfair Display', serif;
  font-size: 13pt;
  font-weight: 700;
  color: #fff;
}

/* sección */
.pdoc-section { margin: 16px 36px 0; }
.pdoc-section-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  padding-left: 9px;
  border-left: 3px solid #d9631e;
}
.pdoc-section-hd-txt {
  font-family: 'Syne', sans-serif;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a84710;
}
.pdoc-section-hd-line { flex: 1; height: 1px; background: linear-gradient(90deg, #d8d2c7, transparent); }

/* tabla */
.pdoc-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.pdoc-table thead tr {
  background: #f8f9fa;
  border-top: 1.5px solid #1a1a2e;
  border-bottom: 1.5px solid #1a1a2e;
}
.pdoc-table th {
  padding: 7px 10px;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #374151;
  text-align: left;
}
.pdoc-table th:not(:first-child) { text-align: right; }
.pdoc-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #374151;
  vertical-align: middle;
}
.pdoc-table td:not(:first-child) { text-align: right; }
.pdoc-table tr:last-child td { border-bottom: none; }
.pdoc-table td.pdoc-desc { font-weight: 500; color: #1a1a2e; }
.pdoc-table td.pdoc-tool-name { font-size: 9.5pt; font-weight: 700; }

/* Encabezado de categoría del inventario de herramientas: barra azul cielo
   para que cada área quede claramente separada de la siguiente. */
.pdoc-section-hd-tools {
  justify-content: space-between;
  background: #eaf4fc;
  border: 1px solid #cfe6f7;
  border-radius: 5px;
  padding: 7px 12px;
  margin-bottom: 8px;
}
.pdoc-section-hd-tools .pdoc-section-hd-txt { color: #1a5fa8; }
.pdoc-table td.pdoc-amt  { font-weight: 700; color: #1a1a2e; font-variant-numeric: tabular-nums; }
.pdoc-table tbody tr:nth-child(even) { background: #fafafa; }

/* totales */
.pdoc-totals { display: flex; justify-content: flex-end; margin: 14px 36px 0; }
.pdoc-totals-box { width: 230px; border: 1.5px solid #1a1a2e; border-radius: 4px; overflow: hidden; }
.pdoc-total-row { display: flex; justify-content: space-between; padding: 7px 14px; border-bottom: 1px solid #e5e7eb; }
.pdoc-total-row:last-child { border-bottom: none; }
.pdoc-total-row.grand { background: #1a5fa8; }
.pdoc-total-key { font-size: 8pt; color: #6b7280; }
.pdoc-total-val { font-size: 9pt; font-weight: 700; color: #1a1a2e; font-variant-numeric: tabular-nums; }
.pdoc-total-row.grand .pdoc-total-key { color: #a0aab8; font-size: 8pt; letter-spacing: .1em; text-transform: uppercase; }
.pdoc-total-row.grand .pdoc-total-val { font-family: 'Playfair Display', serif; font-size: 14pt; color: #e8a833; }

/* notas */
.pdoc-notes {
  margin: 16px 36px 0;
  padding: 11px 16px;
  background: #f8f9fa;
  border-left: 3px solid #e8a833;
  border-radius: 0 4px 4px 0;
}
.pdoc-notes-title { font-size: 7.5pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; margin-bottom: 5px; }
.pdoc-notes-text  { font-size: 8.5pt; color: #374151; line-height: 1.6; white-space: pre-line; }

/* términos */
.pdoc-terms { margin: 16px 36px 0; padding-top: 12px; border-top: 1px dashed #d1d5db; }
.pdoc-terms-title { font-size: 7pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; margin-bottom: 7px; }
.pdoc-terms-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pdoc-term-item { display: flex; gap: 7px; }
.pdoc-term-num { font-size: 9pt; font-weight: 900; color: #e8a833; line-height: 1.2; flex-shrink: 0; min-width: 14px; }
.pdoc-term-txt  { font-size: 7.5pt; color: #6b7280; line-height: 1.5; }

/* firmas */
.pdoc-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 22px 36px 0; }
.pdoc-sig-block { display: flex; flex-direction: column; align-items: center; }
.pdoc-sig-space { height: 226px; display:flex; align-items:flex-end; justify-content:center; overflow:visible; }
.pdoc-sig-line  { width: 100%; height: 1px; background: #1a5fa8; margin-bottom: 5px; }
.pdoc-sig-name  { font-size: 8pt; font-weight: 700; color: #1a1a2e; }
.pdoc-sig-role  { font-size: 7pt; color: #6b7280; margin-top: 2px; }

/* Bloque de firmas arrastrable en la vista previa: se agarra de cualquier
   punto (ambas columnas se mueven juntas porque son un solo contenedor) y
   se suelta más arriba para ocupar el espacio en blanco de la hoja. */
.pdoc-sigs-draggable { cursor: grab; border-radius: 8px; transition: box-shadow .15s; touch-action: none; position: relative; }
.pdoc-sigs-draggable:hover { box-shadow: 0 0 0 2px rgba(26,95,168,.35); }
.pdoc-sigs-draggable::before {
  content: '⇕ Arrastra para reubicar';
  position: absolute;
  transform: translateY(-18px);
  font-size: 6.5pt;
  font-family: 'JetBrains Mono', monospace;
  color: #1a5fa8;
  background: #eaf1fb;
  padding: 1px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.pdoc-sigs-draggable:hover::before { opacity: 1; }
.pdoc-sigs-arrastrando { cursor: grabbing; opacity: .82; box-shadow: 0 0 0 2px #1a5fa8; z-index: 5; }
.pdoc-sigs-arrastrando::before { opacity: 0 !important; }

/* Tarjetas de seguimiento arrastrables en la vista previa: igual que el
   bloque de firmas, se pueden subir para ocupar el espacio en blanco que
   dejó la paginación automática. Solo se habilita cuando la tarjeta cabe
   completa en una sola hoja (si quedó partida entre dos hojas no hay una
   sola pieza que mover). */
.pdoc-tarjeta-draggable { cursor: grab; border-radius: 6px; transition: box-shadow .15s; touch-action: none; position: relative; }
.pdoc-tarjeta-draggable:hover { box-shadow: 0 0 0 2px rgba(26,95,168,.35); }
.pdoc-tarjeta-draggable::before {
  content: '⇕ Arrastra para reubicar';
  position: absolute;
  top: 0;
  right: 10px;
  transform: translateY(-18px);
  font-size: 6.5pt;
  font-family: 'JetBrains Mono', monospace;
  color: #1a5fa8;
  background: #eaf1fb;
  padding: 1px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
  z-index: 2;
}
.pdoc-tarjeta-draggable:hover::before { opacity: 1; }
.pdoc-tarjeta-arrastrando { cursor: grabbing; opacity: .82; box-shadow: 0 0 0 2px #1a5fa8; z-index: 5; }
.pdoc-tarjeta-arrastrando::before { opacity: 0 !important; }

/* footer del doc */
.pdoc-footer {
  margin: 18px 36px 0;
  padding: 10px 0;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 7pt;
  color: #9ca3af;
}
.pdoc-footer-chip {
  padding: 2px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  font-size: 7pt;
  color: #9ca3af;
}

/* ══════════ GENERADOR DE REPORTES — barra y panel de alcance ══════════ */
.rep-gen-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rep-period-tabs {
  display: flex; flex-wrap: wrap; background: var(--ink-4); border: 1px solid var(--edge);
  border-radius: var(--radius-sm); padding: 3px; gap: 2px;
}
.rep-period-tab {
  padding: 6px 14px; font-size: .78rem; font-weight: 600; color: var(--mist);
  border-radius: 6px; cursor: pointer; user-select: none; transition: all .15s;
  white-space: nowrap;
}
.rep-period-tab:hover { color: var(--text); }
.rep-period-tab.active { background: #1a5fa8; color: #fff; }

.plan-print-sel-list {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--edge); border-radius: var(--radius-sm);
  background: var(--ink-3);
}
.plan-print-sel-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-bottom: 1px solid var(--edge);
  cursor: pointer; transition: background .12s;
}
.plan-print-sel-row:last-child { border-bottom: none; }
.plan-print-sel-row:hover { background: var(--ink-4); }
.plan-print-sel-row input[type="checkbox"] { width: auto; flex-shrink: 0; }
.plan-print-sel-badge {
  width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink-4); border: 1px solid var(--edge); color: var(--mist);
  font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.plan-print-sel-badge:not(:empty) {
  background: var(--k5doc-accent, #d9631e); border-color: var(--k5doc-accent, #d9631e); color: #fff;
}
.plan-print-sel-title { font-size: .84rem; font-weight: 600; color: var(--text); }
.plan-print-sel-meta { font-size: .72rem; color: var(--mist); margin-top: 1px; }
.plan-print-sel-empty { padding: 18px; text-align: center; color: var(--mist); font-size: .8rem; }

.rep-scope-panel {
  margin-top: 14px; padding: 16px 18px; background: var(--ink-3);
  border: 1px solid var(--edge); border-radius: var(--radius-sm);
  display: none;
}
.rep-scope-panel.open { display: block; }
.rep-scope-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rep-scope-choice {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1.5px solid var(--edge); border-radius: var(--radius-sm);
  cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--mist);
  transition: all .15s; background: var(--ink-4);
}
.rep-scope-choice:hover { border-color: #1a5fa8; color: var(--text); }
.rep-scope-choice.active { border-color: #1a5fa8; background: rgba(26,95,168,.1); color: #1a5fa8; }
.rep-scope-choice input { display: none; }

/* Lista compacta de secciones — checkbox a la izquierda, una fila por sección */
.rep-sections-list {
  display: flex; flex-direction: column;
  margin-top: 10px; border: 1px solid var(--edge); border-radius: var(--radius-sm);
  background: var(--ink-4); overflow: hidden;
}
.rep-section-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  cursor: pointer; transition: background .12s; border-bottom: 1px solid var(--edge);
}
.rep-section-row:last-child { border-bottom: none; }
.rep-section-row:hover { background: rgba(26,95,168,.06); }
.rep-section-row input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: #1a5fa8; cursor: pointer; flex-shrink: 0;
}
.rep-section-row-label { font-size: .78rem; font-weight: 500; color: var(--text); }
.rep-section-row-count { font-size: .7rem; color: var(--mist); margin-left: auto; font-weight: 600; }
.rep-section-row.checked .rep-section-row-label { color: var(--text); }

.rep-section-master {
  background: var(--ink-3); padding: 8px 14px;
}
.rep-section-master .rep-section-row-label { font-weight: 700; font-size: .76rem; letter-spacing: .02em; text-transform: uppercase; color: var(--mist); }
.rep-section-divider { height: 1px; background: var(--edge); }

.rep-gen-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ── Checklist de materiales dentro de "Nuevo Trabajo" ── */
.task-mat-search { margin-bottom: 8px; }
.task-mat-list {
  display: flex; flex-direction: column; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--edge); border-radius: var(--radius-sm); background: var(--ink-4);
}
.task-mat-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--edge); transition: background .12s;
}
.task-mat-row:last-child { border-bottom: none; }
.task-mat-row:hover { background: rgba(26,95,168,.06); }
.task-mat-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: #1a5fa8; cursor: pointer; flex-shrink: 0; }
.task-mat-row-label { font-size: .78rem; font-weight: 500; color: var(--text); flex: 1; cursor: pointer; }
.task-mat-row-stock { font-size: .68rem; color: var(--mist); }
.task-mat-row-qty {
  width: 60px; font-size: .76rem; padding: 4px 6px; text-align: center;
  display: none;
}
.task-mat-row.checked .task-mat-row-qty { display: block; }
.task-mat-empty { padding: 16px; text-align: center; font-size: .76rem; color: var(--mist); }
.task-mat-quickadd { display: flex; gap: 8px; margin-top: 8px; }
.task-mat-quickadd input { flex: 1; font-size: .78rem; }
.task-mat-selected-count { font-size: .72rem; color: var(--amber); font-weight: 600; margin-left: 6px; }

/* ── Selección de materiales de stock para un trabajo de agenda ── */
.mat-select-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; margin-bottom: 14px; border-radius: var(--radius-sm);
  background: rgba(26,95,168,.1); border: 1px solid rgba(26,95,168,.3);
  font-size: .8rem; color: var(--text);
}
.mat-select-check {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; background: rgba(15,17,21,.6);
}
.mat-select-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: #1a5fa8; cursor: pointer; }
.mat-card.mat-card-selected, tr.mat-row-selected {
  outline: 2px solid var(--amber); outline-offset: -2px;
  background: rgba(41,84,163,.06);
}
.mat-select-qty-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px 12px; font-size: .72rem; color: var(--mist);
}
.mat-select-qty { width: 70px; font-size: .78rem; padding: 4px 6px; text-align: center; }
.mat-select-fab {
  display: none; align-items: center; gap: 14px;
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink-2); border: 1px solid var(--edge); border-radius: 999px;
  padding: 10px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 300;
  font-size: .8rem; color: var(--text);
}

/* ── Filtros del historial de agenda (día/semana/mes/rango + búsqueda) ── */
.hist-filter-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; background: var(--ink-2); border: 1px solid var(--edge);
  border-radius: var(--radius-md); margin-bottom: 12px;
}
.hist-filter-range { display: none; gap: 8px; align-items: center; }
.hist-filter-range input[type="date"] { font-size: .78rem; }
.hist-filter-search { min-width: 180px; flex: 1; font-size: .8rem; }
.hist-sel-toolbar {
  display: none; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--amber-glow); border: 1px solid var(--amber); border-radius: var(--radius-sm);
  margin-bottom: 10px; font-size: .78rem; color: var(--text);
}
.hist-mes-item-check { width: 15px; height: 15px; accent-color: #1a5fa8; cursor: pointer; margin-right: 10px; flex-shrink: 0; }
.hist-mes-item-mats { font-size: .7rem; color: var(--info); margin-top: 3px; }

.rep-summary-cards {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap: 12px; margin: 16px 0 4px;
}
.rep-summary-card {
  background: var(--ink-3); border: 1px solid var(--edge); border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.rep-summary-card .num { font-family: 'Syne',sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1; }
.rep-summary-card .lbl { font-size: .72rem; color: var(--mist); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* ══════════ DOCUMENTO IMPRIMIBLE DE REPORTE (.pdoc-rep, hereda paleta de .pdoc) ══════════ */
.pdoc-rep-period {
  margin: 20px 36px 0; padding: 12px 18px; background: #f0f5fa; border: 1px solid #d6e4f0;
  border-left: 3px solid #1a5fa8; border-radius: 6px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 8px; font-size: 8.5pt; color: #1a1a2e;
  box-shadow: 0 1px 3px rgba(26,95,168,.08);
}
.pdoc-rep-period b { color: #1a5fa8; font-weight: 700; }
.pdoc-rep-scope-tag {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 7pt;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: #1a1a2e; color: #e8a833;
}
.pdoc-rep-summary {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
  gap: 10px; margin: 14px 36px 0;
}
.pdoc-rep-sum-box {
  border: 1px solid #e5e7eb; border-radius: 4px; padding: 10px 12px; text-align: center;
}
.pdoc-rep-sum-num { font-size: 15pt; font-weight: 800; color: #1a5fa8; line-height: 1; }
.pdoc-rep-sum-lbl { font-size: 6.8pt; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }

.pdoc-rep-item {
  padding: 9px 0; border-bottom: 1px solid #f0f1f3; display: flex; gap: 12px; align-items: flex-start;
}
.pdoc-rep-item:last-child { border-bottom: none; }
.pdoc-rep-item-idx { font-size: 7pt; color: #9ca3af; min-width: 18px; padding-top: 1px; }
.pdoc-rep-item-body { flex: 1; }
.pdoc-rep-item-title { font-size: 8.5pt; font-weight: 600; color: #1a1a2e; }
.pdoc-rep-item-meta { font-size: 7pt; color: #6b7280; margin-top: 2px; }
.pdoc-rep-item-amt { font-size: 8.5pt; font-weight: 700; color: #1a1a2e; white-space: nowrap; }

.pdoc-rep-empty { padding: 12px 0; font-size: 8pt; color: #9ca3af; text-align: center; font-style: italic; }

.rep-attach-zone {
  margin-top: 10px; padding: 12px; border: 1.5px dashed var(--edge); border-radius: var(--radius-sm);
  cursor: pointer; text-align: center; font-size: .76rem; color: var(--mist); transition: all .15s;
}
.rep-attach-zone:hover { border-color: #1a5fa8; color: #1a5fa8; }
.rep-attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rep-attach-chip {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--ink-4);
  border: 1px solid var(--edge); border-radius: var(--radius-sm); font-size: .76rem; color: var(--text);
}
.rep-attach-chip .ext { font-size: .65rem; font-weight: 700; color: #1a5fa8; background: rgba(26,95,168,.12); padding: 1px 6px; border-radius: 4px; }
.rep-attach-chip .rm { margin-left: auto; cursor: pointer; color: var(--mist); }
.rep-attach-chip .rm:hover { color: #ef4444; }

/* ══════════ PRINT MEDIA ══════════ */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Ocultar TODO. #print-overlay NO es hijo directo de <body> (vive dentro
     de #app > #main), así que hay que ocultar todo el árbol y luego revelar
     explícitamente solo la cadena de ancestros del documento imprimible. */
  body * { display: none !important; }
  #app, #main, #print-overlay, #print-overlay * { display: revert !important; }

  /* Los ancestros del overlay tenían height:100vh / overflow:auto para la
     UI en pantalla — eso recortaría el documento a una sola hoja. Se
     neutraliza para que el contenido fluya libremente en varias hojas. */
  #app, #main {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #print-overlay {
    display: block !important;
    position: static !important;
    background: #fff !important;
    padding: 0 !important;
    overflow: visible !important;
    inset: auto !important;
    z-index: auto !important;
  }
  .print-toolbar,
  #print-overlay .print-toolbar { display: none !important; }
  #print-doc     { display: block !important; }

  /* FIX: .pdoc-source es un documento "crudo" viejo que quedó oculto en el
     DOM como resto de un enfoque anterior. Antes esta regla lo mostraba a
     él (y ocultaba la vista previa estática) durante la impresión — por
     eso aparecía "un segundo documento viejo" distinto al que se ve en
     pantalla. AHORA: lo que se imprime es SIEMPRE exactamente la vista
     previa estática y paginada (#pdocPreview) que el usuario ve en
     pantalla — nunca .pdoc-source. */
  #print-overlay .pdoc-source   { display: none !important; }
  #print-overlay .pdoc-preview  {
    display: block !important;
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  .pdoc-page {
    box-shadow: none !important;
    margin: 0 auto !important;
    page-break-after: always !important;
    break-after: page !important;
  }
  /* Última hoja no necesita salto después */
  .pdoc-page:last-child { page-break-after: auto !important; break-after: auto !important; }
}
@page { size: A4 portrait; margin: 0; }

/* ── Sistema card — diseño empresarial compacto ── */
.sistemas-cards-grid {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sistema-card {
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--edge);
  border-left: 4px solid var(--card-accent, var(--edge));
  border-radius:var(--radius-sm);
  padding:10px 16px;
  cursor:pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:16px;
}
.sistema-card::before { content:none; }
.sistema-card:hover {
  border-color: var(--card-accent, var(--text-sub));
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
}

.sistema-card-top {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex:1; min-width:0;
  margin-bottom:0;
}
.sistema-card-icon {
  width:26px; height:26px; flex-shrink:0;
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
  background: var(--ink-4);
  border: 1px solid var(--edge);
}
.sistema-card-head { flex:1; min-width:0; min-height:34px; }
.sistema-card-name {
  font-family:var(--font-body); font-weight:600; color:var(--text);
  font-size:.88rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.sistema-card-code {
  font-family:var(--font-mono); font-size:.64rem; color:var(--mist);
  letter-spacing:.02em; margin-top:2px;
}

.sistema-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.62rem; font-family:var(--font-mono); font-weight:600;
  color:var(--badge-color, var(--mist));
  background: transparent;
  border: 1px solid var(--badge-color, var(--edge));
  border-radius:3px; padding:3px 8px 3px 7px;
  white-space:nowrap; flex-shrink:0;
}
.sistema-badge::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--badge-color, var(--mist)); flex-shrink:0;
}

.sistema-card-stats {
  display:flex; gap:0;
  border-top:none;
  border-left:1px solid var(--edge);
  margin-top:0; padding-top:0;
  padding-left:16px;
  flex-shrink:0;
}
.sistema-stat {
  flex:none;
  width:72px;
  display:flex; flex-direction:column; gap:1px;
  font-size:.63rem; color:var(--mist);
  text-align:center;
  padding: 0 8px;
}
.sistema-stat:not(:last-child) { border-right:1px solid var(--edge); }
.sistema-stat strong {
  color:var(--text); font-family:var(--font-mono); font-weight:700;
  font-size:1.05rem; line-height:1;
}
.sistema-stat strong::after { content:' '; }
.sistema-stat.has-pending strong { color:var(--warn); }
.sistema-card-thumb { width:34px; height:34px; border-radius:6px; object-fit:cover; flex-shrink:0; border:1px solid var(--edge); }

/* Miniatura del sistema en lista/tarjetas: solo foto o placeholder neutro (sin icono/emoji) */
.sistema-card-noimg-sm {
  width: 34px; height: 34px; border-radius: 6px; flex-shrink: 0;
  background: var(--ink-4); border: 1px solid var(--edge);
  display: flex; align-items: center; justify-content: center;
  color: var(--mist);
}
.sistema-card-noimg-sm svg { width: 16px; height: 16px; }

/* Sistemas — vista de tarjetas (alterna a la vista de lista de arriba) */
.sistemas-cards-grid.view-card { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.sistema-card-2 {
  position:relative; background:var(--ink-2); border:1px solid var(--edge); border-radius:var(--radius-md);
  overflow:hidden; cursor:pointer; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow:0 1px 3px rgba(0,0,0,.05); display:flex; flex-direction:column;
}
.sistema-card-2:hover { border-color:var(--card-accent, var(--text-sub)); box-shadow:0 2px 10px rgba(0,0,0,.09); }
.sistema-card-2-status { height:3px; background:var(--card-accent, var(--edge)); flex-shrink:0; }
.sistema-card-2-img { width:100%; height:130px; object-fit:cover; display:block; background:var(--ink-4); }
.sistema-card-2-noimg { width:100%; height:130px; display:flex; align-items:center; justify-content:center; color:var(--mist); background:var(--ink-4); }
.sistema-card-2-noimg svg { width:34px; height:34px; }
.sistema-card-2-body { padding:12px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.sistema-card-2-name-row { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.sistema-card-2-name { font-weight:700; color:var(--text); font-size:.87rem; line-height:1.3; }
.sistema-card-2-code { font-family:var(--font-mono); font-size:.64rem; color:var(--mist); white-space:nowrap; flex-shrink:0; margin-top:2px; }
.sistema-card-2-stats { display:flex; gap:12px; font-size:.68rem; color:var(--mist); border-top:1px solid var(--edge); padding-top:8px; margin-top:2px; }
.sistema-card-2-stats strong { color:var(--text); font-family:var(--font-mono); font-weight:700; }

/* ── Tarjetas de ÁREAS (informativas, distintas a Sistemas) ── */
.areas-cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.area-card {
  position:relative;
  background:var(--ink-2);
  border:1px solid var(--edge);
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
}
.area-card:hover { border-color:var(--text-sub); box-shadow: 0 2px 10px rgba(0,0,0,.09); }
.area-card-img {
  width:100%; height:120px; object-fit:cover; display:block; background:var(--ink-4);
}
.area-card-noimg {
  width:100%; height:120px; display:flex; align-items:center; justify-content:center;
  background:var(--ink-4); color:var(--mist); font-size:.7rem; gap:6px;
}
.area-card-body { padding:12px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.area-card-name { font-family:var(--font-body); font-weight:600; color:var(--text); font-size:.9rem; }
.area-card-desc {
  font-size:.76rem; color:var(--mist); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.area-card-empty-desc { font-size:.76rem; color:var(--mist); font-style:italic; }

/* Áreas — vista de lista */
.areas-cards-grid.view-list { display:flex; flex-direction:column; gap:8px; }
.area-row {
  display:flex; align-items:center; gap:14px; background:var(--ink-2); border:1px solid var(--edge);
  border-radius:10px; padding:10px 14px; cursor:pointer; transition:border-color .15s;
}
.area-row:hover { border-color:var(--text-sub); }
.area-row-photo {
  width:48px; height:48px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--ink-4);
  display:flex; align-items:center; justify-content:center; color:var(--mist);
}
.area-row-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.area-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.area-row-name { font-weight:700; color:var(--text); font-size:.87rem; }
.area-row-desc { font-size:.76rem; color:var(--mist); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Materiales — vista de tarjetas */
.mat-cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; margin-bottom:20px; }
.mat-card {
  background:var(--ink-3); border:1px solid var(--edge); border-radius:var(--radius-md);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:border-color var(--dur) var(--ease); position:relative;
}
.mat-card:hover { border-color:var(--amber-dim); }
.mat-card-photo { width:100%; height:130px; background:var(--ink-4); overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--mist); flex-shrink:0; }
.mat-card-photo img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
.mat-card-info { flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.mat-card-name { font-weight:700; color:var(--text); font-size:.87rem; line-height:1.3; }
.mat-card-meta { font-size:.72rem; color:var(--mist); display:flex; gap:8px; flex-wrap:wrap; }
.mat-card-qty { font-family:var(--font-mono); font-weight:700; font-size:.9rem; }
.mat-card-actions { display:flex; gap:6px; flex-wrap:wrap; padding:10px 12px; border-top:1px solid var(--edge); }
.mat-card-actions .btn { flex:1 1 auto; white-space:nowrap; }

/* Compras — resumen de gasto por área/periodo */
.comp-summary-box {
  width:100%; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--ink-3); border:1px solid var(--edge); border-radius:var(--radius-md);
  padding:10px 14px;
}
.comp-summary-label { font-size:.78rem; color:var(--text-sub); font-weight:600; white-space:nowrap; }
.comp-summary-amount { font-size:.95rem; font-weight:700; color:var(--ok); margin-left:auto; white-space:nowrap; font-family:var(--font-mono); }
.comp-period-quick { display:flex; gap:4px; }
.comp-period-quick .btn.active { background:var(--amber); color:#fff; }

/* Compras — vista de tarjetas */
.comp-cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; margin-bottom:20px; }
.comp-card {
  background:var(--ink-3); border:1px solid var(--edge); border-radius:var(--radius-md);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:border-color var(--dur) var(--ease);
}
.comp-card:hover { border-color:var(--amber-dim); }
.comp-card-photo { width:100%; height:130px; background:var(--ink-4); overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--mist); flex-shrink:0; }
.comp-card-photo img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
.comp-card-info { flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.comp-card-desc { font-weight:700; color:var(--text); font-size:.87rem; line-height:1.3; }
.comp-card-meta { font-size:.72rem; color:var(--mist); display:flex; gap:8px; flex-wrap:wrap; }
.comp-card-actions { display:flex; gap:6px; flex-wrap:wrap; padding:10px 12px; border-top:1px solid var(--edge); }
.comp-card-actions .btn { flex:1 1 auto; white-space:nowrap; }
.comp-card-actions select { flex:1 1 100%; font-size:.75rem; padding:4px 6px; background:var(--ink-4); }

/* ── Historial full timeline ── */
.hist-timeline { display:flex; flex-direction:column; gap:0; }
.hist-item {
  display:grid; grid-template-columns:120px 1fr; gap:0;
  border-bottom:1px solid var(--edge); padding:14px 0;
}
.hist-item:last-child { border-bottom:none; }
.hist-time { font-family:var(--font-mono); font-size:.72rem; color:var(--mist); padding-top:2px; }
.hist-content { padding-left:20px; border-left:2px solid var(--edge); position:relative; }
.hist-content::before {
  content:''; position:absolute; left:-5px; top:6px;
  width:8px; height:8px; border-radius:50%;
  background:var(--amber); border:2px solid var(--ink-3);
}
.hist-action { font-size:.85rem; color:var(--text); font-weight:500; }
.hist-subject { font-size:.75rem; color:var(--mist); margin-top:2px; }

/* ── Buscador global results ── */
.search-results-panel {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--ink-2); border:1px solid var(--edge); border-radius:var(--radius-sm);
  z-index:500; max-height:360px; overflow-y:auto;
  box-shadow:0 8px 32px rgba(13,148,136,.12);
}
.search-results-panel::-webkit-scrollbar { width:4px; }
.search-results-panel::-webkit-scrollbar-thumb { background:var(--edge); }
.search-result-group { padding:8px 0; }
.search-result-group-title {
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mist); padding:4px 14px 2px;
}
.search-result-item {
  padding:8px 14px; cursor:pointer; display:flex; align-items:center; gap:10px;
  transition:background var(--dur) var(--ease);
}
.search-result-item:hover { background:var(--ink-4); }
.sri-icon { color:var(--amber); font-size:.9rem; flex-shrink:0; }
.sri-title { font-size:.83rem; color:var(--text); }
.sri-sub { font-size:.7rem; color:var(--mist); }

/* ── Empty state ── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:48px 20px; color:var(--mist); text-align:center;
}
.empty-state svg { opacity:.3; }
.empty-state p { font-size:.85rem; max-width:300px; }

/* ── Agenda page day tasks ── */
.day-task {
  background:var(--ink-4); border:1px solid var(--edge); border-radius:var(--radius-sm);
  padding:12px 14px; margin-bottom:10px; cursor:pointer; position:relative;
  transition:border-color var(--dur) var(--ease);
  border-left:3px solid var(--edge);
}
.day-task.high   { border-left-color:var(--alert); }
.day-task.medium { border-left-color:var(--warn); }
.day-task.low    { border-left-color:var(--info); }
.day-task.done   { border-left-color:var(--ok); opacity:.65; }
.dt-name { font-size:.85rem; color:var(--text); font-weight:500; margin-bottom:4px; }
.dt-meta { font-size:.72rem; color:var(--mist); display:flex; gap:10px; flex-wrap:wrap; }
.dt-check {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; border:2px solid var(--edge);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease); background:var(--ink-3);
}
.day-task.done .dt-check { background:var(--ok); border-color:var(--ok); }
.dt-row-actions {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:6px;
  background:var(--ink-4);
}
.dt-row-actions .dt-check { position:static; transform:none; }
.dt-icon-btn {
  width:24px; height:24px; border-radius:50%; border:1.5px solid var(--edge);
  background:var(--ink-2); color:var(--text-sub);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; padding:0;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dt-icon-btn svg { width:12px; height:12px; stroke:currentColor; }
.dt-icon-btn.dt-icon-edit:hover { background:rgba(77,166,255,.12); color:var(--info); border-color:var(--info); }
.dt-icon-btn.dt-icon-del:hover { background:rgba(232,80,80,.12); color:var(--alert); border-color:var(--alert); }
.day-task { padding-right: 92px; }
.agenda-panel-body.agenda-list-mode .day-task { padding-right: 130px; }
.day-tag {
  font-size:.65rem; font-family:var(--font-mono); padding:2px 8px; border-radius:12px;
}
.day-tag.today    { background:var(--amber-glow); color:var(--amber); }
.day-tag.tomorrow { background:rgba(77,166,255,.15); color:var(--info); }
.day-tag.urgent   { background:rgba(232,80,80,.15); color:var(--alert); }
.day-tag.late     { background:rgba(232,80,80,.1); color:var(--alert); }

/* ── Modal wide ── */
.modal-wide { width:740px; }

/* ─── RESPONSIVE LEVE ─────────────────────────────────────────── */



/* ════════════════════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════════════════════ */
#login-screen {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(226,130,47,.14), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(41,84,163,.28), transparent 50%),
    linear-gradient(160deg, var(--rail-bg-2), var(--rail-bg) 55%, #0d1420);
  padding: 20px;
}
#login-screen.hidden { display: none; }

/* ── Fondo animado con efecto 3D (formas flotantes + grid en perspectiva) ── */
.login-bg {
  position: absolute; inset: 0; overflow: hidden;
  perspective: 900px;
  pointer-events: none;
}
.login-bg-grid {
  position: absolute; inset: -20% -20%;
  background-image:
    linear-gradient(rgba(226,130,47,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,130,47,.10) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: rotateX(58deg) rotateZ(-8deg) translateY(0);
  transform-origin: center;
  animation: loginGridDrift 22s linear infinite;
  opacity: .55;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 78%);
}
@keyframes loginGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 108px 108px; }
}
.login-shape {
  position: absolute;
  width: 130px; height: 130px;
  background: linear-gradient(135deg, rgba(226,130,47,.55), rgba(226,130,47,0) 70%);
  border: 1.5px solid rgba(226,130,47,.35);
  transform: rotate(45deg) rotateX(0deg);
  transform-style: preserve-3d;
  border-radius: 22px;
  filter: blur(.2px);
  animation: loginShapeFloat 13s ease-in-out infinite;
}
.login-shape-1 { top: 8%;  left: 8%;  width: 150px; height: 150px; animation-duration: 15s; animation-delay: 0s; }
.login-shape-2 { bottom: 10%; right: 10%; width: 190px; height: 190px; border-color: rgba(41,84,163,.4); background: linear-gradient(135deg, rgba(41,84,163,.5), rgba(41,84,163,0) 70%); animation-duration: 19s; animation-delay: -4s; }
.login-shape-3 { top: 55%; left: 4%; width: 90px; height: 90px; animation-duration: 11s; animation-delay: -7s; }
.login-shape-4 { top: 14%; right: 16%; width: 70px; height: 70px; border-color: rgba(41,84,163,.4); background: linear-gradient(135deg, rgba(41,84,163,.45), rgba(41,84,163,0) 70%); animation-duration: 17s; animation-delay: -2s; }
.login-shape-5 { top: 40%; left: 42%; width: 60px; height: 60px; animation-duration: 21s; animation-delay: -9s; animation-name: loginShapeDriftA; }
.login-shape-6 { bottom: 30%; left: 20%; width: 110px; height: 110px; border-color: rgba(41,84,163,.4); background: linear-gradient(135deg, rgba(41,84,163,.5), rgba(41,84,163,0) 70%); animation-duration: 24s; animation-delay: -12s; animation-name: loginShapeDriftB; }
.login-shape-7 { top: 6%; right: 40%; width: 46px; height: 46px; animation-duration: 13s; animation-delay: -5s; }
.login-shape-8 { bottom: 6%; right: 30%; width: 130px; height: 130px; animation-duration: 26s; animation-delay: -15s; animation-name: loginShapeDriftA; }
.login-shape-9 { top: 68%; right: 6%; width: 80px; height: 80px; border-color: rgba(41,84,163,.4); background: linear-gradient(135deg, rgba(41,84,163,.45), rgba(41,84,163,0) 70%); animation-duration: 18s; animation-delay: -3s; animation-name: loginShapeDriftB; }
/* Rombos con recorrido amplio, cruzando buena parte de la pantalla (no solo temblando en su sitio) */
@keyframes loginShapeDriftA {
  0%   { transform: rotate(45deg) rotateX(0deg) rotateY(0deg) translate3d(0,0,0); }
  25%  { transform: rotate(58deg) rotateX(20deg) rotateY(-18deg) translate3d(8vw,-6vh,40px); }
  50%  { transform: rotate(38deg) rotateX(-16deg) rotateY(20deg) translate3d(-6vw,7vh,-30px); }
  75%  { transform: rotate(50deg) rotateX(14deg) rotateY(12deg) translate3d(5vw,9vh,25px); }
  100% { transform: rotate(45deg) rotateX(0deg) rotateY(0deg) translate3d(0,0,0); }
}
@keyframes loginShapeDriftB {
  0%   { transform: rotate(45deg) rotateX(0deg) rotateY(0deg) translate3d(0,0,0); }
  33%  { transform: rotate(30deg) rotateX(-18deg) rotateY(16deg) translate3d(-7vw,-8vh,-35px); }
  66%  { transform: rotate(60deg) rotateX(16deg) rotateY(-14deg) translate3d(7vw,6vh,35px); }
  100% { transform: rotate(45deg) rotateX(0deg) rotateY(0deg) translate3d(0,0,0); }
}
@keyframes loginShapeFloat {
  0%   { transform: rotate(45deg) rotateX(0deg) rotateY(0deg) translate3d(0,0,0); }
  25%  { transform: rotate(52deg) rotateX(18deg) rotateY(-14deg) translate3d(14px,-22px,30px); }
  50%  { transform: rotate(40deg) rotateX(-10deg) rotateY(16deg) translate3d(-10px,14px,-20px); }
  75%  { transform: rotate(48deg) rotateX(14deg) rotateY(10deg) translate3d(10px,20px,20px); }
  100% { transform: rotate(45deg) rotateX(0deg) rotateY(0deg) translate3d(0,0,0); }
}
.login-orb {
  position: absolute; border-radius: 50%;
  filter: blur(50px);
  opacity: .5;
  animation: loginOrbDrift 16s ease-in-out infinite;
}
.login-orb-1 { width: 320px; height: 320px; left: -80px; top: -60px; background: radial-gradient(circle, rgba(226,130,47,.55), transparent 65%); animation-duration: 18s; }
.login-orb-2 { width: 380px; height: 380px; right: -100px; bottom: -100px; background: radial-gradient(circle, rgba(41,84,163,.55), transparent 65%); animation-duration: 22s; animation-delay: -6s; }
@keyframes loginOrbDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(40px,-30px) scale(1.12); }
}

.login-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 380px;
  background: #ffffff;
  border-radius: 26px;
  padding: 0 34px 30px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.5),
    0 4px 14px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.06);
  text-align: center;
  animation: loginIn .35s var(--ease);
  overflow: hidden;
}
.login-card::before {
  content: "";
  display: block;
  height: 6px;
  margin: 0 -34px 34px;
  background: linear-gradient(90deg, var(--k5doc-accent,#d9631e), var(--amber,#2954a3));
}
.login-card::after {
  content: "";
  position: absolute; top: 6px; left: 0; right: 0; height: 130px;
  background: radial-gradient(120% 100% at 18% 0%, rgba(217,99,30,.10), transparent 60%),
              radial-gradient(120% 100% at 100% 0%, rgba(41,84,163,.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.login-card > * { position: relative; z-index: 1; }
@keyframes loginIn { from { opacity:0; transform: translateY(14px) scale(.98);} to { opacity:1; transform:none; } }
.login-logo-badge {
  width: 88px; height: 88px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px;
  background: linear-gradient(160deg, #fff, #f5f3ef);
  box-shadow: 0 10px 24px rgba(20,20,20,.14), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px #eee2d4;
}
.login-logo { height: 52px; width: auto; object-fit: contain; display:block; }
.login-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: 4px; letter-spacing: -.01em; }
.login-subtitle { font-size: .82rem; color: var(--text-sub); margin-bottom: 26px; }
.login-field { text-align: left; margin-bottom: 14px; }
.login-field label { display:block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--k5doc-accent-dark,#a84710); margin-bottom: 6px; }
.login-input-wrap { position: relative; display:flex; align-items:center; }
.login-input-wrap svg { position:absolute; left: 12px; width: 16px; height:16px; color: var(--mist); pointer-events:none; }
.login-input-wrap input {
  width: 100%; padding: .75rem .9rem .75rem 2.3rem; border-radius: 12px;
  border: 1.5px solid #e4e0d8; background: #faf9f6; font-size: .95rem;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.login-input-wrap input:focus { background: #fff; border-color: var(--k5doc-accent,#d9631e); box-shadow: 0 0 0 4px rgba(217,99,30,.12); }
.login-eye { position:absolute; right: 8px; width: 30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius: 8px; color: var(--mist); }
.login-eye:hover { background: var(--ink-4); color: var(--text); }
.pwd-field-wrap { position: relative; display:flex; align-items:center; }
.pwd-field-wrap input { padding-right: 2.4rem; }
.pwd-eye { position:absolute; right: 8px; width: 30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius: 8px; color: var(--mist); cursor:pointer; }
.pwd-eye:hover { background: var(--ink-4); color: var(--text); }
.login-btn {
  width: 100%; margin-top: 14px; padding: .85rem 1rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--k5doc-accent,#d9631e), var(--amber-dim,#1f3f7d));
  color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(217,99,30,.35);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(217,99,30,.45); }
.login-btn:active { transform: translateY(0); }
.login-error {
  margin-top: 12px; font-size: .82rem; color: #fff; background: var(--alert);
  border-radius: 10px; padding: .55rem .7rem; display:none; text-align:left;
}
.login-error.show { display:block; }
.login-users-hint { margin-top: 20px; font-size: .72rem; color: var(--mist); line-height:1.5; }
.login-powered { margin-top: 22px; font-size: .68rem; color: var(--mist); opacity:.8; }

/* ── Botón de modo noche ───────────────────────────────────────── */
.darkmode-toggle-btn {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; margin-left:10px;
  border:1px solid var(--edge); background: var(--ink-4); color: var(--text-sub);
  cursor:pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  flex-shrink:0;
}
.darkmode-toggle-btn:hover { background: var(--amber-glow); color: var(--amber); border-color: var(--amber); }

/* ── Usuario en header + menú ─────────────────────────────────── */
.header-user { position: relative; display:flex; align-items:center; gap:9px; margin-left: 14px; padding-left:14px; border-left: 1.5px solid var(--edge); cursor:pointer; }
.header-user-avatar {
  width: 34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; color:#fff; background: linear-gradient(135deg, var(--amber), var(--amber-dim)); flex-shrink:0;
}
.header-user-name { font-size:.82rem; font-weight:700; color: var(--text); line-height:1.1; }
.header-user-role { font-size: .68rem; color: var(--text-sub); }
.header-user-menu {
  position:absolute; top: calc(100% + 8px); right:0; min-width: 210px;
  background:#fff; border:1px solid var(--edge); border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0,0,0,.16); padding:8px; display:none; z-index: 200;
}
.header-user-menu.open { display:block; }
.header-user-menu button {
  width:100%; text-align:left; padding:.55rem .7rem; border-radius:9px; font-size:.85rem; color: var(--text);
  display:flex; align-items:center; gap:8px;
}
.header-user-menu button:hover { background: var(--ink-4); }
.header-user-menu button.danger { color: var(--alert); }
.header-user-menu hr { border:none; border-top:1px solid var(--edge); margin:6px 2px; }

/* ── Solo lectura (usuario visita) ──────────────────────────────────
   El rol "visita" solo puede ABRIR y VER información (detalle, listas,
   imprimir, compartir, buscar/filtrar). No puede agregar, editar,
   guardar ni borrar nada, en ningún módulo.
   Se bloquea por PATRÓN en el atributo onclick/onchange (en vez de
   agregar una clase botón por botón) para que también cubra las
   tarjetas/botones que se generan dinámicamente con JS (Visitas,
   Reportes, Agenda, etc.) sin tener que tocar cada plantilla. Los
   botones "Cancelar"/"cerrar" (closeModal) quedan siempre exceptuados
   para poder salir de cualquier pantalla. ── */
body.role-readonly .no-visita,
body.role-readonly button[onclick*="nuevo" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="nueva" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="agregar" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="crear" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="guardar" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="save" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="editar" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="edit" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="delete" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="eliminar" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="confirmar" i]:not([onclick*="closeModal"]),
body.role-readonly button[onclick*="quickAdd" i],
body.role-readonly button[onclick*="addPres" i],
body.role-readonly button[onclick*="addEquipo" i],
body.role-readonly [onclick*="toggleDiaVisita"],
body.role-readonly span[onclick*="openNew" i],
body.role-readonly select[onchange*="Estado" i],
body.role-readonly select[onchange*="Status" i],
body.role-readonly .modal-overlay:not(#modal-change-password) input,
body.role-readonly .modal-overlay:not(#modal-change-password) select,
body.role-readonly .modal-overlay:not(#modal-change-password) textarea,
body.role-readonly .modal-overlay .photo-upload-zone
{ opacity:.45; filter: grayscale(.35); pointer-events:none; }