/* Capa "Industry" para el canal público, el seguimiento, los accesos y la página legal: el
   mismo lenguaje que la landing —formas rectas, línea fina, sin rellenos, mucho aire— pero
   con el color de cada empresa en lugar del acero fijo.

   Se carga DESPUÉS de theme.css y canal.css y solo las redefine donde hace falta. Los
   tokens (tipografía, tinta, gama del color de empresa) viven en industry-tokens.css, que
   hay que enlazar antes que esta, igual que /css/fonts.css (Carlito). */

body { font-size: 17px; }

/* ── Cabecera: logo, nombre de la empresa, título y subtítulo, alineados a la izquierda ── */
.page-header {
  max-width: 620px; margin: 0 auto; padding: clamp(40px, 8vw, 72px) 16px 28px;
  text-align: left; display: flex; flex-direction: column; align-items: flex-start;
}
.page-header > img { order: -2; }
.page-header .section-label { order: -1; }
.page-divider { display: none; }
.section-label { font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-accent-700); margin: 0 0 14px; }
.page-title { font-size: clamp(34px, 6vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: var(--color-title); margin: 0 0 14px; }
.page-title em { color: var(--color-accent); font-style: normal; }
.page-subtitle { font-size: 19px; font-style: normal; line-height: 1.45; color: var(--color-secondary); max-width: 40ch; }

/* ── Selector de idioma: segmentado y recto ── */
.lang-bar { max-width: 620px; margin: 0 auto 18px; padding: 0 16px; justify-content: flex-start; }
.lang-pill { gap: 0; padding: 0; border-radius: 0; border: 1px solid var(--color-divider); background: transparent; }
.lang-btn { border-radius: 0; padding: 6px 12px; font-size: 13px; color: var(--color-body); }
.lang-btn + .lang-btn { border-left: 1px solid var(--color-divider); }
.lang-btn:hover { background: color-mix(in srgb, #1d1f20 7%, transparent); color: var(--color-body); }
.lang-btn.active, .lang-btn[aria-pressed="true"] { background: var(--color-accent); color: #fff; }

/* El mismo selector, en las pantallas que usan el compartido de i18n.js (.lang-switch: los
   accesos). Va dentro de la cabecera: se coloca el último, a la izquierda, como en el canal. */
.lang-switch { gap: 0; padding: 0; border-radius: 0; border: 1px solid var(--color-divider); background: transparent; }
.lang-switch button { border-radius: 0; padding: 6px 12px; font-size: 13px; letter-spacing: .02em; color: var(--color-body); }
.lang-switch button + button { border-left: 1px solid var(--color-divider); }
.lang-switch button:hover { background: color-mix(in srgb, #1d1f20 7%, transparent); }
.lang-switch button[aria-pressed="true"] { background: var(--color-accent); color: #fff; }
.page-header > .lang-switch { order: 1; margin: 22px 0 0; width: max-content; }

/* ── Contenedor: línea fina, sin fondo, esquinas rectas ── */
.card { background: transparent; border: 1px solid var(--color-divider); border-radius: 0; padding: 32px 36px 40px; }
.box { border-radius: 0; border-color: var(--color-divider); background: transparent; }
.box-positive { border-color: var(--color-positive); }
.box-negative { border-color: var(--color-negative); }
.info-box { background: var(--color-accent-100); border: 0; border-radius: 0; color: var(--color-accent-900); font-size: 15px; padding: 16px 18px; }
.wizard-summary { background: transparent; border: 1px solid var(--color-divider); border-radius: 0; }
.sec-label { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-accent-700); margin: 26px 0 10px; }

/* ── Pestañas: control segmentado ── */
.tab-row, .lookup-tabs { gap: 0; border: 1px solid var(--color-divider); margin-bottom: 20px; }
.tab-btn, .lookup-tab-btn { border: 0; border-radius: 0; background: transparent; color: var(--color-body); font-size: 15px; font-weight: 700; padding: 12px 10px; }
.tab-btn + .tab-btn, .lookup-tab-btn + .lookup-tab-btn { border-left: 1px solid var(--color-divider); }
.tab-btn:hover, .lookup-tab-btn:hover { background: color-mix(in srgb, #1d1f20 7%, transparent); }
.tab-btn.active, .lookup-tab-btn.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ── Formulario ── */
.form-group label { font-size: 14px; font-weight: 700; color: var(--color-title); }
.form-group input, .form-group select, .form-group textarea {
  border: 1px solid var(--color-field-border); border-radius: 0; background: var(--color-surface);
  font-size: 16px; color: var(--color-body); min-height: 44px; padding: 9px 12px;
}
.form-group textarea { min-height: 110px; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: color-mix(in srgb, #1d1f20 70%, #fff); }
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { border-color: var(--color-accent); }
.form-group input[type="checkbox"], .form-group input[type="radio"], .legal input { min-height: 0; accent-color: var(--color-accent); }
.hint, .char-count { font-size: 13px; }

.anon-row { border: 1px solid var(--color-divider); border-radius: 0; padding: 14px 16px; }
.anon-text strong { font-size: 15px; }
.anon-text span { font-size: 13px; }
.toggle { border-radius: 0; background: var(--color-field-border); }
.toggle::after { border-radius: 0; }
.toggle.on { background: var(--color-accent); }

.legal { font-size: 14px; }

/* ── Botones ── */
.btn-submit {
  border: 1px solid var(--color-accent); border-radius: 0; background: var(--color-accent); color: #fff;
  font-size: 16px; font-weight: 700; padding: 14px 20px;
}
.btn-submit:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-submit:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-submit-outline, .wizard-btn-back { background: transparent; color: var(--color-accent-700); border: 1px solid var(--color-accent); }
.btn-submit-outline:hover, .wizard-btn-back:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-900); border-color: var(--color-accent); }
.btn-submit-outline:active, .wizard-btn-back:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* ── Pasos del formulario y progreso del caso: marcas cuadradas ── */
.wizard-progress-dot { border-radius: 0; border: 1px solid var(--color-field-border); background: transparent; }
.progress-step .progress-dot { border-radius: 0; border: 1px solid var(--color-field-border); background: transparent; }
.wizard-progress-step.current, .progress-step.current { color: var(--color-title); }
.wizard-progress-step.current .wizard-progress-dot, .progress-step.current .progress-dot { background: var(--color-accent); border-color: var(--color-accent); }
.progress-step.current { font-weight: 700; }

/* ── Categorías, adjuntos y audio ── */
.cat-grupo { border-radius: 0; border-color: var(--color-divider); }
.cat-grupo-hdr { background: var(--color-surface); }
.cat-grupo-name { font-size: 14px; }
.cat-sub-opt { border-radius: 0; font-size: 14px; }
.cat-sub-opt:hover { background: var(--color-accent-100); }
.cat-sub-opt.sel { background: var(--color-accent-100); color: var(--color-accent-900); }
.cat-selected-tag { background: var(--color-accent-100); border: 0; border-radius: 0; color: var(--color-accent-900); }
.file-zone { border-radius: 0; border: 1px dashed var(--color-field-border); }
.file-zone:hover { border-color: var(--color-accent); background: var(--color-accent-100); }
.file-remove { border-radius: 0; }
.btn-rec-start { border-radius: 0; background: var(--color-surface); border: 1px dashed var(--color-field-border); }
.rec-active, .rec-result { border-radius: 0; }
.btn-rec-stop, .btn-rec-cancel, .btn-rec-discard { border-radius: 0; }

/* ── Mensajes y adjuntos del caso ── */
.msg-bubble { border-radius: 0; background: var(--color-surface); border: 1px solid var(--color-divider); font-size: 15px; }
.msg.denunciante .msg-bubble { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.attach-item { border-radius: 0; border-color: var(--color-divider); font-size: 14px; }
.attach-item-name { color: var(--color-accent-700); }

/* ── Confirmación de envío ── */
.token-block { border-radius: 0; }
.token-val { border-radius: 0; background: var(--color-surface); }

/* ── Ventana de la política de privacidad ── */
.modal-box { border-radius: 0; border: 1px solid var(--color-divider); box-shadow: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent); }
.modal-header h3 { font-size: 20px; }

@media (max-width: 480px) {
  .page-header { padding: 32px 16px 20px; }
  .page-subtitle { font-size: 17px; }
  .card { padding: 22px 18px 28px; }
}