:root {
  --fondo: #f5f6f8;
  --tarjeta: #ffffff;
  --texto: #1f2933;
  --suave: #616e7c;
  --borde: #dde2e8;
  --primario: #1f6f5c;
  --primario-claro: #e3f1ed;
  --peligro: #b42318;
  --peligro-claro: #fdecea;
  --aviso: #8a5a00;
  --aviso-claro: #fff5d6;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo); color: var(--texto); font-size: 15px; line-height: 1.45;
}
a { color: var(--primario); }
/* Menú lateral fijo (siempre visible en pantallas grandes) */
.menu-lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: var(--primario); color: #fff;
  display: flex; flex-direction: column; overflow-y: auto; z-index: 20;
}
.menu-lateral a { color: #fff; text-decoration: none; }
.menu-lateral .marca { font-weight: 700; font-size: 17px; padding: 18px 18px 14px; display: block; }
.menu-lateral nav { flex: 1; display: flex; flex-direction: column; padding: 0 10px; }
.menu-lateral nav a { padding: 8px 10px; border-radius: 7px; font-size: 14px; }
.menu-lateral nav a:hover { background: #ffffff1f; }
.menu-lateral nav a.activa { background: #fff; color: var(--primario); font-weight: 600; }
.menu-lateral .icono { display: inline-block; width: 18px; }
.menu-lateral .grupo-menu { margin-top: 14px; padding-top: 10px; border-top: 1px solid #ffffff33; display: flex; flex-direction: column; }
.menu-lateral .titulo-menu { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; padding: 0 10px 4px; }
.menu-lateral .nombre-empresa { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-lateral nav a.sub { padding-left: 22px; }
.menu-lateral .contador { background: #fdecea; color: var(--peligro); border-radius: 99px; padding: 0 7px; font-size: 12px; font-weight: 700; margin-left: 4px; }
.menu-lateral nav a.cambiar { opacity: .8; font-size: 13px; }
.menu-lateral .usuario { padding: 14px 18px; border-top: 1px solid #ffffff33; font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.menu-lateral form { margin: 0; }
.menu-lateral button { background: none; border: 1px solid #ffffff88; color: #fff; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
body.con-menu { padding-left: 240px; }
.barra-movil { display: none; }
/* Volver y migas de pan, arriba de cada pantalla */
.navegacion-arriba { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.navegacion-arriba .migas { margin: 0; }
.navegacion-arriba .migas span { color: var(--texto); }
.boton.volver { font-weight: 600; }
.acciones-fila { white-space: nowrap; }
.espacio-izq { margin-left: auto; align-self: center; font-size: 14px; }
.tarjeta.atajo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 24px 0 10px; }
.subtitulo { color: var(--suave); margin: 0 0 20px; }
.migas { font-size: 14px; color: var(--suave); margin-bottom: 8px; }
.migas a { color: var(--suave); }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 16px 0 20px; flex-wrap: wrap; }
.pestanas a { padding: 8px 14px; text-decoration: none; color: var(--suave); border-bottom: 2px solid transparent; }
.pestanas a.activa { color: var(--primario); border-bottom-color: var(--primario); font-weight: 600; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 18px; margin-bottom: 18px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.acciones .espacio { flex: 1; }
.boton, button.boton {
  display: inline-block; background: var(--primario); color: #fff; border: 0; border-radius: 7px;
  padding: 8px 14px; font-size: 14px; text-decoration: none; cursor: pointer; font-family: inherit;
}
.boton.secundario { background: #fff; color: var(--primario); border: 1px solid var(--primario); }
.boton.peligro { background: var(--peligro); }
.boton.chico { padding: 4px 10px; font-size: 13px; }
table { width: 100%; border-collapse: collapse; background: var(--tarjeta); }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
th { font-size: 13px; color: var(--suave); font-weight: 600; background: #fafbfc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.grupo td { font-weight: 600; background: #fafbfc; }
tr.total td { font-weight: 700; border-top: 2px solid var(--texto); }
.tabla-envoltura { border: 1px solid var(--borde); border-radius: 10px; overflow-x: auto; }
.tabla-envoltura table { border: 0; }
.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.etiqueta.borrador { background: var(--aviso-claro); color: var(--aviso); }
.etiqueta.contabilizado { background: var(--primario-claro); color: var(--primario); }
.etiqueta.anulado { background: #eceff3; color: var(--suave); text-decoration: line-through; }
.etiqueta.cerrado { background: #eceff3; color: var(--texto); }
.etiqueta.error { background: var(--peligro-claro); color: var(--peligro); }
.mensajes { list-style: none; padding: 0; margin: 0 0 16px; }
.mensajes li { padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; }
.mensajes .success { background: var(--primario-claro); color: var(--primario); }
.mensajes .error { background: var(--peligro-claro); color: var(--peligro); }
.mensajes .info, .mensajes .warning { background: var(--aviso-claro); color: var(--aviso); }
form.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
form.filtros label { font-size: 13px; color: var(--suave); display: flex; flex-direction: column; gap: 2px; }
input, select, textarea {
  font: inherit; padding: 7px 9px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; max-width: 100%;
}
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.campo input:not([type=checkbox]), .campo select { width: 100%; }
.campo .ayuda { font-size: 12px; color: var(--suave); margin-top: 3px; }
.campo ul { list-style: none; padding: 0; margin: 0; max-height: 160px; overflow: auto; }
.errorlist { color: var(--peligro); font-size: 13px; padding-left: 0; list-style: none; margin: 4px 0; }
.lineas td input, .lineas td select { width: 100%; }
form.selector-responsable { margin: 0; }
form.selector-responsable select { padding: 4px 6px; font-size: 13px; max-width: 190px; }
form.asignacion-masiva { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px;
  padding: 10px 12px; background: var(--primario-claro); border-radius: 8px; font-size: 14px; }
form.asignacion-masiva small { color: var(--suave); }
.lineas td.num input { text-align: right; }
.lineas .borrar { text-align: center; }
.cuadre { font-weight: 700; }
.cuadre.ok { color: var(--primario); }
.cuadre.mal { color: var(--peligro); }
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mes { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; }
.mes h3 { margin: 0 0 6px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.mes .datos { font-size: 13px; color: var(--suave); margin-bottom: 8px; }
.mes form { display: inline; }
.mes .enlaces { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.vacio { color: var(--suave); padding: 30px; text-align: center; }
.login { max-width: 380px; margin: 80px auto; }
.paginacion { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.sangria-2 { padding-left: 26px !important; }
.sangria-3 { padding-left: 44px !important; }
.sangria-4 { padding-left: 62px !important; }
.sangria-5 { padding-left: 80px !important; }
@media (max-width: 900px) {
  body.con-menu { padding-left: 0; }
  .barra-movil {
    display: flex; align-items: center; gap: 14px; background: var(--primario); color: #fff;
    padding: 10px 16px; position: sticky; top: 0; z-index: 30;
  }
  .barra-movil a { color: #fff; text-decoration: none; font-weight: 700; }
  .abrir-menu { background: none; border: 1px solid #ffffff88; color: #fff; padding: 5px 10px; border-radius: 6px; font: inherit; cursor: pointer; }
  .menu-lateral { display: none; top: 50px; width: 270px; box-shadow: 4px 0 18px #0003; }
  .menu-lateral > .marca { display: none; }
  body.menu-abierto .menu-lateral { display: flex; }
  main { padding: 16px; }
}
.titulo-seccion { font-size: 15px; margin: 22px 0 8px; color: var(--primario); }
.nota-reporte { font-size: 13px; color: var(--suave); margin: 0 0 6px; }
table.reporte { table-layout: fixed; min-width: 640px; }
table.reporte td { overflow-wrap: anywhere; }
/* Tablero del despacho */
.resumen-tablero { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.resumen-tablero .tarjeta { margin: 0; padding: 12px; display: flex; flex-direction: column; }
.resumen-tablero strong { font-size: 24px; }
.resumen-tablero span { color: var(--suave); font-size: 13px; }
/* Encabezado formal de los estados financieros, como en el PDF. */
.encabezado-estado { text-align: center; margin: 8px 0 18px; }
.encabezado-estado .empresa { font-size: 18px; font-weight: 700; }
.encabezado-estado h2 { margin: 8px 0 2px; color: var(--primario); text-transform: uppercase; font-size: 17px; letter-spacing: .02em; }
.encabezado-estado .periodo { font-weight: 600; }
.encabezado-estado .suave { color: var(--suave); font-size: 13px; }
table.reporte tr.total td.num { border-bottom: 3px double var(--texto); }
table.reporte .cero { color: var(--suave); }
.nota-reporte:first-of-type { margin-top: 14px; }
/* Facturas (paso 3) */
.etiqueta.pendiente { background: var(--aviso-claro); color: var(--aviso); }
.etiqueta.clasificado { background: #e6effa; color: #1d4f91; }
.etiqueta.descartado { background: #eceff3; color: var(--suave); }
.etiqueta.rechazado { background: var(--peligro-claro); color: var(--peligro); }
.resumen-facturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.resumen-facturas div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; }
.resumen-facturas span { display: block; font-size: 12px; color: var(--suave); }
.resumen-facturas strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.iva-tarifas { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.iva-tarifas li { display: flex; justify-content: space-between; gap: 8px; }
.resumen-facturas .iva-tarifas span { display: inline; }
.buscador-cuenta { width: 100%; }
.buscador-cuenta.sugerida, span.sugerida { background: var(--primario-claro); border-color: #9fd0c2; }
span.sugerida { padding: 0 4px; border-radius: 4px; }
tr.asignada td { background: #fff8dc; }
.ayuda-tabla { font-size: 13px; color: var(--suave); }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.ayuda { font-size: 12px; color: var(--suave); }
pre.detalle { white-space: pre-wrap; font-size: 12px; }
table.bandeja { font-size: 14px; }
table.bandeja th, table.bandeja td { padding: 7px 8px; }

/* Bitácora de cambios */
table.bitacora td { vertical-align: top; }
table.cambios { font-size: 12px; margin: 0; min-width: 260px; }
table.cambios th, table.cambios td { padding: 3px 6px; }
table.cambios td.antes { color: var(--peligro); }
table.cambios td.despues { color: var(--primario); }
.etiqueta.accion-crear, .etiqueta.accion-importar, .etiqueta.accion-restaurar, .etiqueta.accion-reabrir { background: #e6effa; color: #1d4f91; }
.etiqueta.accion-modificar { background: var(--aviso-claro); color: var(--aviso); }
.etiqueta.accion-contabilizar, .etiqueta.accion-cerrar { background: var(--primario-claro); color: var(--primario); }
.etiqueta.accion-anular, .etiqueta.accion-borrar, .etiqueta.accion-descartar { background: var(--peligro-claro); color: var(--peligro); }
/* Búsqueda global (caja en el menú y página de resultados) */
.buscador { margin: 0; }
.buscador input {
  width: 100%; padding: 7px 10px; border-radius: 7px; border: 1px solid #ffffff55;
  background: #ffffff1f; color: #fff; font: inherit; font-size: 14px;
}
.buscador input::placeholder { color: #ffffffb3; }
.buscador input:focus { outline: none; background: #fff; color: var(--texto); }
.menu-lateral .buscador { padding: 0 10px 12px; }
.barra-movil .buscador { flex: 1; min-width: 0; }
.resultados-busqueda h2 { font-size: 16px; margin: 22px 0 8px; color: var(--primario); }
.resultados-busqueda h2 .cuantos { color: var(--suave); font-weight: 400; font-size: 13px; }
.busqueda-grande { display: flex; gap: 8px; max-width: 640px; margin: 0 0 6px; }
.busqueda-grande input { flex: 1; padding: 9px 12px; font: inherit; border: 1px solid var(--borde); border-radius: 8px; }

/* Revisión antes de declarar */
.aviso-revision { border-left: 4px solid var(--aviso); }
.aviso-revision.corregir { border-left-color: var(--peligro); }
.aviso-revision h3 { margin: 0 0 6px; font-size: 16px; }
.aviso-revision p { margin: 0 0 8px; }
.documentos-revision { margin: 0 0 10px; padding-left: 18px; font-size: 13px; }
.revision-ok { border-left: 4px solid var(--primario); background: var(--primario-claro); color: var(--primario); }
.revision-bien { list-style: none; padding: 0; margin: 0; color: var(--primario); }
.revision-bien li { padding: 2px 0; }
button.copiar { margin-left: 6px; padding: 1px 6px; font-size: 11px; border: 1px solid var(--borde); border-radius: 4px; background: #fff; color: var(--primario); cursor: pointer; }
button.copiar:hover { border-color: var(--primario); }
button.copiar.hecho { background: var(--primario-claro); }
@media print { button.copiar { display: none; } }