/* ===== Fuentes de marca Fixlab ===== */
@font-face { font-family:"Manrope"; src:url("../assets/fonts/Manrope-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("../assets/fonts/Manrope-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("../assets/fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("../assets/fonts/Manrope-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../assets/fonts/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../assets/fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }

/* ===== Tokens ===== */
.fxc{
  --azul:#345474; --azul-osc:#26415a; --azul-claro:#eef3f8;
  --acento:#e8a33d; --borde:#dde5ee; --texto:#1f2c3a; --suave:#64748b;
  --ok:#1f9d63; --ok-bg:#e7f6ee; --warn:#c47d12; --warn-bg:#fdf3e2; --danger:#c5404a; --danger-bg:#fbeaec;
  --radio:14px; --sombra:0 6px 24px rgba(38,65,90,.08);
  font-family:"Manrope",system-ui,Arial,sans-serif; color:var(--texto);
  --campo:170px;  /* ancho uniforme de todos los campos del formulario */
  line-height:1.5; box-sizing:border-box; max-width:1080px; width:100%; margin:0 auto; padding:0;
}
.fxc *,.fxc *::before,.fxc *::after{ box-sizing:inherit; }

/* ===== Cabecera + pestañas ===== */
.fxc__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.fxc__logo{ height:34px; width:auto; }
.fxc__head h1{ font-family:"Space Grotesk",sans-serif; font-size:1.15rem; margin:0; color:var(--azul); font-weight:700; }
.fxc__tabs{ display:flex; gap:6px; background:var(--azul-claro); padding:6px; border-radius:999px; flex-wrap:wrap; margin-bottom:18px; }
.fxc__tab{ flex:1 1 auto; border:0; background:transparent; padding:10px 14px; border-radius:999px; cursor:pointer;
  font:inherit; font-weight:600; color:var(--azul); white-space:nowrap; transition:.15s;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.fxc__tab-ico{ width:26px; height:26px; flex:none; color:var(--acento); }
.fxc__tab[aria-selected="true"] .fxc__tab-ico{ color:#f7b955; }
.fxc__tab[aria-selected="true"]{ background:var(--azul); color:#fff; box-shadow:var(--sombra); }
.fxc__tab:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

/* ===== Paneles / tarjetas ===== */
.fxc__panel[hidden]{ display:none; }
.fxc__card{ background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:18px; box-shadow:var(--sombra); }
.fxc__card + .fxc__card{ margin-top:14px; }
.fxc__card h2{ font-family:"Space Grotesk",sans-serif; font-size:1rem; margin:0 0 14px; color:var(--azul); }
.fxc__card h2 b{ color:var(--acento); }
.fxc__intro{ color:var(--suave); font-size:.92rem; margin:0 0 14px; }

/* ===== Medida (ancho / perfil R llanta) ===== */
.fxc__row{ display:flex; flex-wrap:wrap; gap:14px 10px; align-items:flex-end; }
/* En "Buscar equivalencias" forzamos que todos los campos queden en una sola línea */
#panel-eq .fxc__row{ flex-wrap:nowrap; }
.fxc__field{ display:flex; flex-direction:column; gap:4px; }
.fxc__field label{ font-size:.78rem; font-weight:600; color:var(--azul); }
.fxc__field small{ color:var(--suave); font-weight:400; }
.fxc input,.fxc select{ font:inherit; padding:11px 12px; border:1px solid var(--borde); border-radius:10px;
  background:#f7fafc; width:100%; min-width:0; transition:.15s; }
/* Todos los campos del formulario con el mismo ancho (manda sobre el width:100% base) */
.fxc input.fxc__w-90,
.fxc input.fxc__w-120,
.fxc select.fxc__w-150{ width:var(--campo); }
/* Fuente algo menor en el desplegable de medidas para que el texto no se corte */
.fxc__sistema{ font-size:.85rem; padding-left:10px; padding-right:8px; }
.fxc input:focus,.fxc select:focus{ outline:0; border-color:var(--azul); background:#fff; box-shadow:0 0 0 3px rgba(52,84,116,.12); }
.fxc input.fxc--err{ border-color:var(--danger); background:var(--danger-bg); }
.fxc__sep{ font-size:1.4rem; font-weight:700; color:var(--azul); padding-bottom:8px; }
.fxc__w-90{ width:84px; } .fxc__w-120{ width:120px; } .fxc__w-150{ width:150px; }

/* ===== Botones ===== */
.fxc__btn{ font:inherit; font-weight:700; border:0; border-radius:999px; padding:12px 26px; cursor:pointer;
  background:var(--azul); color:#fff; transition:.15s; }
.fxc__btn:hover{ background:var(--azul-osc); }
.fxc__btn:disabled{ opacity:.55; cursor:default; }
.fxc__btn--ghost{ background:#fff; color:var(--azul); border:2px solid var(--azul); padding:10px 24px; }
.fxc__btn--ghost:hover{ background:var(--azul-claro); }
.fxc__actions{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ===== Resultados ===== */
.fxc__result{ margin-top:16px; }
.fxc__verdict{ border-radius:var(--radio); padding:16px 18px; border:1px solid; }
.fxc__verdict h3{ margin:0 0 4px; font-family:"Space Grotesk",sans-serif; font-size:1.05rem; }
.fxc__verdict p{ margin:0; font-size:.92rem; }
.fxc__verdict--ok{ background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }
.fxc__verdict--warning{ background:var(--warn-bg); border-color:var(--warn); color:var(--warn); }
.fxc__verdict--danger{ background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }
.fxc__verdict p{ color:var(--texto); }

.fxc__metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:14px; }
.fxc__metric{ background:var(--azul-claro); border-radius:10px; padding:12px; }
.fxc__metric span{ display:block; font-size:.74rem; color:var(--suave); font-weight:600; }
.fxc__metric b{ font-family:"Space Grotesk",sans-serif; font-size:1.2rem; color:var(--azul); }
.fxc__metric .fxc--bad{ color:var(--danger); } .fxc__metric .fxc--good{ color:var(--ok); }

table.fxc__table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:.88rem; }
.fxc__table th,.fxc__table td{ padding:9px 10px; text-align:left; border-bottom:1px solid var(--borde); }
.fxc__table th{ color:var(--suave); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; }
.fxc__table tbody tr:hover{ background:var(--azul-claro); }
.fxc__pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:700; }
.fxc__pill--no{ background:var(--ok-bg); color:var(--ok); }
.fxc__pill--si{ background:var(--warn-bg); color:var(--warn); }
.fxc__pill--ensayos{ background:var(--danger-bg); color:var(--danger); }
.fxc__filters{ display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.fxc__filters button{ font:inherit; font-size:.82rem; font-weight:600; border:1px solid var(--borde); background:#fff;
  border-radius:999px; padding:6px 14px; cursor:pointer; color:var(--azul); }
.fxc__filters button[aria-pressed="true"]{ background:var(--azul); color:#fff; border-color:var(--azul); }
.fxc__tablewrap{ max-height:360px; overflow:auto; margin-top:4px; }

.fxc__hint{ font-size:.82rem; color:var(--suave); margin-top:6px; }
.fxc__msg{ font-size:.9rem; margin-top:12px; }
.fxc__msg--err{ color:var(--danger); }
.fxc__foot{ text-align:center; margin-top:16px; font-size:.9rem; color:#fff; }
.fxc__foot a{ color:#fff; font-weight:700; text-decoration:underline; }
.fxc__cta{ margin-top:12px; }