:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --border: #e3e6ed;
  --border-strong: #ccd2de;
  --text: #16181f;
  --text-muted: #667085;
  --text-faint: #98a2b3;

  --navy: #0b1730;
  --navy-soft: #14213d;
  --primary: #2554e8;
  --primary-dark: #1c3fc0;
  --primary-soft: #eaefff;

  --success-bg: #edfaf1;
  --success-border: #b7e6c3;
  --success-text: #0f6a35;
  --error-bg: #fdf1f1;
  --error-border: #f2bcbc;
  --error-text: #a4231e;
  --warning-bg: #fff8e6;
  --warning-border: #f0d99b;
  --warning-text: #6b4e00;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-hover: 0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

.contenedor {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header ---------- */

header.topbar {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.marca svg { flex-shrink: 0; }

.nav-tools {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-tools a {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.15s;
}

.nav-tools a:hover, .nav-tools a.activo { color: white; }

/* ---------- Landing ---------- */

.hero {
  padding-top: 4rem;
  padding-bottom: 3rem;
  text-align: center;
}

.hero .kicker {
  display: inline-block;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
  color: var(--navy);
}

.hero p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.05rem;
}

main { padding-bottom: 4rem; }

.grid-herramientas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-top: 2.5rem;
}

.tarjeta-herramienta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.tarjeta-herramienta:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.icono-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--primary-dark);
}

.tarjeta-herramienta h3 {
  margin: 0 0 0.4rem;
  font-size: 1.08rem;
  color: var(--navy);
}

.tarjeta-herramienta p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.enlace-flecha {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* El mensaje de privacidad es el argumento central que habilita la
   arquitectura sin servidor: conviene que se vea, no que sea letra chica. */
.caja-privacidad {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 1.1rem 1.3rem;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-md);
  color: var(--success-text);
  font-size: 0.9rem;
  line-height: 1.55;
}

.caja-privacidad svg { flex-shrink: 0; margin-top: 0.15rem; }

/* Misma caja, en neutro: son dos argumentos distintos y si las dos van en
   verde compiten entre sí y ninguna se lee. */
.caja-privacidad.caja-formatos {
  margin-top: 1rem;
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

.hero-gratis {
  max-width: 620px;
  margin: 1.2rem auto 0;
  padding: 0.7rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Aviso de "esto no está contrastado con un archivo real". Va en ámbar y no en
   rojo a propósito: no es un error, es una advertencia sobre el respaldo de lo
   que se está por generar. */
.caja-ayuda.caja-atencion {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

/* ── Utilidades ────────────────────────────────────────────────────────────
   Existen para que no haya un solo atributo `style=` en el HTML ni en el JS.
   Eso es lo que permite que la CSP no necesite `'unsafe-inline'` en style-src:
   con estilos inline, esa puerta hay que dejarla abierta para todos. */

.columna-angosta { max-width: 720px; }
.oculto { display: none !important; }
.campo-alternativo { margin-top: 0.5rem; }
.atenuado { opacity: 0.75; }
.atenuado-suave { opacity: 0.85; }
.separado-arriba { margin-top: 0.6rem; }

.boton-enlace {
  margin-top: 0.6rem;
  display: inline-block;
  text-decoration: none;
}

/* Enlace para reportar, dentro del panel de error. Va discreto: el foco del
   panel es el problema del usuario, no pedirle que nos escriba. */
.linea-reporte {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.linea-reporte .nota-reporte { color: var(--text-faint); }

footer.pie a {
  color: inherit;
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--border);
}

/* Páginas de texto largo (términos). */
.prosa { max-width: 720px; padding-top: 2rem; padding-bottom: 3rem; }
.prosa h1 { font-size: 1.7rem; margin: 1rem 0 0.3rem; }
.prosa h2 { font-size: 1.05rem; margin: 2rem 0 0.6rem; }
.prosa p { line-height: 1.65; margin: 0 0 0.9rem; color: var(--text); }
.prosa p.subtitulo { color: var(--text-faint); font-size: 0.88rem; margin-bottom: 2rem; }

.franja-confianza {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.85rem;
}

.franja-confianza span { display: flex; align-items: center; gap: 0.4rem; }

footer.pie {
  border-top: 1px solid var(--border);
  padding: 1.6rem 0;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
}

/* ---------- Páginas de herramienta ---------- */

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  margin: 1.6rem 0 1rem;
}

.volver:hover { color: var(--primary); }

.encabezado-herramienta h1 {
  font-size: 1.55rem;
  margin: 0 0 0.35rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.encabezado-herramienta p.subtitulo {
  color: var(--text-muted);
  margin: 0;
  max-width: 620px;
}

.paso {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
  margin-top: 1.25rem;
  box-shadow: var(--shadow-card);
}

.paso-titulo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}

.paso-numero {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paso-titulo h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--navy);
}

.fila-campos {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text-muted);
}

input[type="text"], input[type="number"], textarea, select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

textarea { font-family: var(--font-mono); font-size: 0.82rem; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23667085' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
  cursor: pointer;
}

/* Explicación de para qué sirve el archivo que genera cada herramienta */
.caja-ayuda {
  background: var(--primary-soft);
  border: 1px solid #cddaff;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-top: 1.1rem;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--navy-soft);
}

.caja-ayuda code {
  background: rgba(11, 23, 48, 0.07);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  word-break: break-all;
}

.caja-ayuda strong { font-weight: 700; }

.nota-campo {
  margin: 0.9rem 0 0;
  font-size: 0.83rem;
  color: var(--text-faint);
  line-height: 1.45;
}

.campo { margin-bottom: 1rem; flex: 1; min-width: 140px; }
.paso > .campo:last-child, .paso > .fila-campos:last-child .campo { margin-bottom: 0; }

.enlace-plantilla {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  margin-bottom: 1.1rem;
}

.enlace-plantilla:hover { text-decoration: underline; }

/* Dropzone */

.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 1.1rem;
}

.dropzone:hover, .dropzone.arrastrando {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.dropzone svg { color: var(--text-faint); margin-bottom: 0.5rem; }
.dropzone.arrastrando svg, .dropzone.con-archivo svg { color: var(--primary); }

.dropzone-texto { font-size: 0.9rem; color: var(--text-muted); }
.dropzone-texto strong { color: var(--primary); font-weight: 700; }
.dropzone-archivo { font-size: 0.88rem; font-weight: 700; color: var(--navy); margin-top: 0.2rem; }

.separador-o {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
}

.separador-o::before, .separador-o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Botón + acciones */

.barra-accion {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

button.principal {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(37, 84, 232, 0.25);
}

button.principal:hover:not(:disabled) { background: var(--primary-dark); }
button.principal:disabled { opacity: 0.65; cursor: default; }

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  display: none;
}

button.principal.cargando .spinner { display: inline-block; }
button.principal.cargando .texto-boton { display: none; }

@keyframes girar { to { transform: rotate(360deg); } }

/* Resultado */

#resultado { margin-top: 1.25rem; }

.panel-resultado {
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.panel-resultado.exito { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }
.panel-resultado.error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); }

.panel-resultado svg { flex-shrink: 0; margin-top: 0.1rem; }
.panel-resultado h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.panel-resultado p { margin: 0; font-size: 0.88rem; }

.tabla-errores { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.85rem; }
.tabla-errores td { padding: 0.4rem 0.5rem; vertical-align: top; border-top: 1px solid rgba(164, 35, 30, 0.15); }
.tabla-errores td:first-child { white-space: nowrap; }

.chip-fila {
  display: inline-block;
  background: rgba(164, 35, 30, 0.1);
  color: var(--error-text);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  /* En 375px no entran en una fila la marca, las 3 herramientas, la insignia de
     plan y "Salir": la página entera scrolleaba de costado, y peor para el que
     paga ("Suscripto" es más ancho que "Gratis"). Apretar todo hasta que entre
     deja un header al borde de romperse con cualquier texto nuevo, así que el
     nav pasa a su propia fila. Además deja lugar para una cuarta herramienta. */
  .topbar-inner {
    height: auto;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    row-gap: 0.45rem;
  }
  .marca { font-size: 1rem; }
  .nav-tools {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    gap: 1.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-tools a { font-size: 0.85rem; white-space: nowrap; }
  .hero { padding-top: 2.5rem; padding-bottom: 2rem; }
  .paso { padding: 1.2rem; }
  .fila-campos { gap: 0.5rem; }
  .campo { min-width: 100%; }
  .franja-confianza { gap: 1.2rem; font-size: 0.78rem; }
  button.principal { width: 100%; justify-content: center; }
  .barra-accion { flex-direction: column; align-items: stretch; }
}

/* ── Cuenta: indicador en el header y diálogo ─────────────────────────── */

.estado-cuenta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: 1.2rem;
}

.boton-sesion {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.boton-sesion:hover { background: rgba(255, 255, 255, 0.2); }

.email-sesion {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insignia-plan {
  background: var(--success-border);
  color: var(--success-text);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.insignia-plan.gratis {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

.dialogo {
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  max-width: 400px;
  width: calc(100% - 2rem);
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.25);
  color: var(--text);
}

.dialogo::backdrop { background: rgba(11, 23, 48, 0.45); }
.dialogo h2 { margin: 0 0 0.4rem; font-size: 1.25rem; color: var(--navy); }

.dialogo-bajada {
  margin: 0 0 1.3rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.dialogo-cerrar-form { margin: 0; text-align: right; }

.dialogo-cerrar {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
}

.dialogo-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
}

.dialogo-error.es-aviso {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.dialogo-alternar {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.aviso-restantes {
  margin-top: 0.5rem !important;
  font-size: 0.83rem;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .email-sesion { display: none; }
  /* El bloque de cuenta comparte la primera fila con la marca; `space-between`
     del contenedor lo manda a la derecha, y `flex-shrink: 0` evita que se
     aplaste si el mail del usuario fuera largo. */
  .estado-cuenta { margin-left: 0.35rem; flex-shrink: 0; }
  .insignia-plan { font-size: 0.62rem; padding: 0.15rem 0.4rem; }
}