/* ============================================================================
   EUROWINDOWS SUITE — DESIGN SYSTEM (single source of truth)
   Authoritative tokens, components and global shell consumed by every page:
   /, /login, /cotizador (SPA), /pedidos, /crm. No page may hardcode colors,
   sizes or spacing — everything references the tokens below.
   The cotizador SPA is the canonical reference these values are drawn from.
   ============================================================================ */

:root {
  /* Color */
  --navy:#1F497D; --navy-dark:#173A66; --light:#DEEAF1; --paper:#F4F4F1;
  --white:#FFFFFF; --ink:#1A1A1A; --muted:#6F7174; --label:#6B7280;
  --line:#E2E2DD; --line-2:#E2E5E9;          /* --line: dividers · --line-2: control borders */
  --ok:#2F6B3C; --danger:#9F2A20; --danger-dark:#7E1E16;
  --green:#2F6B3C; --red:#9F2A20;            /* aliases consumed by the cotizador SPA's internal CSS */

  /* Type */
  --font:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",system-ui,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  /* Spacing scale (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;

  /* Shape & elevation */
  --radius:7px;
  --shadow:0 1px 2px rgba(0,0,0,.05);                 /* single subtle elevation */
  --focus:0 0 0 3px rgba(31,73,125,.10);              /* focus ring */
  --accent-top:3px solid var(--navy);                 /* navy top accent on primary surfaces */

  /* Shell */
  --container:880px; --pad:var(--sp-6); --logo-h:54px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  font-family:var(--font); background:var(--paper); color:var(--ink);
  min-height:100vh; font-size:14px; line-height:1.5;
}

/* ── Type scale ──────────────────────────────────────────────────────────── */
.t-hero    { font-size:30px; font-weight:700; letter-spacing:-.4px; color:var(--navy); line-height:1.15; }
.t-title   { font-size:18px; font-weight:700; color:var(--navy-dark); }
.t-section { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--label); }
.t-label   { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--label); }
.t-small   { font-size:12px; color:var(--muted); }
.lead      { color:var(--muted); margin-bottom:var(--sp-6); }

/* ── Brand logo ──────────────────────────────────────────────────────────── */
.brand-logo { height:var(--logo-h); width:auto; display:block; }

/* ── Global shell: suite nav ─────────────────────────────────────────────── */
.suite-nav {
  display:flex; align-items:center; background:var(--paper);
  border-bottom:1px solid var(--line); padding:0 var(--sp-8);
}
.suite-nav a {
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--muted); text-decoration:none; padding:11px var(--sp-4);
  border-bottom:2px solid transparent; transition:color .15s, background .15s, border-color .15s;
}
.suite-nav a:hover { color:var(--navy-dark); }
.suite-nav a.active { color:var(--navy); background:var(--light); border-bottom-color:var(--navy); }

/* ── Global shell: brand header ──────────────────────────────────────────── */
.brand-header {
  background:var(--white); border-top:var(--accent-top); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:0 var(--sp-8); min-height:68px;
}
.brand-header .bh-left { display:flex; align-items:center; gap:var(--sp-4); }
.brand-header .bh-sub {
  font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.18em;
  padding-left:var(--sp-4); border-left:1px solid var(--line);
}
.brand-header .bh-right { display:flex; align-items:center; gap:var(--sp-4); }
.brand-header .bh-user { font-size:12.5px; color:var(--muted); letter-spacing:.03em; }

/* ── Global shell: tool tabs (sub-nav) ───────────────────────────────────── */
.tabs { display:flex; gap:var(--sp-1); max-width:var(--container); margin:0 auto;
        padding:0 var(--pad); border-bottom:1px solid var(--line); }
.tab {
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); background:none; border:none; cursor:pointer; font-family:inherit;
  padding:13px var(--sp-4); border-bottom:2px solid transparent; text-decoration:none;
  transition:color .15s, background .15s, border-color .15s;
}
.tab:hover { color:var(--navy-dark); }
.tab.active { color:var(--navy); background:var(--light); border-bottom-color:var(--navy);
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }

/* ── Step indicator (cotizador wizard) — shares the tab active treatment ──── */
.steps { display:flex; margin-bottom:var(--sp-8); border:1px solid var(--line);
         border-radius:var(--radius); overflow:hidden; }
.step {
  flex:1; padding:15px 12px; text-align:center; background:var(--white);
  font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; letter-spacing:.02em;
  border-right:1px solid var(--line); transition:background .15s, color .15s;
}
.step:last-child { border-right:none; }
.step.active { background:var(--light); color:var(--navy); box-shadow:inset 0 -2px 0 var(--navy); }
.step.done { background:var(--white); color:var(--muted); }
.step-num { display:block; font-size:9.5px; font-weight:600; margin-bottom:var(--sp-1);
  opacity:.7; text-transform:uppercase; letter-spacing:.16em; }

/* ── Global shell: content container + footer ────────────────────────────── */
.main { max-width:var(--container); margin:52px auto; padding:0 var(--pad); }
.suite-footer { color:var(--muted); font-size:11px; text-align:center; letter-spacing:.18em;
  text-transform:uppercase; padding:var(--sp-12) 20px var(--sp-8); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-danger {
  padding:12px 28px; border-radius:var(--radius); font-size:12px; font-weight:600;
  cursor:pointer; letter-spacing:.1em; text-transform:uppercase; font-family:inherit;
  border:1px solid transparent; transition:background .15s, border-color .15s, color .15s;
}
.btn-primary { background:var(--navy); color:var(--white); border-color:var(--navy); }
.btn-primary:hover { background:var(--navy-dark); border-color:var(--navy-dark); }
.btn-primary:disabled { background:#B9C2CC; border-color:#B9C2CC; color:var(--white); cursor:not-allowed; }
.btn-secondary { background:var(--white); color:var(--navy); border-color:var(--line-2); }
.btn-secondary:hover { border-color:var(--navy); }
.btn-text {
  background:none; border:none; color:var(--muted); cursor:pointer; font-family:inherit;
  font-size:11px; text-transform:uppercase; letter-spacing:.1em; padding:7px 6px; transition:color .15s;
}
.btn-text:hover { color:var(--navy); }
.btn-danger { background:var(--danger); color:var(--white); border-color:var(--danger); }
.btn-danger:hover { background:var(--danger-dark); border-color:var(--danger-dark); }
/* Small bordered button (e.g. Cerrar sesión in the brand header) */
.btn-logout {
  background:none; border:1px solid var(--line-2); color:var(--ink); padding:7px 14px;
  border-radius:var(--radius); cursor:pointer; font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; font-family:inherit; transition:border-color .15s, color .15s;
}
.btn-logout:hover { border-color:var(--navy); color:var(--navy); }
.btn-logout.linkish { border-color:transparent; }
.btn-logout.linkish:hover { border-color:var(--line-2); }

/* ── Fields ──────────────────────────────────────────────────────────────── */
.field label, .field-label {
  display:block; font-size:10.5px; font-weight:500; color:var(--label);
  margin-bottom:7px; text-transform:uppercase; letter-spacing:.14em;
}
.field input, .field select, .field textarea,
input.ctrl, select.ctrl, textarea.ctrl {
  width:100%; border:1px solid var(--line-2); border-radius:var(--radius);
  padding:10px 12px; font-size:14px; outline:none; transition:border-color .15s;
  font-family:inherit; background:var(--white); color:var(--ink);
}
.field textarea, textarea.ctrl { resize:vertical; min-height:76px; }
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus { border-color:var(--navy); box-shadow:var(--focus); }

/* ── Card / panel ────────────────────────────────────────────────────────── */
.card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
        box-shadow:var(--shadow); padding:34px 38px; margin-bottom:26px; }
.card-title {
  font-size:11.5px; font-weight:600; color:var(--label); margin-bottom:26px;
  text-transform:uppercase; letter-spacing:.14em; border-bottom:1px solid var(--line); padding-bottom:14px;
}

/* ── Type-selection cards ────────────────────────────────────────────────── */
.type-card {
  border:1px solid var(--line-2); border-radius:var(--radius); padding:20px 22px;
  cursor:pointer; transition:border-color .15s, background .15s; background:var(--white);
  display:flex; align-items:center; gap:var(--sp-4);
}
.type-card:hover { border-color:var(--navy); }
.type-card.selected { border-color:var(--navy); background:var(--light); }

/* ── Dropzone (upload) ───────────────────────────────────────────────────── */
.dropzone {
  display:block; position:relative; border:1px dashed var(--line-2); border-radius:var(--radius);
  padding:44px; text-align:center; cursor:pointer; background:var(--white);
  transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color:var(--navy); background:var(--light); }
.dropzone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.dropzone strong { display:block; color:var(--navy-dark); font-size:14px; }
.dropzone small { display:block; color:var(--muted); margin-top:6px; font-size:12px; }
.dropzone .file-name { color:var(--navy); font-weight:600; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty { text-align:center; color:var(--muted); padding:44px 20px; border:1px dashed var(--line);
  border-radius:var(--radius); background:var(--white); }
.empty .big { font-weight:600; color:var(--navy-dark); margin-bottom:var(--sp-1); }

/* ── Toast / flash confirmation (¡Copiado!) ──────────────────────────────── */
.flash { background:#ECF2EC !important; color:var(--ok) !important; border-color:#CFE0D1 !important; }

/* ── Hub tiles ───────────────────────────────────────────────────────────── */
.masthead { text-align:center; }
.subtitle { margin-top:14px; color:var(--muted); font-size:13px; letter-spacing:2.4px; text-transform:uppercase; }
.rule { height:1px; background:var(--line); margin:var(--sp-12) 0; }
.tiles { display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; }
.tile {
  position:relative; display:flex; flex-direction:column; border-radius:var(--radius);
  border:1px solid var(--navy); background:var(--white); color:var(--navy); box-shadow:var(--shadow);
  padding:30px 26px 26px; text-decoration:none; min-height:210px;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.tile.soon { border-color:var(--line); color:var(--muted); cursor:default; }
.tile .mark {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--navy); color:var(--navy); border-radius:var(--radius);
  font-size:17px; font-weight:700; letter-spacing:.5px; transition:background .16s, color .16s, border-color .16s;
}
.tile.soon .mark { border-color:var(--line); color:var(--muted); }
.tile .label { margin-top:24px; font-size:19px; font-weight:700; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--navy-dark); transition:color .16s; }
.tile.soon .label { color:var(--muted); }
.tile .desc { margin-top:9px; font-size:13px; line-height:1.55; color:var(--muted); transition:color .16s; }
.tile .go { margin-top:auto; padding-top:22px; font-size:12px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--navy); display:flex; align-items:center; gap:9px; transition:color .16s; }
.tile .go .arrow { font-size:15px; line-height:1; transition:transform .16s; }
.tile.soon .go { color:var(--muted); }
.tile:not(.soon):hover { background:var(--navy); border-color:var(--navy); }
.tile:not(.soon):hover .mark { background:var(--light); border-color:var(--light); color:var(--navy); }
.tile:not(.soon):hover .label { color:#fff; }
.tile:not(.soon):hover .desc, .tile:not(.soon):hover .go { color:var(--light); }
.tile:not(.soon):hover .go .arrow { transform:translateX(4px); }
.tile:focus-visible { outline:2px solid var(--navy); outline-offset:3px; }

/* ── Login (focused, no nav) ─────────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--sp-6); }
.login { width:100%; max-width:400px; }
.login .brand { display:flex; justify-content:center; margin-bottom:var(--sp-6); }
.login .brand img { height:64px; width:auto; }      /* larger hero logo */
.login .card { padding:44px 40px 38px; }
.login .card h2 { font-size:17px; color:var(--navy-dark); margin-bottom:2px; }
.login .card .sub { color:var(--muted); font-size:13px; margin-bottom:var(--sp-6); }
.login .err { display:none; background:#F7ECEB; border:1px solid #E3CBC8; border-radius:var(--radius);
  color:var(--danger); padding:10px 12px; margin-top:var(--sp-4); font-size:13px; }
.login .err.show { display:block; }
.login button.btn-primary { width:100%; margin-top:22px; }

/* ── CRM placeholder ─────────────────────────────────────────────────────── */
.placeholder { text-align:center; max-width:520px; margin:0 auto; }
.placeholder .tag { display:inline-block; border:1px solid var(--navy); border-radius:var(--radius);
  color:var(--navy); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  padding:6px 14px; margin-bottom:26px; }
.placeholder p { color:var(--muted); font-size:14px; line-height:1.6; margin-top:14px; }
.placeholder .back { display:inline-block; margin-top:30px; font-size:12px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--navy); text-decoration:none; }
.placeholder .back:hover { text-decoration:underline; }

/* ============================================================================
   PEDIDOS — tool-specific components (consume the tokens above)
   ============================================================================ */
.count-pill { display:inline-block; background:var(--light); color:var(--navy-dark);
  border-radius:999px; padding:2px 12px; font-weight:600; }
.row { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-4); }
.status-line { color:var(--muted); font-size:13px; }
.hint { color:var(--muted); font-size:12px; margin-top:10px; }
.err-box { background:#F7ECEB; border:1px solid #E3CBC8; color:var(--danger);
  border-radius:var(--radius); padding:12px 14px; margin-top:14px; }
.hide { display:none; }
.paste-out {
  width:100%; min-height:300px; font-family:var(--mono); font-size:13px; line-height:1.55;
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px;
  resize:vertical; background:#FBFBFA; color:var(--ink); white-space:pre; overflow:auto;
}
.sections { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:18px; }
.sec { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line-2);
  border-radius:var(--radius); background:var(--white); cursor:pointer; user-select:none; }
.sec input { width:16px; height:16px; accent-color:var(--navy); cursor:pointer; }
.sec.empty { opacity:.55; cursor:not-allowed; }
.sec .name { font-weight:600; color:var(--navy-dark); }
.sec .n { color:var(--muted); font-weight:400; }
.badge { font-size:11px; font-weight:600; border-radius:999px; padding:2px 9px; margin-left:auto; }
.badge.ok { background:#ECF2EC; color:var(--ok); }
.badge.warn { background:#FBF3DD; color:#8A5A00; border:1px solid #E7D8A8; }
.revisar { background:#FBF3DD; border:1px solid #E7D8A8; color:#8A5A00; border-radius:var(--radius);
  padding:12px 14px; margin-top:var(--sp-4); font-size:13px; }
.revisar b { display:block; margin-bottom:6px; }
.revisar ul { margin:0 0 0 18px; }
.summary { background:var(--light); border:1px solid #CFE0EE; border-radius:var(--radius);
  padding:12px 16px; margin-bottom:14px; }
.summary .big { font-size:16px; font-weight:700; color:var(--navy-dark); }
.summary .sub { color:var(--muted); font-size:13px; margin-top:2px; }
.summary .sub b { color:var(--navy-dark); font-weight:600; }
.btnbar { display:flex; gap:var(--sp-2); }
.out-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--sp-3); margin-bottom:var(--sp-3); }
.out-head .field-label { margin-bottom:0; }
.records { display:flex; flex-direction:column; gap:var(--sp-3); }
.rec { border:1px solid var(--line); border-radius:var(--radius); background:var(--white);
  box-shadow:var(--shadow); padding:14px 16px; }
.rec .top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rec .fn { font-weight:700; color:var(--navy-dark); }
.rec .when { color:var(--muted); font-size:12px; }
.rec .who { color:var(--label); font-size:12px; }
.rec .meta { color:var(--muted); font-size:13px; margin-top:5px; }
.rec .meta b { color:var(--ink); font-weight:600; }
.rec .acts { display:flex; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap; }
.adminbar { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-4); }
.adminbar .count { color:var(--muted); font-size:13px; }

/* ============================================================================
   MOBILE (≤640px; audited at 390px)
   ============================================================================ */
@media (max-width:640px) {
  :root { --pad:var(--sp-4); }
  .suite-nav { padding:0 var(--sp-3); }
  .suite-nav a { flex:1; text-align:center; padding:11px 6px; letter-spacing:.1em; }
  .brand-header { flex-direction:column; align-items:stretch; gap:10px; padding:12px var(--sp-4); }
  .brand-header .bh-sub { display:none; }
  .brand-header .bh-right { justify-content:space-between; flex-wrap:wrap; gap:10px; }
  .tabs { gap:0; }
  .tab { flex:1; text-align:center; padding:11px 6px; letter-spacing:.02em; }
  .step { font-size:10px; padding:10px 4px; letter-spacing:0; }
  .step-num { font-size:8.5px; }
  .main { margin:22px auto; }
  .card { padding:20px 16px; }
  .tiles { grid-template-columns:1fr; gap:var(--sp-4); }
  .tile { min-height:0; padding:26px 22px 24px; }
  .login .card { padding:36px 24px 30px; }
  .btnbar { width:100%; } .btnbar .btn-secondary, .btnbar .btn-primary { flex:1; }
  .paste-out { min-height:220px; }
}