/*
 * THESIS: a whistleblower report isn't a clean SaaS form — it's a case file
 * being opened, so this page reads as a confidential dossier being filled in
 * live, not a friendly contact form.
 * OWN-WORLD: the campaign's existing dark terminal shell (macOS titlebar,
 * JetBrains Mono, cyan accent) fused with case-file typewriter grammar —
 * LABEL rule lines, a red "confidencial" stamp, an original circular case
 * seal, a decorative barcode strip, evidence framed like a taped-in photo,
 * an ink-stamped "recibido" on confirmation.
 * STORY: the visitor recognizes they're opening an official confidential
 * complaint file against their broker; fields read as dossier entries.
 * FIRST VIEWPORT: titlebar -> case header (seal + title, meta box, barcode,
 * stamp) -> existing intro copy -> form.
 * FORM: extension of the established campaign world, not a new one — the
 * direction was pinned directly by user-supplied reference images, so no
 * concept tournament was run.
 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Montserrat:wght@300;400;500&display=swap');

:root{
  color-scheme: dark;
  --night:#121212;
  --panel:#0c0c0c;
  --gray:#8A8C8E;
  --smoke:#F3F3F3;
  --white:#FFFFFF;
  --cyan: rgba(45,212,191,0.85);
  --green:#1D9E75;
  --red:#c0392b;
  --line-1: rgba(243,243,243,0.09);
  --line-2: rgba(243,243,243,0.18);
  --font-ui: 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Expediente en vivo — fondo oliva oscuro, texto en gris neutro (sin amarillo) */
  --dossier-bg:#14150e;
  --dossier-bg-2:#1a1c13;
  --dossier-ink:#e6e6e6;
  --dossier-ink-dim: rgba(230,230,230,0.45);
  --dossier-ink-mute: rgba(230,230,230,0.24);
  --dossier-line: rgba(230,230,230,0.22);
  --dossier-line-soft: rgba(230,230,230,0.12);
  --dossier-pending:#999999;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  min-height:100vh; min-height:100dvh;
  background:var(--night); color:var(--smoke);
  font-family:var(--font-mono);
  -webkit-text-size-adjust:100%;
}

body{
  display:flex; flex-direction:column; align-items:center;
  padding:max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
          max(60px, calc(env(safe-area-inset-bottom) + 30px)) max(16px, env(safe-area-inset-left));
}

/* ============= Marca discreta (mismo patrón del resto de la campaña) ============= */
.brand-tag{
  font-family:var(--font-ui); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(243,243,243,0.35); margin-bottom:18px;
}

/* ============= Música de fondo — botón de silenciar ============= */
.sound-toggle{
  position:fixed; z-index:20;
  right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,12,12,0.85); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.sound-toggle:hover{ border-color:rgba(45,212,191,0.5); }
.sound-icon{ width:19px; height:19px; fill:rgba(243,243,243,0.75); }
.sound-toggle[aria-pressed="true"] .icon-on{ display:none; }
.sound-toggle[aria-pressed="false"] .icon-off{ display:none; }

/* ============= Ventana de terminal ============= */
.terminal{
  position:relative;
  width:100%; max-width:640px;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
  overflow:hidden;
}
/* Barrido único al cargar — el "escaneo" abre el expediente, no verifica a
   la persona (esto sigue siendo anónimo). Un solo pase, no en loop. */
.terminal::after{
  content:''; position:absolute; left:0; right:0; top:-46px; height:46px;
  background:linear-gradient(180deg, transparent, rgba(45,212,191,0.22), transparent);
  pointer-events:none; z-index:5;
  animation:scan-sweep 1.7s cubic-bezier(.4,0,.2,1) 1 forwards;
}
@keyframes scan-sweep{
  0%{ top:-46px; opacity:0; }
  10%{ opacity:1; }
  88%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .terminal::after{ animation:none; content:none; }
}

.titlebar{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px;
  background:#1a1a1a;
  border-bottom:1px solid var(--line-1);
}
.dot{ width:11px; height:11px; border-radius:50%; }
.dot.red{ background:#ff5f56; }
.dot.yellow{ background:#ffbd2e; }
.dot.green{ background:#27c93f; }
.titlebar-label{
  flex:1; min-width:0; text-align:center; font-size:11px; color:rgba(243,243,243,0.4);
  letter-spacing:0.03em; margin-right:36px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.termbody{
  padding:22px 20px 26px;
}

/* ============= Cabecera de expediente ============= */
.case-stamp{
  position:absolute; top:9px; right:12px;
  background:rgba(192,57,43,0.06);
  border:1.5px solid rgba(192,57,43,0.55); border-radius:3px;
  color:#e07268; font-family:var(--font-mono); font-weight:700;
  font-size:9px; letter-spacing:0.14em; text-transform:uppercase;
  padding:3px 7px; transform:rotate(-5deg);
  pointer-events:none; user-select:none;
}
@media (max-width:460px){ .case-stamp{ display:none; } }

.case-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--line-2);
}
.case-id{ display:flex; align-items:center; gap:12px; min-width:0; }
.case-seal{
  position:relative; flex-shrink:0;
  width:36px; height:36px; border-radius:50%;
  border:1.5px dashed rgba(243,243,243,0.32);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  color:rgba(243,243,243,0.5);
}
.case-seal::before{
  content:''; position:absolute; inset:4px;
  border:1px solid rgba(243,243,243,0.16); border-radius:50%;
}
.case-kicker{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:#e07268; margin-bottom:3px;
}
.case-title{
  font-family:var(--font-ui); font-size:13.5px; font-weight:500; color:var(--white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.case-meta{ flex-shrink:0; text-align:right; }
.case-meta-row{
  display:flex; gap:8px; justify-content:flex-end;
  font-family:var(--font-mono); font-size:10.5px; margin-bottom:5px;
}
.case-meta-row span:first-child{ letter-spacing:0.04em; text-transform:uppercase; color:rgba(243,243,243,0.35); }
.case-meta-row span:last-child{ color:rgba(243,243,243,0.65); }
.case-open{ color:var(--cyan) !important; }
.barcode{
  width:110px; height:18px; margin-left:auto; opacity:0.55;
  background-repeat:repeat-x;
  background-image:repeating-linear-gradient(90deg,
    rgba(243,243,243,0.9) 0 2px, transparent 2px 5px,
    rgba(243,243,243,0.9) 5px 6px, transparent 6px 12px,
    rgba(243,243,243,0.9) 12px 15px, transparent 15px 17px,
    rgba(243,243,243,0.9) 17px 20px, transparent 20px 28px,
    rgba(243,243,243,0.9) 28px 29px, transparent 29px 34px
  );
}
@media (max-width:420px){
  .case-title{ white-space:normal; }
  .case-meta{ display:none; }
}

.line{
  font-size:13px; line-height:1.7; color:rgba(243,243,243,0.75);
}
.line .prompt{ color:var(--cyan); }
.line.dim{ color:rgba(243,243,243,0.4); }
.line.muted-block{ margin-bottom:14px; }

.caret{
  display:inline-block; width:7px; height:14px; background:var(--cyan);
  vertical-align:-2px; animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ============= Intro ============= */
.intro{ margin-bottom:22px; }
.intro-title{
  font-size:15px; color:var(--white); margin-top:4px; margin-bottom:10px; line-height:1.5;
}
.intro-body{
  font-family:var(--font-ui); font-size:12.5px; line-height:1.65; color:rgba(243,243,243,0.55);
  max-width:52ch;
}

/* ============= Formulario ============= */
.field{ margin-bottom:18px; }
.field-prompt{
  font-size:12px; color:var(--cyan); margin-bottom:7px; display:flex; align-items:flex-start; gap:6px;
}
.field-prompt .req{ color:rgba(243,243,243,0.3); font-size:10px; flex-shrink:0; }
.field-rule{ flex:1; height:1px; background:var(--line-1); margin:0 2px; min-width:12px; }
.field-hint{
  font-family:var(--font-ui); font-size:11px; color:rgba(243,243,243,0.4); margin-top:5px;
}

.field-input, .field-select, .field-textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line-1); border-radius:5px;
  padding:11px 13px; font-family:var(--font-mono); font-size:13.5px; color:rgba(255,255,255,0.92);
  outline:none; transition:border-color .15s ease, background .15s ease;
  -webkit-appearance:none; appearance:none; color-scheme:dark; text-decoration:none;
}
/* 16px solo en pantallas táctiles reales (celular) — abajo de eso Safari/Chrome
   iOS hacen zoom automático al enfocar un campo, y como el viewport bloquea el
   pinch-zoom manual (user-scalable=no) la persona queda atascada con el zoom.
   En trackpad/mouse (pointer:fine) no aplica, así que el texto se ve moderado
   en vez de agrandado sin necesidad. */
@media (pointer: coarse){
  .field-input, .field-select, .field-textarea{ font-size:16px; }
}
/* <select> no tiene ::placeholder — la opción "País (opcional)" hereda el
   color pleno del texto real y en Safari puede salir subrayada. Mientras no
   se eligió país, .placeholder la atenúa igual que el resto de los campos
   (ver toggle en main.js). */
.field-select.placeholder{ color:rgba(255,255,255,0.28); font-size:11.5px; }
.field-textarea{ resize:vertical; min-height:190px; line-height:1.5; }
/* iOS Safari a veces ignora `color` en inputs y los pinta con su propio texto
   oscuro por defecto sobre nuestro fondo oscuro (texto invisible al escribir) —
   -webkit-text-fill-color fuerza el color real, y el :-webkit-autofill evita
   que el autocompletado imponga su propio fondo claro. Mismo fix ya usado en
   Snake/Llaves/Llamada. */
.field-input, .field-textarea{ -webkit-text-fill-color:rgba(255,255,255,0.92); caret-color:var(--cyan); }
.field-input:-webkit-autofill, .field-textarea:-webkit-autofill{
  -webkit-text-fill-color:rgba(255,255,255,0.92) !important;
  -webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,0.03) inset !important;
  transition:background-color 9999s ease-in-out 0s;
}
.field-input::placeholder, .field-textarea::placeholder{
  color:rgba(255,255,255,0.28); -webkit-text-fill-color:rgba(255,255,255,0.28); opacity:1;
  font-size:11.5px;
}
.field-input:focus, .field-select:focus, .field-textarea:focus{
  border-color:rgba(45,212,191,0.5); background:rgba(255,255,255,0.045);
}
.field-input.error, .field-textarea.error{ border-color:rgba(192,57,43,0.7); }
.field-select option{ background:#1a1a1a; color:rgba(255,255,255,0.9); }

/* ============= "Prefiero no decirlo" (broker) ============= */
.no-broker-check{
  display:flex; align-items:center; gap:9px; margin-top:4px; padding:10px 2px; cursor:pointer;
  font-family:var(--font-ui); font-size:11.5px; color:rgba(243,243,243,0.5);
}
.no-broker-check input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--cyan); cursor:pointer; flex-shrink:0; }
.field-input:disabled{ opacity:0.55; cursor:not-allowed; }

/* ============= WhatsApp/teléfono con prefijo de país ============= */
.phone-row{ display:flex; gap:8px; }
.phone-prefix{
  flex:0 0 auto; min-width:56px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.03); border:1px solid var(--line-1); border-radius:5px;
  font-family:var(--font-mono); font-size:13.5px; color:rgba(243,243,243,0.5); padding:0 10px;
}
@media (pointer: coarse){ .phone-prefix{ font-size:16px; } }
.phone-row .field-input{ flex:1; }

.field-error{
  font-family:var(--font-ui); font-size:11px; color:#e07268; margin-top:6px; display:none;
}
.field-error.show{ display:block; }

/* ============= Categoría — checklist tipo formulario ============= */
.cat-list{
  display:flex; flex-direction:column;
  border:1px solid var(--line-1); border-radius:6px; overflow:hidden;
}
.cat-row{
  display:flex; align-items:center; gap:10px; min-height:44px;
  font-family:var(--font-mono); font-size:12px; text-align:left;
  background:rgba(255,255,255,0.02); border:none; border-bottom:1px solid var(--line-1);
  color:rgba(243,243,243,0.7); padding:12px; cursor:pointer; transition:all .15s ease;
}
.cat-row:last-child{ border-bottom:none; }
.cat-row:hover{ background:rgba(255,255,255,0.04); color:var(--smoke); }
.cat-row.active{ background:rgba(45,212,191,0.08); color:var(--white); }
.cat-box{
  flex-shrink:0; width:14px; height:14px; border-radius:2px;
  border:1px solid var(--line-2); position:relative;
}
.cat-row.active .cat-box{ border-color:var(--cyan); background:rgba(45,212,191,0.18); }
.cat-row.active .cat-box::after{
  content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; line-height:1; color:var(--cyan);
}
.cat-tag{ color:var(--cyan); flex-shrink:0; }
.cat-label{ flex:1; }

/* ============= Flujo por pasos ============= */
.step{ animation:step-in .28s ease; outline:none; }
@keyframes step-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

.step-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:20px; }
.step-next{
  font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:0.02em;
  background:var(--cyan); color:#0a0a0a; border:none; border-radius:6px; min-height:44px;
  padding:11px 20px; cursor:pointer; transition:filter .15s ease; white-space:nowrap; flex-shrink:0;
}
.step-next:hover{ filter:brightness(1.08); }
.step-skip{
  font-family:var(--font-ui); font-size:11.5px; color:rgba(243,243,243,0.4); min-height:44px;
  background:none; border:none; cursor:pointer; padding:6px 10px; transition:color .15s ease;
}
.step-skip:hover{ color:rgba(243,243,243,0.7); }

.step-back{
  display:flex; align-items:center; gap:6px; margin-bottom:14px; min-height:44px;
  font-family:var(--font-mono); font-size:11px; color:rgba(243,243,243,0.4);
  background:none; border:none; cursor:pointer; padding:2px 4px; margin-left:-4px; transition:color .15s ease;
}
.step-back:hover{ color:var(--cyan); }
.step-back[hidden]{ display:none; }

.step-note{
  font-family:var(--font-ui); font-size:11.5px; line-height:1.5; color:rgba(243,243,243,0.45);
  margin-bottom:16px;
}

/* ============= Expediente en vivo — se arma mientras se completa el form.
   Ficha estilo carné de identidad (referencia visual pinneada por el usuario):
   panel oliva/caqui con esquinas en corchete, campos numerados, casilla de
   foto que SIEMPRE muestra el ícono genérico de testigo (nunca hay foto real
   — refuerza el anonimato) y un sello a la derecha. No repite el contenido
   escrito (broker/testimonio) hasta la revisión final, mismo criterio que ya
   regía la transcripción anterior. ============= */
.dossier{
  position:relative;
  margin-bottom:22px;
  padding:14px 14px 13px;
  background:var(--dossier-bg);
  border:1px solid var(--dossier-line);
  border-radius:4px;
}
.dossier-corner{ position:absolute; width:10px; height:10px; }
.dc-tl{ top:-1px; left:-1px; border-top:1px solid var(--dossier-ink-dim); border-left:1px solid var(--dossier-ink-dim); }
.dc-tr{ top:-1px; right:-1px; border-top:1px solid var(--dossier-ink-dim); border-right:1px solid var(--dossier-ink-dim); }
.dc-bl{ bottom:-1px; left:-1px; border-bottom:1px solid var(--dossier-ink-dim); border-left:1px solid var(--dossier-ink-dim); }
.dc-br{ bottom:-1px; right:-1px; border-bottom:1px solid var(--dossier-ink-dim); border-right:1px solid var(--dossier-ink-dim); }

.dossier-topline{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px dashed var(--dossier-line-soft);
  font-family:var(--font-mono);
}
.dossier-eyebrow{
  font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--dossier-ink-dim);
}
.dossier-archive{ font-size:10.5px; letter-spacing:0.03em; text-transform:uppercase; color:var(--dossier-ink-dim); white-space:nowrap; }
.dossier-archive b{
  color:var(--dossier-ink); font-weight:700;
  text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--dossier-line);
}

.dossier-body{ display:flex; gap:14px; align-items:stretch; }

.dossier-photo{
  flex:0 0 56px; width:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:var(--dossier-bg-2); border:1px solid var(--dossier-line-soft); border-radius:2px;
}
.dossier-photo-icon{ width:24px; height:24px; fill:var(--dossier-ink-dim); }
.dossier-photo-tag{
  font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--dossier-ink-mute);
}

.dossier-fields{ flex:1; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:3px 14px; align-content:center; }
.dossier-field-wide{ grid-column:1 / -1; }
.dossier-field{
  position:relative; min-height:44px;
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:8px 6px; border-radius:2px; transition:background .15s ease; -webkit-appearance:none; margin:0;
  font-family:var(--font-mono);
}
.dossier-field:hover:not(:disabled){ background:rgba(230,230,230,0.06); }
.dossier-field:disabled{ cursor:default; }
.dossier-field-review-only{ display:none; }
.df-label{
  display:block; font-size:8.5px; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--dossier-ink-mute); margin-bottom:2px;
}
.df-value{
  display:block; font-size:12px; color:var(--dossier-ink); text-transform:uppercase; letter-spacing:0.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.df-value.pending{ color:var(--dossier-pending); }
.df-value.empty{ color:var(--dossier-ink-mute); text-transform:none; }

.dossier-seal{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding-left:12px; border-left:1px solid var(--dossier-line-soft);
}
.dossier-seal-mark{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--dossier-ink-mute);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:11px; color:var(--dossier-ink-dim);
}
.dossier-seal-text{
  font-family:var(--font-mono); font-size:6.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--dossier-ink-mute); text-align:center; line-height:1.4;
}

@media (max-width:460px){ .dossier-seal{ display:none; } }
@media (max-width:360px){
  .dossier-fields{ grid-template-columns:1fr; }
  .dossier-topline{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ---- Expediente expandido — revisión final, mismo panel con el detalle
   completo en vez de la lista de revisión cyan que había antes ---- */
.dossier.expanded .dossier-body{ align-items:flex-start; }
.dossier.expanded .dossier-fields{ grid-template-columns:1fr; gap:14px; }
.dossier.expanded .dossier-field-review-only{ display:block; }
.dossier.expanded .dossier-field{
  cursor:pointer; padding-right:46px;
}
.dossier.expanded .df-value{
  text-transform:none; white-space:pre-wrap; overflow:visible; text-overflow:clip;
  word-break:break-word; line-height:1.5;
}
.dossier.expanded .dossier-field::after{
  content:'editar'; position:absolute; top:6px; right:6px;
  font-family:var(--font-ui); font-size:9px; letter-spacing:0.02em;
  color:var(--dossier-ink-mute);
}
/* Barrido único al expandir — hermano del scan-sweep de apertura del .terminal,
   marca el momento en que la ficha "se vuelve" el expediente completo. */
.dossier.expanded::after{
  content:''; position:absolute; inset:0; border-radius:4px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(230,230,230,0.16), transparent);
  background-size:100% 220%; background-position:0 -120%;
  animation:dossier-expand-sweep .7s ease-out 1 forwards;
}
@keyframes dossier-expand-sweep{
  from{ background-position:0 -120%; opacity:1; }
  to{ background-position:0 120%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .dossier.expanded::after{ animation:none; content:none; } }

/* ============= Revisión final — el expediente de arriba se expande con el
   detalle completo en vez de repetirlo en una lista aparte ============= */
.review-hint{
  font-family:var(--font-ui); font-size:12.5px; line-height:1.6; color:rgba(243,243,243,0.5);
  margin-bottom:4px;
}

#case-progress{ color:var(--cyan) !important; }

/* ============= Adjuntar evidencia — enmarcada como foto de expediente ============= */
.dropzone{
  display:block;
  border:1px dashed var(--line-2); border-radius:6px; padding:16px;
  text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease;
  font-family:var(--font-ui); font-size:12px; line-height:1.5; color:rgba(243,243,243,0.5);
}
.dropzone:hover, .dropzone.drag{ border-color:rgba(45,212,191,0.45); background:rgba(45,212,191,0.04); }
.dropzone input[type="file"]{ display:none; }

.file-list{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.file-item{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.03); border:1px solid var(--line-1); border-radius:5px;
  padding:8px 10px; font-size:11.5px;
}
.file-item .fidx{
  font-family:var(--font-mono); font-size:9.5px; color:rgba(45,212,191,0.7);
  letter-spacing:0.03em; flex-shrink:0;
}
.file-item .fname{ flex:1; color:rgba(243,243,243,0.85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item .fsize{ color:rgba(243,243,243,0.4); font-size:10px; margin-left:0; white-space:nowrap; }
.file-item .fremove{
  background:none; border:none; color:#e07268; cursor:pointer; font-size:16px; line-height:1;
  padding:9px; flex-shrink:0;
}
.file-item .fstatus{ font-size:10px; color:var(--cyan); white-space:nowrap; }
.file-item .fstatus.failed{ color:#e07268; }

/* ============= Contacto ============= */
.contact-toggle{ display:flex; gap:8px; margin-bottom:14px; }
.toggle-btn{
  flex:1; min-height:44px; font-family:var(--font-ui); font-size:12px; font-weight:500;
  background:rgba(255,255,255,0.03); border:1px solid var(--line-1); border-radius:5px;
  color:rgba(243,243,243,0.6); padding:12px 10px; cursor:pointer; transition:all .15s ease;
}
.toggle-btn.active{ border-color:var(--cyan); background:rgba(45,212,191,0.08); color:var(--white); }
.contact-fields{ display:flex; flex-direction:column; gap:12px; }
.contact-fields.hidden{ display:none; }

/* ============= Autorización ============= */
.authorize-box{
  margin-top:22px; padding:14px 15px; border:1px solid var(--line-1); border-radius:6px;
  background:rgba(255,255,255,0.02);
}
.authorize-flag{
  display:inline-block; font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:#e07268;
  border:1px solid rgba(192,57,43,0.45); border-radius:3px;
  padding:3px 8px; margin-bottom:11px;
}
.authorize-row{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.authorize-row input[type="checkbox"]{
  margin-top:2px; width:15px; height:15px; accent-color:var(--cyan); cursor:pointer; flex-shrink:0;
}
.authorize-text{ font-family:var(--font-ui); font-size:12px; line-height:1.55; color:rgba(243,243,243,0.65); }
.authorize-text b{ color:var(--smoke); font-weight:500; }

/* ============= Submit ============= */
.submit-row{ margin-top:22px; }
.submit-btn{
  width:100%; min-height:48px; font-family:var(--font-mono); font-size:13px; font-weight:700;
  background:var(--cyan); color:#0a0a0a; border:none; border-radius:6px;
  padding:13px; cursor:pointer; transition:filter .15s ease; letter-spacing:0.02em;
}
.submit-btn:hover{ filter:brightness(1.08); }
.submit-btn:disabled{ opacity:0.5; cursor:default; filter:none; }
.submit-note{
  font-family:var(--font-ui); font-size:10.5px; color:rgba(243,243,243,0.35);
  text-align:center; margin-top:9px;
}

.form-error{
  font-family:var(--font-ui); font-size:12px; color:#e07268; text-align:center;
  margin-top:12px; display:none;
}
.form-error.show{ display:block; }

/* ============= Confirmación ============= */
#screen-form{ display:block; }
#screen-done{ display:none; }
#screen-done .line{ margin-bottom:8px; }
.done-stamp{
  display:inline-block; font-family:var(--font-mono); font-weight:700; font-size:13px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--green);
  border:2px solid rgba(29,158,117,0.65); border-radius:4px;
  padding:6px 14px; margin-bottom:14px; transform:rotate(-4deg);
  box-shadow:0 0 0 3px rgba(29,158,117,0.12) inset;
}

/* ============= Footer ============= */
.foot-note{
  margin-top:22px; max-width:640px; width:100%;
  font-family:var(--font-ui); font-size:10.5px; line-height:1.6; color:rgba(243,243,243,0.3);
  text-align:center;
}
.foot-note a{ color:rgba(45,212,191,0.6); text-decoration:none; }
.foot-note a:hover{ text-decoration:underline; }