/* strateon-impuesto — panel de trabajo.
   El trabajo real es escanear decenas de filas buscando las pocas que
   estan mal.
   Por eso: el color existe SOLO para el estado, y los importes van con
   cifras tabulares para que los decimales se alineen en columna. */

:root {
  --papel:    #f5f7f7;
  --tarjeta:  #ffffff;
  --tinta:    #14181b;
  --tenue:    #5c666d;
  --linea:    #d5dadd;
  --ok:       #0b6b3a;
  --revisar:  #8a5a00;
  --error:    #96201c;
  --foco:     #1b4d8f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Los numeros de una declaracion tienen que alinearse decimal con decimal. */
.num, input.num, .tabla td.num, .tabla th.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1.5rem;
  background: var(--tarjeta); border-bottom: 1px solid var(--linea);
}
.marca { font-weight: 600; color: inherit; text-decoration: none; }

.contenido { max-width: 62rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.contenido.angosto { max-width: 24rem; padding-top: 5rem; }
.contenido.ancho   { max-width: 84rem; }

h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 .25rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }
a { color: var(--foco); }

.miga { margin: 0 0 1rem; font-size: .875rem; }
.apunte, .pista { color: var(--tenue); font-size: .875rem; font-style: normal; }
.vacio {
  color: var(--tenue); background: var(--tarjeta);
  border: 1px dashed var(--linea); border-radius: 4px;
  padding: 1.5rem; margin: 1.5rem 0;
}

/* El recuento es lo primero que se mira al abrir un mes. */
.recuento { margin: 0 0 1.5rem; color: var(--tenue); }
.recuento strong.revisar { color: var(--revisar); }

.subida {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 4px; padding: 1rem; margin-bottom: 1.5rem;
}

.tabla {
  width: 100%; border-collapse: collapse;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 4px;
}
.tabla th {
  text-align: left; font-size: .8125rem; font-weight: 600; color: var(--tenue);
  padding: .625rem .75rem; border-bottom: 1px solid var(--linea);
}
.tabla td { padding: .625rem .75rem; border-bottom: 1px solid var(--linea); }
.tabla tbody tr:last-child td { border-bottom: none; }
.archivo { color: var(--tenue); font-size: .875rem; word-break: break-all; }

/* La fila que necesita atencion se marca en el borde izquierdo, no con
   un fondo: el fondo compite con la lectura de los numeros. */
.fila-revisar td:first-child { box-shadow: inset 3px 0 var(--revisar); }
.fila-error td:first-child,
.fila-duplicado td:first-child { box-shadow: inset 3px 0 var(--error); }

.motivo td { padding-top: 0; color: var(--revisar); font-size: .875rem; border-bottom: 1px solid var(--linea); }

.estado { font-size: .8125rem; font-weight: 600; }
.estado.ok { color: var(--ok); }
.estado.revisar { color: var(--revisar); }
.estado.error, .estado.duplicado { color: var(--error); }

.aviso {
  padding: .75rem 1rem; border-radius: 4px; margin: 0 0 1.25rem;
  background: var(--tarjeta); border-left: 3px solid var(--linea);
}
.aviso.revisar { border-left-color: var(--revisar); color: var(--revisar); }
.aviso.error   { border-left-color: var(--error);   color: var(--error); }

/* Cotejo: el documento y su transcripcion, uno al lado del otro. */
.cotejo { display: grid; grid-template-columns: 1fr 22rem; gap: 1.5rem; align-items: start; }
.documento { margin: 0; }
.documento embed {
  width: 100%; height: 78vh; min-height: 30rem;
  border: 1px solid var(--linea); border-radius: 4px; background: var(--tarjeta);
}
.documento figcaption { padding-top: .5rem; }

.campos, .pila {
  display: flex; flex-direction: column; gap: .875rem;
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 4px; padding: 1.25rem;
}
.pila { margin-top: 1rem; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
.doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }

label { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; color: var(--tenue); }
label > span { color: var(--tinta); }
input, select {
  font: inherit; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea); border-radius: 3px; padding: .5rem .625rem; width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--foco); outline-offset: 2px;
}

/* Un campo dudoso se marca en el propio campo, donde esta la correccion. */
.campo.dudoso input { border-color: var(--revisar); background: #fffdf7; }
.campo.dudoso .pista { color: var(--revisar); }

button, .principal {
  font: inherit; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 3px;
  background: var(--papel); color: var(--tinta); padding: .5rem .875rem;
}
.principal {
  background: var(--tinta); color: #fff; border-color: var(--tinta);
  text-decoration: none; display: inline-block;
}
.enlace {
  background: none; border: none; padding: 0;
  color: var(--foco); text-decoration: underline;
}
.acciones { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 .5rem; }

@media (max-width: 60rem) {
  .cotejo, .doble { grid-template-columns: 1fr; }
  .documento embed { height: 55vh; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Aviso de alcance. Aparece junto al boton que ejecuta la accion, con peso
   visual suficiente para leerse: si estuviera en gris chico al pie, no
   cumpliria su funcion. Sin display:none, sin colapsar, sin descartar. */
.responsabilidad {
  margin: 0 0 1rem;
  padding: .75rem .875rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--revisar);
  border-radius: 3px;
}
.acciones + .apunte { margin-top: .5rem; }