/* ==========================================================================
   UCP Original Ride — sistema visual
   Acero + papel técnico. Un solo color de señal.
   ========================================================================== */

:root{
  /* Marca UCP: rojo intenso sobre negro. Tomado de la identidad real. */
  --negro:#0B0B0D;         /* fondo base */
  --panel:#141417;         /* secciones */
  --carta:#1B1B20;         /* tarjetas */
  --carta-2:#232329;       /* tarjeta elevada / campos */
  --linea:#2C2C34;
  --linea-2:#3A3A44;

  --rojo:#E01B22;          /* rojo de marca */
  --rojo-claro:#FF3B41;
  --rojo-osc:#8E0F16;
  --rojo-tenue:rgba(224,27,34,.12);

  --texto:#F2F2F4;
  --texto-2:#B4B4BE;
  --texto-3:#7C7C88;

  /* Compatibilidad con nombres previos */
  --ink:var(--negro); --ink-2:var(--panel); --steel:var(--texto-2); --steel-3:var(--texto-3);
  --paper:var(--negro); --surface:var(--carta); --line:var(--linea); --line-2:var(--linea);
  --signal:var(--rojo); --signal-700:var(--rojo-osc); --signal-weak:var(--rojo-tenue);

  --ok:#22C55E; --ok-weak:rgba(34,197,94,.12);
  --warn:#F59E0B; --danger:#F0464C;

  --font-display:'Kanit',system-ui,sans-serif;      /* itálica condensada de la marca */
  --font-body:'Montserrat',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --r:4px; --r-lg:10px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -28px rgba(0,0,0,.9);
  --wrap:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--negro);color:var(--texto);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.hidden{display:none!important}

/* Tipografía --------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;font-style:italic;letter-spacing:-.01em;
  margin:0;line-height:1.02;text-transform:uppercase;color:var(--texto)}
h1{font-size:clamp(2.2rem,5.4vw,4rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:1.1rem}
p{margin:0}

/* Etiqueta técnica: encabezado de sección, como en un plano */
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel-3);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--line)}
.eyebrow--dark{color:#7F94A6}
.eyebrow--dark::after{background:rgba(255,255,255,.14)}

/* Número de parte: siempre monoespaciado, se lee carácter por carácter */
.pn{font-family:var(--font-mono);font-weight:600;letter-spacing:.02em}

/* Botones ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--r);
  font-family:var(--font-display);font-weight:600;font-style:italic;font-size:.95rem;
  letter-spacing:.01em;text-transform:uppercase;
  background:var(--rojo);color:#fff;transition:background .15s,transform .05s;white-space:nowrap;
}
.btn:hover{background:var(--rojo-claro)}
.btn:active{transform:translateY(1px)}
.btn--signal{background:var(--rojo)}
.btn--signal:hover{background:var(--rojo-claro)}
.btn--ghost{background:transparent;color:var(--texto);border:1px solid var(--linea-2)}
.btn--ghost:hover{background:var(--carta-2);border-color:var(--texto-3)}
.btn--sm{height:38px;padding:0 14px;font-size:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn--block{width:100%}

/* Campos ------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:.78rem;font-weight:600;color:var(--texto-2);letter-spacing:.02em}
.input,.select{
  height:48px;padding:0 14px;background:var(--carta-2);color:var(--texto);
  border:1px solid var(--linea);border-radius:var(--r);width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.input::placeholder{color:var(--texto-3)}
textarea.input{height:auto;padding:12px 14px;resize:vertical;min-height:96px}
.input:focus,.select:focus{border-color:var(--rojo);box-shadow:0 0 0 3px var(--rojo-tenue);outline:none}
.select:disabled{background:#17171B;color:var(--texto-3);cursor:not-allowed}

/* Encabezado --------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:60;background:rgba(11,11,13,.88);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--linea)}
.top__in{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto)}
.brand__bars{display:flex;gap:2.5px;align-items:center;flex:none}
.brand__bars i{display:block;width:5px;height:23px;transform:skewX(-16deg);border-radius:1px;background:var(--rojo)}
.brand__bars i:nth-child(1){background:#6B0A0F;height:15px}
.brand__bars i:nth-child(2){background:#A81219;height:18px}
.brand__bars i:nth-child(3){background:var(--rojo);height:21px}
.brand__bars i:nth-child(4){background:#F5F5F7;height:23px}
.brand__bars i:nth-child(5){background:#F5F5F7;height:23px}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__n{font-family:var(--font-display);font-weight:800;font-style:italic;font-size:1.6rem;letter-spacing:-.02em}
.brand__s{font-family:var(--font-body);font-size:.56rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--texto-3);font-weight:600;margin-top:2px}
.nav{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:.9rem;font-weight:600;color:var(--texto-2);transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:var(--texto)}
.nav__cta{display:flex;gap:10px;align-items:center}
.burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--linea);border-radius:var(--r)}
.burger span{display:block;width:18px;height:1.5px;background:var(--texto);margin:3px auto}

@media (max-width:900px){
  .burger{display:block}
  .nav{position:absolute;top:68px;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--linea);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 18px;margin:0;display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--linea)}
  .nav__cta{padding-top:14px}
  .nav__cta .btn{flex:1}
}

/* Rejilla técnica: textura de plano de ingeniería ------------------------- */
.grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
}

/* Panel oscuro ------------------------------------------------------------- */
.panel-dark{background:var(--ink);color:#E7EDF1;position:relative;overflow:hidden}
.panel-dark h1,.panel-dark h2{color:#fff}

/* Tarjeta de pieza --------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .15s;
  text-decoration:none;overflow:hidden;
}
.card:hover{border-color:var(--rojo);box-shadow:var(--shadow);transform:translateY(-2px)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 0}
.card__pn{font-family:var(--font-mono);font-weight:600;font-size:1.02rem}
.card__body{padding:8px 16px 16px;flex:1;display:flex;flex-direction:column;gap:10px}
.card__name{font-weight:600;font-size:.98rem;line-height:1.3}
.card__meta{font-size:.8rem;color:var(--texto-3);display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:auto}
.card__foot{border-top:1px solid var(--linea);padding:12px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:10px}

/* Distintivos -------------------------------------------------------------- */
.tag{
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:3px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;background:var(--carta-2);color:var(--texto-2);white-space:nowrap;
}
.tag--pos{background:var(--rojo-tenue);color:var(--rojo-claro)}
.tag--ok{background:var(--ok-weak);color:var(--ok)}
.tag--qty{background:var(--rojo);color:#fff}

.precio{font-family:var(--font-display);font-weight:700;font-size:1.2rem}
.precio--oculto{font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--texto-3)}

/* Rejillas ----------------------------------------------------------------- */
.grid{display:grid;gap:16px}
.grid--parts{grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

/* Secciones ---------------------------------------------------------------- */
.section{padding:clamp(48px,7vw,88px) 0}
.section--tight{padding:clamp(32px,4vw,52px) 0}

/* Estados vacíos y avisos -------------------------------------------------- */
.note{
  border:1px solid var(--linea);background:var(--carta);border-radius:var(--r-lg);
  padding:28px;text-align:center;color:var(--texto-2);
}
.note h3{margin-bottom:6px}
.aviso{
  border-left:3px solid var(--rojo);background:var(--rojo-tenue);
  padding:12px 16px;border-radius:0 var(--r) var(--r) 0;font-size:.9rem;color:var(--texto);
}
.aviso--ok{border-color:var(--ok);background:var(--ok-weak)}
.aviso--error{border-color:var(--danger);background:rgba(240,70,76,.12);color:#FFB4B7}

/* Carga -------------------------------------------------------------------- */
.skel{background:linear-gradient(90deg,#17171B 25%,#232329 50%,#17171B 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel--card{height:190px}

/* Pie ---------------------------------------------------------------------- */
.foot{background:#08080A;color:var(--texto-3);padding:56px 0 32px;margin-top:64px;border-top:1px solid var(--linea)}
.foot a{color:var(--texto-2);text-decoration:none}
.foot a:hover{color:#fff}
.foot__grid{display:grid;gap:32px;grid-template-columns:1.6fr repeat(3,1fr)}
.foot h4{font-family:var(--font-display);color:#fff;font-size:.88rem;letter-spacing:.02em;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem}
.foot__bar{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.8rem}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot__grid{grid-template-columns:1fr}}

/* En pantallas chicas la marca no se parte y el descriptor se guarda */
@media (max-width:560px){
  .brand{white-space:nowrap;font-size:1.05rem}
  .brand small{display:none}
}

/* ==========================================================================
   Tema claro — misma marca (rojo UCP), superficies claras.
   El tema se aplica en <html data-tema="claro"> antes de pintar.
   ========================================================================== */
html[data-tema="claro"]{
  --negro:#F5F5F7;         /* fondo de página */
  --panel:#FFFFFF;
  --carta:#FFFFFF;
  --carta-2:#F0F0F3;
  --linea:#DFDFE5;
  --linea-2:#C9C9D2;

  --rojo:#D6141B;
  --rojo-claro:#E01B22;
  --rojo-osc:#9E0F15;
  --rojo-tenue:rgba(214,20,27,.10);

  --texto:#141418;
  --texto-2:#4A4A55;
  --texto-3:#7A7A87;

  --shadow:0 1px 2px rgba(20,20,24,.06), 0 10px 28px -14px rgba(20,20,24,.22);
  --shadow-lg:0 26px 60px -26px rgba(20,20,24,.32);
}
html[data-tema="claro"] .brand__bars i:nth-child(4),
html[data-tema="claro"] .brand__bars i:nth-child(5){background:#1A1A1F}
html[data-tema="claro"] .top{background:rgba(255,255,255,.9)}
html[data-tema="claro"] .foot{background:#111114;color:#9A9AA6;border-top:0}
html[data-tema="claro"] .foot a{color:#D5D5DC}
html[data-tema="claro"] .foot h4,html[data-tema="claro"] .foot .brand__n{color:#fff}
html[data-tema="claro"] .foot .brand__bars i:nth-child(4),
html[data-tema="claro"] .foot .brand__bars i:nth-child(5){background:#F5F5F7}
html[data-tema="claro"] .demo-bar{background:#111114;color:#D5D5DC}
html[data-tema="claro"] .skel{background:linear-gradient(90deg,#E9E9EE 25%,#F5F5F8 50%,#E9E9EE 75%);background-size:200% 100%}
html[data-tema="claro"] .apps th{background:#F5F5F8}
html[data-tema="claro"] .apps tbody tr:hover{background:#FAFAFC}
html[data-tema="claro"] .finder__tabs{background:#F5F5F8}
html[data-tema="claro"] .ficha__img{background:radial-gradient(70% 70% at 50% 40%,#FFF 0%,#ECECF1 100%)}
html[data-tema="claro"] .ficha__img .grid-bg{
  background-image:linear-gradient(#E2E2E9 1px,transparent 1px),linear-gradient(90deg,#E2E2E9 1px,transparent 1px)}
html[data-tema="claro"] .select:disabled{background:#E9E9EE}
html[data-tema="claro"] .hero{
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(214,20,27,.14) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(214,20,27,.08) 0%, transparent 60%),
    #FFFFFF;
  border-bottom:1px solid var(--linea);
}
html[data-tema="claro"] .hero__head p{color:var(--texto-2)}
html[data-tema="claro"] .ctxbar{
  background:linear-gradient(96deg,var(--rojo) 0%,#B01118 46%,#2A2A31 100%);color:#fff}
html[data-tema="claro"] .ctxbar__c{color:#F0D8DA}
html[data-tema="claro"] .panel-dark{background:#141418;color:#F2F2F4}
html[data-tema="claro"] .panel-dark .eyebrow{color:#9A9AA6}
html[data-tema="claro"] .panel-dark p{color:#B8B8C2}

/* ==========================================================================
   Controles de idioma y tema
   ========================================================================== */
.prefs{display:flex;align-items:center;gap:8px}
.prefs__idioma{display:flex;border:1px solid var(--linea);border-radius:100px;overflow:hidden;background:var(--carta)}
.prefs__lang{
  display:flex;align-items:center;gap:6px;padding:0 10px;height:34px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;
  color:var(--texto-3);transition:background .15s,color .15s;
}
.prefs__lang svg{border-radius:1.5px;flex:none;opacity:.55;transition:opacity .15s}
.prefs__lang[aria-pressed="true"]{background:var(--rojo);color:#fff}
.prefs__lang[aria-pressed="true"] svg{opacity:1}
.prefs__lang:hover:not([aria-pressed="true"]){color:var(--texto)}
.prefs__lang:hover svg{opacity:.9}
.prefs__tema{
  width:34px;height:34px;border:1px solid var(--linea);border-radius:100px;background:var(--carta);
  display:grid;place-items:center;color:var(--texto-2);transition:.15s;flex:none;
}
.prefs__tema:hover{color:var(--rojo);border-color:var(--rojo)}

@media (max-width:900px){
  /* En el menú desplegable los controles van al final, con aire */
  .nav [data-prefs]{padding-top:14px;border-top:1px solid var(--linea)}
  .prefs{justify-content:space-between}
}

/* El color de enlace del nav no debe pisar el de los botones */
.nav a.btn{color:#fff}
.nav a.btn--ghost{color:var(--texto)}
.nav a.btn:hover{color:#fff}
.nav a.btn--ghost:hover{color:var(--texto)}