/* ==========================================================================
   Botones — un estilo por intención, sin excepciones
   ========================================================================== */
button {
  padding: var(--size-xxs) var(--size);
  min-height: 32px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease),
              color var(--dur-mid) var(--ease);
}
button:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
button:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }
button:disabled {
  background: var(--color-fill-secondary);
  border-color: var(--color-border);
  color: var(--color-text-quaternary);
  cursor: not-allowed;
}

.secundario {
  background: var(--color-bg-container);
  border-color: var(--color-border);
  color: var(--color-text);
}
.secundario:hover,
.secundario:active {
  background: var(--color-bg-container);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Borrar no se parece a guardar: antes ambos eran el mismo botón azul y lo
   único que cambiaba era el color de la letra. */
.peligro {
  background: var(--color-bg-container);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}
.peligro:hover { background: var(--color-error); border-color: var(--color-error); color: #fff; }
.peligro:active { background: var(--color-error-active); border-color: var(--color-error-active); }

.volver,
.enlace {
  align-self: flex-start;
  padding: 0;
  min-height: 0;
  border: none;
  background: none;
  color: var(--color-text-secondary);
}
.volver:hover,
.enlace:hover,
.volver:active,
.enlace:active { background: none; color: var(--color-primary); }
.enlace { color: var(--color-primary); text-decoration: underline; }

/* ==========================================================================
   Formularios
   ========================================================================== */
label {
  display: block;
  color: var(--color-text-secondary);
}
label > input,
label > select {
  margin-top: var(--size-xxs);
}

input, select, textarea {
  width: 100%;
  padding: var(--size-xxs) var(--size-sm);
  min-height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-container);
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--color-primary-hover); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-bg);
}
/* Las casillas y los radios no son campos que se llenan: son marcas. Sin
   sacarlos del ancho completo de arriba, el círculo se estira hasta empujar su
   propio rótulo a tres renglones. */
input[type='checkbox'],
input[type='radio'] {
  width: auto;
  min-height: 0;
  accent-color: var(--color-primary);
}
input[type='file'] {
  padding: var(--size-xxs);
  color: var(--color-text-secondary);
}
input[inputmode='decimal'],
input[inputmode='numeric'] { font-variant-numeric: tabular-nums; }

/* Un panel es cualquier bloque de contenido sobre fondo blanco: formularios,
   filtros, el selector de cliente. Mismo tratamiento en toda la app. */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--size-sm);
  padding: var(--size);
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
}

/* Un panel que se presenta a sí mismo. El título va en el peso del texto y no
   en el tamaño: es una sección secundaria de la pantalla, no otra cabecera que
   compita con la de arriba. */
.panel-titulo {
  margin: 0;
  font-size: var(--font-size);
  font-weight: 600;
}
.panel-nota {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Dos acciones sobre lo mismo, juntas: sin esto el justify-content de la fila
   las separa a los dos extremos y dejan de leerse como un par. */
.cabecera-acciones {
  display: flex;
  gap: var(--size-xs);
  flex-wrap: wrap;
}

/* Una cuenta externa no tiene saldo que enseñar: la fila es su nombre y la
   salida para devolverla al lado propio. */
.externa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-sm);
}
.externa-nombre { font-weight: 500; }

.form-tx {
  display: grid;
  gap: var(--size-sm);
  max-width: var(--ancho-formulario);
}
.form-tx button[type='submit'] { justify-self: start; }

.form-linea {
  display: flex;
  align-items: flex-end; /* un campo con etiqueta es más alto: se alinean por abajo */
  gap: var(--size-xs);
  max-width: var(--ancho-formulario);
}
.form-linea input { flex: 1; }
.form-linea button { flex: none; }
/* Campo con etiqueta dentro de una fila: la etiqueta va encima y el input ocupa
   el ancho de la columna, no el alto (dentro del label el eje principal es vertical). */
.form-linea label {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.form-linea label > input { flex: none; }

.fila-dni {
  display: flex;
  gap: var(--size-xs);
}
.fila-dni input { flex: 1; }
.fila-dni button { flex: none; }

.campo-archivo { display: block; }
/* Mientras el archivo está encima de un campo que acepta soltar sin ser una
   zona —el de sumar comprobantes a una operación ya guardada. */
.campo-archivo.encima { outline: 1px dashed var(--color-primary); outline-offset: var(--size-xxs); }
/* El picker nativo es el único control del formulario que se ve prestado: un
   botón gris del sistema dentro de una caja con el borde del resto. Se le da el
   peso de un botón secundario —que es lo que es— sin reemplazarlo por otra cosa,
   porque el input nativo es justamente el que abre el menú de cámara, galería y
   archivos del teléfono. */
input[type='file'] {
  padding: var(--size-xxs);
  color: var(--color-text-tertiary);
  cursor: pointer;
}
input[type='file']::file-selector-button {
  margin-right: var(--size-xs);
  padding: var(--size-xxs) var(--size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-container);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}
input[type='file']::file-selector-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Donde se suelta el voucher, en cualquier pantalla que adjunte papeles. Se ve
   como un hueco a propósito —borde punteado, fondo del contenedor— porque lo
   que se espera es que algo caiga adentro. */
.drop {
  display: flex;
  flex-direction: column;
  gap: var(--size-xxs);
  padding: var(--size-xs);
  background: var(--color-bg-container);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease);
}
/* El `display: flex` de arriba le gana al `[hidden]` del navegador, y hay
   formularios que esconden la zona —el gasto en edición— con esa propiedad. */
.drop[hidden] { display: none; }
.drop:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* Mientras el archivo está encima: sin esto no hay forma de saber si el sitio
   donde se va a soltar es el correcto. */
.drop.encima {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  border-style: solid;
  color: var(--color-primary-active);
}
.drop.con-archivos { border-style: solid; border-color: var(--color-success-border); }
.drop-archivos {
  display: flex;
  flex-direction: column;
  gap: var(--size-xxs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop-archivos li {
  display: flex;
  align-items: center;
  gap: var(--size-xxs);
  padding: 0 var(--size-xxs);
  background: var(--color-success-bg);
  border-radius: var(--radius-sm);
  color: var(--color-success-text);
}
/* El nombre del archivo puede ser larguísimo y la columna es angosta: se corta
   con puntos en vez de estirar la columna. */
.drop-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.campo-nota { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }

.campo-pct,
.campo-check {
  display: flex;
  align-items: center;
  gap: var(--size-xs);
}
.campo-pct input,
.campo-check input { margin-top: 0; }
.campo-pct input { width: 80px; flex: none; }
/* Alterna entre teclear la comisión como porcentaje o como monto. Ancho fijo
   para que no salte al cambiar de rótulo. */
.toggle-modo {
  flex: none;
  width: 42px;
  padding: 0;
  background: var(--color-bg-container);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.toggle-modo:hover { background: var(--color-bg-container); border-color: var(--color-primary); color: var(--color-primary); }
.toggle-modo[data-modo='monto'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.toggle-modo[data-modo='monto']:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

/* El filtro envuelve: sumarle un campo agrega una línea, no aplasta a los que
   ya estaban ni deja el último control colgando fuera del panel. Los campos
   arrancan de una base propia y no de cero, porque repartiendo a partes iguales
   el select vacío se encogía a nada al lado de los dos campos de fecha. */
.filtro-fechas {
  flex-flow: row wrap;
  align-items: flex-end;
  gap: var(--size-sm);
  max-width: var(--ancho-formulario);
}
/* `min-width: 0` es lo que hace que la base de 120px mande: sin él, el ancho
   mínimo del campo de fecha (más ancho que eso) es el que decide dónde corta la
   línea, y los atajos bajaban solos aunque sobrara sitio. */
.filtro-fechas label {
  flex: 1 1 120px;
  min-width: 0;
  font-size: var(--font-size-sm);
}
.filtro-fechas button { flex: none; }
/* Los atajos de rango son un control de tres caras: si envuelven, envuelven
   juntos, y no queda uno huérfano en la línea siguiente. */
.filtro-atajos {
  display: flex;
  flex: none;
  gap: var(--size-xs);
}
/* Otro eje del filtro, no un atajo más: no se estira para rellenar, y se
   despega del grupo de botones para no leerse como un cuarto atajo. */
.filtro-fechas .campo-check {
  flex: none;
  margin-left: var(--size-sm);
}

/* Total en vivo dentro de un formulario: el número manda, el rótulo acompaña. */
.resumen-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--size);
  margin: 0;
  padding: var(--size-xs) var(--size-sm);
  background: var(--color-fill-tertiary);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
}
.resumen-linea strong {
  font-size: var(--font-size-xl);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.efe-ganancia { background: var(--color-success-bg); }
.efe-ganancia strong { color: var(--color-success-text); }

/* Agrupa cada lado de la operación (recibo, comisión, salida). Repite el grid
   del formulario para que sus campos se separen igual que los de fuera. */
.bloque-lado {
  display: grid;
  gap: var(--size-sm);
}

.quitar-cuenta {
  padding: 0 var(--size-xs);
  min-height: 0;
  border: none;
  background: none;
  color: var(--color-error-text);
  font-size: var(--font-size-sm);
  text-decoration: underline;
}
.quitar-cuenta:hover,
.quitar-cuenta:active { background: none; color: var(--color-error-hover); }

/* Lo que falta o sobra por repartir. El servidor rechaza el guardado si no
   cuadra, así que esto avisa mientras todavía se está escribiendo. */
.campo-aviso {
  margin: 0;
  padding: var(--size-xs) var(--size-sm);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Las tres acciones de una cuenta — meter plata, sacarla, moverla

   El mismo botón en la fila de la tabla y en la cabecera del detalle: es la
   misma acción y abre el mismo diálogo. En la tabla van solo con el icono
   —doce cuentas serían la misma palabra doce veces— y por eso el color no es
   decoración: es lo único que distingue entrar de salir sin leer nada. Fijo y
   no en hover, que en un teléfono no existe.
   ========================================================================== */
.acciones-banco {
  display: flex;
  gap: var(--size-xxs);
  justify-content: flex-end;
}
.accion-banco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-xxs);
  /* 32px es el blanco mínimo de un icono suelto; con rótulo lo pone el texto. */
  min-width: 32px;
  padding: var(--size-xxs);
  background: transparent;
  border-color: transparent;
}
.accion-banco:hover,
.accion-banco:active {
  background: var(--color-fill-tertiary);
  border-color: var(--color-border-secondary);
}
.accion-ingreso { color: var(--color-success-text); }
.accion-gasto { color: var(--color-error-text); }
.accion-transferencia { color: var(--color-text-secondary); }

/* Con rótulo hay sitio para leerlo, así que el color vuelve al texto normal y
   se queda solo en la flecha: tres botones enteros en rojo y verde en la
   cabecera pesarían más que el nombre de la cuenta, que es el título. */
.acciones-banco-rotuladas .accion-banco {
  padding: var(--size-xxs) var(--size-sm);
  border-color: var(--color-border);
  background: var(--color-bg-container);
  color: var(--color-text);
}
.acciones-banco-rotuladas .accion-ingreso svg { color: var(--color-success-text); }
.acciones-banco-rotuladas .accion-gasto svg { color: var(--color-error-text); }
.acciones-banco-rotuladas .accion-transferencia svg { color: var(--color-text-secondary); }

/* ==========================================================================
   Segmentado — tres opciones fijas de las que siempre hay una puesta

   No es un select: la que rige tiene que verse sin desplegar nada, porque
   cambia lo que dice la lista de abajo. `aria-pressed` es lo que la pinta, así
   que la marca visual y la que se lee en voz alta no se pueden separar.
   ========================================================================== */
.segmentado {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.segmento {
  min-height: 32px;
  padding: var(--size-xxs) var(--size-sm);
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-container);
  color: var(--color-text-secondary);
}
.segmento:last-child { border-right: none; }
.segmento:hover,
.segmento:active {
  background: var(--color-fill-tertiary);
  color: var(--color-text);
}
.segmento[aria-pressed='true'] {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: 500;
}

/* La naturaleza del movimiento: en qué cajón cae la plata, antes de la
   categoría. A la vista y no en un desplegable porque son cuatro, no cambian
   nunca, y es la pregunta que decide qué categorías se ofrecen abajo:
   esconderla la haría parecer un detalle más del formulario. */
.campo-naturaleza {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.campo-naturaleza > legend {
  padding: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.naturalezas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-xs);
  margin-top: var(--size-xxs);
}
/* El radio nativo se deja a la vista: el círculo es lo que dice que se elige
   una sola. La píldora entera es el blanco del click, que es lo que importa en
   el celular, donde se cargan casi todos los gastos. */
.naturaleza {
  display: inline-flex;
  align-items: center;
  gap: var(--size-xs);
  padding: var(--size-xs) var(--size-sm);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
}
.naturaleza:has(input:checked) {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}
.naturaleza input { margin: 0; }