/* ============================================================
   TU PROPIO MAPA DEL MIEDO · En Clave de Can
   Basado en el design system oficial de ECDC (tokens.css)
   ============================================================ */

:root {
  /* Primarios */
  --color-espresso:       #3C3232;
  --color-espresso-light: #F0EDED;
  --color-brown:          #6B5A48;
  --color-brown-light:    #EDE9E4;

  /* Acento · terracota (CTA y todo lo que debe resaltar) */
  --color-terracota:       #C64A32;
  --color-terracota-dark:  #A63A26;  /* texto de acento sobre marfil */
  --color-terracota-light: #F7E6E1;  /* fondos suaves */
  --color-terracota-soft:  #E8A08C;  /* acento sobre fondos oscuros */

  /* Secundario · verde salvia (calma, recursos, apoyo) */
  --color-verde:       #89988A;
  --color-verde-dark:  #5F7061;
  --color-verde-light: #E7ECE7;

  /* Neutros */
  --color-linen:          #D5D0C4;
  --color-cream:          #F3F0E8;
  --color-white:          #FAFAFA;

  /* Semánticos */
  --color-text-heading:   var(--color-espresso);
  --color-text-body:      var(--color-espresso);
  --color-text-muted:     var(--color-brown);
  --color-danger:         #B03A26;

  /* Escala de recuperación (del brief: 🟢🟡🟠🔴🟣) */
  --scale-1: #89988A;
  --scale-2: #D0A233;
  --scale-3: #DD8140;
  --scale-4: #C64A32;
  --scale-5: #7E6A8C;

  --font-family:  'Source Sans 3', 'Source Sans Pro', sans-serif;
  --font-heading: 'Hepta Slab', Georgia, 'Times New Roman', serif;

  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;

  --shadow-card: 0 1px 2px rgba(60, 50, 50, 0.05), 0 8px 28px -8px rgba(60, 50, 50, 0.12);
  --shadow-pop:  0 2px 6px rgba(60, 50, 50, 0.08), 0 20px 50px -16px rgba(60, 50, 50, 0.25);

  --transition-fast:   140ms ease;
  --transition-normal: 240ms ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-body);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Textura sutil de fondo — huellas en linen muy tenue */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(107, 90, 72, 0.045) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  z-index: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1.18;
  letter-spacing: -0.005em;
}

/* Micro-etiquetas en mayúsculas: siguen en la sans, el slab las emborrona */
.result-section h3,
.panel h3,
.section-head h3,
.m-block h4 { font-family: var(--font-family); }

/* Cifras y letras de display: también en slab */
.zone-card .zc-area,
.result-card .big-line,
.readout-box .ro-value,
.vl-item .vl-letter,
.stat-card .sc-value,
.prio-row .pr-index { font-family: var(--font-heading); }

/* ------------------------------------------------------------
   Layout general
   ------------------------------------------------------------ */
.app-shell {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0 22px;
}

.app-header img { height: 34px; width: auto; display: block; }

.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brown);
}

/* Barra de progreso */
.progress-wrap { margin-bottom: 26px; }
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brown);
  margin-bottom: 8px;
}
.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-linen);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-verde), var(--color-terracota));
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   Pantallas
   ------------------------------------------------------------ */
.screen { animation: screenIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }

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

.screen-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-terracota-dark);
  margin-bottom: 10px;
}

.screen h2 {
  font-size: clamp(24px, 4.6vw, 32px);
  font-weight: 700;
  margin-bottom: 12px;
}

.screen .intro-note {
  color: var(--color-brown);
  font-size: 16px;
  margin-bottom: 24px;
}

/* Hero / portada */
.hero { text-align: left; padding-top: 4vh; }
.hero h1 {
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 14px 0 6px;
}
.hero h1 .accent { color: var(--color-terracota); }
.hero .subtitle {
  font-size: clamp(18px, 3vw, 21px);
  font-weight: 600;
  color: var(--color-brown);
  margin-bottom: 20px;
}
.hero p { max-width: 56ch; margin-bottom: 14px; }
.hero .hero-highlight {
  border-left: 3px solid var(--color-terracota);
  background: var(--color-white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 16px 20px;
  margin: 22px 0 28px;
  box-shadow: var(--shadow-card);
}
.hero .hero-highlight strong { color: var(--color-espresso); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.hero-chip {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-verde-dark);
  background: var(--color-verde-light);
  border: 1px solid rgba(137, 152, 138, 0.4);
  border-radius: 999px;
  padding: 5px 14px;
}

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  padding: 13px 32px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover  { opacity: 0.9; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--color-terracota); color: #fff; }
.btn-accent  { background: var(--color-terracota); color: #fff; box-shadow: 0 8px 22px -8px rgba(198, 74, 50, 0.65); }
.btn-dark    { background: var(--color-espresso); color: var(--color-cream); }
.btn-ghost {
  background: transparent;
  color: var(--color-brown);
  border: 1.5px solid var(--color-linen);
  font-weight: 600;
}
.btn-danger {
  background: var(--color-danger);
  color: #fff;
}
.sel-cell { cursor: pointer; }
.sel-cell input { accent-color: var(--color-terracota); width: 16px; height: 16px; cursor: pointer; }
.btn-lg { font-size: 18px; padding: 16px 40px; border-radius: var(--radius-lg); }

.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

/* ------------------------------------------------------------
   Opciones de respuesta
   ------------------------------------------------------------ */
.options { display: grid; gap: 10px; margin-top: 20px; }

.option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  width: 100%;
  background: var(--color-white);
  border: 1.5px solid var(--color-linen);
  border-radius: var(--radius-lg);
  padding: 15px 18px;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-espresso);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.option:hover {
  border-color: var(--color-terracota);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.option.selected {
  border-color: var(--color-terracota);
  background: var(--color-terracota-light);
  box-shadow: 0 0 0 1.5px var(--color-terracota), var(--shadow-card);
}
.option .opt-emoji { font-size: 22px; line-height: 1.3; flex-shrink: 0; }
.option .opt-key {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-brown-light);
  color: var(--color-brown);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.option.selected .opt-key { background: var(--color-terracota); color: #fff; }
.option .opt-body strong { display: block; font-weight: 700; }
.option .opt-body small { color: var(--color-brown); font-size: 14.5px; display: block; margin-top: 1px; }

/* Escala 1–5 con color · tonos claros con tinta oscura para que se lean */
.option.scale-opt .opt-key { color: #fff; }
.option.scale-opt[data-tone="1"] .opt-key { background: var(--scale-1); color: var(--color-espresso); }
.option.scale-opt[data-tone="2"] .opt-key { background: var(--scale-2); color: var(--color-espresso); }
.option.scale-opt[data-tone="3"] .opt-key { background: var(--scale-3); color: var(--color-espresso); }
.option.scale-opt[data-tone="4"] .opt-key { background: var(--scale-4); }
.option.scale-opt[data-tone="5"] .opt-key { background: var(--scale-5); }
.option.scale-opt[data-tone="0"] .opt-key { background: var(--color-linen); color: var(--color-brown); }

.hint-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brown);
  margin-top: 14px;
}

/* Sutileza VALOR */
.sutileza {
  margin-top: 24px;
  background: var(--color-espresso);
  color: var(--color-cream);
  border-radius: var(--radius-xl);
  padding: 20px 22px;
  animation: screenIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sutileza .sutileza-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-terracota-soft);
  margin-bottom: 8px;
}
.sutileza p { font-size: 16px; line-height: 1.6; color: #EDE8E0; }
.sutileza p + p { margin-top: 8px; }

/* Formulario de datos */
.form-grid { display: grid; gap: 16px; margin-top: 22px; }
.form-grid .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .form-grid .row-2 { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brown);
  margin-bottom: 6px;
}
.input {
  font-family: var(--font-family);
  font-size: 16px;
  color: var(--color-text-body);
  background: var(--color-white);
  border: 1.5px solid var(--color-linen);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus { border-color: var(--color-terracota); box-shadow: 0 0 0 3px rgba(198, 74, 50, 0.14); }
.input.invalid { border-color: var(--color-danger); }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--color-brown);
  line-height: 1.5;
}
.consent input { margin-top: 4px; accent-color: var(--color-terracota); width: 16px; height: 16px; flex-shrink: 0; }

.form-error {
  display: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-danger);
  margin-top: 12px;
}
.form-error.visible { display: block; }

/* ------------------------------------------------------------
   Interludio: curva de recuperación
   ------------------------------------------------------------ */
.curve-card {
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-radius: var(--radius-xl);
  padding: 26px 24px;
  margin-top: 22px;
  box-shadow: var(--shadow-card);
}
.curve-card svg { width: 100%; height: auto; display: block; }

.curve-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
@media (max-width: 480px) { .curve-readout { grid-template-columns: 1fr; } }

.readout-box {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.readout-box .ro-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brown);
}
.readout-box .ro-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-espresso);
  line-height: 1.2;
}
.readout-box .ro-value small { font-size: 15px; font-weight: 600; color: var(--color-brown); }

.curve-note {
  margin-top: 18px;
  font-size: 16px;
  color: var(--color-espresso);
  border-top: 0.5px solid var(--color-linen);
  padding-top: 16px;
}

/* ------------------------------------------------------------
   Resultado final — Mapa VALOR
   ------------------------------------------------------------ */
.result-hero { text-align: center; padding-top: 10px; }
.result-hero .kicker { margin-bottom: 6px; }
.result-hero h1 { font-size: clamp(30px, 6vw, 44px); letter-spacing: -0.01em; }
.result-hero .for-dog {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-brown);
  margin-top: 6px;
  margin-bottom: 8px;
}

.share-card {
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-radius: 20px;
  box-shadow: var(--shadow-pop);
  padding: 30px 26px 26px;
  margin: 26px 0;
  position: relative;
  overflow: hidden;
}
.share-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--color-verde), var(--color-brown) 45%, var(--color-terracota));
}

.radar-wrap { max-width: 380px; margin: 0 auto; }
.radar-wrap svg { width: 100%; height: auto; display: block; }

.valor-legend {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 18px;
}
@media (max-width: 540px) { .valor-legend { grid-template-columns: repeat(2, 1fr); } }
.valor-legend .vl-item {
  text-align: center;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 8px 4px;
}
.vl-item .vl-letter { font-size: 19px; font-weight: 700; color: var(--color-terracota-dark); display: block; }
.vl-item .vl-name { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-brown); display: block; }
.vl-item .vl-score { font-size: 13px; font-weight: 700; color: var(--color-espresso); }

.share-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brown);
}
.share-brand img { height: 20px; opacity: 0.9; }

/* Bloques del resultado */
.result-section { margin-top: 26px; }
.result-section .rs-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-espresso);
  color: var(--color-cream);
  font-weight: 700;
  font-size: 14.5px;
  margin-right: 10px;
}
.result-section h3 {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-brown);
  margin-bottom: 12px;
}

.result-card {
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-radius: var(--radius-xl);
  padding: 22px 22px;
  box-shadow: var(--shadow-card);
}
.result-card .big-line { font-size: 22px; font-weight: 700; color: var(--color-espresso); }
.result-card .big-line .accent { color: var(--color-terracota-dark); }
.result-card p { margin-top: 8px; font-size: 16px; }
.result-card p.muted { color: var(--color-brown); }

.stat-rows { display: grid; gap: 12px; margin-top: 6px; }
.stat-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; }
@media (max-width: 480px) { .stat-row { grid-template-columns: 110px 1fr auto; } }
.stat-row .sr-label { font-size: 14px; font-weight: 700; color: var(--color-brown); }
.stat-row .sr-bar { height: 8px; border-radius: 999px; background: var(--color-cream); overflow: hidden; }
.stat-row .sr-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--color-terracota-dark), var(--color-terracota));
  transform-origin: left;
  animation: barGrow 800ms 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stat-row .sr-value { font-size: 14.5px; font-weight: 700; color: var(--color-espresso); white-space: nowrap; }

.zone-grid { display: grid; gap: 14px; }
.zone-card {
  border-radius: var(--radius-xl);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}
.zone-card .zc-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 6px; display: block;
}
.zone-card .zc-area { font-size: 24px; font-weight: 700; line-height: 1.2; }
.zone-card p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; }
.zone-alerta   { background: var(--color-espresso); color: var(--color-cream); }
.zone-alerta .zc-tag { color: var(--color-terracota-soft); }
.zone-alerta .zc-area { color: #fff; }
.zone-oportunidad { background: var(--color-terracota-light); color: var(--color-espresso); border: 1px solid rgba(198, 74, 50, 0.25); }
.zone-oportunidad .zc-tag { color: var(--color-terracota-dark); }
.zone-recurso { background: var(--color-verde-light); color: var(--color-espresso); border: 1px solid rgba(137, 152, 138, 0.4); }
.zone-recurso .zc-tag { color: var(--color-verde-dark); }

/* Perfil narrativo */
.profile-card {
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-left: 4px solid var(--color-terracota);
  border-radius: var(--radius-xl);
  padding: 26px 26px;
  box-shadow: var(--shadow-card);
}
.profile-card .pf-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-terracota-dark); margin-bottom: 4px;
}
.profile-card h4 { font-size: 24px; font-weight: 700; color: var(--color-espresso); margin-bottom: 4px; }
.profile-card .pf-sub { font-style: italic; color: var(--color-brown); font-size: 17px; margin-bottom: 14px; }
.profile-card p { margin-top: 12px; font-size: 16px; }
.profile-card .pf-block-title {
  margin-top: 22px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--color-brown);
}
.profile-card .pf-question {
  margin-top: 10px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  font-weight: 600;
  font-style: italic;
}

.closing-card {
  margin-top: 26px;
  background: var(--color-espresso);
  color: #EDE8E0;
  border-radius: var(--radius-xl);
  padding: 28px 26px;
}
.closing-card h4 { color: #fff; font-size: 21px; margin-bottom: 10px; }
.closing-card p { font-size: 16px; margin-top: 10px; }
.closing-card .questions {
  margin: 14px 0 0 0;
  padding: 0 0 0 2px;
  list-style: none;
  display: grid;
  gap: 6px;
}
.closing-card .questions li {
  font-size: 15.5px;
  font-style: italic;
  color: var(--color-cream);
  padding-left: 22px;
  position: relative;
}
.closing-card .questions li::before {
  content: "·";
  position: absolute; left: 6px;
  color: var(--color-terracota-soft);
  font-weight: 700;
}

/* CTA final */
.cta-card {
  margin-top: 26px;
  background: linear-gradient(135deg, var(--color-terracota-dark), var(--color-terracota));
  color: #fff;
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: 0 20px 44px -14px rgba(166, 58, 38, 0.55);
  text-align: center;
}
.cta-card .cta-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #F3C9BD; margin-bottom: 6px;
}
.cta-card h4 { color: #fff; font-size: clamp(24px, 5vw, 30px); margin-bottom: 8px; }
.cta-card p { font-size: 16px; color: #FBE7E1; max-width: 48ch; margin: 10px auto 0; }
.cta-card .cta-values { font-weight: 700; letter-spacing: 0.04em; margin-top: 14px; color: #fff; }
.cta-card .btn { margin-top: 22px; background: #fff; color: var(--color-terracota-dark); }

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

/* Confirmación de guardado */
.save-note {
  text-align: center;
  font-size: 13.5px;
  color: var(--color-brown);
  margin-top: 16px;
}
.save-note.error { color: var(--color-danger); font-weight: 600; }

/* ------------------------------------------------------------
   ADMIN
   ------------------------------------------------------------ */
.admin-shell { max-width: 1160px; margin: 0 auto; padding: 24px 24px 80px; position: relative; z-index: 1; }

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 0.5px solid var(--color-linen);
  margin-bottom: 26px;
}
.admin-topbar .at-left { display: flex; align-items: center; gap: 14px; }
.admin-topbar img { height: 30px; }
.admin-topbar h1 { font-size: 21px; font-weight: 700; }
.admin-topbar .at-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.demo-banner {
  background: var(--color-terracota-light);
  border: 1px solid rgba(198, 74, 50, 0.3);
  color: var(--color-terracota-dark);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 22px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.stat-card {
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.stat-card .sc-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-brown);
}
.stat-card .sc-value { font-size: 30px; font-weight: 700; color: var(--color-espresso); line-height: 1.25; }
.stat-card .sc-sub { font-size: 13px; color: var(--color-brown); }

.admin-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
@media (max-width: 860px) { .admin-panels { grid-template-columns: 1fr; } }
.panel {
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.panel h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-brown); margin-bottom: 14px;
}
.dist-row { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.dist-row .dr-label { font-weight: 600; color: var(--color-espresso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-row .dr-bar { height: 8px; background: var(--color-cream); border-radius: 999px; overflow: hidden; }
.dist-row .dr-bar i { display: block; height: 100%; background: var(--color-terracota); border-radius: 999px; }
.dist-row .dr-count { font-weight: 700; text-align: right; color: var(--color-brown); font-size: 13px; }

.table-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.table-toolbar .input { max-width: 300px; }
.table-toolbar select.input { max-width: 220px; width: auto; }
.table-toolbar .spacer { flex: 1; }
.table-count { font-size: 14px; font-weight: 600; color: var(--color-brown); }

.table-wrap {
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}
table { border-collapse: collapse; width: 100%; min-width: 900px; }
thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-brown);
  text-align: left; padding: 12px 14px;
  border-bottom: 1.5px solid var(--color-linen);
  background: var(--color-cream);
  position: sticky; top: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
tbody td { padding: 11px 14px; font-size: 14.5px; border-bottom: 0.5px solid var(--color-brown-light); vertical-align: middle; }
tbody tr { cursor: pointer; transition: background var(--transition-fast); }
tbody tr:hover { background: var(--color-terracota-light); }
tbody tr:last-child td { border-bottom: none; }
td .email { color: var(--color-terracota-dark); font-size: 13.5px; }

.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-p1 { background: var(--color-verde-light); color: var(--color-verde-dark); }
.pill-p2 { background: #F7EDD6; color: #8A6A17; }
.pill-p3 { background: #FAE6D6; color: #A2571F; }
.pill-p4 { background: var(--color-terracota-light); color: var(--color-terracota-dark); }
.pill-scale { color: #fff; }
.pill-scale[data-v="1"] { background: var(--scale-1); color: var(--color-espresso); }
.pill-scale[data-v="2"] { background: var(--scale-2); color: var(--color-espresso); }
.pill-scale[data-v="3"] { background: var(--scale-3); color: var(--color-espresso); }
.pill-scale[data-v="4"] { background: var(--scale-4); }
.pill-scale[data-v="5"] { background: var(--scale-5); }
.pill-scale[data-v="0"] { background: var(--color-linen); color: var(--color-brown); }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-brown);
  font-size: 16px;
}

/* Modal detalle participante */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(60, 50, 50, 0.5);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  z-index: 50;
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  max-width: 640px;
  width: 100%;
  padding: 28px;
  box-shadow: var(--shadow-pop);
  animation: screenIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.modal h3 { font-size: 22px; margin-bottom: 2px; }
.modal .m-sub { color: var(--color-brown); font-size: 14.5px; margin-bottom: 18px; }
.modal .m-close { float: right; }
.answer-list { display: grid; gap: 0; }
.answer-item { padding: 10px 0; border-bottom: 0.5px solid var(--color-brown-light); }
.answer-item .ai-q {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-brown);
}
.answer-item .ai-a { font-size: 15px; color: var(--color-espresso); margin-top: 2px; }

/* Login admin */
.login-card {
  max-width: 420px;
  margin: 12vh auto 0;
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-radius: var(--radius-xl);
  padding: 34px 30px;
  box-shadow: var(--shadow-pop);
  text-align: center;
}
.login-card img { height: 36px; margin-bottom: 18px; }
.login-card h1 { font-size: 22px; margin-bottom: 6px; }
.login-card p { font-size: 14.5px; color: var(--color-brown); margin-bottom: 20px; }
.login-card .input { text-align: center; margin-bottom: 14px; }

.footer-note {
  margin-top: 46px;
  text-align: center;
  font-size: 12.5px;
  color: var(--color-brown);
  opacity: 0.8;
}

/* Impresión / captura del resultado */
@media print {
  body::before { display: none; }
  .app-header, .progress-wrap, .result-actions, .cta-card, .nav-row { display: none !important; }
}

/* ------------------------------------------------------------
   ADMIN · PANEL DE FORMACIÓN
   ------------------------------------------------------------ */
.admin-shell { max-width: 1280px; }
.admin-topbar h1 { font-size: 20px; }
.stat-card .sc-value small { font-size: 15px; font-weight: 700; color: var(--color-brown); }
.stat-card .sc-value.sc-sm { font-size: 18px; line-height: 1.25; padding-top: 6px; }
.stat-card.sc-warn { border-color: rgba(198, 74, 50, 0.4); background: #FDF3F0; }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.muted { color: var(--color-brown); }

/* Barra de segmentación */
.adm-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.adm-filters .af-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-brown);
}
.adm-filters .input { width: auto; max-width: 230px; padding: 8px 12px; font-size: 14.5px; }
.adm-filters .spacer { flex: 1; }
.adm-filters .af-count { font-size: 13.5px; font-weight: 600; color: var(--color-brown); }
.btn.btn-xs { padding: 6px 12px; font-size: 13px; }

/* Pestañas */
.adm-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1.5px solid var(--color-linen);
  margin: 26px 0 22px;
}
.adm-tabs button {
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--color-brown); background: none; border: none;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.adm-tabs button:hover { color: var(--color-espresso); }
.adm-tabs button.active { color: var(--color-terracota-dark); border-bottom-color: var(--color-terracota); }

/* Encabezados de sección */
.adm-lead { margin-bottom: 22px; max-width: 78ch; }
.adm-lead h2 { font-size: 24px; margin-bottom: 6px; }
.adm-lead p { font-size: 15.5px; color: var(--color-brown); margin-top: 6px; }
.adm-lead .adm-lead-take {
  background: var(--color-terracota-light);
  border-left: 3px solid var(--color-terracota);
  border-radius: var(--radius-md);
  padding: 10px 14px; color: var(--color-espresso);
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 30px 0 12px; padding-bottom: 8px;
  border-bottom: 0.5px solid var(--color-linen);
}
.section-head h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brown); }
.section-head span { font-size: 13px; color: var(--color-brown); opacity: 0.85; }

.panel-note { font-size: 13.5px; color: var(--color-brown); margin-bottom: 12px; line-height: 1.5; }
.adm-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .adm-2col { grid-template-columns: 1fr; } }

/* Insignia de área VALOR */
.badge-area {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 8px; font-size: 14px; font-weight: 700; color: #fff;
}
.ba-V { background: var(--color-verde-dark); }
.ba-A { background: var(--color-terracota); }
.ba-L { background: #B07A2E; }
.ba-O { background: #6B5A48; }
.ba-R { background: var(--scale-5); }

/* Ranking de temas formativos */
.prio-list { display: grid; gap: 8px; }
.prio-row {
  display: grid; grid-template-columns: 28px 1fr 74px;
  gap: 14px; align-items: center; width: 100%; text-align: left;
  font-family: inherit;
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.prio-row:hover { border-color: var(--color-terracota); transform: translateY(-1px); }
.prio-row.is-active { border-color: var(--color-terracota); background: var(--color-terracota-light); }
.prio-row .pr-main { display: grid; gap: 5px; min-width: 0; }
.prio-row .pr-name { font-size: 16px; font-weight: 700; color: var(--color-espresso); }
.prio-row .pr-what { font-size: 13.5px; color: var(--color-brown); line-height: 1.45; }
.prio-row .pr-bar {
  position: relative; display: block; height: 9px; margin-top: 3px;
  background: var(--color-cream); border-radius: 999px; overflow: hidden;
}
.prio-row .pr-bar i { position: absolute; inset: 0 auto 0 0; background: rgba(198, 74, 50, 0.35); border-radius: 999px; }
.prio-row .pr-bar b { position: absolute; inset: 0 auto 0 0; background: var(--color-terracota); border-radius: 999px; }
.prio-row .pr-meta { font-size: 12.5px; color: var(--color-brown); }
.prio-row .pr-index {
  text-align: right; font-size: 26px; font-weight: 700; color: var(--color-espresso); line-height: 1;
}
.prio-row .pr-index small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brown); margin-top: 3px; }
.pr-level {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
.lv-alta  { background: var(--color-terracota-light); color: var(--color-terracota-dark); }
.lv-media { background: #F7EDD6; color: #8A6A17; }
.lv-baja  { background: var(--color-brown-light); color: var(--color-brown); }

.legend { font-size: 12.5px; color: var(--color-brown); margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 22px; height: 8px; border-radius: 999px; }
.legend .lg-soft { background: rgba(198, 74, 50, 0.35); }
.legend .lg-strong { background: var(--color-terracota); }

/* Áreas VALOR */
.area-row { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 0.5px solid var(--color-brown-light); }
.area-row:last-child { border-bottom: none; }
.area-row .ar-body { display: grid; gap: 4px; min-width: 0; }
.area-row .ar-name { font-size: 15px; font-weight: 700; color: var(--color-espresso); }
.area-row .ar-name em { font-style: normal; color: var(--color-terracota-dark); margin-left: 4px; }
.area-row .ar-bar { display: block; height: 8px; background: var(--color-cream); border-radius: 999px; overflow: hidden; }
.area-row .ar-bar i { display: block; height: 100%; background: var(--color-terracota); border-radius: 999px; }
.area-row .ar-meta { font-size: 12.5px; color: var(--color-brown); }
.panel-radar { text-align: center; }
.radar-box svg { max-width: 320px; width: 100%; height: auto; }
.curve-box svg { width: 100%; height: auto; }

/* Puntos ciegos */
.blind-row { display: grid; grid-template-columns: 1fr 140px 62px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 0.5px solid var(--color-brown-light); }
.blind-row:last-child { border-bottom: none; }
.blind-row .bl-label { font-size: 14.5px; font-weight: 600; color: var(--color-espresso); }
.blind-row .bl-label small { display: block; font-size: 12px; font-weight: 400; color: var(--color-brown); }
.blind-row .bl-bar { height: 8px; background: var(--color-cream); border-radius: 999px; overflow: hidden; }
.blind-row .bl-bar i { display: block; height: 100%; background: var(--color-brown); border-radius: 999px; }
.blind-row.is-high .bl-bar i { background: var(--scale-4); }
.blind-row .bl-count { text-align: right; font-weight: 700; font-size: 15px; color: var(--color-espresso); }
.blind-row .bl-count small { display: block; font-size: 11.5px; font-weight: 600; color: var(--color-brown); }

/* Avisos de diseño de la formación */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.note-card {
  background: var(--color-white);
  border: 0.5px solid var(--color-linen);
  border-left: 3px solid var(--color-terracota);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}
.note-card.nc-warn { border-left-color: var(--scale-4); }
.note-card h4 { font-size: 15px; margin-bottom: 5px; }
.note-card p { font-size: 13.5px; color: var(--color-brown); line-height: 1.5; }

/* Distribuciones */
.dist-row { grid-template-columns: minmax(120px, 1.15fr) 1fr 58px; }
.dist-row .dr-label { white-space: normal; line-height: 1.35; }
.dist-row .dr-count small { display: block; font-size: 11px; font-weight: 600; color: var(--color-brown); }
.dist-row .dr-bar i.tone-1 { background: var(--scale-1); }
.dist-row .dr-bar i.tone-2 { background: var(--scale-2); }
.dist-row .dr-bar i.tone-3 { background: var(--scale-3); }
.dist-row .dr-bar i.tone-4 { background: var(--scale-4); }
.dist-row .dr-bar i.tone-5 { background: var(--scale-5); }
.dist-row .dr-bar i.tone-0 { background: var(--color-linen); }

/* Desencadenantes */
.trg-row { display: grid; grid-template-columns: minmax(150px, 1fr) 1.4fr 76px; gap: 12px; align-items: center; padding: 7px 0; }
.trg-row .tr-label { font-size: 14.5px; font-weight: 600; color: var(--color-espresso); }
.trg-row .tr-bar { position: relative; height: 12px; background: var(--color-cream); border-radius: 999px; overflow: hidden; }
.trg-row .tr-bar i { position: absolute; inset: 0 auto 0 0; background: rgba(198, 74, 50, 0.32); border-radius: 999px; }
.trg-row .tr-bar b { position: absolute; inset: 0 auto 0 0; background: var(--color-terracota); border-radius: 999px; }
.trg-row .tr-count { text-align: right; font-weight: 700; font-size: 15px; color: var(--color-espresso); }
.trg-row .tr-count small { display: block; font-size: 11.5px; font-weight: 600; color: var(--color-brown); }

/* Matriz intensidad × recuperación */
.matrix-wrap { overflow-x: auto; }
table.matrix { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 0; }
table.matrix th {
  font-size: 11.5px; font-weight: 700; color: var(--color-brown);
  background: none; border: none; padding: 2px; text-align: center; position: static;
  text-transform: none; letter-spacing: 0;
}
table.matrix th.mx-corner { font-size: 10.5px; white-space: nowrap; text-align: left; }
table.matrix td {
  text-align: center; font-size: 13.5px; font-weight: 700;
  color: var(--color-espresso); padding: 9px 4px;
  border-radius: var(--radius-sm);
  background: rgba(198, 74, 50, calc(var(--a) * 0.8));
  box-shadow: inset 0 0 0 0.5px var(--color-linen);
}
table.matrix td.mx-risk { box-shadow: inset 0 0 0 1.5px var(--scale-4); }
.matrix-legend { font-size: 12px; color: var(--color-brown); margin-top: 8px; }

/* Chips */
.chip {
  display: inline-block; font-family: inherit;
  font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
  background: var(--color-brown-light); color: var(--color-brown);
  border: none; cursor: default;
}
.chip-active { background: var(--color-terracota); color: #fff; cursor: pointer; }
.chip-warn { background: #F7EDD6; color: #8A6A17; }
.chip-sm { font-size: 11.5px; padding: 3px 9px; color: #fff; margin: 0 4px 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tabla */
td.td-temas { max-width: 230px; }
.pill-soft { background: var(--color-brown-light); color: var(--color-brown); }
.pill-warn { background: var(--color-terracota-light); color: var(--color-terracota-dark); }
.pill-ts { background: var(--color-brown-light); color: var(--color-brown); }
.pill-ts[data-v="3"], .pill-ts[data-v="4"] { background: var(--color-terracota-light); color: var(--color-terracota-dark); }
tbody td small.muted { font-size: 12.5px; }

/* Modal de detalle */
.modal { max-width: 760px; }
.m-top { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: center; margin-bottom: 8px; }
@media (max-width: 640px) { .m-top { grid-template-columns: 1fr; } }
.m-radar svg { width: 100%; height: auto; }
.m-scores { display: grid; gap: 8px; }
.ms-row { display: grid; grid-template-columns: 28px minmax(80px, 1fr) 1.2fr 34px; gap: 8px; align-items: center; }
.ms-name { font-size: 13.5px; font-weight: 600; color: var(--color-espresso); }
.ms-bar { height: 8px; background: var(--color-cream); border-radius: 999px; overflow: hidden; }
.ms-bar i { display: block; height: 100%; background: var(--color-terracota); border-radius: 999px; }
.ms-val { font-size: 13.5px; font-weight: 700; text-align: right; color: var(--color-brown); }
.m-block { margin-top: 20px; padding-top: 16px; border-top: 0.5px solid var(--color-linen); }
.m-block h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brown); margin-bottom: 10px; }
.m-tema { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; margin-bottom: 12px; }
.m-tema strong { font-size: 15px; }
.m-tema ul { margin: 3px 0 0; padding-left: 16px; }
.m-tema li { font-size: 13.5px; color: var(--color-brown); line-height: 1.45; }
.modal .answer-list { grid-template-columns: 1fr 1fr; column-gap: 22px; }
@media (max-width: 640px) { .modal .answer-list { grid-template-columns: 1fr; } }
.admin-shell table { min-width: 1120px; }
.admin-shell tbody td { padding: 10px 12px; font-size: 14px; }