:root { --principal:#172554; --acento:#e62e2e; --fondo:#f1f5f9; --texto:#1e293b; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; font-family:Arial,sans-serif; color:var(--texto); background:linear-gradient(135deg,#e0e7ff,var(--fondo)); }
.contenedor { width:min(720px,calc(100% - 32px)); margin:48px auto; }.tarjeta { background:#fff; border-radius:18px; padding:30px; box-shadow:0 12px 30px #1725541c; margin-bottom:20px; }.marca { color:var(--principal); font-weight:800; text-decoration:none; }.encabezado h1 { margin:22px 0 6px; color:var(--principal); }.encabezado p { color:#64748b; } form { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; margin-top:24px; } label { font-size:13px; font-weight:700; color:#475569; } input { display:block; width:100%; margin-top:6px; padding:12px; border:1px solid #cbd5e1; border-radius:8px; text-transform:uppercase; } button { align-self:end; padding:13px 18px; border:0; border-radius:8px; background:var(--acento); color:white; font-weight:700; cursor:pointer; }.error { color:#b91c1c; margin-bottom:0; }.resumen { display:flex; justify-content:space-between; gap:16px; align-items:start; border-bottom:1px solid #e2e8f0; padding-bottom:18px; }.resumen span:first-child { color:#64748b; font-size:13px; }.resumen h2 { margin:4px 0; color:var(--principal); }.resumen p { margin:0; color:#64748b; }.estado { border-radius:999px; padding:7px 12px; font-size:13px; font-weight:700; white-space:nowrap; }.estado-pendiente { background:#fef3c7; color:#92400e; }.estado-en_proceso { background:#dbeafe; color:#1e40af; }.estado-en_proceso { background:#ede9fe; color:#5b21b6; }.estado-en_destino { background:#cffafe; color:#0e7490; }.estado-entregado { background:#dcfce7; color:#166534; }.estado-cancelado { background:#fee2e2; color:#991b1b; }.envio { margin:18px 0; padding:14px; background:#f8fafc; border-radius:8px; }.timeline { list-style:none; margin:18px 0 0; padding:0; }.timeline li { position:relative; display:flex; gap:14px; padding:0 0 22px; }.timeline li:not(:last-child)::before { content:''; position:absolute; left:7px; top:14px; bottom:0; width:2px; background:#cbd5e1; }.punto { z-index:1; width:16px; height:16px; margin-top:2px; flex:none; border:4px solid #fff; border-radius:50%; background:var(--acento); box-shadow:0 0 0 2px var(--acento); }.timeline b,.timeline time { display:block; }.timeline time { margin-top:4px; color:#64748b; font-size:13px; } @media(max-width:620px) { .contenedor { margin:20px auto; }.tarjeta { padding:22px; } form { grid-template-columns:1fr; } button { width:100%; }.resumen { flex-direction:column; } }