/* ============================================================================
   bdi.css — Sistema de diseño de la intranet Boluda Industrial (v1 · 22-jul-2026)
   ----------------------------------------------------------------------------
   Tokens + componentes base compartidos por todas las páginas del portal.
   Referencia canónica de estilo: pedidos-pendientes.html.
   Las páginas enlazan este fichero ANTES de su <style> propio:
       <link rel="stylesheet" href="/assets/bdi.css">
   y usan las variables/clases de aquí; su CSS local solo añade lo específico.
   ========================================================================== */

:root {
  /* color de marca */
  --azul:#0b3050; --azul2:#155a8a; --acento:#2e86de;
  /* superficie y texto */
  --bg:#f2f5f9; --surface:#ffffff;
  --txt:#1a2733; --muted:#64748b; --borde:#e4e9f0; --gris:#f6f8fb;
  /* semánticos */
  --rojo:#e01414; --naranja:#e67e22; --verde:#1e9e4a; --cazul:#2e86de;
  --ambar:#b9770e;
  /* elevación */
  --sombra-s:0 1px 2px rgba(15,35,60,.05), 0 1px 6px rgba(15,35,60,.04);
  --sombra-m:0 4px 14px rgba(15,35,60,.08);
  --sombra-l:0 12px 34px rgba(15,35,60,.18);
  --radio:14px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
       background:var(--bg); color:var(--txt); font-size:14px; line-height:1.45; }

/* ---------- cabecera de página ---------- */
header.bdi { background:linear-gradient(115deg,var(--azul) 0%,var(--azul2) 100%);
             color:#fff; position:relative; overflow:hidden; }
header.bdi::after { content:""; position:absolute; right:-70px; top:-90px; width:300px;
                    height:300px; border-radius:50%; background:rgba(255,255,255,.06);
                    pointer-events:none; }
header.bdi::before { content:""; position:absolute; right:120px; bottom:-120px; width:220px;
                     height:220px; border-radius:50%; background:rgba(255,255,255,.04);
                     pointer-events:none; }
.hwrap { max-width:1140px; margin:0 auto; padding:22px 20px 24px;
         display:flex; align-items:center; gap:16px; position:relative; }
.hkicker { font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.75;
           font-weight:600; margin-bottom:5px; }
header.bdi h1 { font-size:21px; font-weight:700; letter-spacing:-.01em; }
header.bdi .sub { font-size:12.5px; opacity:.82; margin-top:6px; max-width:640px; }
header.bdi .sub b { font-weight:700; opacity:1; }
a.volver { color:#fff; text-decoration:none; font-size:14px; font-weight:700;
           white-space:nowrap; background:rgba(255,255,255,.13);
           border:1.5px solid rgba(255,255,255,.45); padding:9px 16px; border-radius:11px;
           transition:background .15s; position:relative; z-index:1; }
a.volver:hover { background:rgba(255,255,255,.24); }

main.bdi { max-width:1140px; margin:0 auto; padding:18px 20px 90px; }

/* ---------- tarjetas y paneles ---------- */
.panel-bdi { background:var(--surface); border:1px solid var(--borde);
             border-radius:var(--radio); padding:16px 18px; box-shadow:var(--sombra-s); }
.tarjeta-bdi { background:var(--surface); border:1px solid var(--borde);
               border-radius:16px; box-shadow:var(--sombra-s); overflow:hidden;
               transition:transform .1s, box-shadow .15s; }
a.tarjeta-bdi:hover { transform:translateY(-3px); box-shadow:var(--sombra-m); }

/* ---------- tablas ---------- */
table.bdi { border-collapse:collapse; width:100%; }
table.bdi th { color:var(--muted); font-size:10.5px; text-transform:uppercase;
               letter-spacing:.07em; font-weight:700; text-align:left; padding:9px 14px;
               border-bottom:2px solid var(--borde); background:#fff; white-space:nowrap; }
table.bdi td { padding:9px 14px; border-bottom:1px solid #eef2f6; font-size:13px;
               vertical-align:middle; }
table.bdi tr:last-child td { border-bottom:none; }
table.bdi tr.hover:hover td, table.bdi tbody tr:hover td { background:#f4f8fc; }

/* ---------- botones ---------- */
.btn { display:inline-block; border-radius:11px; padding:9px 16px; font-size:13.5px;
       font-weight:700; cursor:pointer; border:none; text-decoration:none;
       transition:filter .15s, border-color .15s, color .15s, transform .1s; }
.btn:active { transform:scale(.98); }
.btn-primario { background:var(--acento); color:#fff; box-shadow:0 4px 12px rgba(46,134,222,.28); }
.btn-primario:hover { filter:brightness(1.08); }
.btn-peligro { background:var(--rojo); color:#fff; box-shadow:0 4px 12px rgba(224,20,20,.3); }
.btn-peligro:hover { filter:brightness(1.08); }
.btn-ghost { background:#fff; color:var(--azul2); border:1.5px solid var(--borde); }
.btn-ghost:hover { border-color:var(--acento); color:var(--acento); }
.btn:disabled { opacity:.5; cursor:default; }

/* ---------- badges ---------- */
.badge-bdi { display:inline-block; font-size:10.5px; font-weight:700; border-radius:12px;
             padding:2.5px 9px; white-space:nowrap; }
.badge-bdi.ok    { background:#e7f7ec; color:#0a6d2c; border:1px solid #bfe4cb; }
.badge-bdi.aviso { background:#fef5e7; color:var(--ambar); border:1px solid #f5deab; }
.badge-bdi.error { background:#fdeceb; color:#b03a2e; border:1px solid #f2c4c0; }
.badge-bdi.info  { background:#eef4fc; color:#1c5cab; border:1px solid #cadcf2; }

/* ---------- formularios ---------- */
input.bdi, select.bdi, textarea.bdi {
  border:1.5px solid var(--borde); border-radius:11px; padding:9px 12px; font-size:13.5px;
  background:var(--gris); color:var(--txt); font-family:inherit;
  transition:border-color .15s, background .15s, box-shadow .15s; }
input.bdi:focus, select.bdi:focus, textarea.bdi:focus {
  outline:none; border-color:var(--acento); background:#fff;
  box-shadow:0 0 0 3px rgba(46,134,222,.14); }
input[type=checkbox] { accent-color:var(--azul2); }
:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }

/* ---------- estados ---------- */
.vacio-bdi { padding:28px 18px; text-align:center; color:var(--muted); font-size:13px; }
.cargando-bdi { padding:56px; text-align:center; color:var(--muted); }
.cargando-bdi::before { content:""; display:block; width:26px; height:26px; margin:0 auto 12px;
                        border-radius:50%; border:3px solid var(--borde);
                        border-top-color:var(--acento); animation:bdi-girar .8s linear infinite; }
@keyframes bdi-girar { to { transform:rotate(360deg); } }