/* Calculadora freelance — estilos propios */

.cf-grid {
  display: grid;
  gap: clamp(1.1rem, 2.8vw, 1.8rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 980px) { .cf-grid { grid-template-columns: 1.15fr 0.85fr; } }

/* --- Bloques del formulario --- */
.cf-form { display: grid; gap: clamp(0.9rem, 2.2vw, 1.3rem); }

.cf-block {
  padding: 1.1rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.cf-block__title {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  font-family: var(--sans);
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.cf-block .field-row + .field-row { margin-top: 0.85rem; }

/* Importe con selector de moneda pegado */
.cf-money { display: flex; gap: 0.4rem; }
.cf-money .input { flex: 1; min-width: 0; }
.cf-moneda { width: 92px; flex: none; padding-right: 1.7rem; background-position: calc(100% - 14px) 52%, calc(100% - 8px) 52%; }

/* Rango con su valor al lado */
.cf-pct { display: flex; align-items: center; gap: 0.7rem; }
.cf-pct .range { flex: 1; }
.cf-pct__val {
  flex: none;
  min-width: 3.4rem;
  text-align: right;
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

/* --- Gastos --- */
.cf-gastos { display: grid; gap: 0.45rem; }
.cf-gasto {
  display: grid;
  grid-template-columns: 1fr 110px 32px;
  gap: 0.4rem;
  align-items: center;
  animation: cfIn 0.26s var(--ease-out) backwards;
}
@keyframes cfIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.cf-gasto .input { padding: 0.5rem 0.7rem; font-size: var(--t-base); }
.cf-gasto input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.cf-gasto__quitar {
  width: 32px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-mute);
  transition: color 0.18s var(--ease-out), background-color 0.18s var(--ease-out);
}
.cf-gasto__quitar:hover { color: var(--err-text); background: color-mix(in srgb, var(--err) 12%, transparent); }
.cf-gasto__quitar svg { width: 15px; height: 15px; }

.cf-gastos__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}
.cf-gastos__pie strong { color: var(--text); }

/* --- Salida --- */
.cf-salida { display: flex; flex-direction: column; gap: 0.8rem; }
@media (min-width: 980px) { .cf-salida { position: sticky; top: 88px; } }

.cf-destacado {
  padding: 1.2rem 1.3rem;
  text-align: center;
}
.cf-destacado__label {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
.cf-destacado__num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-block: 0.25rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cf-destacado__sub { display: block; font-size: var(--t-sm); opacity: 0.9; }

.cf-panel { padding: 1rem 1.1rem; }
.cf-panel__title {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-bottom: 0.7rem;
}

.cf-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.9rem;
  font-size: var(--t-base);
  align-items: baseline;
}
.cf-dl dt { color: var(--text-soft); }
.cf-dl dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cf-dl__fuerte {
  padding-top: 0.45rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--line);
  color: var(--text) !important;
  font-weight: 700;
}

/* --- Barra apilada (sin librería de gráficos) --- */
.cf-barra {
  display: flex;
  height: 26px;
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: var(--neu-in);
  background: var(--bg);
}
.cf-barra__t {
  height: 100%;
  transition: width 0.5s var(--ease-out);
  min-width: 0;
}
/* Los colores salen de los tokens semánticos, no de literales: son los mismos
   valores, pero así la barra sigue al sistema si el día de mañana se retoca la
   paleta, y no hay cuatro copias del naranja repartidas por el proyecto.
   El segundo tramo del degradado se calcula oscureciendo el propio token. */
.cf-barra__t--gastos {
  background: linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 72%, #000));
}
.cf-barra__t--impuestos {
  background: linear-gradient(180deg, var(--err), color-mix(in srgb, var(--err) 68%, #000));
}
.cf-barra__t--neto {
  background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 66%, #000));
}
.cf-barra__t--margen {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
}

.cf-leyenda {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.8rem;
  margin-top: 0.75rem;
  font-size: var(--t-xs);
  color: var(--text-soft);
}
.cf-leyenda li { display: flex; align-items: center; gap: 0.4rem; }
.cf-leyenda b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.cf-punto { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cf-punto--gastos { background: #f59e0b; }
.cf-punto--impuestos { background: #ef4444; }
.cf-punto--neto { background: #10b981; }
.cf-punto--margen { background: #6366f1; }

/* --- Veredicto de la oferta --- */
.cf-veredicto {
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  font-size: var(--t-base);
  background: var(--surface-2);
  border-left: 3px solid var(--line-strong);
  color: var(--text-soft);
  transition: border-color 0.25s var(--ease-out);
}
.cf-veredicto.is-bien { border-left-color: var(--ok); color: color-mix(in srgb, var(--ok) 80%, var(--text)); }
.cf-veredicto.is-justo { border-left-color: var(--warn); color: color-mix(in srgb, var(--warn) 82%, var(--text)); }
.cf-veredicto.is-mal { border-left-color: var(--err); color: color-mix(in srgb, var(--err) 80%, var(--text)); }

/* =============================================================
   Bloques nuevos: tramos, apartar, equilibrio y las seis cajas
   ============================================================= */

/* --- 01 · Tramos impositivos --- */
.cf-tramos-nota {
  margin-top: 0.9rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
.cf-tramos-nota em { color: var(--text-mute); }

[data-tramos-tabla] { margin-top: 0.7rem; }
table.data.cf-tabla-tramos { min-width: 260px; font-size: var(--t-sm); }
table.data.cf-tabla-tramos td, table.data.cf-tabla-tramos th { padding: 0.42rem 0.7rem; }
table.data.cf-tabla-tramos tr.is-dentro td {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  font-weight: 600;
}

/* El campo de tipo plano se apaga (no se oculta) cuando manda una escala */
[data-campo-plano].is-apagado { opacity: 0.55; }
[data-campo-plano].is-apagado .input { cursor: not-allowed; }

/* --- 07 · Cuánto apartar --- */
.cf-apartar-frase {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.35;
  color: var(--accent-text);
  margin-bottom: 0.7rem;
  overflow-wrap: anywhere;
}

/* --- 04 · Punto de equilibrio --- */
.cf-eq {
  display: flex;
  height: 16px;
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: var(--neu-in);
  background: var(--bg);
  margin-bottom: 0.75rem;
}
.cf-eq__t { height: 100%; transition: width 0.5s var(--ease-out); min-width: 0; }
.cf-eq__t--gastos { background: linear-gradient(180deg, #f59e0b, #d97706); }
.cf-eq__t--imp { background: linear-gradient(180deg, #ef4444, #b91c1c); }

/* --- Navegación de saltos --- */
.cf-saltos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

/* --- Cajas de las mejoras --- */
.cf-mas {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .cf-mas { grid-template-columns: 1fr 1fr; } }

.cf-caja {
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border-radius: var(--r-lg);
  scroll-margin-top: 90px;
  /* Sin esto, el `min-width: auto` que trae de serie un elemento de rejilla
     dejaba que el lienzo de tesorería (520 px mínimos) estirara la columna
     entera a 578 px: en un móvil de 360 se salían de la pantalla las diez
     cajas a la vez, no solo la del gráfico. */
  min-width: 0;
}
.cf-caja--ancha { grid-column: 1 / -1; }
.cf-caja__titulo {
  font-family: var(--display);
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.cf-caja__intro {
  font-size: var(--t-base);
  color: var(--text-soft);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.cf-caja .field-row + .field-row { margin-top: 0.85rem; }
.cf-caja .table-wrap { margin-top: 0.8rem; }

.cf-dl--ancha { margin-top: 0.9rem; font-size: var(--t-base); }

.cf-frase {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.95rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--text-soft);
}

.cf-cifra {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--accent-text);
  line-height: 1.15;
  padding-top: 0.35rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* --- 02 · Barras del simulador de subida --- */
.cf-simbarras { display: grid; gap: 0.4rem; margin-top: 1rem; }
.cf-simbar {
  display: grid;
  grid-template-columns: 3.6rem 1fr 3.4rem;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
}
.cf-simbar__et { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.cf-simbar__pista {
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--neu-in);
  overflow: hidden;
}
.cf-simbar__pista i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.45s var(--ease-out);
}
.cf-simbar.is-ok .cf-simbar__pista i { background: linear-gradient(90deg, #10b981, #047857); }
.cf-simbar.is-bajo .cf-simbar__pista i { background: linear-gradient(90deg, #f59e0b, #d97706); }
.cf-simbar__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-simbar.is-ok .cf-simbar__val { color: var(--ok-text); }
.cf-simbarras p { grid-column: 1 / -1; margin-top: 0.3rem; }

/* --- 03 · Tareas del presupuesto --- */
.cf-tareas { display: grid; gap: 0.45rem; }
.cf-tarea {
  display: grid;
  grid-template-columns: 1fr 96px 32px;
  gap: 0.4rem;
  align-items: center;
  animation: cfIn 0.26s var(--ease-out) backwards;
}
.cf-tarea .input { padding: 0.5rem 0.7rem; font-size: var(--t-base); }
.cf-tarea input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

/* --- 09 · Cartera de clientes --- */
.cf-cartera { display: grid; gap: 0.45rem; }
.cf-linea {
  display: grid;
  grid-template-columns: 1fr 86px 74px 32px;
  gap: 0.4rem;
  align-items: center;
  animation: cfIn 0.26s var(--ease-out) backwards;
}
.cf-linea .input { padding: 0.5rem 0.6rem; font-size: var(--t-base); }
.cf-linea input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.cf-cartera__cab {
  display: grid;
  grid-template-columns: 1fr 86px 74px 32px;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  padding-inline: 0.2rem;
}
.cf-cartera__cab span:nth-child(2),
.cf-cartera__cab span:nth-child(3) { text-align: right; }
/* Las columnas de esta fila las fija ahora el bloque táctil del final del
   archivo, que sube la papelera a 44 px; aquí solo queda el tamaño del
   rótulo, que no puede bajar del suelo de 0,75 rem. */
@media (max-width: 460px) {
  .cf-cartera__cab { font-size: var(--t-xs); }
}

/* --- 05 · Escenarios --- */
.cf-esc-guardar {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cf-esc-guardar .field { flex: 1 1 200px; }
table.data.cf-escenarios { min-width: 380px; }
table.data.cf-escenarios th.num { text-align: right; }
.cf-quitar-esc {
  margin-left: 0.3rem;
  color: var(--text-mute);
  font-size: var(--t-md);
  line-height: 1;
  padding: 0 0.15rem;
  border-radius: var(--r-xs);
}
.cf-quitar-esc:hover { color: var(--err-text); }

/* --- 10 · Tesorería --- */
.cf-meses {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.5rem;
}
@media (min-width: 760px) { .cf-meses { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.cf-mes { display: grid; gap: 0.15rem; }
.cf-mes span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-align: center;
}
.cf-mes .input {
  padding: 0.38rem 0.3rem;
  font-size: var(--t-xs);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cf-teso-graf {
  margin-top: 1.1rem;
  padding: 0.6rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow-x: auto;
}
.cf-teso-graf canvas {
  display: block;
  width: 100%;
  min-width: 520px;
  height: auto;
}

table.data tr.is-rojo td { color: var(--err-text); }
table.data tr.is-rojo td:last-child { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .cf-barra__t,
  .cf-eq__t,
  .cf-simbar__pista i { transition: none; }
  .cf-gasto, .cf-tarea, .cf-linea { animation: none; }
}

/* =============================================================
   Ergonomía táctil (ver styles.css §9b para el porqué de la consulta)
   ============================================================= */
@media (max-width: 700px), (pointer: coarse) {
  /* Las columnas de las dos rejillas grandes tampoco pueden encogerse por
     debajo de su contenido si no se les dice */
  .cf-grid > *, .cf-form > *, .cf-mas > * { min-width: 0; }

  /* Las papeleras de gasto, tarea y cliente medían 32×34: se sube la columna
     que las contiene y se recorta la del importe, que iba sobrada. */
  .cf-gasto { grid-template-columns: 1fr 84px 44px; }
  .cf-tarea { grid-template-columns: 1fr 80px 44px; }
  .cf-linea,
  .cf-cartera__cab { grid-template-columns: 1fr 72px 62px 44px; }
  .cf-gasto__quitar { width: 44px; height: 44px; }

  /* Con la fila a 44 px, 0,45 rem entre filas dejaba dos papeleras a 7 px */
  .cf-gastos, .cf-tareas, .cf-cartera { gap: 0.55rem; }

  /* Los campos de la fila comparten el alto del resto del formulario */
  .cf-gasto .input, .cf-tarea .input, .cf-linea .input { padding: 0.6rem 0.7rem; }

  /* Doce meses en fila daban campos de 43 px: no caben ni el dedo ni la cifra */
  .cf-meses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }

  /* La aspa que quita un escenario vive dentro de una celda de cabecera: si
     se agranda, se descuadra la tabla. El pseudo-elemento amplía solo la zona
     pulsable —13×16 visibles, 45×44 tocables— sin mover un píxel del dibujo. */
  .cf-quitar-esc { position: relative; }
  .cf-quitar-esc::before {
    content: "";
    position: absolute;
    inset: -14px -16px;
  }

  .cf-saltos { gap: 0.55rem; }
  .cf-esc-guardar { gap: 0.7rem; }

  /* Suelo tipográfico */
  .cf-destacado__label,
  .cf-panel__title,
  .cf-mes span { font-size: var(--t-xs); }
}