/* ElectroPC · "Componentes y accesorios" con el diseño del lienzo "Recorrido simple".
 *
 * Tableros Componentes (390px) y ComponentesEscritorio (1280px), aprobados
 * por Martín el 28/9. Carga solo con el diseño nuevo prendido
 * (`EPH_Vista::recorrido`) en /componentes-alt/, en lugar de home.css,
 * catalogo.css y piezas.css. El marcado lo arma `EPH_ComponentesRecorrido`
 * dentro de `.rx`.
 *
 * Las categorías van en tarjetas de a cuatro en la computadora y de a dos en
 * el celular, con el ícono arriba del nombre en el celular y al lado en la
 * computadora. Los saltos a cada rama, solo en la computadora, como el
 * lienzo. Cada regla lleva `body.eph-recorrido` tres veces, como las demás
 * pantallas del lienzo. */

body.eph-recorrido.eph-recorrido.eph-recorrido.eph-componentes-recorrido{background:#F8FAFC!important}

body.eph-recorrido.eph-recorrido.eph-recorrido .rx{
  --rx-blanco:#FFFFFF;
  --rx-fondo:#F8FAFC;
  --rx-gris:#F1F5F9;
  --rx-borde:#E2E8F0;
  --rx-campo:#CBD5E1;
  --rx-tenue:#94A3B8;
  --rx-tinta:#0F172A;
  --rx-texto:#475569;
  --rx-suave:#64748B;
  --rx-azul:#0064FF;
  --rx-azul-texto:#0052D4;
  --rx-azul-hover:#003FA3;
  --rx-azul-fondo:#EFF6FF;
  --rx-azul-borde:#DBEAFE;
  --color-text:var(--rx-tinta);--color-text-secondary:var(--rx-texto);--color-text-tertiary:var(--rx-suave);
  font-family:Inter,system-ui,sans-serif;color:var(--rx-tinta);line-height:1.4;padding-bottom:72px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx *,
body.eph-recorrido.eph-recorrido.eph-recorrido .rx *::before,
body.eph-recorrido.eph-recorrido.eph-recorrido .rx *::after{box-sizing:border-box}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx :where(h1,h2,p,ul,li,form,nav){margin:0;padding:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx :where(ul){list-style:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx :is(h1,h2){color:var(--rx-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx :is(a,button,input):focus-visible{outline:3px solid color-mix(in srgb,var(--rx-azul) 45%,transparent);outline-offset:2px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-in{max-width:1132px;margin:0 auto;padding:0 16px}

/* ── Arriba: migas, título, buscador, la cuenta y los saltos ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-cabeza{padding-top:28px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-cabeza .rx-in{display:flex;flex-direction:column;gap:14px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-migas{font-size:.875rem;color:var(--rx-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-migas a{color:var(--rx-texto);text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-migas a:hover{color:var(--rx-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-migas span[aria-hidden]{color:var(--rx-tenue)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-cabeza h1{font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.12}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-baja{font-size:clamp(1rem,1.6vw,1.125rem);color:var(--rx-texto);line-height:1.55}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-buscar{display:flex;align-items:center;gap:10px;max-width:640px;height:52px;padding:0 6px 0 18px;border:1px solid var(--rx-campo);border-radius:999px;background:var(--rx-blanco);color:var(--rx-suave)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-buscar:focus-within{border-color:var(--rx-azul);box-shadow:0 0 0 3px var(--rx-azul-fondo)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-buscar svg{flex:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-buscar input[type="search"]{flex:1;min-width:0;height:100%;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;font:inherit;font-size:1rem;color:var(--rx-tinta);outline:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-buscar input[type="search"]::placeholder{color:var(--rx-tenue);opacity:1}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-buscar button{flex:none;height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--rx-azul);color:#FFFFFF;font:inherit;font-size:1rem;font-weight:600;cursor:pointer}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-buscar button:hover{background:var(--rx-azul-hover)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-cuenta{font-size:.875rem;color:var(--rx-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-saltos{display:flex;gap:8px;flex-wrap:wrap}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-saltos a{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--rx-campo);border-radius:999px;background:var(--rx-blanco);color:var(--rx-tinta);font-size:.875rem;font-weight:600;text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-saltos a:hover{border-color:var(--rx-azul);color:var(--rx-azul-texto)}

/* ── Las ramas y sus categorías ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-rama{padding-top:44px;scroll-margin-top:132px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-rama h2{font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-grilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-tarjeta{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--rx-blanco);border:1px solid var(--rx-borde);border-radius:16px;transition:border-color .15s ease,box-shadow .15s ease}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-tarjeta:hover{border-color:var(--rx-campo);box-shadow:0 6px 18px rgba(15,23,42,.06)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-tarjeta-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--rx-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-icono{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--rx-gris);color:var(--rx-tinta)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-textos{display:flex;flex-direction:column;gap:2px;min-width:0}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-nombre{font-size:1rem;font-weight:700;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-tarjeta-link:hover .rx-nombre{color:var(--rx-azul-texto)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-n{font-size:.75rem;color:var(--rx-suave)}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-hijas{display:flex;flex-wrap:wrap;gap:6px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-hijas a{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--rx-azul-fondo);color:var(--rx-azul-texto);font-size:.75rem;font-weight:600;text-decoration:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-hijas a:hover{background:var(--rx-azul-borde);color:var(--rx-azul-hover)}

/* ── ¿Estás armando una PC nueva? ── */
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando{padding-top:56px}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando-caja{display:flex;align-items:center;gap:28px;padding:28px 32px;border-radius:16px;background:#0F172A}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando-caja > div:first-child{display:flex;flex-direction:column;gap:8px;flex:1}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-armando h2{font-size:1.5rem;font-weight:700;color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-armando p{font-size:1rem;color:#CBD5E1;line-height:1.55}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando-botones{display:flex;gap:10px;flex:none}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 22px;border-radius:999px;font-size:1rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-btn-azul{background:var(--rx-azul);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-btn-azul:hover{background:var(--rx-azul-hover);color:#FFFFFF}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-btn-blanco{background:#FFFFFF;color:#0F172A}
body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-btn-blanco:hover{background:#F1F5F9;color:#0F172A}

@media (max-width:900px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-grilla{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando-caja{flex-direction:column;align-items:stretch;gap:16px}
}
@media (max-width:640px){
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx{padding-bottom:48px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-cabeza{padding-top:20px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-saltos{display:none}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-rama{padding-top:32px;scroll-margin-top:72px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-grilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-tarjeta{padding:12px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-tarjeta-link{flex-direction:column;align-items:flex-start;gap:8px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-icono{width:38px;height:38px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-nombre{font-size:.875rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando{padding-top:40px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando-caja{padding:20px 18px}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-armando h2{font-size:1.25rem}
  body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando-botones{flex-direction:column}
}

/* ── Modo oscuro (generado por herramientas/gen_recorrido_oscuro.py: no editar a mano) ── */
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido.eph-componentes-recorrido{background:#0B1222!important}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rx{--rx-blanco:#151D35;--rx-fondo:#0B1222;--rx-gris:#1B2440;--rx-borde:#253149;--rx-campo:#3A4A66;--rx-tenue:#6B7A94;--rx-tinta:#E9EEF6;--rx-texto:#A2B0C6;--rx-suave:#8B9AB3;--rx-azul:#3B82F6;--rx-azul-texto:#7FB0FF;--rx-azul-hover:#9EC5FF;--rx-azul-fondo:#13213F;--rx-azul-borde:#17305C}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rx-migas span[aria-hidden]{color:#94A3B8}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rx-buscar input[type="search"]::placeholder{color:#94A3B8}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando-caja{background:#22304F}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-btn-blanco{background:#151D35;color:#E9EEF6}
html[data-theme="dark"] body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-btn-blanco:hover{background:#1B2440;color:#E9EEF6}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido.eph-componentes-recorrido{background:#0B1222!important}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rx{--rx-blanco:#151D35;--rx-fondo:#0B1222;--rx-gris:#1B2440;--rx-borde:#253149;--rx-campo:#3A4A66;--rx-tenue:#6B7A94;--rx-tinta:#E9EEF6;--rx-texto:#A2B0C6;--rx-suave:#8B9AB3;--rx-azul:#3B82F6;--rx-azul-texto:#7FB0FF;--rx-azul-hover:#9EC5FF;--rx-azul-fondo:#13213F;--rx-azul-borde:#17305C}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rx-migas span[aria-hidden]{color:#94A3B8}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rx-buscar input[type="search"]::placeholder{color:#94A3B8}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rx-armando-caja{background:#22304F}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-btn-blanco{background:#151D35;color:#E9EEF6}}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body.eph-recorrido.eph-recorrido.eph-recorrido .rx .rx-btn-blanco:hover{background:#1B2440;color:#E9EEF6}}