:root{
  --azul:#0B3D91;--cian:#009FE3;--magenta:#E71783;--amarillo:#FCD102;
  --negro:#050505;--blanco:#FFFFFF;--gris:#F5F5F5;--texto:#111318;--texto-suave:#5B6170;
  --borde:rgba(0,159,227,.14);
  --grad:linear-gradient(135deg,#0B3D91 0%,#009FE3 100%);
  --grad-cmyk:linear-gradient(100deg,var(--cian),var(--magenta) 60%,var(--amarillo));
  --sombra:0 20px 60px -20px rgba(0,159,227,.30);--radio:22px;
  --display:'Space Grotesk','Montserrat',sans-serif;--cuerpo:'Poppins','Montserrat',sans-serif;
  --transicion:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--cuerpo);color:var(--texto);background:var(--gris);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--cian);outline-offset:3px;border-radius:6px}
.contenedor{width:min(1180px,92%);margin-inline:auto}
/* HEADER */
.header{background:var(--negro);position:sticky;top:0;z-index:100}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;width:min(1180px,92%);margin-inline:auto}
.logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-family:var(--display);font-size:.9rem;font-weight:500;color:rgba(255,255,255,.78);transition:color .3s}
.nav a:hover,.nav a.activo{color:#fff}
.nav .salir{color:var(--magenta)}
@media (max-width:640px){.nav{gap:16px}.nav a span.txt{display:none}}
/* CONTENIDO */
main{flex:1;padding:56px 0}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:44px;max-width:480px;margin:0 auto}
.tarjeta.ancha{max-width:900px}
.tarjeta h1{font-size:1.8rem;margin-bottom:8px}
.sub{color:var(--texto-suave);font-weight:300;margin-bottom:28px}
.eyebrow{display:inline-block;font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cian);margin-bottom:14px}
/* FORM */
.campo{margin-bottom:16px}
.campo label{display:block;font-size:.82rem;font-weight:500;color:var(--texto-suave);margin-bottom:6px;font-family:var(--display)}
.campo input{width:100%;padding:13px 15px;border:1px solid var(--borde);border-radius:12px;font-family:var(--cuerpo);font-size:.95rem;color:var(--texto);background:#fff;transition:border-color .3s,box-shadow .3s}
.campo input:focus{outline:none;border-color:var(--cian);box-shadow:0 0 0 3px rgba(0,159,227,.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 30px;border-radius:100px;font-family:var(--display);font-weight:600;font-size:.95rem;border:none;cursor:pointer;transition:transform .3s var(--transicion),box-shadow .3s;text-decoration:none}
.btn-primario{background:var(--grad);color:#fff;box-shadow:0 12px 30px -10px rgba(0,159,227,.55);width:100%}
.btn-primario:hover{box-shadow:0 18px 42px -10px rgba(0,159,227,.75)}
.btn-magenta{background:var(--magenta);color:#fff;width:100%}
.btn-borde{background:transparent;border:1.5px solid var(--borde);color:var(--texto)}
.btn-borde:hover{border-color:var(--cian);color:var(--cian)}
.enlace-bajo{text-align:center;margin-top:22px;font-size:.9rem;color:var(--texto-suave)}
.enlace-bajo a{color:var(--cian);font-weight:600}
/* AVISOS */
.aviso{padding:13px 18px;border-radius:12px;font-size:.9rem;margin-bottom:22px}
.aviso.mal{background:rgba(231,23,131,.08);color:#B80F67;border:1px solid rgba(231,23,131,.2)}
.aviso.ok{background:rgba(18,183,106,.08);color:#0B7A47;border:1px solid rgba(18,183,106,.2)}
/* PANEL / PEDIDOS */
.saludo{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.saludo h1{font-size:2rem}
.perfil{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
.dato-card{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:20px}
.dato-card .k{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--texto-suave);font-family:var(--display);font-weight:600;margin-bottom:6px}
.dato-card .v{font-weight:500}
.pedidos{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden}
.pedidos table{width:100%;border-collapse:collapse}
.pedidos th{background:var(--negro);color:#fff;font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-align:left;padding:16px 20px}
.pedidos td{padding:16px 20px;border-bottom:1px solid var(--borde);font-size:.9rem}
.pedidos tr:last-child td{border-bottom:none}
.pedidos .ref{font-family:var(--display);font-weight:600}
.estado{display:inline-block;padding:5px 12px;border-radius:100px;font-size:.76rem;font-weight:600;font-family:var(--display);text-transform:capitalize}
.estado.recibido{background:rgba(0,159,227,.12);color:#0270a0}
.estado.en_revision,.estado.cotizado{background:rgba(252,209,2,.16);color:#8a7300}
.estado.aprobado,.estado.en_produccion{background:rgba(11,61,145,.1);color:#0B3D91}
.estado.listo,.estado.entregado{background:rgba(18,183,106,.12);color:#0B7A47}
.estado.cancelado{background:rgba(231,23,131,.1);color:#B80F67}
.vacio{padding:50px 24px;text-align:center;color:var(--texto-suave);font-weight:300}
.vacio a{color:var(--cian);font-weight:600}
@media (max-width:640px){
  main{padding:34px 0}.tarjeta{padding:30px 22px}.perfil{grid-template-columns:1fr}
  .pedidos{overflow-x:auto}.pedidos table{min-width:560px}
}
/* FOOTER */
.pie{background:var(--negro);color:rgba(255,255,255,.45);text-align:center;padding:24px 0;font-size:.82rem;font-weight:300}
.pie .acento{color:var(--cian)}