/* =====================================================================
   TOKENS DEL SISTEMA
   Todo valor visual que se repite vive aquí. La regla es simple: si vas
   a escribir un tamaño de letra, un radio, un gris o una sombra, sale de
   esta lista. Si ninguno encaja, la pregunta es si de verdad hace falta
   un valor nuevo — casi nunca hace falta.

   Antes de esto había 26 tamaños de letra distintos (de .62rem a 2.2rem)
   y 9 radios. Con 26 tamaños ninguna diferencia comunica jerarquía: .84 y
   .85 conviven sin que nadie note la distinción, pero cada uno fue una
   decisión suelta que hay que recordar.
   ===================================================================== */
:root {
  /* --- Marca ------------------------------------------------------- */
  --contribia-verde-oscuro: #14532d;
  --contribia-verde: #1e6b3f;
  --contribia-verde-claro: #2f9e63;

  /* --- Tipografía: 8 pasos, cada uno distinguible del anterior ------ */
  --texto-2xs:  .6875rem;   /* 11px — badges, marcas sobre controles */
  --texto-xs:   .75rem;     /* 12px — etiquetas, texto auxiliar */
  --texto-sm:   .8125rem;   /* 13px — controles dentro de tablas densas */
  --texto-md:   .875rem;    /* 14px — tablas, formularios */
  --texto-base: 1rem;       /* 16px — cuerpo */
  --texto-lg:   1.25rem;    /* 20px — subtítulos, íconos grandes */
  --texto-xl:   1.75rem;    /* 28px — cifras destacadas */
  --texto-2xl:  2.25rem;    /* 36px — logo */

  /* --- Radios: cuatro, no nueve ------------------------------------ */
  --radio-sm:   8px;        /* controles, alertas, tarjetas internas */
  --radio-md:   14px;       /* tarjetas, paneles, barras de herramientas */
  --radio-lg:   24px;       /* superficies grandes: sidebar, tarjeta de login */
  --radio-pill: 999px;      /* chips y botones de píldora */

  /* --- Grises: la escala de Bootstrap, nombrada -------------------- */
  --gris-900: #1a1d21;
  --gris-800: #212529;
  --gris-700: #343a40;
  --gris-600: #495057;
  --gris-500: #6c757d;
  --gris-400: #868e96;
  --gris-300: #adb5bd;
  --gris-250: #dee2e6;
  --gris-200: #e9ecef;
  --gris-150: #e4e8ec;      /* bordes de tabla y de tarjeta */
  --gris-100: #f1f3f5;
  --gris-50:  #f8f9fa;

  /* --- Superficies -------------------------------------------------- */
  --fondo-app: #f4f6f9;     /* área de trabajo */
  --fondo-shell: #eef1f4;   /* fondo del shell, detrás del sidebar */
  --superficie: #fff;

  /* --- Sombras: dos niveles ---------------------------------------- */
  --sombra-sm: 0 .35rem 1rem rgba(20, 83, 45, .07);
  --sombra-md: 0 1rem 2rem rgba(20, 83, 45, .18);

  /* --- Tintes de fila y panel --------------------------------------
     Los fondos suaves que marcan estado en las tablas. Estaban sueltos y
     casi repetidos (#eef7f1 y #eef7f2 convivían sin diferencia visible). */
  --tinte-verde: #eef7f2;
  --tinte-verde-fuerte: #e3f1e8;
  --tinte-azul: #eef4fb;
  --tinte-azul-fuerte: #e2edf9;

  /* --- Estado ------------------------------------------------------- */
  --peligro: #dc3545;
  --info: #0d6efd;
  --aviso: #f59f00;
}

body { background: var(--fondo-app); }
.navbar-brand { font-weight: 700; }
.card-plan { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.card-plan:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
.card-plan.seleccionado { border-color: var(--info); border-width: 2px; }
.tabla-comprobantes { font-size: var(--texto-md); }
.tabla-comprobantes th {
  white-space: nowrap;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.tabla-comprobantes td input, .tabla-comprobantes td select { font-size: var(--texto-sm); padding: .15rem .3rem; }

/* Misma letra compacta que la tabla de Facturas, pero SIN las reglas de
   columnas congeladas (esas son específicas del orden de columnas de
   Facturas) — para reutilizar en otras tablas con columnas distintas. */
.tabla-compacta { font-size: var(--texto-md); }
.tabla-compacta td input, .tabla-compacta td select { font-size: var(--texto-sm); padding: .15rem .3rem; }

/* Columnas congeladas: selección, Id., Proveedor, Comprobante, F. Emisión, Sustento.
   Ancho FIJO (width = min-width = max-width) para que el "left" de cada una
   calce exacto con el ancho real de las anteriores; si no, se superponen. */
.tabla-comprobantes th:nth-child(1), .tabla-comprobantes td:nth-child(1) {
  position: sticky; left: 0px; z-index: 2; background: #fff;
  width: 34px; min-width: 34px; max-width: 34px;
}
.tabla-comprobantes th:nth-child(2), .tabla-comprobantes td:nth-child(2) {
  position: sticky; left: 34px; z-index: 2; background: #fff;
  width: 72px; min-width: 72px; max-width: 72px;
}
.tabla-comprobantes th:nth-child(3), .tabla-comprobantes td:nth-child(3) {
  position: sticky; left: 106px; z-index: 2; background: #fff;
  width: 170px; min-width: 170px; max-width: 170px; overflow: hidden;
}
.tabla-comprobantes th:nth-child(4), .tabla-comprobantes td:nth-child(4) {
  position: sticky; left: 276px; z-index: 2; background: #fff;
  width: 130px; min-width: 130px; max-width: 130px;
}
.tabla-comprobantes th:nth-child(5), .tabla-comprobantes td:nth-child(5) {
  position: sticky; left: 406px; z-index: 2; background: #fff;
  width: 95px; min-width: 95px; max-width: 95px;
}
.tabla-comprobantes th:nth-child(6), .tabla-comprobantes td:nth-child(6) {
  position: sticky; left: 501px; z-index: 2; background: #fff;
  width: 84px; min-width: 84px; max-width: 84px;
  box-shadow: 2px 0 4px rgba(0,0,0,.06); /* separa visualmente lo congelado del resto */
}
.tabla-comprobantes td:nth-child(6) select { width: 100%; padding-left: .25rem; padding-right: 1.2rem; }
.tabla-comprobantes th:nth-child(-n+6) { z-index: 3; } /* encabezado congelado por encima de todo */
.tabla-comprobantes tr.table-secondary td:nth-child(-n+6) { background: #e2e3e5; }
.tabla-comprobantes tr.table-active td:nth-child(-n+6) { background: #cfe2ff; }
.badge-tipo-factura { background: var(--info); }
.badge-tipo-liquidacion_compra { background: #6610f2; }
.badge-tipo-nota_credito { background: var(--peligro); }
.badge-tipo-nota_debito { background: #fd7e14; }
/* ---------------------------------------------------------------------
   ZONA VACÍA / ZONA DE ARRASTRE
   Sustituye a la vieja .dropzone, que estaba definida pero no la usaba
   nadie. Ocupa el espacio de la tabla ausente: si no hay nada que
   mostrar, lo que corresponde es invitar a traer los datos.
   --------------------------------------------------------------------- */
.zona-vacia {
  border: 2px dashed var(--gris-300);
  border-radius: var(--radio-md);
  background: var(--superficie);
  padding: 3rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.zona-vacia:hover { border-color: var(--contribia-verde-claro); background: var(--tinte-verde); }
.zona-vacia:focus-visible {
  outline: none;
  border-color: var(--contribia-verde);
  box-shadow: 0 0 0 3px rgba(30, 107, 63, .18);
}

/* Mientras el puntero trae archivos encima: el borde se vuelve sólido y
   la zona se agranda apenas. Confirma que ese es el destino correcto. */
.zona-vacia-activa {
  border-style: solid;
  border-color: var(--contribia-verde);
  background: var(--tinte-verde-fuerte);
  transform: scale(1.008);
}
.zona-vacia-ocupada { cursor: progress; opacity: .65; }

.zona-vacia-icono { font-size: 2.5rem; color: var(--gris-300); display: block; margin-bottom: .75rem; }
.zona-vacia-activa .zona-vacia-icono { color: var(--contribia-verde); }
.zona-vacia-titulo { font-weight: 600; color: var(--gris-700); margin-bottom: .35rem; }
.zona-vacia-texto {
  color: var(--gris-500); font-size: var(--texto-md);
  max-width: 42ch; margin: 0 auto 1.1rem;
}
.zona-vacia-pie { margin-top: .9rem; font-size: var(--texto-md); color: var(--gris-500); }
.zona-vacia-pie:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .zona-vacia, .zona-vacia-activa { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------
   AUTENTICACION (login / registro) - estilo Contribia
   --------------------------------------------------------------------- */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2f0;
  padding: 2rem 1rem;
}
.auth-card {
  display: flex;
  width: 100%;
  max-width: 920px;
  min-height: 520px;
  background: #fff;
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(20, 83, 45, .18);
}
.auth-brand {
  flex: 0 0 44%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--contribia-verde-oscuro), var(--contribia-verde));
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.auth-brand::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -18%;
  width: 70%;
  height: 130%;
  transform: translateY(-50%);
  background: var(--contribia-verde-claro);
  opacity: .35;
  border-radius: 50%;
}
.auth-brand-content { position: relative; z-index: 1; }
.auth-logo-circle {
  width: 84px; height: 84px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  margin-bottom: 1rem;
}
.auth-logo-circle img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.auth-logo-circle i { font-size: var(--texto-2xl); color: var(--contribia-verde); }
.auth-brand-nombre { letter-spacing: .12em; font-weight: 700; font-size: var(--texto-sm); opacity: .9; margin-bottom: 2rem; }
.auth-brand h2 { font-weight: 800; margin-bottom: .75rem; }
.auth-brand p { opacity: .9; margin-bottom: 0; }

.auth-form-panel { flex: 1; padding: 3rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.auth-form-panel h2 { color: var(--contribia-verde-oscuro); font-weight: 800; }
.auth-form-panel .subtitulo { color: var(--gris-500); margin-bottom: 1.75rem; }
.auth-input {
  background: #eef1f5; border: none; border-radius: var(--radio-md);
  padding: .85rem 1.1rem; width: 100%; font-size: var(--texto-base);
}
.auth-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(30,107,63,.15); background: #fff; }
.auth-btn {
  background: var(--contribia-verde-oscuro); color: #fff; border: none;
  border-radius: var(--radio-md); padding: .9rem; width: 100%; font-weight: 700;
  transition: background .15s;
}
.auth-btn:hover:not(:disabled) { background: var(--contribia-verde); }
.auth-btn:disabled { opacity: .7; }
.auth-link { color: var(--contribia-verde); font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .auth-brand { display: none; }
  .auth-form-panel { padding: 2.5rem 1.75rem; }
}

/* ---------------------------------------------------------------------
   SHELL: sidebar + topbar (panel interno)
   --------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; background: var(--fondo-shell); }

.app-sidebar {
  width: 260px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--contribia-verde-oscuro), #123a20);
  color: #fff;
  margin: 1rem 0 1rem 1rem;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  padding-bottom: 1rem;
  overflow: hidden;
  transition: width .18s ease, margin .18s ease, padding .18s ease;
}
.app-sidebar.colapsado { width: 0; margin: 0; padding: 0; box-shadow: none; }

.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1.25rem 1.1rem; white-space: nowrap; }
.sidebar-logo { width: 34px; height: 34px; background: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.sidebar-brand-nombre { font-weight: 800; letter-spacing: .03em; font-size: var(--texto-lg); }

.sidebar-section-label {
  text-transform: uppercase; font-size: var(--texto-xs); letter-spacing: .08em;
  color: rgba(255,255,255,.55); padding: 1rem 1.25rem .35rem; white-space: nowrap;
}
.sidebar-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem 1rem; margin: .1rem .6rem; border-radius: var(--radio-sm);
  color: rgba(255,255,255,.9); text-decoration: none; white-space: nowrap;
  transition: background .12s;
}
.sidebar-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-item.active { background: #fff; color: var(--contribia-verde-oscuro); font-weight: 700; }
.sidebar-item.bloqueado { opacity: .5; cursor: not-allowed; }
.sidebar-item.bloqueado:hover { background: transparent; }
.sidebar-item i { font-size: var(--texto-lg); width: 20px; text-align: center; }

.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  height: 64px; background: #fff; border-bottom: 1px solid var(--gris-200);
  display: flex; align-items: center; padding: 0 1.25rem; gap: 1rem; flex-shrink: 0;
}
.hamburger-btn { background: none; border: none; font-size: var(--texto-lg); color: var(--gris-600); padding: .25rem .5rem; border-radius: var(--radio-sm); }
.hamburger-btn:hover { background: var(--gris-100); }

.bell-btn { position: relative; background: none; border: none; font-size: var(--texto-lg); color: var(--gris-600); padding: .25rem .5rem; }
.bell-badge {
  position: absolute; top: 0; right: 0; background: var(--peligro); color: #fff;
  border-radius: 50%; font-size: var(--texto-2xs); min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.topbar-user { display: flex; align-items: center; gap: .55rem; background: none; border: none; padding: .25rem .4rem; border-radius: var(--radio-sm); }
.topbar-user:hover { background: var(--gris-100); }
.avatar-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--contribia-verde); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  flex-shrink: 0;
}

.app-main { flex: 1; padding: 1.5rem; background: var(--fondo-app); overflow-y: auto; }

/* Tarjetas de resumen del Panel */
.stat-card {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border-radius: var(--radio-md); padding: 1.25rem 1.5rem;
  box-shadow: var(--sombra-sm);
  height: 100%; transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgba(20,83,45,.12); }
.stat-card-icon {
  width: 52px; height: 52px; border-radius: var(--radio-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--texto-lg); color: #fff;
}
.stat-card-value { font-size: var(--texto-xl); font-weight: 800; line-height: 1.1; color: var(--gris-800); }
.stat-card-value-texto { font-size: var(--texto-lg); }
.stat-card-unidad { font-size: var(--texto-base); font-weight: 500; color: var(--gris-500); }
.stat-card-label { color: var(--gris-500); font-size: var(--texto-md); margin-top: .2rem; }
.stat-card-green .stat-card-icon { background: var(--contribia-verde-oscuro); }
.stat-card-blue  .stat-card-icon { background: var(--info); }
.stat-card-amber .stat-card-icon { background: var(--aviso); }

/* Tarjetas compactas de Contribuyentes */
.contribuyente-card { border: 1px solid var(--gris-200); border-radius: var(--radio-md); transition: box-shadow .15s, transform .15s; }
.contribuyente-card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.07); transform: translateY(-1px); }
.contribuyente-card .card-body { padding: .85rem .9rem; }
.contribuyente-card .card-title { font-size: var(--texto-base); }

/* Botón de volver (Obligaciones) */
.btn-volver {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; border: 1px solid var(--gris-200); color: var(--contribia-verde-oscuro);
  border-radius: var(--radio-pill); padding: .4rem .9rem .4rem .7rem; font-weight: 600; font-size: var(--texto-md);
  transition: background .15s, transform .15s;
}
.btn-volver:hover { background: var(--contribia-verde-oscuro); color: #fff; transform: translateX(-2px); }

/* Pestañas de Obligaciones (estilo hojas de Excel) */
.pestanas-obligaciones { gap: .4rem; border-bottom: 1px solid var(--gris-200); padding-bottom: .5rem; flex-wrap: wrap; }
.pestanas-obligaciones .nav-link {
  border-radius: var(--radio-pill); padding: .4rem 1rem; font-size: var(--texto-md); font-weight: 600;
  color: var(--gris-600); background: #fff; border: 1px solid var(--gris-200);
  display: flex; align-items: center; gap: .4rem;
}
.pestanas-obligaciones .nav-link .badge { font-size: var(--texto-xs); }
.pestanas-obligaciones .nav-link.active { background: var(--contribia-verde-oscuro); color: #fff; border-color: var(--contribia-verde-oscuro); }

.th-ordenable { cursor: pointer; user-select: none; }
.th-ordenable:hover { background: var(--gris-100); }
.th-ordenable i { font-size: var(--texto-xs); margin-left: .2rem; }

.lote-acciones {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--tinte-verde); border: 1px solid #cfe8d9; border-radius: var(--radio-md);
  padding: .5rem .75rem;
}

.btn-detalle-celda {
  background: none; border: none; padding: 0; color: var(--contribia-verde);
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-detalle-celda:hover { text-decoration: underline; }
.btn-detalle-celda i { font-size: var(--texto-xs); margin-left: 2px; opacity: .55; }
/* Select de catálogo (Sustento, Forma de Pago, etc.): el nombre completo no
   cabe en el ancho de la celda, así que se ve con letra chica y se recorta
   con "..."; el texto completo queda disponible como tooltip nativo (title). */
.select-sustento, .select-compacto {
  font-size: var(--texto-2xs);
  max-width: 100%;
}
.select-sustento option, .select-compacto option { font-size: var(--texto-sm); }
/* Formularios compactos con secciones (fila manual / editar comprobante) */
.form-modal-compacto { font-size: var(--texto-md); }
.form-modal-compacto .form-label { font-size: var(--texto-xs); margin-bottom: .2rem; color: var(--gris-600); }
.form-modal-compacto .form-control, .form-modal-compacto .form-select {
  font-size: var(--texto-sm); padding: .35rem .55rem;
}
/* Campos numéricos de la sección "Valores" (bases, subtotales, impuestos):
   más angostos y compactos que el resto del formulario — van marcados con
   -sm explícitamente para pedir este tamaño extra reducido. */
.form-modal-compacto .form-control-sm, .form-modal-compacto .form-select-sm {
  font-size: var(--texto-xs); padding: .22rem .4rem;
}
.form-modal-compacto .seccion-form {
  font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--contribia-verde-oscuro); margin: .9rem 0 .35rem;
}
.form-modal-compacto .seccion-form:first-child { margin-top: 0; }

/* ===== Rediseño "Editar comprobante": tarjetas discretas estilo ERP ===== */
.ec-card {
  border: 1px solid var(--gris-150);
  border-radius: var(--radio-sm);
  background: #fbfcfd;
  padding: .6rem .75rem .65rem;
}
.ec-card-header {
  display: flex; align-items: center; gap: .35rem;
  font-size: var(--texto-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--contribia-verde-oscuro); margin-bottom: .5rem;
}
.ec-card-header i { font-size: var(--texto-sm); }
.ec-subgrupo {
  font-size: var(--texto-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: #8a94a6; margin: .55rem 0 .3rem;
}
.ec-subgrupo:first-of-type { margin-top: 0; }

/* Modal de productos: letra más chica en todo el contenido */
.modal-productos-body { font-size: var(--texto-sm); }
.modal-productos-body h6 { font-size: var(--texto-sm); }
.modal-productos-body .tabla-desglose-gravada .fila-subtotal { font-size: var(--texto-sm); padding: .22rem 0 .22rem .6rem; }
.modal-productos-body .tabla-desglose-gravada .fila-subtotal .valor-iva { font-size: var(--texto-xs); }
.modal-productos-body .tabla-desglose-gravada .fila-total { font-size: var(--texto-md); }

/* Modal de productos: desglose de subtotales -> base gravada */
.tabla-desglose-gravada { border: 1px solid var(--gris-200); border-radius: var(--radio-sm); padding: .5rem .75rem; }
.tabla-desglose-gravada .fila-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .3rem 0 .3rem .75rem; font-size: var(--texto-base); color: var(--gris-700);
  border-bottom: 1px dashed #eee;
}
.tabla-desglose-gravada .fila-subtotal:last-of-type { border-bottom: none; }
.tabla-desglose-gravada .fila-subtotal .etiqueta { font-weight: 600; }
.tabla-desglose-gravada .fila-subtotal .valores { display: flex; gap: 1rem; }
.tabla-desglose-gravada .fila-subtotal .valores .valor-iva { color: var(--gris-500); font-size: var(--texto-md); }
.tabla-desglose-gravada .fila-total {
  display: flex; justify-content: space-between;
  padding: .35rem 0; font-weight: 700; font-size: var(--texto-base);
  border-top: 1px solid var(--gris-250); margin-top: .25rem;
}
.tabla-desglose-gravada .fila-total:last-child { color: var(--contribia-verde-oscuro); }

/* =====================================================================
   MODAL DE TOTALES — resumen en tarjetas + desglose en grid + retenciones
   en dos columnas. Sobrio, bordes sutiles, sombras suaves, sin degradados.
   ===================================================================== */
.modal-totales-v3 .modal-dialog { max-width: 650px; }
.modal-totales-v3 .modal-content { border-radius: var(--radio-sm); border: none; box-shadow: 0 .5rem 1.75rem rgba(15,23,42,.1); }
.modal-totales-v3 .modal-header { padding: 1.1rem 1.35rem; border-bottom: 1px solid #eef0f3; }
.modal-totales-v3 .modal-body { padding: 1.25rem 1.35rem; }
.modal-totales-v3 .modal-footer { padding: .85rem 1.35rem; border-top: 1px solid #eef0f3; }

/* Encabezados de sección: ícono discreto + texto */
.totales-seccion-titulo {
  display: flex; align-items: center; gap: .45rem;
  font-size: var(--texto-sm); font-weight: 600; color: var(--gris-600);
  margin: 1.5rem 0 .65rem;
}
.totales-seccion-titulo:first-child { margin-top: 0; }
.totales-seccion-titulo i { font-size: var(--texto-base); color: var(--gris-400); }

/* Tarjetas resumen — mismo tamaño, compactas. auto-fit para que se vea
   bien tanto con 5 (modal de Totales) como con 6 u 4 (Reportes). */
.resumen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
}
.resumen-card {
  border: 1px solid #eceef1; border-radius: var(--radio-sm);
  padding: .7rem .8rem;
  background: #fff;
}
.resumen-card .resumen-etiqueta { font-size: var(--texto-2xs); color: var(--gris-400); margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resumen-card .resumen-valor { font-size: var(--texto-base); font-weight: 700; color: var(--gris-900); }

/* 2) Desglose de la base gravada por tarifa — grid de 3 columnas */
.tarifa-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  row-gap: .3rem; column-gap: 1.5rem;
}
.tarifa-item { display: flex; justify-content: space-between; padding: .3rem 0; font-size: var(--texto-md); border-bottom: 1px solid #f4f5f7; }
.tarifa-item .tarifa-etiqueta { color: var(--gris-400); }
.tarifa-item .tarifa-valor { font-weight: 600; color: var(--gris-700); font-variant-numeric: tabular-nums; }

/* Ítem combinado: la misma tarifa mostrando base e IVA juntos */
.tarifa-item-combo { align-items: flex-start; }
.tarifa-item-combo .tarifa-etiqueta { padding-top: .1rem; }
.tarifa-combo-valores { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.tarifa-combo-valores .tarifa-valor { line-height: 1.15; }
.tarifa-combo-valores .tarifa-iva-secundario { font-size: var(--texto-2xs); color: var(--gris-300); font-weight: 500; }

.totales-resaltados {
  display: flex; flex-wrap: wrap; gap: .4rem 2rem;
  margin-top: .5rem; padding-top: .65rem; border-top: 1px solid var(--gris-200);
}
.totales-resaltados .fila { display: flex; justify-content: space-between; gap: 1rem; flex: 1 1 220px; }
.totales-resaltados .fila .etq { font-size: var(--texto-md); color: var(--gris-600); font-weight: 600; }
.totales-resaltados .fila .val { font-size: var(--texto-base); font-weight: 700; color: var(--contribia-verde-oscuro); font-variant-numeric: tabular-nums; }

/* 4) Retenciones: dos paneles lado a lado */
.retenciones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.retencion-panel { border: 1px solid #eceef1; border-radius: var(--radio-sm); padding: .85rem 1rem; }
.retencion-panel .panel-header {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--texto-xs); font-weight: 600; color: var(--gris-600);
  margin-bottom: .55rem; padding-bottom: .55rem; border-bottom: 1px solid var(--gris-100);
}
.retencion-panel .panel-header i { color: var(--gris-400); }
.retencion-fila { display: flex; justify-content: space-between; padding: .32rem 0; font-size: var(--texto-md); }
.retencion-fila .etq { color: var(--gris-400); }
.retencion-fila .val { font-weight: 600; color: var(--gris-700); font-variant-numeric: tabular-nums; }
.retencion-panel .panel-total {
  display: flex; justify-content: space-between; margin-top: .45rem;
  padding-top: .55rem; border-top: 1px solid var(--gris-200);
  font-size: var(--texto-md); font-weight: 700; color: var(--gris-900);
}

@media (max-width: 768px) {
  .resumen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarifa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .retenciones-grid { grid-template-columns: 1fr; }
  .tarifa-grid { grid-template-columns: 1fr; }
}

/* Barras de desplazamiento finas y discretas (tablas con scroll horizontal/vertical) */
.table-responsive {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: #c7d0d6 transparent;         /* Firefox */
}
.table-responsive::-webkit-scrollbar { width: 7px; height: 7px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb { background-color: #c7d0d6; border-radius: var(--radio-sm); }
.table-responsive::-webkit-scrollbar-thumb:hover { background-color: #a9b4bc; }
.table-responsive::-webkit-scrollbar-corner { background: transparent; }

/* Bordes de fila más visibles en todas las tablas del sistema — el borde
   por defecto de Bootstrap se ve casi invisible; se usa el mismo tono
   sutil que ya usan las tarjetas de los modales de Editar/Agregar
   comprobante (.ec-card, var(--gris-150)) para mantener todo consistente. */
.table { --bs-table-border-color: var(--gris-150); }

/* Facturas con alguna retención emitida ya aplicada (IVA y/o Renta) —
   color distinto al de "excluido del ATS" (gris) o "seleccionado" (azul
   de Bootstrap), para no confundirlos. */
.fila-con-retencion { background-color: var(--tinte-verde) !important; }
.fila-con-retencion:hover { background-color: var(--tinte-verde-fuerte) !important; }

/* Liquidación de compra a proveedor del exterior (tipo_id_proveedor='03') —
   color distinto al de "con retención" para no confundirlos. */
.fila-exterior { background-color: var(--tinte-azul) !important; }
.fila-exterior:hover { background-color: var(--tinte-azul-fuerte) !important; }

/* Scroll vertical real dentro de la tabla (en vez de estirar toda la
   página) — el max-height por sí solo no recorta el contenido si no se
   fija overflow-y; por eso va en una clase aparte y no como estilo suelto. */
.tabla-con-scroll { max-height: 60vh; overflow-y: auto; }
.tabla-con-scroll thead th { position: sticky; top: 0; z-index: 1; background: #fff; }

/* Barra compacta de período + generar ATS (la tabla es la protagonista) */
.obligaciones-toolbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio-md);
  padding: .5rem .75rem;
}

@media (max-width: 767px) {
  .app-sidebar { position: fixed; z-index: 1040; height: 100vh; }
  .app-sidebar:not(.colapsado) { width: 260px; }
  .app-sidebar.colapsado { width: 0; }
}

/* ---------------------------------------------------------------------
   FEEDBACK DEL GUARDADO EN LÍNEA
   Los cambios directos en la tabla (Sustento, incluir en ATS) viajan al
   servidor sin que el usuario aprete "guardar". Sin señal visible, la
   única forma de saber si el cambio quedó era recargar la página.
   Tres estados, todos discretos: la tabla no debe convertirse en un
   árbol de navidad cada vez que alguien cambia un sustento.
   --------------------------------------------------------------------- */
.celda-editable { position: relative; }

/* En vuelo: el control se atenúa apenas, lo justo para que se note que
   algo está pasando sin que el texto deje de leerse. */
.celda-guardando { opacity: .55; transition: opacity .12s; }

/* Confirmado: un destello verde que se apaga solo en 1,8 s. */
.celda-guardado {
  border-color: var(--contribia-verde-claro) !important;
  animation: destello-guardado 1.8s ease-out;
}
@keyframes destello-guardado {
  0%   { background-color: rgba(47, 158, 99, .22); }
  100% { background-color: transparent; }
}

/* Falló: se queda hasta el siguiente intento. Este SÍ tiene que molestar. */
.celda-error {
  border-color: var(--peligro) !important;
  background-color: rgba(220, 53, 69, .07) !important;
}

/* Marca junto al control. El check acompaña al destello y se va con él;
   el aviso de error se queda. Ambos con position absolute para no
   descolocar la fila al aparecer — si empujaran, la tabla saltaría
   entera cada vez que se guarda algo. */
.marca-guardado, .marca-error {
  position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  font-size: var(--texto-sm); pointer-events: none;
}
.marca-guardado { color: var(--contribia-verde-claro); animation: aparecer-marca .18s ease-out; }
.marca-error { color: var(--peligro); pointer-events: auto; }
.marca-switch { right: -14px; }

@keyframes aparecer-marca {
  from { opacity: 0; transform: translateY(-50%) scale(.6); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* Quien pidió menos animación en su sistema operativo no debería ver
   destellos: el color final es el mismo, solo se salta la transición. */
@media (prefers-reduced-motion: reduce) {
  .celda-guardado, .marca-guardado { animation: none; }
}

/* =====================================================================
   FOCO VISIBLE
   Bootstrap trae su anillo de foco, pero varios componentes propios lo
   pisan: .auth-input lo reemplaza, y .sidebar-item, .btn-volver,
   .hamburger-btn o .btn-detalle-celda nunca definieron ninguno. Quien
   navega con teclado —que en captura de datos es casi todo el mundo—
   se quedaba sin saber dónde estaba parado.

   Se usa :focus-visible y no :focus a propósito: el anillo aparece al
   navegar con teclado y no al hacer clic con el mouse, que es cuando
   estorba.
   ===================================================================== */
:root {
  --anillo-foco: 0 0 0 3px rgba(30, 107, 63, .35);
  --anillo-foco-claro: 0 0 0 3px rgba(255, 255, 255, .55);
}

.btn-volver:focus-visible,
.hamburger-btn:focus-visible,
.bell-btn:focus-visible,
.topbar-user:focus-visible,
.btn-detalle-celda:focus-visible,
.contribuyente-card:focus-visible,
.card-plan:focus-visible,
.pestanas-obligaciones .nav-link:focus-visible,
.th-ordenable:focus-visible,
.auth-btn:focus-visible,
.auth-link:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco);
  border-radius: var(--radio-sm);
}

/* Sobre el verde oscuro del sidebar, el anillo verde no se ve: ahí va claro. */
.sidebar-item:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco-claro);
  background: rgba(255, 255, 255, .12);
}

/* Controles dentro de las tablas densas.
   El anillo va HACIA ADENTRO (outline-offset negativo) porque la tercera
   columna congelada tiene overflow:hidden y un anillo exterior quedaría
   recortado justo por la mitad. */
.tabla-comprobantes :is(input, select, button):focus-visible,
.tabla-compacta :is(input, select, button):focus-visible {
  outline: 2px solid var(--contribia-verde);
  outline-offset: -2px;
  border-radius: 4px;
  /* Un fondo tenue además del anillo: en una fila ya coloreada por estado
     (con retención, del exterior, excluida) el anillo solo puede perderse. */
  background-color: rgba(47, 158, 99, .10);
}

/* La celda con foco sube por encima de sus vecinas para que el anillo no
   quede tapado.
   OJO: aquí NO se puede tocar 'position'. Las seis primeras columnas son
   position: sticky, y ponerles 'relative' al recibir el foco las
   descongelaba: al hacer clic en un botón, la celda saltaba a su posición
   natural dentro del scroll. El z-index solo hace falta en las celdas ya
   posicionadas, que son justamente las congeladas. */
.tabla-comprobantes td:focus-within { z-index: 4; }

/* Enlace para saltar al contenido: primer tabulador de la página. No se
   ve hasta que se le da foco. */
.saltar-al-contenido {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--contribia-verde-oscuro); color: #fff;
  padding: .6rem 1rem; border-radius: 0 0 var(--radio-sm) 0;
  font-weight: 600; text-decoration: none;
}
.saltar-al-contenido:focus {
  left: 0;
  color: #fff;
}

/* =====================================================================
   TABLERO DE CUMPLIMIENTO (panel de inicio)
   Una cuadrícula de contribuyentes × meses. La pregunta que responde es
   "¿qué me falta?", así que lo que tiene que saltar a la vista son los
   huecos, no lo que ya está hecho.
   ===================================================================== */
.tabla-cumplimiento { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 620px; }
.tabla-cumplimiento th {
  font-size: var(--texto-2xs); font-weight: 600; color: var(--gris-400);
  text-align: center; padding: 0 0 .25rem; white-space: nowrap;
}
/* Enero, Febrero… mientras haya ancho; Ene, Feb… cuando no. El cambio es
   solo de CSS para no depender del tamaño de ventana desde JavaScript. */
.tabla-cumplimiento .mes-corto { display: none; }
@media (max-width: 1400px) {
  .tabla-cumplimiento .mes-largo { display: none; }
  .tabla-cumplimiento .mes-corto { display: inline; }
}
.tabla-cumplimiento .col-contribuyente {
  text-align: left; max-width: 240px; min-width: 160px;
  padding-right: .75rem; font-size: var(--texto-md);
}
.celda-mes { padding: 0; }

.celda-cumplimiento {
  width: 100%; min-width: 42px; height: 28px;
  border: none; border-radius: 5px; padding: 0 .3rem;
  display: block; cursor: pointer;
  font-size: var(--texto-2xs); font-weight: 600; line-height: 28px;
  color: rgba(255, 255, 255, .92);
  transition: transform .1s, box-shadow .1s;
}
/* Ya no crece al pasar por encima: con celdas anchas el "scale" empujaba
   visualmente a las vecinas. Sube en sombra, que no desplaza nada. */
.celda-cumplimiento:hover:not(:disabled) { box-shadow: 0 .2rem .5rem rgba(0,0,0,.22); filter: brightness(1.08); }
.celda-cumplimiento:focus-visible { outline: 2px solid var(--gris-700); outline-offset: 2px; }
.celda-cumplimiento:disabled { cursor: default; }

/* Verde = el período ya tiene su ATS; ámbar = hay movimiento y falta el
   anexo; gris = sin movimiento. El ámbar es el único que llama la
   atención, que es exactamente el punto. */
.celda-presentado { background: var(--contribia-verde); }
.celda-pendiente  { background: var(--aviso); color: rgba(0, 0, 0, .72); }
.celda-vacio      { background: var(--gris-200); }
.celda-futuro     { background: repeating-linear-gradient(45deg, var(--gris-50), var(--gris-50) 3px, var(--gris-100) 3px, var(--gris-100) 6px); }

.leyenda-punto {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  vertical-align: -1px; margin-right: .25rem;
}

/* --- Alertas del panel --------------------------------------------- */
.panel-alerta {
  background: var(--superficie); border: 1px solid var(--gris-200);
  border-left: 4px solid var(--gris-300);
  border-radius: var(--radio-sm); padding: .8rem 1rem;
}
.panel-alerta-aviso   { border-left-color: var(--aviso); }
.panel-alerta-peligro { border-left-color: var(--peligro); }
.panel-alerta-cabecera {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--texto-md); color: var(--gris-700); margin-bottom: .4rem;
}
.panel-alerta-aviso .panel-alerta-cabecera i   { color: var(--aviso); }
.panel-alerta-peligro .panel-alerta-cabecera i { color: var(--peligro); }
.panel-alerta-lista {
  list-style: none; margin: 0; padding: 0 0 0 1.6rem;
  font-size: var(--texto-md);
}
.panel-alerta-lista li { padding: .12rem 0; }

@media (prefers-reduced-motion: reduce) {
  .celda-cumplimiento { transition: none; }
}