/* ─── Design tokens ─────────────────────────────────────────────────────── */
/* La marca manda: marino #0B2A4A, azul #0A8AF7 y turquesa #17A89E salen del
   logo. Hasta el 16/09/2026 el acento era un indigo con violeta que no estaba
   en ninguna parte de la marca y, con sus degradados y su resplandor, era la
   seña mas reconocible de una interfaz generada. El azul del logo se oscurece
   a #0969C7 porque el original da 3,3 a 1 sobre blanco y no se lee en texto.

   Forma: radio de 4 a 6 px, bordes de 1 px donde separan algo, y sombra solo
   en lo que flota. Nada de degradados ni de bandas de color en las tarjetas. */
:root {
  --sidebar-width: 236px;
  --topbar-height: 52px;

  --font-ui: "Archivo Variable", "Archivo", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --canvas: #EEF1F3;
  --surface: #FCFDFD;
  --surface-sunken: #F2F5F7;
  --surface-hover: #E6EBEF;
  --border: #D3D9DE;
  --border-strong: #BAC4CC;
  --text-1: #0E1A26;
  --text-2: #4A5866;
  --text-3: #667381;

  --accent: #0969C7;
  --accent-hover: #0A5AAB;
  --accent-2: #0C7A71;
  --accent-soft: #DDEBF9;
  --accent-soft-strong: #C2D9F2;
  /* El texto que va encima del acento. Blanco en claro; en oscuro el azul se
     aclara y el blanco encima se queda en 2,9 a 1, asi que va tinta oscura. */
  --accent-contrast: #FFFFFF;

  --success: #0C7A71;
  --success-soft: #D6EEEB;
  --warning: #9A5B00;
  --warning-soft: #F5E6CF;
  --danger: #B42318;
  --danger-soft: #F7DCD8;

  /* Tipo de trabajo. Medicion azul, montaje turquesa, arreglo ambar: los mismos
     tres que la agenda y la persiana. */
  --cat-montaje: #0C7A71; --cat-montaje-soft: #D6EEEB;
  --cat-arreglo: #9A5B00; --cat-arreglo-soft: #F5E6CF;
  --cat-medicion: #0969C7; --cat-medicion-soft: #DDEBF9;
  --cat-presupuesto: #3F5A76; --cat-presupuesto-soft: #E1E8EF;
  --cat-material: #7A5A2E; --cat-material-soft: #EFE6D8;

  --shadow-sm: none;
  --shadow-md: 0 1px 0 rgba(14,26,38,.04), 0 10px 28px -16px rgba(14,26,38,.22);
  --shadow-pop: 0 18px 44px -14px rgba(14,26,38,.32);
  --shadow-glow: none;
  --radius: 6px;
  --radius-sm: 4px;

  /* La persiana de estado. */
  --lama-hecha: #0C7A71;
  --lama-actual: #0969C7;
  --lama-vacia: #D3D9DE;

  /* compat: nombres antiguos usados en algún inline style suelto */
  --color-primary: var(--accent);
  --color-success: var(--success);
  --color-danger: var(--danger);
  --color-warning: var(--warning);
  --color-bg: var(--canvas);
  /* La barra lateral es el marino de la marca en los dos temas. */
  --color-sidebar: #0B2A4A;
  --color-sidebar-text: #B7C7D6;
  --color-sidebar-active: #fff;
  --color-card: var(--surface);
  --rail-linea: #1D3E60;
  --rail-hover: rgba(255,255,255,.07);
  --rail-marca: #35C2B3;

  /* Bootstrap lee sus propias variables: se le dan las de la marca para que sus
     componentes -enlaces, `bg-primary`, desplegables, modales, foco- no vuelvan
     a su azul ni a sus grises. */
  --bs-primary: #0969C7;
  --bs-primary-rgb: 9, 105, 199;
  --bs-link-color: #0969C7;
  --bs-link-color-rgb: 9, 105, 199;
  --bs-link-hover-color: #0A5AAB;
  --bs-link-hover-color-rgb: 10, 90, 171;
  --bs-body-font-family: var(--font-ui);
  --bs-font-monospace: var(--font-mono);
  --bs-body-bg: #FCFDFD;
  --bs-body-color: #0E1A26;
  --bs-emphasis-color: #0E1A26;
  --bs-secondary-color: #4A5866;
  --bs-tertiary-bg: #F2F5F7;
  --bs-border-color: #D3D9DE;
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;
  --bs-border-radius-xl: 6px;
  --bs-border-radius-pill: 4px;
  --bs-focus-ring-color: rgba(9, 105, 199, .25);
}

/* ─── Modo oscuro ────────────────────────────────────────────────────────
   Se cambian los tokens, no las reglas: como casi todo el CSS ya los usa, el
   tema entero cae de aquí. Lo que no se pintaba con tokens se corrige al final
   de este bloque.

   No es el claro invertido. En oscuro los grises altos deslumbran y los
   saturados vibran, así que las superficies suben poco a poco desde un negro
   azulado y los colores de estado se aclaran para que contrasten sin gritar.

   El tema lo pone un script en el <head> antes de pintar: aplicarlo desde el
   final de la página produce un fogonazo blanco en cada carga. */
:root[data-tema="oscuro"] {
  --canvas: #08111A;
  --surface: #0E1924;
  --surface-sunken: #0B151F;
  --surface-hover: #15232F;
  --border: #1E2D3B;
  --border-strong: #2C3E4F;
  --text-1: #E5ECF2;
  --text-2: #9AABBA;
  --text-3: #7A8C9C;

  --accent: #3D9BF5;
  --accent-hover: #62AEF7;
  --accent-2: #35C2B3;
  --accent-soft: #0E2A44;
  --accent-soft-strong: #16395A;
  --accent-contrast: #04121F;

  --success: #35C2B3;
  --success-soft: #0C2B2A;
  --warning: #E2A447;
  --warning-soft: #2C2010;
  --danger: #EF7F72;
  --danger-soft: #321816;

  --cat-montaje: #35C2B3; --cat-montaje-soft: #0C2B2A;
  --cat-arreglo: #E2A447; --cat-arreglo-soft: #2C2010;
  --cat-medicion: #3D9BF5; --cat-medicion-soft: #0E2A44;
  --cat-presupuesto: #8FA5B8; --cat-presupuesto-soft: #15232F;
  --cat-material: #C9A36B; --cat-material-soft: #2A2116;

  /* En oscuro la separacion la da el borde; la sombra solo en lo que flota. */
  --shadow-sm: none;
  --shadow-md: 0 1px 0 rgba(0,0,0,.3), 0 12px 30px -16px rgba(0,0,0,.7);
  --shadow-pop: 0 20px 48px -14px rgba(0,0,0,.75);
  --shadow-glow: none;

  --lama-hecha: #35C2B3;
  --lama-actual: #3D9BF5;
  --lama-vacia: #243545;

  --color-sidebar: #050F19;
  --color-sidebar-text: #8FA5B8;
  --color-sidebar-active: #fff;
  --rail-linea: #132535;
  --rail-hover: rgba(255,255,255,.05);

  --bs-primary: #3D9BF5;
  --bs-primary-rgb: 61, 155, 245;
  --bs-link-color: #3D9BF5;
  --bs-link-color-rgb: 61, 155, 245;
  --bs-link-hover-color: #62AEF7;
  --bs-link-hover-color-rgb: 98, 174, 247;
  --bs-body-bg: #0E1924;
  --bs-body-color: #E5ECF2;
  --bs-emphasis-color: #E5ECF2;
  --bs-secondary-color: #9AABBA;
  --bs-tertiary-bg: #0B151F;
  --bs-border-color: #1E2D3B;
  --bs-focus-ring-color: rgba(61, 155, 245, .3);
}

/* Lo que estaba escrito a mano y no seguía a los tokens. */
:root[data-tema="oscuro"] .topbar { background: var(--surface); }
:root[data-tema="oscuro"] img[src*="logo"] { filter: brightness(1.15); }

/* ─── Cabecera de tarjeta que despliega ──────────────────────────────────
   Para lo que se consulta de vez en cuando -el histórico- y no merece ocupar
   sitio siempre. Lo de uso diario NO se pliega: esconderlo tras un clic sólo
   añade trabajo.

   La flecha gira al abrir. Sin eso, la cabecera no dice si lo que hay debajo
   está abierto o cerrado, y se acaba pulsando dos veces para comprobarlo. */
.card-header.desplegable {
  cursor: pointer;
  transition: background .15s;
}
.card-header.desplegable:hover { background: var(--surface-hover) !important; }
.card-header.desplegable .bi-chevron-down { transition: transform .2s; }
.card-header.desplegable[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* ── Utilidades de Bootstrap que son claras POR DEFINICIÓN ────────────────
   `data-bs-theme` adapta las utilidades semánticas -`bg-body`, `text-body`- y
   los componentes, pero no éstas: `bg-white` significa blanco, y en un tema
   oscuro sigue siendo blanco. En estas plantillas hay 41 `bg-white`, 63
   `bg-light` y 46 `text-dark`, casi todas en cabeceras de tarjeta y de tabla,
   que era justo lo que quedaba como franjas blancas.

   Se traducen aquí en vez de recorrer veinticinco plantillas: así el día que
   se añada una pantalla nueva con `bg-white` tampoco se romperá. */
:root[data-tema="oscuro"] .bg-white { background-color: var(--surface) !important; }
:root[data-tema="oscuro"] .bg-light { background-color: var(--surface-sunken) !important; }

/* `text-dark` va casi siempre pegado a `bg-light` -en las insignias de conteo-,
   así que sin esto quedaría texto casi negro sobre fondo oscuro. */
:root[data-tema="oscuro"] .text-dark { color: var(--text-1) !important; }
:root[data-tema="oscuro"] .text-black-50 { color: var(--text-3) !important; }

/* `bg-dark` es la insignia de "cancelado": casi negra, que en tema claro se lee
   perfectamente y en oscuro desaparecía contra el fondo. Se aclara lo justo
   para que se distinga sin llamar más la atención que un estado activo. */
:root[data-tema="oscuro"] .badge.bg-dark {
  background-color: var(--surface-hover) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-strong);
}

:root[data-tema="oscuro"] .table-light,
:root[data-tema="oscuro"] .table > thead.table-light > tr > th {
  --bs-table-bg: var(--surface-sunken);
  --bs-table-color: var(--text-2);
  background-color: var(--surface-sunken) !important;
  color: var(--text-2) !important;
}

/* Las cabeceras de tabla llevan `bg-light` y heredaban el color del tema
   claro, que sobre fondo oscuro se leía a duras penas. */
:root[data-tema="oscuro"] thead.bg-light th,
:root[data-tema="oscuro"] .card-header.bg-white { color: var(--text-2); }

/* Bootstrap pinta el fondo de una fila de tabla con su propia variable; sin
   esto, al pasar por encima aparecía una banda clara. */
:root[data-tema="oscuro"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-1);
  --bs-table-hover-bg: var(--surface-hover);
  --bs-table-hover-color: var(--text-1);
  --bs-table-border-color: var(--border);
}

/* ─── Reset / Base ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: var(--font-ui);
  background: var(--canvas);
  color: var(--text-1);
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-ui); letter-spacing: -0.015em; }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* ─── Sidebar ───────────────────────────────────────────────────────────── */
/* El marino de la marca en los dos temas. La entrada activa no lleva un fondo
   en degradado sino una marca turquesa en el borde: se ve donde estas sin que
   el menu compita con la pagina. */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow-y: auto;
  border-right: 1px solid var(--rail-linea);
}

.sidebar-brand {
  padding: 16px 16px 12px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
}

.marca-sidebar {
  height: 24px;
  width: auto;
}

/* Con la barra plegada solo cabe el simbolo, asi que la imagen se recorta por
   la izquierda en vez de encogerse hasta ser ilegible. */
.sidebar.plegada .marca-sidebar,
.sidebar-mini .marca-sidebar {
  object-fit: cover;
  object-position: left center;
  width: 26px;
}

.empresa-badge {
  margin: 0 10px 8px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--rail-linea);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.3;
}

.empresa-badge small {
  color: var(--color-sidebar-text) !important;
  font-size: 9.5px !important;
  letter-spacing: .09em;
  margin-bottom: 2px;
}

.empresa-badge .badge {
  font-weight: 600;
  border-radius: 3px;
  background: rgba(255,255,255,.1) !important;
  color: var(--color-sidebar-text) !important;
}

.sidebar-nav {
  flex: 1;
  padding: 2px 10px;
}

.sidebar-nav .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  margin-bottom: 1px;
  color: var(--color-sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background .12s ease, color .12s ease;
}

.sidebar-nav .nav-link i {
  font-size: 14px;
  width: 16px;
  text-align: center;
  color: inherit;
  opacity: .8;
}

.sidebar-nav .nav-link:hover {
  color: #fff;
  background: var(--rail-hover);
}

.sidebar-nav .nav-link.active {
  color: #fff;
  background: var(--rail-hover);
  font-weight: 600;
}

.sidebar-nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--rail-marca);
  border-radius: 0 2px 2px 0;
}

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

.sidebar-nav .nav-link .badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 600;
  border-radius: 3px;
}

.nav-section {
  padding: 14px 10px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-sidebar-text);
  opacity: .7;
  text-transform: uppercase;
}

.sidebar-footer {
  padding: 10px;
  border-top: 1px solid var(--rail-linea);
}

/* Los botones de abajo van sobre el marino en los dos temas: con los colores
   de pagina se quedaban grises sobre azul oscuro, casi invisibles. */
.sidebar-footer .btn-outline-secondary {
  --bs-btn-color: var(--color-sidebar-text);
  --bs-btn-border-color: var(--rail-linea);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rail-hover);
  --bs-btn-hover-border-color: var(--rail-linea);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rail-hover);
  --bs-btn-active-border-color: var(--rail-linea);
  background: transparent;
}
.sidebar-footer .btn-outline-danger {
  --bs-btn-color: #F2A39A;
  --bs-btn-border-color: rgba(239,127,114,.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(239,127,114,.2);
  --bs-btn-hover-border-color: rgba(239,127,114,.5);
  background: transparent;
}

/* ─── Main Content ──────────────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Los botones de la barra, cuadrados e iguales: son iconos, no llamadas a la
   accion, y con el verde y el rojo de antes parecian semaforos. */
.topbar .btn-outline-secondary,
.topbar .btn-outline-success,
.topbar .btn-outline-danger {
  --bs-btn-color: var(--text-2);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--text-1);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-1);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-border-color: var(--border-strong);
  width: 32px;
  height: 32px;
  padding: 0;
}
.topbar .btn-outline-danger:hover { --bs-btn-hover-color: var(--danger); }
.topbar-usuario { font-size: 13px; color: var(--text-2); }
.topbar-fecha {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}

.page-content {
  padding: 24px 26px 48px;
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* Paginas que aprovechan la pantalla entera: los paneles. En un formulario el
   ancho limitado ayuda a leer; en un panel solo deja margenes vacios. */
.page-content.ancho-completo {
  max-width: none;
  padding: 16px 20px 20px;
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  background: var(--surface);
}

/* Barra superior de color por categoría (identidad visual de cada bloque).
   overflow:hidden solo en estas tarjetas (no en .card en general) para no recortar
   desplegables/menús que se abran dentro de otras tarjetas, como los filtros. */
.card.cat-montaje,
.card.cat-arreglo,
.card.cat-medicion,
.card.cat-presupuesto,
.card.cat-accent {
  overflow: hidden;
}
/* La franja de color de arriba se quita: una banda decorativa en cada
   tarjeta es justo lo que hacia que todo pareciera una plantilla. La categoria
   ya la dice el icono del titulo. */
.card.cat-montaje::before,
.card.cat-arreglo::before,
.card.cat-medicion::before,
.card.cat-presupuesto::before,
.card.cat-accent::before { content: none; }

/* Icono de color junto al título de cada tarjeta */
.card-title-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 3px; margin-right: 8px;
  font-size: 12px; vertical-align: middle;
}
.card-title-ico.ico-montaje    { background: var(--cat-montaje-soft); color: var(--cat-montaje); }
.card-title-ico.ico-arreglo    { background: var(--cat-arreglo-soft); color: var(--cat-arreglo); }
.card-title-ico.ico-medicion   { background: var(--cat-medicion-soft); color: var(--cat-medicion); }
.card-title-ico.ico-presupuesto{ background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); }
.card-title-ico.ico-accent     { background: var(--accent-soft); color: var(--accent); }
.card-title-ico.ico-slate      { background: var(--surface-sunken); color: var(--text-3); }

.card-header {
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-weight: 600;
  padding: 11px 16px;
  background: var(--surface);
}
.card-header h5, .card-header h6 { font-weight: 600; font-size: 13.5px; }

.card-body { padding: 16px; }

.stat-card {
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

/* Las cifras en la letra de las cifras: con numeros de ancho fijo, los importes
   de dos tarjetas vecinas se comparan de un vistazo. */
.stat-card .stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
  color: var(--text-1);
}

.stat-card .stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  /* `--text-3` daba 4,23 a 1 contra la superficie de la tarjeta en tema
     oscuro, por debajo del 4,5 de AA: en mayusculas y a 11px se leia mal.
     `--text-2` lo sube a 7,65 sin dejar de ser un texto secundario. */
  color: var(--text-2);
  /* El icono va posicionado en la esquina: sin este hueco, una etiqueta larga
     -"Llevado al banco", "Saldo caja chica"- se le mete debajo. */
  padding-right: 30px;
}

.stat-card .stat-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 13px;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.stat-bg-blue   .stat-icon { background: var(--cat-montaje-soft); color: var(--cat-montaje); }
.stat-bg-green  .stat-icon { background: var(--success-soft); color: var(--success); }
.stat-bg-red    .stat-icon { background: var(--danger-soft); color: var(--danger); }
.stat-bg-orange .stat-icon { background: var(--warning-soft); color: var(--warning); }
.stat-bg-purple .stat-icon { background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); }
/* ─── Rejilla de tarjetas de metrica ─────────────────────────────────────
 *
 * Todas del mismo tamaño y repartidas solas. Antes eran cuatro filas de
 * Bootstrap con anchos distintos -col-md-4, -2, -3, -2- y ninguna llenaba la
 * fila: la de dos tarjetas dejaba media fila vacia y cada bloque parecia ir por
 * su cuenta. Con `auto-fill` da igual cuantas tarjetas haya.
 *
 * El tamaño reducido va aqui dentro y no en `.stat-card`, que la comparten el
 * panel de inicio y contabilidad. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat-grid .stat-card { padding: 13px 15px; }

/* Dos lineas de alto siempre, aunque la etiqueta ocupe una. Sin esto,
   "Balance apertura" -que parte en dos- empuja su importe una linea mas abajo
   que el de la tarjeta de al lado, y la fila entera se ve descuadrada. */
.stat-grid .stat-label {
  min-height: 2.1em;
  line-height: 1.05;
  display: flex;
  align-items: flex-start;
}
.stat-grid .stat-value { font-size: 19px; }
.stat-grid .stat-icon { right: 10px; top: 10px; font-size: 12px; width: 24px; height: 24px; }

/* La segunda linea de una tarjeta: "en el mes", "acumulado". Mas pequeña que
   la etiqueta de arriba, para que no compitan. */
.stat-nota {
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  margin-top: 3px;
}

/* compat: las clases stat-bg-* ya no pintan el fondo entero de la tarjeta, solo el icono */
.stat-bg-teal   .stat-icon { background: var(--cat-medicion-soft); color: var(--cat-medicion); }
.stat-bg-slate  .stat-icon { background: var(--surface-hover); color: var(--text-2); }
.stat-bg-blue, .stat-bg-green, .stat-bg-red, .stat-bg-orange, .stat-bg-purple,
.stat-bg-teal, .stat-bg-slate { background: var(--surface); }
.bg-purple { background-color: var(--cat-presupuesto) !important; color: var(--accent-contrast) !important; }
.bg-brown  { background-color: var(--cat-material) !important; color: var(--accent-contrast) !important; }

/* Filas operaciones: acento lateral en la primera celda en vez del pastel plano de antes
   (box-shadow en <td>, no en <tr>, para que se pinte de forma fiable con border-collapse) */
/* Sin banda de color en el borde de la fila: el tipo ya lo dice su etiqueta,
   y el estado, la persiana. Se dejan las clases por si alguna plantilla las
   pone, pero no pintan nada. */
.fila-montaje td:first-child, .fila-arreglo td:first-child { box-shadow: none; }

/* El tipo de trabajo: un cuadrado de color y el nombre en tinta normal. Una
   pastilla de color entera por fila convertia la tabla en un arcoiris. */
.tipo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  background: none;
  color: var(--text-1);
}
.tipo-pill::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--text-3); flex: none; }
.tipo-pill.montaje::before { background: var(--cat-montaje); }
.tipo-pill.arreglo::before { background: var(--cat-arreglo); }
.tipo-pill.medicion::before { background: var(--cat-medicion); }

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table th {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  border-top: none;
  border-bottom: 1px solid var(--border);
  padding: 9px 12px;
  background: var(--surface-sunken);
}

.table td {
  font-size: 13px;
  vertical-align: middle;
  padding: 10px 12px;
  border-bottom-color: var(--border);
  font-variant-numeric: tabular-nums;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--surface-hover);
}

/* ─── Badges estado (mismo significado de siempre, colores refinados) ─────── */
/* Insignias rectas: una pastilla redonda en cada celda es lo que mas "plantilla"
   daba. El texto de las suaves se mezcla con la tinta para que se lea en los
   dos temas, no solo sobre blanco. */
.badge { font-weight: 600; border-radius: 3px; letter-spacing: 0.01em; padding: .34em .55em; }
.badge-pendiente  { background: var(--warning-soft); color: var(--warning); }
.badge-cobrada    { background: var(--success-soft); color: var(--success); }
.badge-pagada     { background: var(--success-soft); color: var(--success); }
.badge-vencida    { background: var(--danger-soft); color: var(--danger); }
.badge-cancelada  { background: var(--surface-sunken); color: var(--text-3); }
.badge-cancelado  { background: var(--surface-sunken); color: var(--text-3); }
.badge-en_curso   { background: var(--cat-montaje-soft); color: var(--cat-montaje); }
.badge-finalizado { background: var(--success-soft); color: var(--success); }
.badge-cobrado    { background: var(--success-soft); color: var(--success); }
.badge-pedido     { background: var(--warning-soft); color: var(--warning); }
.badge-recibido   { background: var(--success-soft); color: var(--success); }

.bg-primary { background-color: var(--accent) !important; color: var(--accent-contrast) !important; }
.bg-warning { background-color: var(--warning-soft) !important; color: color-mix(in srgb, var(--warning) 80%, var(--text-1)) !important; }
.bg-danger  { background-color: var(--danger-soft) !important; color: color-mix(in srgb, var(--danger) 85%, var(--text-1)) !important; }
.bg-success { background-color: var(--success-soft) !important; color: var(--success) !important; }
.bg-info    { background-color: var(--cat-montaje-soft) !important; color: var(--cat-montaje) !important; }
.bg-secondary { background-color: var(--surface-sunken) !important; color: var(--text-2) !important; }
.bg-dark    { background-color: var(--text-1) !important; color: var(--surface) !important; }
.bg-light   { background-color: var(--surface-sunken) !important; color: var(--text-2) !important; }

/* ─── Page header ────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  font-stretch: 112%;
  color: var(--text-1);
  margin: 0;
  letter-spacing: -0.02em;
}

/* ─── Botones ────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm); font-weight: 600; font-size: 13.5px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.btn-sm { border-radius: var(--radius-sm); font-size: 12.5px; }
.btn-xs { padding: 2px 9px; font-size: 11.5px; border-radius: 3px; }

/* Los botones de la columna "Acciones" de una lista.
 *
 * Sueltos dentro del <td> se acomodaban como podian: en una fila salian dos
 * arriba y uno abajo, en la siguiente dos y dos, y el mismo boton caia en un
 * sitio distinto en cada linea. Para dar a "borrar" habia que buscarlo.
 *
 * Ahora son CUATRO HUECOS FIJOS, siempre en el mismo orden y siempre del mismo
 * ancho. Cuando una accion no aplica -una factura ya cobrada no se cobra otra
 * vez- el hueco se queda vacio pero sigue ocupando sitio, que es lo que hace
 * que los de todas las filas queden en columna. */
.acciones-fila {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-end;
}
.acciones-fila > * { flex: 0 0 auto; margin: 0; }
.acciones-fila .hueco {
  /* El mismo ancho que un `.btn-xs` con un icono dentro. */
  width: 30px;
  min-height: 1px;
}
.acciones-fila .btn-xs { width: 30px; padding-left: 0; padding-right: 0; }
/* El <form> que envuelve el boton de borrar no debe contar como una caja mas. */
.acciones-fila form { display: contents; }

/* Botones por las variables de Bootstrap y no pisando `background`: asi el
   hover, el pulsado y el deshabilitado salen coherentes sin reglas sueltas. Un
   solo color lleno, el de la accion principal; lo demas, contorno. */
.btn-primary {
  --bs-btn-color: var(--accent-contrast);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-contrast);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--accent-contrast);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-color: var(--accent-contrast);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  box-shadow: none;
}
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--success) 85%, #000); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--success) 80%, #000);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--success); --bs-btn-disabled-border-color: var(--success);
}
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 85%, #000); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--danger) 80%, #000);
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger);
}
.btn-warning {
  --bs-btn-color: #fff; --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--warning) 85%, #000); --bs-btn-hover-border-color: transparent;
}
:root[data-tema="oscuro"] .btn-success,
:root[data-tema="oscuro"] .btn-danger,
:root[data-tema="oscuro"] .btn-warning { --bs-btn-color: #08111A; --bs-btn-hover-color: #08111A; --bs-btn-active-color: #08111A; --bs-btn-disabled-color: #08111A; }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger,
.btn-outline-warning, .btn-outline-info, .btn-outline-dark {
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--surface-hover);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-bg: var(--surface-hover);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--border);
}
.btn-outline-primary   { --bs-btn-color: var(--accent);  --bs-btn-hover-color: var(--accent);  --bs-btn-active-color: var(--accent);  --bs-btn-disabled-color: var(--accent); }
.btn-outline-secondary { --bs-btn-color: var(--text-2);  --bs-btn-hover-color: var(--text-1);  --bs-btn-active-color: var(--text-1);  --bs-btn-disabled-color: var(--text-3); }
.btn-outline-success   { --bs-btn-color: var(--success); --bs-btn-hover-color: var(--success); --bs-btn-active-color: var(--success); --bs-btn-disabled-color: var(--success); }
.btn-outline-danger    { --bs-btn-color: var(--danger);  --bs-btn-hover-color: var(--danger);  --bs-btn-active-color: var(--danger);  --bs-btn-disabled-color: var(--danger); }
.btn-outline-warning   { --bs-btn-color: var(--warning); --bs-btn-hover-color: var(--warning); --bs-btn-active-color: var(--warning); --bs-btn-disabled-color: var(--warning); }
.btn-outline-info      { --bs-btn-color: var(--accent-2); --bs-btn-hover-color: var(--accent-2); --bs-btn-active-color: var(--accent-2); --bs-btn-disabled-color: var(--accent-2); }
.btn-outline-dark      { --bs-btn-color: var(--text-1);  --bs-btn-hover-color: var(--text-1);  --bs-btn-active-color: var(--text-1);  --bs-btn-disabled-color: var(--text-3); }
.btn-outline-primary:hover { --bs-btn-hover-border-color: var(--accent); }
.btn-outline-danger:hover  { --bs-btn-hover-border-color: var(--danger); }
.btn-outline-success:hover { --bs-btn-hover-border-color: var(--success); }

/* ─── Alertas inline ─────────────────────────────────────────────────────── */
.alerta-box {
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: 11px 15px;
  margin-bottom: 8px;
  font-size: 13px;
}

.alerta-box.warning { border-color: var(--warning); background: var(--warning-soft); }
.alerta-box.danger  { border-color: var(--danger); background: var(--danger-soft); }
.alerta-box.info    { border-color: var(--accent); background: var(--accent-soft); }

.alert { border-radius: var(--radius-sm); border: 1px solid transparent; }
.alert-success { background: var(--success-soft); color: color-mix(in srgb, var(--success) 70%, var(--text-1)); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alert-danger  { background: var(--danger-soft);  color: color-mix(in srgb, var(--danger) 75%, var(--text-1));  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-warning { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 70%, var(--text-1)); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.alert-info    { background: var(--accent-soft);  color: color-mix(in srgb, var(--accent) 70%, var(--text-1));  border-color: var(--accent-soft-strong); }
.alert-secondary, .alert-light { background: var(--surface-sunken); color: var(--text-2); border-color: var(--border); }

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border-strong);
  background-color: var(--surface);
  font-size: 13.5px;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ─── Responsive sidebar ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.show {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
}

/* ─── Login page ─────────────────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  /* El marino de la marca con unas lamas horizontales apenas marcadas: lo
     unico decorativo de la app, y es el producto mismo. */
  background-color: #0B2A4A;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.022) 0 18px, transparent 18px 22px);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La tarjeta va sobre el degradado oscuro del wrapper en los dos temas, pero
   ella misma sigue al tema: con `#fff` fijo, en oscuro quedaba una tarjeta
   blanca con el titulo en `--text-1` -que en oscuro es casi blanco- y los
   campos de Bootstrap ya oscuros dentro. Ilegible y descosido. */
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 18px 50px rgba(2,10,20,0.35);
}

.login-card p {
  color: var(--text-2);
}

/* La marca de la pantalla de entrar. Van las dos versiones y el tema decide
   cual se ve: la tarjeta es `--surface`, o sea blanca o casi negra segun el
   tema, y el texto del logo tiene que contrastar con ella. */
.login-marca {
  width: 210px;
  max-width: 78%;
  height: auto;
}

.marca-en-oscuro { display: none; }

:root[data-tema="oscuro"] .marca-en-claro { display: none; }
:root[data-tema="oscuro"] .marca-en-oscuro { display: inline-block; }

.login-card h2 {
  font-size: 22px;
  font-weight: 700;
  font-stretch: 112%;
  color: var(--text-1);
}

/* ─── Ficha de operación: cabecera + tira de datos ──────────────────────── */
.op-hero {
  position: relative;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
}
.op-hero > * { position: relative; z-index: 1; }
.op-hero h1 {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-stretch: 116%;
}

.acciones-card { border: 1px solid var(--border); }
.btn-cta-primary {
  display: block; width: 100%; text-align: center;
  background: var(--accent);
  color: var(--accent-contrast); border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 10px 14px; font-weight: 600; font-size: 14px;
  box-shadow: none;
}
.btn-cta-primary:hover { color: var(--accent-contrast); background: var(--accent-hover); border-color: var(--accent-hover); }

/* Fila resumen clicable (presupuestos, etc.) que despliega el detalle */
[data-bs-toggle="collapse"].btn {
  border-radius: 0;
  color: var(--text-1);
  font-weight: 500;
}
[data-bs-toggle="collapse"].btn:hover { background: var(--surface-hover); }
[data-bs-toggle="collapse"].btn .bi-chevron-down {
  color: var(--text-3);
  transition: transform .15s ease;
}
[data-bs-toggle="collapse"].btn[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 3px;
  font-size: 12.5px;
  font-weight: 600;
}
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: currentColor; }
.status-pill.st-warning  { background: var(--warning-soft); color: var(--warning); }
.status-pill.st-purple   { background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); }
.status-pill.st-info     { background: var(--cat-montaje-soft); color: var(--cat-montaje); }
.status-pill.st-brown    { background: var(--cat-material-soft); color: var(--cat-material); }
.status-pill.st-success  { background: var(--success-soft); color: var(--success); }
.status-pill.st-danger   { background: var(--danger-soft); color: var(--danger); }
.status-pill.st-neutral  { background: var(--surface-sunken); color: var(--text-2); }
.status-pill.st-dark     { background: var(--text-1); color: var(--surface); }

.info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  margin-bottom: 20px;
  overflow: hidden;
}
.info-cell { padding: 14px 18px; border-right: 1px solid var(--border); min-width: 0; }
.info-cell:last-child { border-right: none; }
.info-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); margin-bottom: 5px; display: flex; align-items: center; gap: 6px;
}
.info-value { font-size: 13.5px; font-weight: 600; color: var(--text-1); }

.info-ico {
  width: 20px; height: 20px; border-radius: 3px; display: inline-flex;
  align-items: center; justify-content: center; flex: none; font-size: 11px;
}
.info-ico.ic-blue   { background: var(--cat-montaje-soft); color: var(--cat-montaje); }
.info-ico.ic-teal   { background: var(--cat-medicion-soft); color: var(--cat-medicion); }
.info-ico.ic-violet { background: var(--accent-soft); color: var(--accent-2); }
.info-ico.ic-pink   { background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); }
.info-ico.ic-slate  { background: var(--surface-sunken); color: var(--text-3); }

.op-crumb { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-bottom: 4px; }
.op-crumb span { color: var(--text-2); }

/* Botón "volver" de solo icono, a la izquierda de la cabecera */
.back-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); display: flex; align-items: center; justify-content: center;
  flex: none; margin-top: 2px;
}
.back-btn:hover { background: var(--surface-hover); color: var(--text-1); }
.info-value.muted { color: var(--text-3); font-weight: 500; }
@media (max-width: 900px) {
  .info-strip { grid-template-columns: repeat(2, 1fr); }
  .info-cell { border-bottom: 1px solid var(--border); }
}

/* ─── Panel de acciones agrupado ────────────────────────────────────────── */
.acciones-panel { display: flex; flex-direction: column; gap: 10px; }
.acciones-group { display: flex; flex-direction: column; gap: 6px; }
.acciones-group-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
  margin-top: 4px;
}
.acciones-row { display: flex; flex-direction: column; gap: 6px; }
.acciones-row .btn { width: 100%; }

/* Botones "chip" uniformes (Documentos / Operación): mismo aspecto para todos,
   el color solo vive en el icono, no en el botón entero */
.chip {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-1);
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.chip:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-1); text-decoration: none; }
.chip .chip-ico {
  width: 22px; height: 22px; border-radius: 3px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.chip-ico.doc { background: var(--cat-montaje-soft); color: var(--cat-montaje); }
.chip-ico.op  { background: var(--accent-soft); color: var(--accent-2); }
.chip .chip-meta { color: var(--text-3); font-weight: 600; }

/* ─── Historial tipo timeline ───────────────────────────────────────────── */
.tl-group-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin: 0 0 10px 32px;
}
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: flex; gap: 11px; position: relative; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before {
  content: ""; position: absolute; left: 10px; top: 22px; bottom: -2px; width: 1px; background: var(--border);
}
.tl-dot {
  width: 21px; height: 21px; border-radius: 50%; background: var(--surface-sunken); color: var(--text-2);
  display: flex; align-items: center; justify-content: center; flex: none; z-index: 1; font-size: 11px;
}
.tl-dot.tl-accent { background: var(--accent-soft); color: var(--accent); }
.tl-dot.tl-purple { background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); }
.tl-body { flex: 1; min-width: 0; padding-top: 1px; }
.tl-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.tl-time { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* ─── Fila de lista compacta (presupuestos, etc.) ───────────────────────── */
.list-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 13px 20px; border-bottom: 1px solid var(--border); background: none; border-left: none; border-right: none; border-top: none;
  cursor: pointer; color: var(--text-1); font-size: 13.5px; border-radius: 0;
}
.list-row:hover { background: var(--surface-hover); }
/* Fila que ya no se pulsa: sin mano ni resalte, para no prometer un clic. */
.list-row-fija { cursor: default; }
.list-row-fija:hover { background: none; }
.list-row .lr-code { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-1); }
.list-row .lr-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.list-row .lr-amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; margin-left: auto; color: var(--text-1); }
.list-row .bi-chevron-down { color: var(--text-3); }

/* ─── Calendario mensual (vista tipo Outlook) ───────────────────────────── */
.cal-grid-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border); background: var(--surface-sunken);
}
.cal-grid-head > div {
  padding: 8px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3); text-align: center;
}
.cal-grid-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  display: block; width: 100%; min-height: 108px; text-align: left; vertical-align: top;
  padding: 7px 8px; border: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-family: inherit;
}
.cal-grid-row > .cal-cell:last-child { border-right: none; }
.cal-cell:hover { background: var(--surface-hover); }
.cal-cell.cal-cell-muted { background: var(--surface-sunken); }
.cal-cell.cal-cell-muted .cal-cell-num { color: var(--text-3); }
.cal-cell.cal-cell-today { background: var(--accent-soft); }
.cal-cell-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 4px; border-radius: 3px;
  font-size: 12.5px; font-weight: 700; color: var(--text-1); margin-bottom: 4px;
}
.cal-cell.cal-cell-today .cal-cell-num { background: var(--accent); color: var(--accent-contrast); }
.cal-cell-events { display: flex; flex-direction: column; gap: 3px; }
.cal-ev-line {
  font-size: 11px; font-weight: 600; padding: 2px 5px; border-radius: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--border-strong); background: var(--surface-sunken); color: var(--text-2);
}
.cal-ev-line.ev-montaje { border-left-color: var(--cat-montaje); background: var(--cat-montaje-soft); color: var(--text-1); }
.cal-ev-line.ev-medicion { border-left-color: var(--cat-medicion); background: var(--cat-medicion-soft); color: var(--text-1); }
.cal-ev-line.ev-arreglo { border-left-color: var(--cat-arreglo); background: var(--cat-arreglo-soft); color: var(--text-1); }
.cal-ev-more { font-size: 10.5px; font-weight: 700; color: var(--text-3); padding: 0 5px; }
@media (max-width: 900px) {
  .cal-grid-head, .cal-grid-row { grid-template-columns: repeat(7, minmax(60px, 1fr)); }
}


/* ─── Campo lleno ────────────────────────────────────────────────────────────
   Cuando un campo llega a su limite deja de aceptar letras, y sin senal parece
   que el teclado se ha colgado. Un destello corto basta: un mensaje fijo por
   cada campo lleno seria mas ruido que ayuda. Lo pone `js/limites.js`. */
.campo-lleno {
  border-color: var(--warning) !important;
  box-shadow: 0 0 0 3px var(--warning-soft) !important;
  transition: box-shadow .12s ease-out, border-color .12s ease-out;
}


/* ─── Persiana de estado ─────────────────────────────────────────────────────
   Siete lamas, una por paso del trabajo (visita, presupuesto, aceptacion,
   material, montaje, cobro, cerrada). Las hechas en turquesa, la actual en
   azul, las que faltan en gris. Se lee de un vistazo en que punto esta cada
   operacion sin leer la etiqueta, y es lo que la empresa fabrica. El paso lo
   pone el filtro `paso_persiana`; 0 es cancelada y se queda todo en gris. */
.lamas {
  display: inline-grid;
  grid-template-rows: repeat(7, 2px);
  row-gap: 1.5px;
  width: 16px;
  flex: none;
  vertical-align: middle;
}
.lamas > i { display: block; background: var(--lama-vacia); border-radius: 0.5px; }
.lamas[data-paso="1"] > i:nth-child(-n+0),
.lamas[data-paso="2"] > i:nth-child(-n+1),
.lamas[data-paso="3"] > i:nth-child(-n+2),
.lamas[data-paso="4"] > i:nth-child(-n+3),
.lamas[data-paso="5"] > i:nth-child(-n+4),
.lamas[data-paso="6"] > i:nth-child(-n+5),
.lamas[data-paso="7"] > i:nth-child(-n+6) { background: var(--lama-hecha); }
.lamas[data-paso="1"] > i:nth-child(1),
.lamas[data-paso="2"] > i:nth-child(2),
.lamas[data-paso="3"] > i:nth-child(3),
.lamas[data-paso="4"] > i:nth-child(4),
.lamas[data-paso="5"] > i:nth-child(5),
.lamas[data-paso="6"] > i:nth-child(6) { background: var(--lama-actual); }
/* Cerrada: la ultima tambien hecha, no "en curso". */
.lamas[data-paso="7"] > i:nth-child(7) { background: var(--lama-hecha); }
.lamas-grande { grid-template-rows: repeat(7, 3px); row-gap: 2px; width: 22px; }
.con-persiana { display: inline-flex; align-items: center; gap: 8px; }