/* ============================================================================
   FormulaMaps UI compartido · v1 (2026-07-02)
   Tokens y componentes comunes a las 5 apps (heladería, pastelería, panadería,
   turrones, cacao). Cada app conserva su paleta temática y solo define su
   acento en :root con --fm-accent (color OSCURO: debe dar contraste AA con
   texto blanco). Este archivo es la fuente de verdad del nav de dominios.
   ========================================================================== */
:root {
  /* Marca */
  --fm-pink: #e6398a;        /* rosa de marca (sobre claro) */
  --fm-pink-strong: #d81b7a; /* rosa oscuro: apto para texto blanco encima */
  --fm-pink-soft: #ff7eb3;   /* rosa suave: solo sobre fondos oscuros */
  --fm-navy: #0B1F38;

  /* Semánticos (idénticos en todo el sistema) */
  --fm-ok: #1b8038;   --fm-ok-bg: #e7f4e8;
  --fm-warn: #8a6a00; --fm-warn-bg: #fbf2d4;
  --fm-err: #b21f1f;  --fm-err-bg: #fbe3e0;

  /* Escalas comunes */
  --fm-r-sm: 8px; --fm-r-md: 12px; --fm-r-lg: 16px;
  --fm-shadow: 0 6px 22px rgba(11, 31, 56, .14);
  --fm-shadow-sm: 0 3px 10px rgba(11, 31, 56, .10);

  /* Acento del dominio activo — cada app lo sobreescribe */
  --fm-accent: var(--fm-pink-strong);
}

/* ── Navegación de oficios (idéntica en las 5 apps) ─────────────────────────
   Markup canónico:
   <nav class="fm-domains" aria-label="Oficios de FormulaMaps">
     <a href="/app"><span class="fm-dico" aria-hidden="true">🍦</span><span class="fm-dlabel">Heladería</span></a>
     <a href="/pasteleria"><span class="fm-dico" aria-hidden="true">🧁</span><span class="fm-dlabel">Pastelería</span></a>
     <a href="/panaderia"><span class="fm-dico" aria-hidden="true">🍞</span><span class="fm-dlabel">Panadería</span></a>
     <a href="/turrones"><span class="fm-dico" aria-hidden="true">🍯</span><span class="fm-dlabel">Turrones</span></a>
     <a href="/cacao"><span class="fm-dico" aria-hidden="true">🍫</span><span class="fm-dlabel">Cacao</span></a>
   </nav>
   La app activa añade aria-current="page" a su propio enlace.               */
.fm-domains { display: flex; gap: 6px; background: rgba(0,0,0,.22); padding: 5px; border-radius: 13px; align-items: center; }
.fm-domains a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; min-height: 32px; border-radius: 9px; color: #fff; opacity: .85; text-decoration: none; font-weight: 700; font-size: 13px; line-height: 1; white-space: nowrap; }
.fm-domains a:hover { opacity: 1; background: rgba(255,255,255,.12); }
.fm-domains a[aria-current="page"] { background: var(--fm-accent); opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.fm-domains a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fm-domains .fm-dico { font-size: 15px; }

/* Breakpoints unificados del sistema: 1024 (nav pasa a fila propia) y 760
   (solo emojis). Antes cada app usaba 560/760/900 a su aire.               */
@media (max-width: 1024px) {
  .fm-domains { flex: 1 1 100%; justify-content: center; order: 9; }
  .fm-domains a { padding: 8px 10px; font-size: 12.5px; }
}
@media (max-width: 760px) {
  .fm-domains a .fm-dlabel { display: none; }
  .fm-domains a { padding: 8px 11px; min-width: 44px; min-height: 40px; justify-content: center; }
  .fm-domains .fm-dico { font-size: 18px; }
}

/* ── Utilidades de accesibilidad comunes ──────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Panel de evaluación unificado ──────────────────────────────────────────
   Un solo lenguaje visual para la tarjeta de puntuación de las 5 apps
   (referencia: .score-card de panadería):
     heladería + panadería → .score-card
     pastelería            → .medal-box
     turrones              → .medal-card
     cacao                 → .card > .medal   (scoped: la ficha de panadería
                             usa .fh .medal para otra cosa)
   El GRADIENTE de fondo (color del oficio) vive en el CSS local de cada app;
   aquí se normalizan estructura, tipografía, bolas, marco y medalla.        */

/* Contenedor: 135deg lo pone cada app; radio/padding/sombra/texto comunes */
.score-card, .medal-box, .medal-card, .card > .medal {
  border-radius: 14px;
  padding: 16px 14px 14px;
  color: #fff;
  text-align: center;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* Etiqueta de título del panel */
.score-card .label, .medal-box .label, .medal-card .label, .card > .medal .label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  opacity: .95; font-weight: 700; position: relative;
}

/* Bolas de puntuación (concepto GelatoMaps): 12px, llenas con radial dorado */
.score-card .score-dots, .score-card .dots,
.medal-box .score-dots, .medal-card .score-dots, .card > .medal .score-dots {
  display: flex; gap: 8px; justify-content: center; margin: 8px 0 4px; position: relative;
}
.score-card .score-dots .dot, .score-card .dots .dot,
.medal-box .score-dots .dot, .medal-card .score-dots .dot, .card > .medal .score-dots .dot {
  width: 12px; height: 12px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.score-card .score-dots .dot.filled, .score-card .dots .dot.filled,
.medal-box .score-dots .dot.filled, .medal-card .score-dots .dot.filled, .card > .medal .score-dots .dot.filled {
  background: radial-gradient(circle at 35% 30%, #FBE6A6, #C9962E);
  box-shadow: 0 0 8px rgba(201,150,46,.7);
}

/* Marco del trofeo/medalla */
.score-card .medal-frame, .medal-box .medal-frame, .medal-card .medal-frame, .card > .medal .medal-frame {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 4px auto; padding: 8px 16px; border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1.5px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.08);
  min-width: 86px; position: relative;
}
.score-card .medal-frame.empty, .medal-box .medal-frame.empty,
.medal-card .medal-frame.empty, .card > .medal .medal-frame.empty { opacity: .45; }
.score-card .medal-frame img, .medal-box .medal-frame img,
.medal-card .medal-frame img, .card > .medal .medal-frame img {
  width: auto; height: 72px; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

/* Nombre de la medalla dentro del marco (heladería, pastelería, panadería) */
.score-card .medal-frame .medal-name, .medal-box .medal-frame .medal-name,
.medal-card .medal-frame .medal-name, .card > .medal .medal-frame .medal-name {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 700; margin-top: 5px; opacity: .9;
}
.score-card .medal-frame.oro .medal-name,    .medal-box .medal-frame.oro .medal-name    { color: #FFD76B; }
.score-card .medal-frame.plata .medal-name,  .medal-box .medal-frame.plata .medal-name  { color: #E4E4E4; }
.score-card .medal-frame.bronce .medal-name, .medal-box .medal-frame.bronce .medal-name { color: #E2B07A; }
.score-card .medal-frame.empty .medal-name,  .medal-box .medal-frame.empty .medal-name  { color: rgba(255,255,255,.5); }

/* Veredicto (turrones y cacao lo expresan con .medal-name fuera del marco) */
.score-card .verdict, .medal-box .grade, .medal-card > .medal-name, .card > .medal > .medal-name {
  font-size: 16px; font-weight: 800; margin-top: 2px; position: relative;
}
.score-card .verdict.oro,    .medal-card > .medal-name.oro    { color: #FFD76B; }
.score-card .verdict.plata,  .medal-card > .medal-name.plata  { color: #E4E4E4; }
.score-card .verdict.bronce, .medal-card > .medal-name.bronce { color: #E2B07A; }

/* Detalle / subtítulos del panel */
.score-card .detail, .medal-box .score,
.medal-card .medal-cat, .medal-card .medal-tipo, .card > .medal .medal-tipo {
  font-size: 11.5px; opacity: .85; margin-top: 3px; position: relative;
}