/* Encuesta de Clima Organizacional — App Respondente
   Capa de layout sobre Fundamental Styles + tema sap_horizon.
   Todos los colores/tipografías provienen de tokens --sap* del tema. */

html, body { margin: 0; padding: 0; background: var(--sapBackgroundColor); }
body { font-family: var(--sapFontFamily); color: var(--sapTextColor); font-size: var(--sapFontSize); }
* { box-sizing: border-box; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.app-root { min-height: 100vh; display: flex; flex-direction: column; background: var(--sapBackgroundColor); }
.fade-in { animation: fadeIn 0.3s ease; }

/* ── Shell bar (fd-shellbar) ── */
.app-root .fd-shellbar { position: sticky; top: 0; z-index: 10; padding: 0 1.25rem; }

/* ── Marca M&V (spec 2026-08-14) ── */
/* Zona de seguridad del brandbook (pág. 12): el recorte dejó el logotipo a
   sangre, así que el aire lo aporta el padding. El aire izquierdo lo aporta el
   padding propio del shellbar (1.25rem), que ya supera la zona de seguridad.
   El logotipo vive SOLO en esta app: la de administrador es una herramienta
   interna de RR.HH. y únicamente hereda la paleta (decisión del propietario,
   2026-08-14). No hay ningún valor que mantener sincronizado con ella. */
.app-root .fd-shellbar__logo { padding: 0.375rem 0.875rem 0.375rem 0; display: flex; align-items: center;
  /* Fundamental Styles le fija `height: 2rem; max-height: 2rem` al contenedor;
     con el logotipo a 2rem más el padding propio se desbordaba, y el shellbar
     mide 3.25rem, así que hay sitio de sobra para dejarlo crecer. */
  height: auto; max-height: none; }
/* OJO — no quitar los cuatro min/max de abajo. Fundamental Styles declara
   `.fd-shellbar__logo > * { min-width: 3.75rem; max-width: 3.75rem;
   min-height: 1.875rem; max-height: 1.875rem }` porque espera el cuadrado del
   logo de SAP. Los min/max mandan siempre sobre `width`/`height`, así que sin
   anularlos el logotipo se renderiza en 60×30 px: su proporción real es 2.99:1
   y quedaba ACHATADO a 2:1, un 33% más angosto de lo que debe. Deformar el
   logotipo es uso incorrecto explícito del brandbook (pág. 21).
   2rem de alto (y no 1.75rem) para que la bajada "MARTINEZ & VALDIVIESO" sea
   legible; el admin usa el mismo valor. */
.shell-logo { height: 2rem; width: auto; display: block;
  min-width: 0; max-width: none; min-height: 0; max-height: none; }

/* Avisos informativos en VERDE DE MARCA — solo en esta app (decisión del
   propietario, 2026-08-14, tras ver el resultado en pantalla). No se hace
   redefiniendo los tokens semánticos `--sapInformation*` en marca-myv.css,
   porque ese archivo se genera idéntico para las dos apps y en el admin el
   verde SÍ molesta: sus diálogos de importación muestran juntos un aviso
   informativo y una confirmación de éxito, y ambos quedarían del mismo verde.
   Acá no hay ese riesgo: esta app tiene tres avisos informativos y NINGÚN
   mensaje de éxito, así que no hay nada con lo que confundirse.
   Se overridean las tres variables que Fundamental Styles deriva de los tokens
   de Information, no los tokens en sí, para que el cambio muera en esta hoja. */
.app-root .fd-message-strip--information {
  --fdMessageStrip_Background_Color: var(--myv-verde-tinte);
  --fdMessageStrip_Border_Color: var(--myv-verde-oscuro);
  --fdMessageStrip_Icon_Color: var(--myv-verde-oscuro);
}

/* Franja corporativa: regla de 3 tercios (brandbook pág. 18). El tercio
   derecho va fragmentado en tres bloques con aire entre ellos. Los colores
   son DECORATIVOS y nunca llevan texto encima. El degradado se emite una
   sola vez en marca-myv.css (--myv-franja): no se duplica acá.
   Va como ::after del shellbar —el mismo patrón que el ToolHeader del admin—
   y no como elemento hermano: el shellbar es sticky y un hermano no sticky se
   despegaba al primer scroll y desaparecía. El `position: sticky` de la regla
   de arriba ya le da el bloque contenedor al absolute. Es decorativa, así que
   un pseudo-elemento es además lo correcto semánticamente. */
.app-root .fd-shellbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.25rem;
  background: var(--myv-franja);
}

/* ── Contenedores comunes ── */
.screen-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.screen-top { flex: 1; display: flex; justify-content: center; padding: 2.5rem 1.25rem; }
.card { padding: 2rem; }
.card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.375rem; }
.card-sub { font-size: 0.845rem; color: var(--sapContent_LabelColor); line-height: 1.5; margin-bottom: 1.25rem; }

.msg-block { margin-bottom: 1.375rem; }
.form-col { display: flex; flex-direction: column; gap: 0.875rem; }
.field { display: flex; flex-direction: column; gap: 0.3125rem; }
.field .fd-input, .field .fd-textarea { width: 100%; }
.w-100 { width: 100%; }
.field-error { font-size: 0.78rem; color: var(--sapNegativeColor); }

/* ── Login ── */
.login-wrap { width: 420px; max-width: 100%; }
.login-footer { text-align: center; font-size: 0.72rem; color: var(--sapContent_LabelColor); margin-top: 0.875rem; }
.demo-hint { margin-top: 1.125rem; padding-top: 1rem; border-top: 1px dashed var(--sapList_BorderColor); font-size: 0.75rem; color: var(--sapContent_LabelColor); }
.demo-hint code { font-family: "72Mono", monospace; background: var(--sapBackgroundColor); padding: 1px 6px; border-radius: 5px; }

/* ── Intro ── */
.intro-wrap { width: 640px; max-width: 100%; }

/* ── Cuestionario ── */
.progress-wrap { background: var(--sapGroup_ContentBackground); border-bottom: 1px solid var(--sapList_BorderColor); padding: 0.75rem 1.75rem; display: flex; align-items: center; gap: 1rem; }
.progress-track { flex: 1; height: 0.5rem; background: var(--sapNeutralBackground); border-radius: 0.25rem; overflow: hidden; }
.progress-fill { height: 100%; background: var(--sapBrandColor); border-radius: 0.25rem; transition: width 0.3s ease; }
.progress-label { font-size: 0.78rem; font-weight: 600; color: var(--sapContent_LabelColor); white-space: nowrap; }
.draft-status { font-size: 0.72rem; color: var(--sapContent_LabelColor); white-space: nowrap; }

.survey-layout { flex: 1; display: flex; gap: 1.5rem; padding: 1.5rem 1.75rem; max-width: 1180px; width: 100%; margin: 0 auto; }
.rail { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.rail-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.6875rem 0.875rem; border-radius: 0.625rem; border: 1px solid var(--sapList_BorderColor); background: var(--sapList_Background); font-size: 0.845rem; font-weight: 600; color: var(--sapTextColor); cursor: pointer; font-family: inherit; text-align: left; }
.rail-item.active { border-color: var(--sapList_SelectionBorderColor); background: var(--sapButton_Handle_Selected_Background); }
.rail-item.locked { opacity: 0.55; cursor: default; }
.rail-item .name { flex: 1; text-align: left; }
.rail-item .count { font-size: 0.72rem; font-weight: 600; color: var(--sapContent_LabelColor); }
.rail-num { width: 1.375rem; height: 1.375rem; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--sapNeutralBackground); color: var(--sapContent_LabelColor); }
.rail-item.active .rail-num { background: var(--sapButton_Emphasized_Background); color: var(--sapButton_Emphasized_TextColor); }
.rail-num.complete { background: var(--sapPositiveColor); color: #fff; }

/* Encabezado de categoría en el riel (spec 2026-08-15-categorias-cuestionario).
   Solo tokens --sap*: la capa de marca M&V los remapea sin tocar esta regla. */
.rail-cat {
  margin: 18px 0 6px;
  padding: 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sapContent_LabelColor);
}
.rail-cat:first-child { margin-top: 0; }

.section-cat {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sapContent_LabelColor);
  margin-bottom: 2px;
}

.section-pane { flex: 1; min-width: 0; animation: fadeIn 0.25s ease; }
.section-title { font-size: 1.1875rem; font-weight: 700; margin-bottom: 0.25rem; }
.section-sub { font-size: 0.8125rem; color: var(--sapContent_LabelColor); margin-bottom: 1.125rem; }
.q-list { display: flex; flex-direction: column; gap: 0.875rem; }
.q-card { padding: 1.125rem 1.25rem; }
.q-card.missing { border-color: var(--sapCriticalColor); }
.q-head { display: flex; gap: 0.625rem; margin-bottom: 0.875rem; }
.q-num { font-size: 0.75rem; font-weight: 700; color: var(--sapContent_LabelColor); margin-top: 2px; white-space: nowrap; }
.q-text { font-size: 0.9rem; font-weight: 600; line-height: 1.5; }
.q-text .req { color: var(--sapNegativeColor); }
.q-missing-msg { font-size: 0.75rem; color: var(--sapNegativeColor); margin-top: 0.5rem; }

.likert-row { display: flex; gap: 0.5rem; }
.likert-row .likert-btn { flex: 1; height: 2.75rem; font-size: 0.9375rem; font-weight: 700; }
.likert-legend { display: flex; justify-content: space-between; margin-top: 0.375rem; font-size: 0.72rem; color: var(--sapContent_LabelColor); }

.choice-list { display: flex; flex-direction: column; gap: 0.5rem; }
.choice-btn { display: flex; align-items: center; gap: 0.625rem; text-align: left; min-height: 2.75rem; padding: 0.625rem 0.875rem; border-radius: 0.5rem; font-size: 0.845rem; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid var(--sapButton_BorderColor); background: var(--sapButton_Background); color: var(--sapTextColor); transition: all 0.12s ease; }
.choice-btn:hover { border-color: var(--sapSelectedColor); }
.choice-btn.selected { border-color: var(--sapSelectedColor); background: var(--sapButton_Handle_Selected_Background); }
.choice-dot { width: 1rem; height: 1rem; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; border: 2px solid var(--sapButton_BorderColor); background: var(--sapList_Background); }
.choice-btn.selected .choice-dot { border: 5px solid var(--sapSelectedColor); }

.survey-nav { display: flex; justify-content: space-between; margin-top: 1.375rem; padding-bottom: 2rem; }
.btn-prev.disabled { opacity: 0.5; cursor: default; }

/* ── Revisión ── */
.review-wrap { width: 620px; max-width: 100%; }
.review-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.375rem; }
.review-row { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--sapList_BorderColor); border-radius: 0.625rem; padding: 0.75rem 1rem; }
.review-row .name { flex: 1; font-size: 0.875rem; font-weight: 600; }
.review-row .count { font-size: 0.78rem; color: var(--sapContent_LabelColor); }
.review-icon { width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.8125rem; font-weight: 700; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.review-icon.ok { background: var(--sapSuccessBackground); color: var(--sapPositiveColor); border: 1px solid var(--sapPositiveColor); }
.review-icon.warn { background: var(--sapWarningBackground); color: var(--sapCriticalColor); border: 1px solid var(--sapCriticalColor); }
.review-actions { display: flex; gap: 0.75rem; }
.review-actions .fd-button { flex: 1; }

/* ── Confirmación ── */
.done-wrap { width: 480px; max-width: 100%; text-align: center; animation: fadeIn 0.35s ease; }
.done-check { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--sapSuccessBackground); border: 2px solid var(--sapPositiveColor); color: var(--sapPositiveColor); font-size: 2.125rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.done-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.625rem; }
.done-sub { font-size: 0.9rem; color: var(--sapContent_LabelColor); line-height: 1.6; margin-bottom: 1.5rem; }
.done-note { font-size: 0.78rem; color: var(--sapContent_LabelColor); background: var(--sapGroup_ContentBackground); border: 1px solid var(--sapList_BorderColor); border-radius: 0.625rem; padding: 0.75rem 1rem; margin-bottom: 1.5rem; }

/* Botón deshabilitado (estado demo, mantiene hook .disabled para lógica/tests) */
.fd-button.disabled { opacity: 0.4; cursor: default; }

/* ── Iconos SAP (mapa spec §4): alineación mínima ── */
i[class^="sap-icon--"] { vertical-align: -0.125em; }
.done-check i[class^="sap-icon--"] { font-size: 2rem; }
.review-icon i[class^="sap-icon--"] { font-size: 0.875rem; }

/* Pantalla de bienvenida (spec 2026-08-13) --------------------------------- */
.bv-wrap { width: 640px; max-width: 100%; }
.bv-titulo { font-size: 1.375rem; font-weight: 700; text-align: center; margin-bottom: 1.25rem; }
.bv-parrafo { font-size: 0.875rem; line-height: 1.6; margin: 0 0 1rem; }
.bv-lista { list-style: none; margin: 0 0 1rem; padding: 0; }
/* .fd-card fuerza flex-direction: column — la fila de viñeta la fija explícita. */
.bv-item { display: flex; flex-direction: row; align-items: flex-start; gap: 0.5rem;
  font-size: 0.875rem; line-height: 1.6; margin-bottom: 0.375rem; }
.bv-item .sap-icon--accept { color: var(--sapPositiveElementColor); font-size: 1rem; line-height: 1.4; }
.bv-firma { text-align: center; font-weight: 700; font-size: 0.875rem; line-height: 1.6; margin-top: 1.5rem; }
.bv-cta { margin-top: 1.5rem; }
/* Marcado simple: "## " produce el subtítulo, **negrita** e *itálica* el resto.
   Se declaran explícitos porque el reset de Fundamental Styles los aplana. */
.bv-sub { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
.bv-sub:first-child { margin-top: 0; }
.bv-parrafo strong, .bv-item strong, .bv-sub strong { font-weight: 700; }
.bv-parrafo em, .bv-item em, .bv-sub em { font-style: italic; }
.bv-parrafo.bv-centrado { text-align: center; }

/* Sección "¿Cómo responder?" (spec 2026-08-13) ----------------------------- */
/* Sin caritas: la fuente SAP-icons no las tiene y el proyecto no admite
   emojis como iconos. La gradación va por color semántico del tema. */
.como-responder { margin-bottom: 1.5rem; }
.cr-titulo { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem; }
.cr-sub { font-size: 0.8125rem; color: var(--sapContent_LabelColor); line-height: 1.5; margin-bottom: 0.75rem; }
.escala-lista { display: flex; flex-direction: column; gap: 0.375rem; }
.escala-fila { display: flex; flex-direction: row; align-items: center; gap: 0.625rem; }
.escala-num { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700; color: var(--sapContent_ContrastTextColor); }
.escala-label { font-size: 0.8125rem; }
/* Tonos elegidos a propósito para cumplir AA (≥4.5:1) con texto blanco de
   13px bold, que NO califica como "texto grande" en WCAG. --sapNeutralColor
   (3.34:1) y --sapPositiveColor con opacity (2.67:1, la opacity lava también
   el texto) NO alcanzan el umbral — medido y verificado, no reemplazar por
   tokens más claros aunque "se vean" mejor. Rampa: rojo → naranjo → gris →
   celeste-azulado → verde; el nivel 4 usa un azulado en vez de un segundo
   verde porque no hay dos verdes del tema que cumplan 4.5:1 y a la vez se
   distingan entre sí. Ratios verificados (fórmula de luminancia relativa
   WCAG) contra --sapContent_ContrastTextColor (#fff):
   1=7.64:1  2=4.95:1  3=9.22:1  4=6.12:1  5=6.15:1 */
.escala-num--1 { background: var(--sapNegativeColor); }
.escala-num--2 { background: var(--sapIndicationColor_3); }
.escala-num--3 { background: var(--sapIndicationColor_10); }
.escala-num--4 { background: var(--sapIndicationColor_6); }
.escala-num--5 { background: var(--sapPositiveColor); }