:root{
  --azul: #0053A9;
  --azul-oscuro: #003D7A;
  --naranja: #FF8005;
  --blanco: #FFFFFF;
  --fondo: #F4F6F9;
  --fondo-card: #F6F8FB;
  --borde: #E3E9F0;
  --texto: #142330;
  --texto-suave: #5C6B7A;
  --verde: #1D9E75;
  --verde-bg: #E1F5EE;
  --amber: #BA7517;
  --amber-bg: #FAEEDA;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ overflow-x:hidden; }
body{ font-family:'Work Sans', sans-serif; background:var(--blanco); color:var(--texto); overflow-x:hidden; }
h1,h2,h3{ font-family:'Barlow Condensed', sans-serif; letter-spacing:0.02em; }
a{ color:inherit; }

/* ===== Splash de entrada ===== */
#splash{
  position:fixed; inset:0; background:var(--blanco);
  display:flex; align-items:center; justify-content:center; z-index:999;
  transition: transform .9s cubic-bezier(.76,0,.24,1), opacity .7s ease;
}
#splash.oculto{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.splash-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.logo-wrap img{ width:min(62vw,340px); display:block; }
.splash-sub{ font-size:15px; color:var(--texto-suave); letter-spacing:.08em; text-transform:uppercase; }
.skip-btn{
  position:fixed; bottom:26px; right:26px; background:transparent; border:1px solid var(--borde);
  color:var(--texto-suave); font-size:13px; padding:9px 16px; border-radius:100px; cursor:pointer; z-index:1000;
}

/* ===== Header público ===== */
header.top{
  position:sticky; top:0; z-index:50; background:var(--blanco); border-bottom:1px solid var(--borde);
  padding:14px 5vw; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
header.top .marca{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
header.top .marca img{ height:36px; }
header.top .fase{
  font-size:11px; font-weight:600; color:var(--azul); background:#EAF2FB; border:1px solid #D3E4F5;
  padding:3px 9px; border-radius:100px; text-transform:uppercase;
}
.buscador{ flex:1; min-width:220px; }
.buscador form{ display:flex; }
.buscador input{
  width:100%; padding:11px 16px; border:1.5px solid var(--borde); border-radius:10px; font-size:14px; outline:none;
}
.buscador input:focus{ border-color:var(--azul); }

.hero-catalogo{ padding:34px 5vw 10px; }
.hero-catalogo h1{ font-size:clamp(28px,4vw,42px); font-weight:800; color:var(--azul-oscuro); line-height:1; }
.hero-catalogo h1 span{ color:var(--naranja); }
.hero-catalogo p{ margin-top:8px; color:var(--texto-suave); font-size:15px; max-width:520px; }

.filtros{ display:flex; gap:10px; flex-wrap:wrap; padding:18px 5vw 6px; }
.chip{
  border:1.5px solid var(--borde); background:var(--blanco); color:var(--texto);
  padding:8px 15px; border-radius:100px; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap;
}
.chip.activo{ background:var(--azul); border-color:var(--azul); color:var(--blanco); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; padding:22px 5vw 60px; }
.card{ border:1px solid var(--borde); border-radius:14px; overflow:hidden; background:var(--blanco); display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.card:hover{ box-shadow:0 10px 26px rgba(0,61,122,.09); transform:translateY(-3px); }
.card-img{ aspect-ratio:1/1; background:var(--fondo-card); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; }
.sin-foto{ display:flex; flex-direction:column; align-items:center; gap:8px; color:#AAB8C4; }
.sin-foto svg{ width:46px; height:46px; stroke:#B9C4CE; }
.sin-foto span{ font-size:11px; text-transform:uppercase; font-weight:600; }
.badge-cod{ position:absolute; top:10px; left:10px; background:rgba(20,35,48,.78); color:#fff; font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; }
.card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-cat{ font-size:11px; font-weight:700; color:var(--naranja); text-transform:uppercase; }
.card-desc{ font-size:14.5px; font-weight:600; line-height:1.3; min-height:38px; }
.card-marca{ font-size:12.5px; color:var(--texto-suave); }
.card-footer{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; padding-top:10px; }
.precio{ font-family:'Barlow Condensed', sans-serif; font-size:22px; font-weight:700; color:var(--azul-oscuro); line-height:1; }
.precio small{ display:block; font-family:'Work Sans', sans-serif; font-size:10.5px; font-weight:500; color:var(--texto-suave); margin-top:2px; }

/* ===== Ficha de detalle ===== */
.detalle-top{ padding:16px 5vw; border-bottom:1px solid var(--borde); display:flex; align-items:center; gap:16px; }
.volver{ display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--azul); }
.detalle-cuerpo{ display:grid; grid-template-columns:minmax(280px,460px) 1fr; gap:48px; padding:36px 5vw 60px; max-width:1200px; }
@media (max-width:780px){ .detalle-cuerpo{ grid-template-columns:1fr; gap:28px; } }
.detalle-img{ aspect-ratio:1/1; background:var(--fondo-card); border-radius:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--borde); }
.detalle-img img{ width:100%; height:100%; object-fit:cover; }
.detalle-info h2{ font-size:clamp(24px,3vw,34px); font-weight:700; margin:8px 0 4px; line-height:1.15; }
.precio-box{ background:var(--fondo-card); border:1px solid var(--borde); border-radius:14px; padding:20px 22px; margin-bottom:24px; }
.precio-box .precio-grande{ font-family:'Barlow Condensed', sans-serif; font-size:40px; font-weight:800; color:var(--azul-oscuro); line-height:1; }
.specs{ display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin-bottom:24px; }
.spec-item{ border-bottom:1px solid var(--borde); padding-bottom:10px; }
.spec-item .label{ font-size:11px; text-transform:uppercase; color:var(--texto-suave); font-weight:600; }
.spec-item .valor{ font-size:14.5px; font-weight:600; margin-top:3px; }
.cta-fase{ background:var(--azul); color:#fff; border:none; padding:14px 24px; border-radius:10px; font-size:14.5px; font-weight:600; cursor:not-allowed; opacity:.55; }

/* ===== Panel admin ===== */
#adminApp{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; background:var(--fondo); }
aside.side{ background:var(--blanco); border-right:1px solid var(--borde); padding:22px 16px; display:flex; flex-direction:column; }
.side-logo{ display:flex; align-items:center; gap:10px; padding:0 6px 22px; }
.side-logo img{ height:30px; }
nav.menu a{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:9px; font-size:14px; font-weight:500; color:var(--texto-suave); text-decoration:none; }
nav.menu a:hover{ background:var(--fondo-card); }
nav.menu a.activo{ background:#EAF2FB; color:var(--azul); font-weight:600; }
main.contenido{ padding:30px 40px 60px; }
main.contenido h2.titulo{ font-size:28px; font-weight:700; color:var(--azul-oscuro); }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:30px; }
.stat-card{ background:var(--blanco); border:1px solid var(--borde); border-radius:14px; padding:18px 20px; }
.stat-card .num{ font-family:'Barlow Condensed', sans-serif; font-size:32px; font-weight:800; color:var(--azul-oscuro); }
.stat-card.alerta .num{ color:var(--amber); }
.panel{ background:var(--blanco); border:1px solid var(--borde); border-radius:14px; padding:22px 24px; margin-bottom:20px; }
.drop-zone{ border:2px dashed var(--borde); border-radius:14px; padding:44px 20px; text-align:center; }
.resumen-cambios{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0; }
.resumen-item{ border-radius:12px; padding:14px 16px; text-align:center; }
.resumen-item .n{ font-family:'Barlow Condensed', sans-serif; font-size:26px; font-weight:800; }
.resumen-item.nuevos{ background:var(--verde-bg); color:var(--verde); }
.resumen-item.actualizados{ background:#EAF2FB; color:var(--azul); }
.resumen-item.sincambios{ background:var(--fondo-card); color:var(--texto-suave); }
.resumen-item.errores{ background:#FCEBEB; color:#A32D2D; }
table.tabla-preview{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.tabla-preview th{ text-align:left; font-size:11px; text-transform:uppercase; color:var(--texto-suave); padding:8px 10px; border-bottom:1.5px solid var(--borde); }
table.tabla-preview td{ padding:11px 10px; border-bottom:1px solid var(--borde); }
.tag{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:100px; }
.tag.nuevo{ background:var(--verde-bg); color:var(--verde); }
.tag.actualizado{ background:#EAF2FB; color:var(--azul); }
.btn-primario{ background:var(--azul); color:#fff; border:none; padding:13px; border-radius:9px; font-size:14.5px; font-weight:600; cursor:pointer; }
.btn-primario:hover{ background:var(--azul-oscuro); }
.btn-secundario{ background:var(--blanco); border:1.5px solid var(--borde); color:var(--texto); padding:11px 20px; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; }
.alerta-msg{ padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px; }
.alerta-msg.exito{ background:var(--verde-bg); color:var(--verde); }
.alerta-msg.error{ background:#FCEBEB; color:#A32D2D; }
.campo{ text-align:left; margin-bottom:16px; }
.campo label{ font-size:12.5px; font-weight:600; display:block; margin-bottom:6px; }
.campo input{ width:100%; padding:11px 14px; border:1.5px solid var(--borde); border-radius:9px; font-size:14px; outline:none; }
.login-card{ width:100%; max-width:380px; border:1px solid var(--borde); border-radius:16px; padding:38px 34px; text-align:center; margin:80px auto; }
.login-card img{ width:180px; margin-bottom:22px; }
.fila-img{ display:flex; align-items:center; gap:16px; border:1px solid var(--borde); border-radius:12px; padding:12px 16px; margin-bottom:10px; }
.fila-img .miniatura{ width:52px; height:52px; border-radius:8px; background:var(--fondo-card); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--borde); }
.fila-img .miniatura img{ width:100%; height:100%; object-fit:cover; }
.fila-img .info{ flex:1; }
.fila-img .info .nombre{ font-size:14px; font-weight:600; }
.fila-img .info .cod{ font-size:12px; color:var(--texto-suave); }