:root {
  --paper: #F6F8F4;
  --surface: #FFFFFF;
  --ink: #1C2A24;
  --ink-soft: #56655C;
  --rule: #CBD6CE;
  --rule-strong: #9FAFA4;
  --accent: #2F6B4F;
  --accent-hover: #275940;
  --accent-ink: #FFFFFF;
  --danger: #A6432E;
  --warn: #B8863A;
  --font-serif: 'IBM Plex Serif', Georgia, serif;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

/* El atributo hidden debe ganar siempre, incluso sobre elementos con
   display: grid/flex por clase (.app, .pantalla-login, etc.) — sin
   esto, el navegador puede dejar visible un elemento "oculto". */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
}

.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

button { font-family: var(--font-sans); cursor: pointer; }

.btn-primario {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
}
.btn-primario:hover { background: var(--accent-hover); }

.btn-secundario {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  padding: 10px 18px;
  font-size: 14px;
}

/* LOGIN */
.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tarjeta-login {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-top: 3px solid var(--accent);
  padding: 40px 32px;
}

.tarjeta-login .wordmark { font-size: 22px; margin-bottom: 4px; }

.subtitulo {
  color: var(--ink-soft);
  font-size: 13px;
  margin: 0 0 28px;
  line-height: 1.5;
}

#form-login label {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

#form-login input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}

#form-login input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#form-login .btn-primario {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
}

.mensaje-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 12px;
}

.mensaje-exito {
  color: var(--accent);
  font-size: 13px;
  margin: 0 0 14px;
}

.enlace-onboarding {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 20px;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.enlace-onboarding:hover { color: var(--accent); }

.tarjeta-onboarding { max-width: 420px; }
.tarjeta-onboarding label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.tarjeta-onboarding input, .tarjeta-onboarding select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}
.tarjeta-onboarding .btn-primario { width: 100%; padding: 12px; margin-top: 4px; }

.logo-vista-previa {
  display: block;
  max-width: 140px;
  max-height: 80px;
  margin-top: 8px;
  border: 1px solid var(--rule-strong);
  padding: 6px;
}

.tarjeta-onboarding .check-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.tarjeta-onboarding .check-inline input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* PANEL DE INICIO */
.bienvenida {
  color: var(--ink-soft);
  font-size: 14px;
  margin: -10px 0 28px;
}

.grid-modulos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tarjeta-modulo {
  text-align: left;
  background: var(--surface);
  border: none;
  border-top: 3px solid var(--accent);
  padding: 20px 18px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.tarjeta-modulo:hover { background: var(--paper); }

.numero-modulo {
  display: block;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--rule-strong);
  font-weight: 600;
  margin-bottom: 8px;
}

.tarjeta-modulo h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--ink);
}

.tarjeta-modulo p {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .grid-modulos { grid-template-columns: 1fr; }
}

/* APP SHELL */
.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.barra-lateral {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
}

.barra-lateral .wordmark { font-size: 17px; margin-bottom: 28px; }

.barra-lateral nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-item {
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  padding: 9px 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.nav-item:hover { color: var(--ink); background: var(--paper); }

.nav-item.activo {
  color: var(--ink);
  border-left-color: var(--accent);
  background: var(--paper);
  font-weight: 500;
}

.usuario-actual {
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin-top: 16px;
}

.usuario-actual p { margin: 0; font-size: 13px; }
.usuario-actual .rol {
  color: var(--ink-soft);
  text-transform: capitalize;
  margin-bottom: 10px;
}

#btn-salir {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
}

.enlace-sitio {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
}

.contenido { padding: 32px 40px; max-width: 1000px; }

.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.panel-header h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  margin: 0;
}

.subseccion {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}

.subseccion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 10px;
}
.subseccion-header:first-of-type { margin-top: 0; }

.acciones-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.nota-panel {
  color: var(--ink-soft);
  font-size: 13px;
  margin: -8px 0 16px;
}

.btn-chico {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-accion {
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 4px 10px;
  font-size: 12px;
  margin-right: 6px;
  white-space: nowrap;
}
.btn-accion:hover { background: var(--paper); }
.btn-accion.destructivo { border-color: var(--danger); color: var(--danger); }
.btn-accion.destructivo:hover { background: #fbeae6; }

td.acciones { white-space: nowrap; }

.form-inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 16px;
  margin-bottom: 20px;
}

.form-inline input, .form-inline select {
  padding: 8px 10px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--paper);
}

.fieldset-responsabilidades {
  border: 1px solid var(--rule-strong);
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  width: 100%;
}
.fieldset-responsabilidades legend {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 0 4px;
}
.fieldset-responsabilidades label {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Formularios más grandes (cotización, orden) con ítems dinámicos */
.form-grande {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 20px;
  margin-bottom: 20px;
}

.fila-campos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fila-campos input, .fila-campos select {
  padding: 8px 10px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--paper);
}

.campo-etiquetado {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}

.bloque-items {
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin-bottom: 16px;
}
.bloque-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bloque-items-header h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--ink-soft);
}

.tabla-items { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-items thead th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 11px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule-strong);
}
.tabla-items td { padding: 4px 6px; }
.tabla-items input, .tabla-items select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--paper);
}
.tabla-items .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.tabla-items .item-total-texto { font-family: var(--font-mono); }

.check-aiu {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.campo-aiu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}
.campo-aiu .valor-aiu {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}

.resumen-totales {
  display: flex;
  gap: 24px;
  justify-content: flex-end;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-bottom: 16px;
  font-size: 14px;
}
.resumen-totales strong { font-family: var(--font-mono); }

.fila-botones { display: flex; gap: 10px; }

.tabla-items-detalle { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.tabla-items-detalle th {
  text-align: left;
  font-size: 11px;
  color: var(--ink-soft);
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule-strong);
}
.tabla-items-detalle td { padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.tabla-items-detalle .num { text-align: right; font-family: var(--font-mono); }
.detalle-items { background: var(--paper); padding: 14px 16px; }
.nota-aiu { font-size: 12px; color: var(--ink-soft); margin: 8px 0 0; }

/* TABLAS: estilo libro contable — solo reglas horizontales */
.tabla-envoltorio {
  background: var(--surface);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

thead th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}

tbody tr:last-child td { border-bottom: none; }

td.num, th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  text-transform: capitalize;
}
.badge.aceptada, .badge.aceptado, .badge.contabilizado, .badge.contabilizada, .badge.pagada, .badge.liquidada, .badge.aprobada, .badge.conciliado { border-color: var(--accent); color: var(--accent); }
.badge.rechazada, .badge.rechazado, .badge.objetada { border-color: var(--danger); color: var(--danger); }
.badge.pendiente, .badge.borrador, .badge.enviada, .badge.enviado { border-color: var(--warn); color: var(--warn); }

.vacio {
  padding: 32px 16px;
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .barra-lateral {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 16px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .barra-lateral nav { flex-direction: row; flex-wrap: wrap; }
  .contenido { padding: 20px; }
}

/* Orden de adquisición: totales con varias líneas (AIU, Impoconsumo,
   retención, neto). Se permite pasar a otra línea en pantallas angostas. */
.resumen-totales { flex-wrap: wrap; row-gap: 6px; }
.resumen-totales .neto-pagar, #resumen-neto-orden-fila { font-weight: 600; }
.fila-campos .nota-aiu { flex-basis: 100%; margin: 0; }

/* Retención en la fuente de la orden */
.bloque-retencion {
  border: 1px solid var(--rule);
  padding: 12px 16px 14px;
  margin: 0 0 16px;
}
.bloque-retencion legend {
  font-family: var(--font-serif);
  font-size: 13px;
  padding: 0 6px;
  color: var(--ink-soft);
}
.opciones-retencion { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; margin-bottom: 10px; }
.opciones-retencion label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.bloque-retencion select, .bloque-retencion input[type="text"], .bloque-retencion input[type="number"] {
  padding: 7px 9px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--paper);
}
.bloque-retencion .item-ret-concepto { width: 100%; min-width: 260px; }
.bloque-retencion .item-ret-tarifa { width: 70px; }
.bloque-retencion .campo-ancho { flex: 1; min-width: 240px; }
.bloque-retencion .campo-ancho input { width: 100%; }
.bloque-retencion .ret-nota { display: block; font-size: 11px; color: #9A5B13; margin-top: 3px; }
.bloque-retencion .ret-sin-efecto { color: var(--ink-soft); }
.bloque-retencion td:nth-child(2) { white-space: nowrap; }

/* ---------- Facturas de compra desde XML (ventanas) ---------- */
.dialogo-factura {
  width: min(1060px, 96vw);
  max-height: 94vh;
  padding: 0;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
}
.dialogo-factura[open] { display: flex; flex-direction: column; }
.dialogo-factura::backdrop { background: rgba(28, 42, 36, 0.45); }

.dialogo-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
}
.dialogo-cabecera h3 { font-family: var(--font-serif); font-size: 18px; margin: 0; }
.btn-cerrar-dialogo { border: none; background: none; font-size: 26px; line-height: 1; color: var(--ink-soft); padding: 0 4px; }
.btn-cerrar-dialogo:hover { color: var(--ink); }
.dialogo-cuerpo { padding: 18px 20px; overflow-y: auto; flex: 1; }
.dialogo-pie {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
}
.dialogo-pie .btn-primario:disabled { opacity: 0.45; cursor: not-allowed; }
.fx-ayuda { margin-right: auto; font-size: 12px; color: var(--ink-soft); }
.fx-error { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--danger); }

.zona-archivo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 16px;
  border: 2px dashed var(--rule-strong);
  background: var(--paper);
  cursor: pointer;
  text-align: center;
  font-size: 14px;
}
.zona-archivo span { color: var(--ink-soft); font-size: 13px; }
.zona-archivo.arrastrando { border-color: var(--accent); background: #EAF2EC; }
.zona-archivo.error { border-color: var(--danger); }
#fx-estado-lectura.error { color: var(--danger); }

/* Avisos de la factura */
.fx-aviso { padding: 8px 12px; margin: 0 0 8px; font-size: 13px; border-left: 4px solid var(--rule-strong); background: var(--paper); }
.fx-aviso.bloqueo { border-left-color: var(--danger); background: #FBEFEC; color: #7A2D1D; }
.fx-aviso.confirmar { border-left-color: var(--warn); background: #FBF4E6; color: #6E4E14; }
.fx-aviso.info { border-left-color: var(--accent); background: #EDF4EF; }

.fx-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 20px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 13px;
}
.fx-resumen dt { font-size: 11px; color: var(--ink-soft); margin: 0 0 2px; }
.fx-resumen dd { margin: 0; word-break: break-word; }
.fx-resumen .mono { font-family: var(--font-mono); font-size: 12px; }
.fx-resumen a { color: var(--accent); }

.fx-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.fx-bloque h4 { font-family: var(--font-serif); font-size: 14px; margin: 0 0 8px; }
.fx-bloque select, .dialogo-factura .bloque-retencion select { max-width: 100%; }
.fx-bloque select { width: 100%; padding: 7px 9px; border: 1px solid var(--rule-strong); font-family: var(--font-sans); font-size: 13px; background: var(--paper); }
.fx-ancho { margin-bottom: 16px; }
.fx-texto { margin: 0 0 8px; font-size: 13px; }
.fx-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.fx-aceptar { padding: 10px 12px; border: 1px solid var(--warn); background: #FBF4E6; }
.fx-titulo-con-accion { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fx-titulo-con-accion h4 { margin: 0; }
.fx-todas { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.fx-todas select { width: auto; min-width: 220px; }
#fx-tabla-lineas select { width: 100%; min-width: 200px; padding: 5px 7px; font-size: 12px; border: 1px solid var(--rule-strong); background: var(--paper); }
#fx-tabla-lineas td, #fx-tabla-asiento td, #fx-tabla-asiento th, #fx-tabla-lineas th { vertical-align: top; }
#fx-tabla-asiento tfoot td { font-weight: 600; border-top: 1px solid var(--rule-strong); }
#fx-tabla-asiento .cuenta-nombre { color: var(--ink-soft); }
#fx-tabla-asiento .cuenta-falta { color: var(--danger, #b42318); font-style: italic; }
#fx-tabla-asiento .indentar { padding-left: 28px; }
.fx-aiu { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; max-width: 360px; }
.fx-aiu input { padding: 7px 9px; border: 1px solid var(--rule-strong); background: var(--paper); font-size: 13px; }
#fx-totales strong.neto { color: var(--accent); }

.fd-aviso { padding: 10px 12px; margin-bottom: 12px; font-size: 13px; border-left: 4px solid var(--accent); background: #EDF4EF; }
.fd-aviso.alerta { border-left-color: var(--warn); background: #FBF4E6; }

.badge.libre { text-transform: none; }

/* ---------- Mi Empresa: subpestañas y plan de cuentas ---------- */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: 0 0 16px; }
.subtab {
  border: none;
  background: none;
  padding: 9px 16px;
  font: inherit;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.subtab:hover { color: var(--ink); }
.subtab.activo { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

.plan-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.plan-barra input[type="search"] { min-width: 240px; flex: 1; max-width: 360px; }
#tabla-plan-cuentas td.num, #tabla-plan-cuentas th.num { text-align: right; }
#tabla-plan-cuentas td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
#tabla-plan-cuentas tr.sub td:nth-child(2) { padding-left: 28px; }
#tabla-plan-cuentas tr.inactiva td { color: var(--ink-soft); }
#tabla-plan-cuentas .plan-acciones { white-space: nowrap; text-align: right; }
.plan-motivo { font-size: 11px; color: var(--ink-soft); display: block; }

.plan-catalogo {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: 14px 16px;
  margin: 0 0 16px;
}
.plan-catalogo-cab h3 { font-family: var(--font-serif); font-size: 17px; margin: 0 0 4px; }
.plan-catalogo-cab p { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.plan-grupo { border: none; border-top: 1px solid var(--rule); margin: 12px 0 0; padding: 8px 0 0; }
.plan-grupo legend { font-weight: 600; font-size: 13px; padding: 0 8px 0 0; }
.plan-item { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 13px; }
.plan-item input { margin-top: 3px; }
.plan-item .plan-item-uso { display: block; color: var(--ink-soft); font-size: 12px; }
.plan-item .plan-item-codigo { font-variant-numeric: tabular-nums; font-weight: 600; }
.plan-item.ya-activa { opacity: 0.6; }

/* Diálogo para crear una cuenta */
.dialogo-chico { width: min(560px, 96vw); }
.dialogo-chico form { display: flex; flex-direction: column; min-height: 0; }
.dialogo-chico .fila-campos { display: flex; gap: 12px; flex-wrap: wrap; }
.dialogo-chico .fila-campos .campo-etiquetado { flex: 0 0 120px; }
.dialogo-chico .fila-campos .dc-nombre { flex: 1 1 240px; }
.dialogo-chico .campo-etiquetado + .fila-campos, .dialogo-chico .campo-etiquetado { margin-bottom: 10px; }
.dc-tipo { margin: 0 0 8px; font-size: 13px; min-height: 18px; }
.dc-tipo.ok { color: var(--accent); }
.dc-tipo.mal { color: var(--danger); }
.dc-tipo.aviso { color: #9A5B13; }
.mensaje-exito.error { color: var(--danger); }
.btn-accion:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-accion:disabled:hover { background: none; }
#tabla-plan-cuentas th:nth-child(5) { text-align: right; }
#tabla-plan-cuentas tr.aux td:nth-child(2) { padding-left: 52px; }
.mono { font-family: var(--font-mono); }

/* Texto de ayuda dentro de una celda de acciones (ej.: cotización aceptada) */
.texto-suave { color: #6b7280; font-size: 0.85em; }

/* Documento soporte: campos dentro del diálogo */
.fx-bloque .campo-etiquetado { display: block; margin-bottom: 8px; }
.fx-bloque .campo-etiquetado span { display: block; font-size: 12px; margin-bottom: 3px; }
.fx-bloque .campo-etiquetado input, .fx-bloque input[type="file"], #ds-tabla-lineas input, #ds-tabla-lineas select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--rule-strong); font-family: var(--font-sans); font-size: 13px; background: var(--paper); box-sizing: border-box;
}
#ds-tabla-lineas input[type="number"] { text-align: right; }
#ds-tabla-lineas .ds-desc { min-width: 220px; }
#ds-tabla-lineas .ds-cant { min-width: 70px; }
#ds-tabla-lineas .ds-unit { min-width: 120px; }
.fx-bloque input[type="file"] { margin-bottom: 6px; }

/* --- Nómina --- */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--rule);
}
.subtabs button {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: -1px;
}
.subtabs button:hover { color: var(--ink); }
.subtabs button.activo { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.nom-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; }
.nom-barra h3 { font-family: var(--font-serif); font-size: 20px; margin: 0; }
.nom-barra .nota-panel { flex: 1 1 420px; margin: 0; }

.nom-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 16px; }
.nom-tarjeta { background: var(--surface); border: 1px solid var(--rule); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.nom-tarjeta span { font-size: 12px; color: var(--ink-soft); }
.nom-tarjeta strong { font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.nom-tarjeta.destacada { border-color: var(--accent); }
.nom-tarjeta.destacada strong { color: var(--accent); }

.nom-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.nom-detalles { margin: 10px 0; border: 1px solid var(--rule); background: var(--surface); padding: 8px 14px; }
.nom-detalles summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.nom-simulacion .tabla-items-detalle { margin: 0 0 8px; }
.nom-anio { max-width: 200px; }
.nom-lista { padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.nom-lista li { margin-bottom: 6px; }
.fila-error td { background: #FBEFEC; }
.check-linea { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 13px; }
.check-linea input { margin-top: 3px; }
#nom-dialogo-extra { display: inline-flex; gap: 8px; }
.nom-titulo-sep { margin-top: 22px; }

/* --- Inventarios --- */
.inv-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.inv-barra .nota-panel { flex: 1 1 360px; margin: 0; }
.inv-barra input, .inv-barra select { font: inherit; padding: 6px 8px; border: 1px solid var(--rule-strong); background: var(--surface); }
.inv-barra input[type="search"] { min-width: 220px; }
.inv-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 16px; }
.inv-tarjeta { background: var(--surface); border: 1px solid var(--rule); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.inv-tarjeta span { font-size: 12px; color: var(--ink-soft); }
.inv-tarjeta strong { font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.inv-tarjeta.alerta { border-color: #b4701f; }
.inv-linea { margin-top: 6px; }
.inv-linea small { display: block; font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; }
.inv-linea select { width: 100%; }
.inv-sec-titulo { font-family: var(--font-serif); font-size: 15px; margin: 14px 0 6px; border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
.inv-dif-ok { color: var(--accent); font-weight: 600; }
.inv-dif-mal { color: #a33; font-weight: 600; }
.inv-anulado td { color: var(--ink-soft); text-decoration: line-through; }
#inv-dialogo-extra { display: inline-flex; gap: 8px; }
#dialogo-inv .campo-etiquetado { margin-bottom: 12px; }
#dialogo-inv .campo-etiquetado input:not([type="checkbox"]), #dialogo-inv .campo-etiquetado select {
  padding: 8px 10px; border: 1px solid var(--rule-strong); font-family: var(--font-sans); font-size: 14px; background: var(--paper); box-sizing: border-box; width: 100%;
}
#dialogo-inv .fila-campos { margin-bottom: 0; }
#dialogo-inv .fila-campos .campo-etiquetado { flex: 1 1 150px; }
#dialogo-inv .fila-campos .dc-nombre { flex: 2 1 280px; }
#dialogo-inv .fx-check { display: block; margin: 4px 0 12px; font-size: 13px; }
#dialogo-inv .inv-barra { margin-bottom: 12px; }
.inv-linea select { max-width: 100%; }

/* Nómina · prestaciones: un concepto por renglón dentro de la tabla de empleados */
.nom-comp { white-space: nowrap; padding: 1px 0; }

/* Selector de departamento y municipio (búsqueda por nombre) */
.combo { position: relative; }
.combo-entrada { width: 100%; box-sizing: border-box; }
.combo-entrada.combo-invalido { border-color: var(--danger); }
.combo-lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none;
  max-height: 220px; overflow-y: auto; background: var(--paper); border: 1px solid var(--rule-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.combo-lista[hidden] { display: none; }
.combo-lista li { padding: 6px 9px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.combo-lista li small { color: #6b7280; font-size: 11px; }
.combo-lista li.activo, .combo-lista li[data-i]:hover { background: var(--accent-soft, #e8efe9); }
.combo-lista li.combo-mas { cursor: default; color: #6b7280; font-size: 12px; }
.combo-codigo { min-height: 14px; font-size: 11px; color: #6b7280; }