/* =========================================
   AGENTIKO.TECH — Páginas de formulario (rediseño 10-2026)
   soporte.html, calculadora.html, cuestionario.html y whatsapp-alta.html.
   La base (tokens, barra, pie, botones, .pagina-cabecera, .contact-form-card,
   .form-*, avisos por data-tipo) está en sitio.css; acá va solo lo propio
   de cada página. whatsapp-alta carga además legal.css (cuerpo de lectura).

   Los avisos que pinta js/main.js (ticket y estado del ticket) todavía
   llevan colores en línea de la web oscura: se tapan abajo por id con
   !important hasta que main.js pase a data-tipo.
   ========================================= */

/* =========================================
   COMÚN
   ========================================= */
/* Avisos bajo un formulario: el color lo pone [data-tipo] de sitio.css. */
.aviso { margin-top: 1rem; padding: .75rem 1rem; font-size: .95rem; font-weight: 500; border-radius: var(--r); }
.form-opcional { font-weight: 400; color: var(--tinta-2); font-size: .85rem; }
.form-submit:disabled { opacity: .7; cursor: wait; }

/* Casilla nativa con el color de la marca (calculadora, consentimiento,
   opciones del cuestionario). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--violeta); }

/* =========================================
   SOPORTE
   Dos tareas lado a lado: abrir un ticket (la principal, ancha) y seguir
   uno ya abierto. Cada una abre con su título sobre un filete grueso.
   ========================================= */
.soporte { padding-bottom: clamp(4rem, 9vw, 6.5rem); }
.soporte__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 860px) { .soporte__grid { grid-template-columns: 1fr; } }

.tarea__titulo {
  font: 700 clamp(1.35rem, 2.4vw, 1.7rem)/1.15 var(--f-display); letter-spacing: -.02em;
  padding-top: 1rem; margin-bottom: 1.25rem; border-top: 2px solid var(--tinta);
}

/* La consulta es secundaria: panel sin relleno blanco, solo con borde. */
.consulta { border: 1px solid var(--linea); border-radius: 10px; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.consulta__texto { color: var(--tinta-2); font-size: .98rem; margin-bottom: 1.25rem; max-width: 52ch; }
.consulta__boton { width: 100%; }
.form-input--codigo { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .95rem; letter-spacing: .01em; }
.soporte__urgencia { margin-top: 1.5rem; color: var(--tinta-2); font-size: .95rem; }

#ticket-msg { margin-top: 1rem; padding: .85rem 1rem; font-size: .98rem; font-weight: 500; }

/* Seguimiento tras abrir el ticket (lo arma main.js): es lo que el cliente
   tiene que guardar, así que va en un bloque propio y la referencia en grande. */
#ticket-followup {
  margin-top: .75rem; padding: 1rem 1.1rem;
  background: var(--papel); border: 1px solid var(--linea); border-left: 3px solid var(--violeta);
  border-radius: var(--r); color: var(--tinta-2); font-size: .95rem; line-height: 1.5;
}
.seguimiento { margin: .75rem 0 0; display: grid; gap: .5rem; }
.seguimiento div { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: .75rem; }
.seguimiento dt { color: var(--tinta-2); }
.seguimiento dd { margin: 0; min-width: 0; }
.seguimiento code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--tinta); overflow-wrap: anywhere; user-select: all; }
.seguimiento div:first-child code { font: 800 1.5rem/1.15 var(--f-display); letter-spacing: -.01em; }
.seguimiento__acciones { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.seguimiento__copiar { min-height: 40px; font-size: .92rem; }

/* Resultado de la consulta de estado (lo arma main.js). */
#status-result { margin-top: 1.5rem; }
.estado-ticket { background: #fff; border: 1px solid var(--linea); border-top: 2px solid var(--tinta); border-radius: 0 0 var(--r) var(--r); padding: 1.1rem 1.15rem; }
.estado-ticket__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.estado-ticket__ref { font: 800 1.35rem/1.1 var(--f-display); letter-spacing: -.01em; user-select: all; }
.estado-ticket__etapa { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; color: var(--tinta-2); }
.estado-ticket__etapa::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.estado-ticket__etapa[data-etapa="resuelto"] { color: #145A2A; }
.estado-ticket__etapa[data-etapa="espera"]   { color: #8A4B00; }
.estado-ticket__etapa[data-etapa="curso"]    { color: var(--violeta); }
.estado-ticket__asunto { margin-top: .75rem; color: var(--tinta-2); }
.estado-ticket__fechas { margin-top: .4rem; color: var(--tinta-2); font-size: .88rem; }
.aviso-estado { margin: 0; padding: .75rem 1rem; font-weight: 500; }

/* =========================================
   CALCULADORA
   Izquierda, las tareas en filas (casilla, nombre y agente, horas); derecha,
   el resultado en la banda invertida de la página, con la cifra anual como
   pieza grande. Debajo, el formulario para recibir el plan.
   ========================================= */
.calc { padding-bottom: clamp(4rem, 9vw, 6.5rem); }
.calc-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4.5vw, 4rem); align-items: start;
}
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }

/* --- Tareas --- */
.calc-tasks { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-panel-title {
  padding: 0; margin-bottom: .9rem;
  font: 700 clamp(1.35rem, 2.4vw, 1.7rem)/1.15 var(--f-display); letter-spacing: -.02em;
}
.calc-tasks-col {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .55rem; border-bottom: 2px solid var(--tinta);
  font-size: .85rem; font-weight: 600; color: var(--tinta-2);
}

.calc-task {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 15rem);
  align-items: center; gap: .6rem 1.75rem;
  padding: 1rem 0; border-bottom: 1px solid var(--linea);
}
.calc-task-main { display: flex; align-items: flex-start; gap: .85rem; cursor: pointer; min-width: 0; }
.calc-task-main .calc-check { flex: none; width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; cursor: pointer; }
.calc-task-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.calc-task-name { font-weight: 600; line-height: 1.35; }
.calc-task-agent { font-size: .9rem; color: var(--tinta-2); }
.calc-task:not(.is-on) .calc-task-name { color: var(--tinta-2); font-weight: 500; }
.calc-task-hours { display: flex; align-items: center; gap: .85rem; }
.calc-task-hours .calc-range { flex: 1; }
.calc-hours {
  flex: none; min-width: 3.4ch; text-align: right;
  font: 700 1.05rem/1 var(--f-display); font-variant-numeric: tabular-nums;
}
.calc-task:not(.is-on) .calc-hours { color: var(--tinta-2); font-weight: 500; }
.calc-task:not(.is-on) .calc-range { opacity: .55; }
.calc-task:not(.is-on) .calc-range:hover, .calc-task:not(.is-on) .calc-range:focus-visible { opacity: 1; }

@media (max-width: 600px) {
  .calc-task { grid-template-columns: 1fr; }
  .calc-task-hours { padding-left: 2.1rem; }
}

/* --- Deslizadores ---
   calculadora.js deja en --pct hasta dónde llega el relleno. */
.calc-range {
  --pct: 50%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
}
.calc-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--violeta) var(--pct), var(--linea) var(--pct));
}
.calc-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--linea); }
.calc-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--violeta); }
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: #fff; border: 2px solid var(--violeta);
}
.calc-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--violeta); }
.calc-range:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }

/* --- Coste por hora y moneda --- */
.calc-cost { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--tinta); }
.calc-cost-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.calc-cost-label { font: 700 1.15rem/1.2 var(--f-display); }
.calc-currency { display: inline-flex; border: 1.5px solid var(--tinta); border-radius: var(--r); overflow: hidden; }
.calc-cur-btn {
  min-width: 3.5rem; min-height: 40px; padding: 0 .9rem;
  border: 0; background: transparent; color: var(--tinta);
  font: 600 1rem/1 var(--f-texto); cursor: pointer;
}
.calc-cur-btn + .calc-cur-btn { border-left: 1.5px solid var(--tinta); }
.calc-cur-btn:hover { background: var(--papel-2); }
.calc-cur-btn.is-on { background: var(--tinta); color: var(--papel); }
.calc-cur-btn:focus-visible { outline-offset: -4px; outline-color: var(--violeta); }
.calc-cost-row { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.calc-cost-row .calc-range { flex: 1; }
.calc-cost-value { flex: none; min-width: 8.5ch; text-align: right; font: 700 1.15rem/1 var(--f-display); }

/* --- Resultado (banda invertida de la página) --- */
.calc-result { position: sticky; top: 88px; }
@media (max-width: 900px) { .calc-result { position: static; } }
.calc-result-fijo {
  container-type: inline-size;
  background: var(--noche); color: var(--noche-texto);
  border-radius: 10px; padding: clamp(1.5rem, 3vw, 2.25rem);
}
.calc-result-eyebrow { font-weight: 600; color: var(--noche-2); }
.calc-total { margin-top: .5rem; }
/* La cifra anual es la pieza de la página: el tamaño se ajusta al ancho
   del panel para que «1.164.800» quepa sin partir. */
.calc-total-num {
  display: block;
  font: 800 min(5.25rem, 19cqi)/.95 var(--f-display); letter-spacing: -.04em;
  color: #fff; white-space: nowrap;
}
.calc-total-unidad { display: block; margin-top: .5rem; font: 600 1.15rem/1.2 var(--f-display); color: var(--noche-texto); }
.calc-total-per { color: var(--noche-2); font-weight: 500; }
.calc-detail { margin-top: 1rem; color: var(--noche-2); font-size: .95rem; line-height: 1.5; }

.calc-stack { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid #3B3566; }
.calc-stack-title { font: 700 1rem/1.3 var(--f-display); color: #fff; }
.calc-chips { margin-top: .65rem; display: grid; gap: .35rem; }
.calc-chips li { position: relative; padding-left: 1.1rem; color: var(--noche-texto); font-size: .95rem; }
.calc-chips li::before { content: ''; position: absolute; left: 0; top: .75em; width: .55rem; height: 1.5px; background: #B9A9FF; }
.calc-chips li.calc-chips-empty { padding-left: 0; color: var(--noche-2); }
.calc-chips li.calc-chips-empty::before { display: none; }

/* --- Pedir el plan --- */
.calc-plan {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1rem; border-top: 2px solid var(--tinta);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 860px) { .calc-plan { grid-template-columns: 1fr; } }
.calc-form-title { font: 800 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--f-display); letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.calc-fineprint { margin-top: .9rem; color: var(--tinta-2); max-width: 44ch; }
.calc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .calc-campos { grid-template-columns: 1fr; } }
.calc-consent { display: flex; align-items: flex-start; gap: .65rem; margin: .25rem 0 1rem; font-size: .92rem; color: var(--tinta-2); cursor: pointer; }
.calc-consent input { flex: none; width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; }

/* =========================================
   CUESTIONARIO
   Asistente por pasos que arma js/cuestionario.js: progreso, una sección
   por paso y cada pregunta como una fila con filete (no tarjeta).
   ========================================= */
.cuestionario { padding-bottom: clamp(4rem, 9vw, 6.5rem); }
.cuestionario__cuerpo { max-width: 46rem; }
.q-estado { padding: 1rem 1.1rem; border: 1px solid var(--linea); border-radius: var(--r); color: var(--tinta-2); }
.cuestionario__ayuda { margin-top: 2rem; color: var(--tinta-2); font-size: .95rem; }
/* #q-intro trae HTML del servidor (descripción de la encuesta). */
#q-intro p + p { margin-top: .6rem; }

.q-progreso { margin-bottom: 2.25rem; }
.q-progreso__paso { font: 600 .95rem/1.3 var(--f-texto); color: var(--tinta-2); margin-bottom: .55rem; }
.q-progreso__barra { height: 4px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.q-progreso__relleno { height: 100%; width: 0; background: var(--violeta); transition: width .25s; }

.q-section__titulo {
  font: 700 clamp(1.35rem, 2.4vw, 1.7rem)/1.15 var(--f-display); letter-spacing: -.02em;
  padding-top: 1rem; border-top: 2px solid var(--tinta);
}
.q-section__intro { margin-top: .5rem; color: var(--tinta-2); font-size: .98rem; max-width: 62ch; }
.q-section > .q-pregunta:first-of-type { margin-top: .5rem; }

.q-pregunta { padding: 1.35rem 0; border-bottom: 1px solid var(--linea); }
.q-pregunta__titulo { font: 600 1.05rem/1.4 var(--f-texto); margin: 0 0 .75rem; color: var(--tinta); }
.q-pregunta__ayuda { margin: -.4rem 0 .9rem; color: var(--tinta-2); font-size: .92rem; line-height: 1.5; max-width: 62ch; }
.q-opcion { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; cursor: pointer; }
.q-opcion input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; }
.q-comentario { margin-top: .75rem; }
.q-comentario .form-textarea { min-height: 80px; }

.q-nav { display: flex; gap: .75rem; margin-top: 1.5rem; }
.q-nav .boton { flex: 1; }
#q-submit { margin-top: 1rem; }

/* =========================================
   ALTA DE WHATSAPP
   El texto de lectura lo pone legal.css (.legal-content); acá solo el
   botón de Meta y el aviso de estado que pinta js/whatsapp-alta.js
   (data-tipo: info | aviso | ok | error).
   ========================================= */
.alta .alta__pasos { margin-top: 1.5rem; }
.alta-boton { margin-top: 1.75rem; }
.alta-boton[disabled] { opacity: .6; cursor: wait; }
.alta-estado {
  margin-top: 1.5rem; padding: .9rem 1.1rem; border-radius: var(--r);
  border: 1px solid var(--linea); background: #fff; color: var(--tinta); line-height: 1.55;
}
.alta-estado[data-tipo="aviso"] { background: var(--papel-2); border-left: 3px solid var(--violeta); }
.alta-estado[data-tipo="ok"] { background: #EAF6EE; border-color: #9FD3AF; color: #145A2A; }
/* [data-tipo="error"] ya lo pinta sitio.css. */