/* Base propia del ERP.
   No sobrescribe nada del admin de Django: por eso no necesita !important
   en ningún lado. Los colores salen de las variables que genera
   Configuracion.css_variables(), igual que el PDF, para que la identidad
   visual viva en un solo lugar. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--erp-font);
  font-size: var(--tamano-fuente, 14px);
  color: var(--erp-text);
  background: var(--erp-canvas);
  -webkit-font-smoothing: antialiased;
}

/* --- Cabecera --- */
/* --- Barra superior principal (compartida) ---
   La pintan las dos bases: el chrome del admin (#header, via el parcial
   _barra_principal.html que sobrescribe su bloque header) y base_erp.html.
   Vivia duplicada en erp_theme.css y en esta hoja con valores distintos; se
   unifico aqui porque app.css es la unica que cargan los dos mundos. */
#header,
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  height: 60px;
  background: var(--erp-surface);
  color: var(--erp-text);
  box-shadow: var(--erp-shadow-header);
  position: sticky;
  top: 0;
  z-index: 100;
}

#branding #site-name a,
.app-marca a {
  color: var(--erp-text);
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#branding #site-name a .logo,
.app-marca a .logo {
  height: 34px;
  width: auto;
  border-radius: 8px;
  background: var(--erp-surface);
  padding: 2px;
  box-shadow: var(--erp-shadow-logo);
}

.app-marca-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#branding .eslogan,
.app-marca .eslogan {
  font-size: 12px;
  font-weight: 400;
  color: var(--erp-text-subtle);
  margin-left: 4px;
  display: none;
}

#user-tools {
  color: var(--erp-text);
  padding: 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-usuario { color: var(--erp-text-secondary); white-space: nowrap; }
.app-usuario strong { color: var(--erp-text); }

#user-tools a {
  display: inline-flex;
  align-items: center;
  min-height: var(--erp-control-height);
  color: var(--erp-navy);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--erp-radius);
  text-decoration: none;
  transition: background .15s;
}

#user-tools a:hover { background: var(--erp-surface-hover); color: var(--erp-navy); }

#logout-form { margin: 0; }

#logout-form button {
  min-height: var(--erp-control-height);
  color: var(--erp-danger);
  background: var(--erp-danger-muted);
  border: none;
  padding: 6px 12px;
  border-radius: var(--erp-radius);
  font-weight: 600;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

#logout-form button:hover { background: var(--erp-danger-muted-hover); }

/* --- Boton de tema ---
   Tres iconos en el mismo boton; se muestra el del estado vigente. Sin el
   sprite SVG del admin, para que funcione tambien fuera de el. */
.erp-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  background: var(--erp-surface);
  color: var(--erp-text-secondary);
  cursor: pointer;
}

.erp-tema:hover { background: var(--erp-surface-hover); color: var(--erp-text); }

.erp-tema-icono {
  width: 18px;
  height: 18px;
  display: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.erp-tema-auto { fill: currentColor; stroke: none; }
html:not([data-theme]) .erp-tema-auto,
html[data-theme="auto"] .erp-tema-auto,
html[data-theme="light"] .erp-tema-claro,
html[data-theme="dark"] .erp-tema-oscuro { display: block; }

/* --- Barra secundaria: la navegacion del ERP ---
   Rellena con el color de marca para separarse de la principal, que es
   blanca. La tinta la calcula Configuracion segun el color configurado: con
   una marca clara el texto blanco no se leeria. */
.barra-secundaria {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 20px;
  background: var(--color-primario);
  color: var(--color-sobre-primario);
}

.barra-secundaria a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--color-sobre-primario);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.barra-secundaria a:hover {
  background: color-mix(in srgb, var(--color-sobre-primario) 14%, transparent);
  color: var(--color-sobre-primario);
}

.barra-secundaria a[aria-current] {
  font-weight: 700;
  border-bottom-color: var(--color-sobre-primario);
}

@media (max-width: 720px) {
  #header,
  .app-header { padding: 0 12px; gap: 8px; }

  #branding { min-width: 0; flex: 0 1 auto; overflow: hidden; }

  #branding #site-name a,
  .app-marca a { font-size: 15px; gap: 6px; min-width: 0; white-space: nowrap; }

  #branding #site-name a .logo,
  .app-marca a .logo { height: 26px; flex: 0 0 auto; }

  /* El saludo es lo primero que sobra cuando no cabe todo. */
  .app-usuario { display: none; }

  #user-tools { gap: 4px; flex: 0 0 auto; }

  #user-tools a,
  #logout-form button { font-size: 12px; padding: 5px 8px; }

  .barra-secundaria { padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; }
}

/* --- Contenido --- */
.app-main {
  width: min(100% - clamp(24px, 5vw, 56px), 1480px);
  min-height: calc(100vh - 104px);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 34px) 0 72px;
  background:
    radial-gradient(circle at 8% 0, color-mix(in srgb, var(--color-primario) 12%, transparent) 0, transparent 32%),
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--erp-teal) 10%, transparent) 0, transparent 28%);
}

.app-main a:focus-visible,
.app-main button:focus-visible,
.app-main input:focus-visible,
.app-main select:focus-visible,
.app-main textarea:focus-visible {
  outline: none;
  box-shadow: var(--erp-focus-ring);
}

.app-mensajes { list-style: none; padding: 0; margin: 0 0 16px; }

.app-mensajes li {
  padding: 10px 14px;
  border-radius: var(--erp-radius);
  margin-bottom: 8px;
  background: var(--erp-success-muted);
  border: 1px solid var(--erp-success);
  border-left-width: 5px;
  box-shadow: var(--erp-shadow-sm);
}

.app-mensajes li.error { background: var(--erp-danger-muted); border-color: var(--erp-danger-muted-hover); }

/* --- Componentes base ERP ---
   Estos nombres erp-* son el vocabulario estable para pantallas nuevas.
   Las clases historicas se mantienen como alias para no reescribir todo el
   ERP en un solo cambio visual. */
.erp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--erp-space-4);
  margin-bottom: var(--erp-space-5);
  padding-bottom: var(--erp-space-3);
  border-bottom: 1px solid var(--erp-border-subtle);
}

.erp-page-header h1,
.erp-page-header h2 {
  margin: 0;
  color: var(--erp-text-strong);
  letter-spacing: -.02em;
}

.erp-page-header p {
  margin: var(--erp-space-1) 0 0;
  color: var(--erp-text-subtle);
}

.erp-action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--erp-space-3);
  margin-bottom: var(--erp-space-4);
}

.erp-section {
  display: grid;
  gap: var(--erp-space-4);
  margin-bottom: var(--erp-space-5);
}

.erp-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.erp-timeline {
  display: grid;
  gap: var(--erp-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.erp-kanban {
  display: flex;
  align-items: flex-start;
  gap: var(--erp-space-4);
  overflow-x: auto;
  padding-bottom: var(--erp-space-3);
}

.erp-alert {
  padding: var(--erp-space-3) var(--erp-space-4);
  border: 1px solid var(--erp-border-subtle);
  border-left: 4px solid var(--erp-info);
  border-radius: var(--erp-radius-md);
  background: var(--erp-info-muted);
  color: var(--erp-text);
}

.erp-summary-panel {
  display: grid;
  gap: var(--erp-space-3);
  padding: var(--erp-space-4);
  border: 1px solid var(--erp-border-subtle);
  border-radius: var(--erp-radius-lg);
  background: var(--erp-surface-muted);
}

/* --- Tarjetas --- */
.erp-card,
.tarjeta {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--erp-surface) 92%, var(--color-primario)) 0%, var(--erp-surface) 42%);
  border: 1px solid color-mix(in srgb, var(--erp-border-subtle) 82%, var(--color-primario));
  border-radius: var(--erp-radius-xl);
  padding: var(--erp-space-5);
  margin-bottom: var(--erp-space-5);
  box-shadow: var(--erp-elevation-card);
}

.erp-card::before,
.tarjeta::before {
  content: "";
  display: block;
  height: 3px;
  margin: calc(var(--erp-space-5) * -1) calc(var(--erp-space-5) * -1) var(--erp-space-5);
  background: linear-gradient(90deg, var(--color-primario), var(--erp-teal), var(--color-secundario));
}

.erp-card h2,
.tarjeta h2 {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.25;
  color: var(--erp-text-strong);
}

/* --- Campos --- */
.erp-form-grid,
.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--erp-space-4);
}

.erp-field,
.campo { display: flex; flex-direction: column; gap: var(--erp-space-2); min-width: 0; }

.erp-field label,
.campo label { font-size: 12px; font-weight: 600; color: var(--erp-text-secondary); }

.erp-field input,
.erp-field select,
.erp-field textarea,
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--erp-border-control);
  border-radius: var(--erp-radius-md);
  font-size: 14px;
  font-family: inherit;
  background: var(--erp-field-bg);
  color: inherit;
  box-shadow: var(--erp-control-shadow);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.erp-field textarea,
.campo textarea { min-height: 80px; }

.erp-field input:hover,
.erp-field select:hover,
.erp-field textarea:hover,
.campo input:hover, .campo select:hover, .campo textarea:hover {
  background: var(--erp-field-bg-hover);
}

.erp-field input[type="date"],
.erp-field input[type="datetime-local"],
.campo input[type="date"],
.campo input[type="datetime-local"],
.tabla-lineas input[type="date"],
.tabla-lineas input[type="datetime-local"] {
  color-scheme: light;
}

html[data-theme="dark"] .erp-field input[type="date"],
html[data-theme="dark"] .erp-field input[type="datetime-local"],
html[data-theme="dark"] .campo input[type="date"],
html[data-theme="dark"] .campo input[type="datetime-local"],
html[data-theme="dark"] .tabla-lineas input[type="date"],
html[data-theme="dark"] .tabla-lineas input[type="datetime-local"] {
  color-scheme: dark;
}

.erp-field input:focus,
.erp-field select:focus,
.erp-field textarea:focus,
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--erp-copper);
  box-shadow: var(--erp-focus-ring);
}

.erp-field .error,
.campo .error { color: var(--erp-danger); font-size: 12px; }

@media (max-width: 767px) {
  .erp-form-grid,
  .campos { grid-template-columns: minmax(0, 1fr); }
}

/* --- Banda de pagina ---
   Dos marcados distintos, la misma banda: el admin emite
   <div class="titles-and-tools"> con el titulo y las acciones en todas sus
   vistas, y las pantallas propias envuelven lo mismo en
   <div class="encabezado-pantalla">. Van en DOS bloques de reglas
   separados a proposito, no en una sola lista separada por comas: una lista
   de selectores normal invalida la regla ENTERA si uno solo de sus
   miembros no esta soportado, y :has() es justo ese caso -Firefox/Safari
   antiguos no lo tienen-. Con la lista combinada, un navegador sin :has()
   se llevaba por delante tambien el layout de las 12 pantallas propias, que
   usan .encabezado-pantalla y no tienen nada que ver con :has(). Separadas,
   la banda del admin se degrada sola y la de las pantallas propias sigue
   en pie. */

/* Admin: el :has() no es decorativo. Django emite el contenedor aunque
   `title` este vacio -el login es justo ese caso-, y sin la guarda quedaria
   una franja de color hueca. Si el navegador no soporta :has(), esta regla
   se descarta entera y el admin vuelve al aspecto anterior, que es una
   degradacion aceptable. */
.titles-and-tools:has(.titles h1) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--color-primario);
  color: var(--color-sobre-primario);
  border-radius: var(--erp-radius-lg);
  padding: 18px 24px;
  margin-bottom: 20px;
  box-shadow: var(--erp-shadow-sm);
}

.titles-and-tools:has(.titles h1) .titles { min-width: 0; }

.titles-and-tools:has(.titles h1) h1 {
  color: var(--color-sobre-primario);
  margin: 0;
  padding: 0;
  border: none;
  font-size: 22px;
  font-weight: 800;
}

/* Linea de contexto. Sin opacity a proposito: rebajarla dejaria el texto por
   debajo del minimo legible y el contrato de contraste no lo detectaria,
   porque mide colores declarados, no capas. */
.titles-and-tools:has(.titles h1) h2 {
  color: var(--color-sobre-primario);
  margin: 4px 0 0;
  padding: 0;
  border: none;
  font-size: 13px;
  font-weight: 400;
}

/* La accion principal deja de ser un boton oscuro sobre fondo claro y pasa a
   ser claro sobre el relleno de marca, como el .hero-boton del dashboard. El
   par es el inverso exacto del de la banda, asi que su contraste ya esta
   garantizado por el mismo calculo. */
.titles-and-tools:has(.titles h1) .object-tools { margin: 0; padding: 0; }

.titles-and-tools:has(.titles h1) .object-tools a {
  background: var(--color-sobre-primario);
  color: var(--color-primario);
  box-shadow: var(--erp-shadow-button);
}

.titles-and-tools:has(.titles h1) .object-tools a:hover {
  background: var(--color-sobre-primario);
  color: var(--color-primario);
  box-shadow: var(--erp-shadow-button-hover);
}

/* Pantallas propias: mismo diseño, sin :has() -no lo necesita, el vacio de
   `.encabezado-pantalla` no es un caso real como el de Django-, asi que no
   depende de que el navegador lo soporte. */
.encabezado-pantalla {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--color-primario);
  color: var(--color-sobre-primario);
  border-radius: var(--erp-radius-lg);
  padding: 18px 24px;
  margin-bottom: 20px;
  box-shadow: var(--erp-shadow-sm);
}

.encabezado-pantalla .titles { min-width: 0; }

.encabezado-pantalla h1 {
  color: var(--color-sobre-primario);
  margin: 0;
  padding: 0;
  border: none;
  font-size: 22px;
  font-weight: 800;
}

.encabezado-pantalla h2 {
  color: var(--color-sobre-primario);
  margin: 4px 0 0;
  padding: 0;
  border: none;
  font-size: 13px;
  font-weight: 400;
}

.encabezado-pantalla p {
  color: var(--color-sobre-primario);
}

.encabezado-pantalla a:not(.boton) {
  color: var(--color-sobre-primario);
  font-weight: 700;
}

.encabezado-pantalla a:not(.boton):hover {
  color: var(--color-sobre-primario);
}

/* La accion principal de una pantalla propia es un <a class="boton"> (p.ej.
   "Descargar PDF" en ventas/cotizacion_editar.html), no un .object-tools del
   admin. .boton ya pinta fondo var(--color-primario) mas abajo en esta hoja
   -"--- Botones ---"-, y dentro de la banda ese fondo es el mismo que el de
   la banda: marca sobre marca, sin forma de boton. El mismo par invertido
   que .object-tools a, y con el mismo contraste ya garantizado. */
.encabezado-pantalla .boton {
  background: var(--color-sobre-primario);
  color: var(--color-primario);
  box-shadow: var(--erp-shadow-button);
}

.encabezado-pantalla .boton:hover {
  background: var(--color-sobre-primario);
  color: var(--color-primario);
  box-shadow: var(--erp-shadow-button-hover);
}

.aviso {
  background: var(--erp-attention-muted);
  border: 1px solid var(--erp-warning);
  border-radius: var(--erp-radius);
  padding: 12px 16px;
  margin-bottom: 20px;
}

/* --- Botones --- */
.boton, .boton-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: .01em;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
}

.boton {
  background: var(--color-primario);
  color: var(--color-sobre-primario);
  box-shadow: var(--erp-shadow-button);
}

.boton-secundario {
  background: var(--erp-surface);
  color: var(--erp-text);
  border-color: var(--erp-border-subtle);
}

.boton:hover, .boton-secundario:hover {
  transform: translateY(-1px);
  box-shadow: var(--erp-shadow-button-hover);
}

/* --- Tabla de líneas --- */
.tabla-lineas {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.tabla-lineas th {
  text-align: left;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--erp-text-subtle);
  padding: 10px 8px;
  background: var(--erp-surface-muted);
  border-bottom: 1px solid var(--erp-border-subtle);
}

.tabla-lineas td { padding: 10px 8px; vertical-align: top; }
.tabla-lineas tbody tr + tr td { border-top: 1px solid var(--erp-surface-hover); }
.tabla-lineas tbody tr:hover td { background: var(--erp-surface-muted); }

.tabla-lineas input, .tabla-lineas select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--erp-border-control);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  background: var(--erp-field-bg);
  box-shadow: var(--erp-control-shadow);
}

/* Reparto proporcional: el buscador de producto y la descripcion necesitan
   mas espacio que un campo numerico de dos digitos. */
.tabla-lineas th:nth-child(1) { width: 24%; }
.tabla-lineas th:nth-child(2) { width: 18%; }
.tabla-lineas th:nth-child(3),
.tabla-lineas th:nth-child(4) { width: 9%; }
.tabla-lineas th:nth-child(5),
.tabla-lineas th:nth-child(6) { width: 10%; }

.tabla-lineas .importe, .tabla-lineas .disponible {
  text-align: right;
  white-space: nowrap;
  padding-top: 18px;
}

.tabla-lineas .disponible.falta { color: var(--erp-danger); font-weight: 700; }

/* --- Totales --- */
.totales { max-width: 360px; margin-left: auto; }
.fila-total { display: flex; justify-content: space-between; padding: 6px 0; }
.fila-total.total {
  border-top: 2px solid var(--color-primario);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 17px;
}

/* --- Navegación de sección (subnav) ---
   Los reportes no se enlazaban entre si: la barra lateral del admin era su
   unica via de salto. Al salir de ese chrome, esta navegacion la reemplaza. */
.app-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 20px;
  background: var(--erp-surface);
  border-bottom: 1px solid var(--erp-border-subtle);
  overflow-x: auto;
}

.app-subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--erp-text-secondary);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.app-subnav a:hover {
  color: var(--erp-text);
  background: var(--erp-surface-hover);
}

.app-subnav a.activo {
  color: var(--color-primario);
  font-weight: 700;
  border-bottom-color: var(--color-primario);
}

/* --- Tablas de datos (reportes) --- */
.tabla-datos {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.tabla-datos th {
  text-align: left;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--erp-text-subtle);
  padding: 10px 8px;
  background: var(--erp-surface-muted);
  border-bottom: 1px solid var(--erp-border-subtle);
  white-space: nowrap;
}

.tabla-datos td { padding: 10px 8px; border-top: 1px solid var(--erp-surface-hover); }
.tabla-datos tbody tr:hover { background: var(--erp-surface-muted); }
.tabla-datos .num { text-align: right; white-space: nowrap; }

/* Las tablas anchas se desplazan dentro de su contenedor, no empujan la
   pagina entera. */
.tabla-scroll {
  overflow-x: auto;
  border: 1px solid var(--erp-border-subtle);
  border-radius: var(--erp-radius-lg);
  background: var(--erp-surface);
}

/* --- Filtros de reportes --- */
.erp-filter-bar,
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--erp-space-3);
  padding: var(--erp-space-4);
  margin-bottom: var(--erp-space-5);
  border: 1px solid var(--erp-border-subtle);
  border-radius: var(--erp-radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--erp-surface) 94%, var(--erp-teal)) 0%, var(--erp-surface) 72%);
  box-shadow: var(--erp-elevation-card);
}

.erp-filter-bar label,
.filtros label {
  display: flex;
  flex-direction: column;
  gap: var(--erp-space-2);
  font-size: 12px;
  font-weight: 650;
  color: var(--erp-text-secondary);
}

.filtros input, .filtros select {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--erp-border-strong);
  border-radius: var(--erp-radius);
  font-family: inherit;
  font-size: 14px;
}

/* --- KPIs --- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.erp-kpi,
.kpi {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--erp-surface) 90%, var(--color-primario)) 0%, var(--erp-surface) 58%);
  border: 1px solid color-mix(in srgb, var(--erp-border-subtle) 80%, var(--color-primario));
  border-radius: var(--erp-radius-xl);
  padding: var(--erp-space-4) var(--erp-space-5);
  box-shadow: var(--erp-elevation-card);
}

.erp-kpi::after,
.kpi::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--color-primario);
}

/* Solo la variante con icono se dispone en fila. Los KPI de los reportes no
   tienen icono y sus tres hijos de texto deben quedar apilados: si esta regla
   se aplicara a todos, quedarian uno al lado del otro. */
.erp-kpi:has(.icono),
.kpi:has(.icono) { display: flex; align-items: center; gap: 16px; }

.erp-kpi .etiqueta,
.kpi .etiqueta {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--erp-text-subtle);
}

.erp-kpi .valor,
.kpi .valor {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  margin-top: 4px;
  color: var(--color-primario);
}

.erp-kpi .sub,
.kpi .sub { font-size: 12px; color: var(--erp-text-faint); margin-top: 2px; }

/* Variantes semanticas: el color comunica que tipo de dato es, no decora. */
.erp-kpi.positivo .valor,
.kpi.positivo .valor { color: var(--erp-success); }
.erp-kpi.impuesto .valor,
.kpi.impuesto .valor { color: var(--erp-warning); }
.erp-kpi.neutro .valor,
.kpi.neutro .valor { color: var(--erp-ink); }

/* El dashboard muestra un icono de acento; las demas pantallas no, pero
   la clase vive aca para que haya una sola definicion de .kpi. */
.erp-kpi .datos,
.kpi .datos { display: flex; flex-direction: column; min-width: 0; }

.erp-kpi .icono,
.kpi .icono {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: linear-gradient(135deg, var(--accent, var(--erp-navy)) 0%, color-mix(in srgb, var(--accent, var(--erp-navy)) 55%, var(--erp-surface)) 130%);
  color: var(--erp-surface);
  box-shadow: var(--erp-shadow-sm);
  flex-shrink: 0;
}

/* --- Paneles y rejilla de dos columnas --- */
.rejilla { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 20px; }

@media (max-width: 1100px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  background: var(--erp-surface);
  border: 1px solid var(--erp-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--erp-surface-hover);
}

.panel-cabecera h2 {
  margin: 0;
  padding: 0;
  font-size: 14px;
  border: none;
  color: var(--erp-ink);
  text-transform: none;
  letter-spacing: 0;
}

.panel-cabecera h2 small { font-size: 12px; color: var(--erp-text-faint); font-weight: 400; }

/* --- La tarjeta del admin es la misma tarjeta ---
   `.module` lo emite Django: el listado es <div id="changelist" class="module">
   y cada grupo de un formulario es <fieldset class="module">. No se renombra
   -no lo controlamos- pero adopta los valores del .panel, y con eso listados y
   formularios quedan presentados como el dashboard sin tocar plantillas.

   Sin overflow:hidden a proposito, al reves que .panel: el desplegable de
   filtros del listado vive dentro del .module y se recortaria. Las esquinas
   superiores las redondea la cabecera. */
.module {
  background: var(--erp-surface);
  border: 1px solid var(--erp-border-subtle);
  border-radius: 12px;
  margin-bottom: 16px;
}

/* `fieldset.module h2` cubre las cabeceras que Django tambien nombra
   .fieldset-heading/.inline-heading (siempre un <h2> dentro de un
   <fieldset class="module">, en admin/includes/fieldset.html y en los dos
   edit_inline). forms.css declara "fieldset .fieldset-heading,
   fieldset .inline-heading" con azul Django y carga DESPUES de app.css; a
   igual especificidad (0,1,1) gana el orden de carga, es decir forms.css. La
   forma de ganar sin !important -que esta hoja no usa- es subir la
   especificidad: "fieldset.module h2" es (0,1,2), por encima de forms.css
   pase lo que pase con el orden. */
.module h2,
.dashboard .module h2,
fieldset.module h2 {
  background: var(--erp-surface);
  color: var(--erp-ink);
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--erp-surface-hover);
  border-radius: 12px 12px 0 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* Fieldsets/grupos colapsables ("classes": ("collapse",), 16 casos en 10
   apps): Django envuelve el <h2> en <details><summary>, y ahi el h2 deja
   de ser el elemento que se ve. forms.css:192-193
   (".collapse summary .fieldset-heading, .collapse summary .inline-heading")
   vacia el h2 -background: transparent, color: currentColor, display:
   inline, sin margen ni relleno- y ESO juega a favor: si el <summary> lleva
   el fondo, la tinta y el relleno de la cabecera, el h2 los hereda sin que
   haga falta pisarlo tambien. No hay que tocar el h2 en absoluto.

   Lo que si hay que pisar es el propio <summary>, que forms.css:96 pinta de
   azul Django (":not(.inline-related) .collapse summary", junto con
   "fieldset .fieldset-heading, fieldset .inline-heading" en la misma
   lista). Esa regla es (0,2,1): dos clases (.inline-related dentro del
   :not(), que cuenta la especificidad de su argumento y no la suya propia;
   y .collapse) mas un tipo (summary). "fieldset.module.collapse summary"
   es (0,2,2): fieldset y summary son dos tipos, .module y .collapse son
   dos clases. A igual numero de clases decide el numero de tipos -2 contra
   1- y ganamos SIEMPRE, con independencia de que forms.css cargue despues.
   Una version sin el prefijo "fieldset" -".module.collapse summary"- solo
   llega a (0,2,1): un empate que forms.css seguiria ganando por orden de
   carga, que es justo el defecto que esto corrige.

   Se repiten aqui TODAS las propiedades que forms.css:96 declara sobre
   <summary> -border, padding, margin, font- porque la cascada se resuelve
   propiedad por propiedad: cualquiera que no se redeclare la seguiria
   ganando forms.css aunque perdamos el resto de la regla. */
fieldset.module.collapse summary {
  background: var(--erp-surface);
  color: var(--erp-ink);
  margin: 0;
  padding: 14px 18px;
  border: none;
  border-bottom: 1px solid var(--erp-surface-hover);
  border-radius: 12px 12px 0 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* templates/admin/app_list.html tambien pone `.module` en cada grupo de apps
   del sidebar: class="app-{{ app.app_label }} module app-grupo ...". Ese
   grupo no es un panel -es una fila de navegacion- y erp_theme.css le da su
   propio fondo transparente, su propio margen (6px) y una afordancia de
   :hover (.app-grupo:hover pone el borde visible solo al pasar el mouse). Sin
   estas reglas, .module le fija fondo de tarjeta, borde siempre visible y
   16px de margen, tapando esa afordancia.

   Van en DOS reglas separadas a proposito, no en una sola bajo :not(:hover):
   .app-grupo no declara background y su :hover solo declara border-color, asi
   que si el fondo y el margen quedaran bajo :not(:hover) reaparecerian -y el
   margen saltaria de 6px a 16px, corriendo los grupos de abajo- justo al
   pasar el mouse, que es el estado que esto tiene que proteger. El fondo y
   el margen van sin guardia (ganan siempre por especificidad, en cualquier
   estado); solo el border-color en reposo va acotado a :not(:hover) para
   dejarle el estado de hover a .app-grupo:hover. */
.module.app-grupo {
  background: none;
  margin-bottom: 6px;
}

.module.app-grupo:not(:hover) {
  border-color: transparent;
}

.panel .contenido-panel { padding: 14px 18px; }

.erp-empty-state,
.vacio { padding: 24px; text-align: center; color: var(--erp-text-faint); }

/* --- Etiquetas de estado --- */
/* Los modificadores se nombran por significado, no por dominio: el mismo
   verde sirve a una venta confirmada y a un ingreso de inventario. */
.erp-status-badge,
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge.neutro  { background: var(--erp-surface-muted); color: var(--erp-text-subtle); }
.badge.info    { background: var(--erp-info-muted); color: var(--erp-info); }
.badge.exito   { background: var(--erp-success-muted); color: var(--erp-success); }
.badge.aviso   { background: var(--erp-attention-muted); color: var(--erp-warning); }
.badge.peligro { background: var(--erp-danger-muted); color: var(--erp-danger); }

/* --- Barras de proporcion --- */
.fila-barra { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; }
.fila-barra .nom { flex: 1; font-size: 13px; color: var(--erp-text-heading); }
.fila-barra .monto { font-weight: 700; font-size: 13px; min-width: 90px; text-align: right; }

.barra { height: 8px; border-radius: 20px; background: var(--erp-border-subtle); overflow: hidden; }
.barra > div { height: 100%; border-radius: 20px; background: var(--color-primario); }

/* --- Cotizaciones --- */
.quote-shell {
  display: grid;
  gap: var(--erp-space-5);
}

.quote-header {
  margin-bottom: 0;
}

.quote-status {
  display: grid;
  gap: var(--erp-space-3);
}

.quote-version-list {
  display: grid;
  gap: var(--erp-space-2);
  margin: var(--erp-space-3) 0 0;
  padding-left: var(--erp-space-5);
}

.quote-lines th,
.quote-lines td {
  vertical-align: middle;
}

.quote-lines .importe,
.quote-lines .disponible,
.quote-totals strong {
  font-variant-numeric: tabular-nums;
}

.quote-totals {
  max-width: 380px;
  margin-left: auto;
}

/* --- Ayuda / manual interno --- */
.manual-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--erp-space-5);
  align-items: start;
}

.manual-indice {
  position: sticky;
  top: var(--erp-space-4);
}

.manual-indice ol,
.manual-seccion ol,
.manual-seccion ul {
  margin: var(--erp-space-3) 0 0;
  padding-left: var(--erp-space-5);
}

.manual-indice li,
.manual-seccion li {
  margin-bottom: var(--erp-space-2);
}

.manual-contenido {
  display: grid;
  gap: var(--erp-space-4);
}

.manual-seccion h2 {
  margin-top: 0;
}

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