:root {
  --ink: #16212a;
  --brown: #0e1c24;
  --brown-2: #243844;
  --amber: #1455d9;
  --amber-soft: #b8d0ff;
  --cream: #f4f7f8;
  --paper: #ffffff;
  --line: #d7e0e5;
  --muted: #61717d;
  --green: #1f8a5b;
  --red: #bd3b36;
  --signal: #f26a2e;
  --signal-soft: #fff0e8;
  --steel: #e9eff2;
  --shadow: 0 8px 22px rgba(14, 28, 36, .07);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: var(--cream); font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { background: var(--brown); color: #fffaf2; padding: 28px 20px; display: flex; flex-direction: column; gap: 28px; }
.brand small { color: var(--amber-soft); text-transform: uppercase; letter-spacing: .16em; font-weight: 800; font-size: 10px; }
.brand h1 { font-family: Georgia, serif; font-size: 24px; line-height: 1.05; margin: 8px 0 0; }
.nav { display: grid; gap: 7px; }
.nav button { border: 0; color: #eadfce; background: transparent; text-align: left; padding: 12px 14px; border-radius: 10px; }
.nav button.active { background: rgba(215, 150, 45, .2); color: white; font-weight: 750; }
.demo-card { margin-top: auto; padding: 15px; border: 1px solid rgba(244,216,168,.25); background: rgba(255,255,255,.06); border-radius: 14px; }
.demo-card strong { display: block; color: var(--amber-soft); }
.demo-card span { display: block; font-size: 12px; line-height: 1.45; margin-top: 5px; color: #d7c9b8; }
.workspace { min-width: 0; }
.topbar { height: 82px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,253,248,.9); border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 4px; text-transform: uppercase; color: var(--amber); font-weight: 800; font-size: 11px; letter-spacing: .12em; }
.topbar h2 { margin: 0; font-family: Georgia, serif; font-size: 24px; }
.role-select { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.role-select select { border: 1px solid var(--line); background: white; border-radius: 9px; padding: 9px 34px 9px 12px; color: var(--ink); }
.main { padding: 30px 34px 48px; }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 22px; }
.hero h3 { margin: 0 0 7px; font-family: Georgia, serif; font-size: 30px; }
.hero p { margin: 0; color: var(--muted); }
.primary { border: 0; border-radius: 10px; background: var(--amber); color: #2b1a0f; padding: 11px 16px; font-weight: 800; box-shadow: 0 8px 20px rgba(215,150,45,.2); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.stat, .panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.stat { padding: 18px; }
.stat span { color: var(--muted); font-size: 13px; }
.stat strong { display: block; font-size: 30px; margin-top: 8px; }
.content-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-top: 18px; }
.panel { padding: 20px; }
.panel h4 { margin: 0 0 16px; font-size: 16px; }
.order-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.order-row:first-of-type { border-top: 0; }
.order-row strong, .order-row span { display: block; }
.order-row span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.badge { align-self: center; padding: 6px 9px; border-radius: 999px; background: #f6e6ca; color: #79521c; font-size: 11px; font-weight: 800; }
.alert { border-left: 3px solid var(--amber); padding: 10px 0 10px 12px; margin: 10px 0; }
.alert strong { font-size: 13px; }
.alert p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .app-shell { grid-template-columns: 210px 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .content-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .app-shell { display: block; } .sidebar { padding: 18px; } .nav { grid-template-columns: repeat(2, 1fr); } .demo-card { display: none; } .topbar { padding: 14px 18px; height: auto; align-items: flex-start; gap: 12px; } .main { padding: 22px 18px; } .hero { align-items: flex-start; flex-direction: column; } }

/* Componentes de la demostración completa */
.workspace { background: radial-gradient(circle at 90% 0%, rgba(215,150,45,.07), transparent 28%), var(--cream); }
.nav button { display: flex; align-items: center; gap: 11px; width: 100%; }
.nav-icon { width: 20px; text-align: center; color: var(--amber-soft); font-size: 17px; }
.demo-card button { margin-top: 12px; padding: 0; border: 0; background: transparent; color: white; font-size: 11px; text-decoration: underline; }
.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #70ce9d; box-shadow: 0 0 0 4px rgba(112,206,157,.12); }
.stat small { display: block; color: #9b8d84; font-size: 11px; margin-top: 2px; }
.stat.accent { background: var(--brown); color: white; border-color: var(--brown); }
.stat.accent span, .stat.accent small { color: #d9c9b7; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.panel-heading h4, .panel-heading p { margin: 0; }
.section-kicker { margin: 0 0 5px !important; text-transform: uppercase; letter-spacing: .12em; color: var(--amber); font-size: 10px; font-weight: 850; }
.text-button, .back { border: 0; background: transparent; color: #9b6317; font-weight: 750; font-size: 12px; padding: 4px; }
.clickable { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: transparent; text-align: left; color: inherit; }
.clickable:hover { background: #fbf6ed; }
.badge { display: inline-flex !important; width: fit-content; white-space: nowrap; }
.badge.neutral { background: #eee8df; color: #655b54; }
.badge.blue { background: #dcebf1; color: #2f6579; }
.badge.amber { background: #f6e6ca; color: #79521c; }
.badge.purple { background: #eadff0; color: #70437d; }
.badge.orange { background: #f4ddce; color: #974f25; }
.badge.green { background: #dcecdf; color: #246a45; }
.badge.red { background: #f2deda; color: #973e35; }
.badge.dark { background: #ddd8d2; color: #413c38; }
.badge.large { padding: 8px 11px; }
.alert { display: flex; gap: 10px; border-left: 0; border-top: 1px solid var(--line); padding: 14px 0; margin: 0; }
.alert:first-of-type { border-top: 0; }
.alert-dot { margin-top: 5px; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
.alert-dot.amber { background: var(--amber); }.alert-dot.orange { background: #bf6b32; }.alert-dot.green { background: var(--green); }
.secondary { border: 1px solid var(--line); background: white; color: var(--ink); border-radius: 10px; padding: 10px 14px; font-weight: 750; }
.secondary:hover { border-color: #bf9b6c; background: #fffaf1; }
.secondary.small { padding: 8px 11px; font-size: 11px; }
.danger-text { color: var(--red); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.search { display: flex; align-items: center; min-width: 340px; gap: 9px; border: 1px solid var(--line); background: white; border-radius: 10px; padding: 0 12px; }
.search input { width: 100%; border: 0; outline: 0; padding: 11px 0; color: var(--ink); background: transparent; }
.result-count { color: var(--muted); font-size: 12px; }
.filter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.filter select, .inline-action select { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: white; color: var(--ink); }
.client-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.client-card { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fffefa; }
.avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center; background: #ead8bd; color: #704719; font-weight: 850; font-size: 13px; }
.grow { flex: 1; min-width: 0; }
.client-card h4, .client-card p { margin: 0; }
.client-card h4 { font-size: 14px; }.client-card p { margin-top: 3px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-meta { display: flex; gap: 12px; margin-top: 9px; color: #8b6b46; font-size: 10px; font-weight: 750; }
.form-layout { display: grid; gap: 16px; }
.form-section { padding: 24px; }
.step-title { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.step-title > span { width: 30px; height: 30px; border-radius: 50%; background: var(--brown); color: white; display: grid; place-items: center; font-weight: 850; }
.step-title h4, .step-title p { margin: 0; }.step-title p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-grid > .full { grid-column: 1/-1; }
.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.field { display: grid; gap: 6px; color: #665b54; font-size: 11px; font-weight: 750; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: white; padding: 10px 11px; outline: 0; color: var(--ink); font-weight: 500; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(215,150,45,.1); }
.field textarea { min-height: 78px; resize: vertical; }
.field.wide { grid-column: span 2; }.field.full { grid-column: 1/-1; }
.appliance-form-list { display: grid; gap: 14px; }
.appliance-draft { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: #fcf8f1; }
.draft-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.draft-heading strong, .equipment-label { display: block; }.equipment-label { color: #9c671f; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 3px; }
.icon-button { border: 1px solid var(--line); background: white; width: 30px; height: 30px; border-radius: 8px; font-size: 19px; }.icon-button.danger { color: var(--red); }
.add-device { width: 100%; padding: 13px; margin-top: 14px; border: 1px dashed #cba76f; border-radius: 11px; background: #fffaf1; color: #8a5b1c; font-weight: 800; }
.form-footer { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--brown); color: white; border-radius: 15px; }
.form-footer strong, .form-footer span { display: block; }.form-footer span { color: #d6c6b6; font-size: 11px; margin-top: 3px; }
.orders-table { overflow: hidden; }
.table-head, .table-row { display: grid; grid-template-columns: 1.2fr 1fr .7fr 1.15fr; gap: 16px; align-items: center; }
.table-head { padding: 0 14px 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 850; }
.table-row { width: 100%; border: 0; border-top: 1px solid var(--line); background: white; text-align: left; padding: 15px 14px; color: var(--ink); }
.table-row:hover { background: #fcf8f1; }
.table-row > span, .table-row strong, .table-row small { display: block; min-width: 0; }
.table-row strong { font-size: 13px; }.table-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.status-stack { display: flex !important; flex-wrap: wrap; gap: 5px; }.status-stack small { margin: 0; }
.empty { padding: 24px; text-align: center; color: var(--muted); font-size: 12px; }.empty.compact { padding: 16px; }
.back { margin: -10px 0 14px; }
.detail-hero { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.detail-hero h3, .detail-hero p { margin: 0; }.detail-hero h3 { font-family: Georgia,serif; font-size: 28px; margin-top: 6px; }.detail-hero p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.folio-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }.folio-line .equipment-label { margin: 0; }
.order-tabs { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 17px; padding-bottom: 3px; }
.order-tabs button { min-width: 200px; text-align: left; border: 1px solid var(--line); background: rgba(255,255,255,.65); border-radius: 12px; padding: 12px; color: var(--ink); }
.order-tabs button.active { border-color: var(--amber); background: white; box-shadow: 0 5px 18px rgba(215,150,45,.12); }
.order-tabs span, .order-tabs strong { display: block; }.order-tabs span { color: var(--muted); font-size: 9px; text-transform: uppercase; }.order-tabs strong { margin: 4px 0 8px; font-size: 13px; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(260px,.75fr); gap: 17px; }.detail-main,.detail-side { display: grid; gap: 16px; align-content: start; }
.detail-panel h4 { font-family: Georgia,serif; font-size: 20px; }
.info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.info-grid div { padding: 12px; border-radius: 10px; background: #f8f3eb; }.info-grid span,.info-grid strong { display: block; }.info-grid span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }.info-grid strong { font-size: 12px; margin-top: 4px; }
.reported-fault { border-left: 3px solid var(--amber); padding: 9px 12px; background: #fffaf0; }.reported-fault span { color: #876641; font-size: 9px; font-weight: 850; text-transform: uppercase; }.reported-fault p { margin: 4px 0 0; font-size: 13px; }
.money-row { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding: 11px 0; font-size: 12px; }.money-row:nth-of-type(2) { border-top: 0; }.money-row.muted { color: var(--muted); }.authorization { display: flex; justify-content: space-between; border-radius: 9px; padding: 10px; margin-top: 4px; background: #f5e7ce; color: #76521f; font-size: 11px; }
.timeline { padding-left: 7px; }.timeline > div { position: relative; display: flex; gap: 10px; padding-bottom: 14px; }.timeline > div:not(:last-child)::before { content:''; position:absolute; top:10px; left:4px; width:1px; height:calc(100% - 2px); background:var(--line); }.timeline-dot { width:9px; height:9px; margin-top:4px; flex:0 0 9px; border-radius:50%; background:#b9aba0; z-index:1; }.timeline-dot.current { background: var(--amber); box-shadow:0 0 0 4px #f6e7ce; }.timeline p { margin:0; color:var(--muted); font-size:11px; }
.action-panel { display:flex; align-items:center; justify-content:space-between; gap:24px; border-color:#d8b57c; }.action-panel.vertical { display:grid; }.action-panel h4,.action-panel p { margin:0; }.action-panel h4 { margin-bottom:5px; }.action-panel p:not(.section-kicker) { color:var(--muted); font-size:12px; }
.inline-action { display:flex; align-items:center; gap:8px; }.button-pair { display:flex; gap:8px; }.align-right { justify-self:end; }.button-pair.align-right { justify-content:flex-end; }
.notice-panel { border-left:4px solid; }.notice-panel.red { border-left-color:var(--red); }.notice-panel.green { border-left-color:var(--green); }.notice-panel p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.tech-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }.tech-column { background:rgba(255,253,248,.75); border:1px solid var(--line); border-radius:15px; overflow:hidden; }.tech-head { display:flex; align-items:center; gap:10px; padding:15px; border-bottom:1px solid var(--line); background:white; }.avatar.tech { color:white; }.tech-head div { flex:1; min-width:0; }.tech-head h4,.tech-head p { margin:0; }.tech-head p { color:var(--muted); font-size:9px; margin-top:2px; }.tech-head > strong { color:var(--amber); }.tech-list { padding:10px; display:grid; gap:9px; }.job-card { width:100%; text-align:left; border:1px solid var(--line); border-radius:11px; background:white; padding:12px; color:var(--ink); }.job-card:hover { border-color:#cea86d; }.job-card div>* { display:block; }.job-card small { color:var(--muted); font-size:9px; }.job-card strong { margin:4px 0; font-size:13px; }.job-card span:not(.badge) { color:var(--muted); font-size:10px; }.job-card .badge { margin-top:10px; }
.tech-actions { display:flex; flex:0 0 auto !important; gap:6px; }.specialty-field { border:0; padding:0; margin:0; }.specialty-field legend { font-weight:700; margin-bottom:8px; }.specialty-selector { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.specialty-option { display:grid; grid-template-columns:auto minmax(90px,1fr) minmax(145px,auto); align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:white; }.specialty-option span { font-size:12px; font-weight:700; }.specialty-option select { min-width:0; }.specialty-option select:disabled { opacity:.45; }
.delivery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.delivery-card h4,.delivery-card p { margin:0; }.delivery-card h4 { margin-top:5px; }.delivery-card p { margin-top:4px; color:var(--muted); font-size:11px; }.delivery-summary { display:grid; gap:2px; margin:14px 0; }.delivery-summary > div { display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line); font-size:12px; }.delivery-summary .balance { color:var(--green); font-size:14px; }.check-line { display:flex; gap:8px; align-items:flex-start; color:var(--muted); font-size:11px; margin:14px 0; }.full-button { width:100%; }.empty-state { grid-column:1/-1; text-align:center; padding:45px; }.empty-state > span { width:44px;height:44px;display:grid;place-items:center;margin:auto;border-radius:50%;background:#e1ede4;color:var(--green);font-size:22px; }.empty-state h4 { margin:12px 0 4px; }.empty-state p { margin:0;color:var(--muted);font-size:12px; }
.approval-check { padding: 13px 14px; border: 1px solid #d7b777; border-radius: 8px; background: #fff8ea; color: var(--ink); }.approval-check span { display: grid; gap: 3px; }.approval-check small { color: var(--muted); line-height: 1.45; }.authorization.initial { background: #f2f3f4; color: var(--muted); }.authorization.initial.approved { background: #e3f1e8; color: #285d3b; }
.whatsapp-layout { display:grid; grid-template-columns:minmax(250px,.65fr) minmax(380px,1fr); gap:18px; align-items:start; }.whatsapp-info { position:sticky; top:20px; }.wa-title { display:flex;gap:11px;align-items:center; }.wa-title>span { width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#267653;color:white;font-size:21px; }.wa-title h4,.wa-title p { margin:0; }.wa-title p { color:var(--muted);font-size:11px;margin-top:3px; }.security-note { background:#f5efe4;border-radius:11px;padding:13px;margin:17px 0; }.security-note strong { font-size:12px; }.security-note p { color:var(--muted);font-size:11px;line-height:1.5;margin:4px 0 0; }.quick-cases { display:grid;gap:7px; }.quick-cases>span { color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:850;margin-bottom:2px; }.quick-cases button { text-align:left;border:1px solid var(--line);background:white;border-radius:9px;padding:9px 10px;color:var(--ink);font-size:11px; }.phone-shell { max-width:620px;border:1px solid #cfc4b6;border-radius:18px;overflow:hidden;background:#ebe4d8;box-shadow:var(--shadow); }.phone-head { display:flex;align-items:center;gap:10px;background:#365c50;color:white;padding:13px 16px; }.wa-avatar { width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#e6bd6e;color:#3a2b1d;font-weight:900;font-size:11px; }.phone-head div { flex:1; }.phone-head strong,.phone-head small { display:block; }.phone-head small { color:#c8ded5;font-size:9px;margin-top:2px; }.online { color:#73d6a4; }.chat { height:480px;overflow-y:auto;padding:17px;background-color:#eae2d6;background-image:radial-gradient(rgba(91,75,60,.07) 1px,transparent 1px);background-size:15px 15px; }.message { max-width:78%;width:fit-content;margin:0 0 9px;padding:10px 12px;border-radius:11px;background:white;font-size:11px;line-height:1.45;box-shadow:0 2px 5px rgba(0,0,0,.06); }.message.user { margin-left:auto;background:#d9f1d2; }.message.verified-message strong,.message.verified-message span { display:block; }.message.verified-message span { color:var(--muted);font-size:9px;margin-top:3px; }.wa-order-card { margin:10px 0;padding:13px;background:white;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.07); }.wa-order-card>div:first-child { display:inline-block; }.wa-order-card small,.wa-order-card strong { display:block; }.wa-order-card small { color:var(--muted);font-size:9px; }.wa-order-card strong { margin-top:2px; }.wa-order-card>.badge { float:right; }.wa-order-card p { clear:both;color:var(--muted);font-size:10px;line-height:1.45;padding-top:9px;margin:0; }.wa-budget { display:flex;justify-content:space-between;margin:10px 0;padding:10px;border-radius:8px;background:#f6f1e8;font-size:11px; }.wa-primary { border:0;border-radius:8px;background:#267653;color:white;padding:9px 12px;font-weight:800; }.chat-form { display:grid;grid-template-columns:1fr 1.2fr auto;gap:7px;padding:11px;background:#f8f5ef;border-top:1px solid #d5cbbc; }.chat-form input { min-width:0;border:1px solid #ddd2c4;border-radius:9px;padding:10px;font-size:10px; }.chat-form button { border:0;border-radius:9px;background:#267653;color:white;padding:0 14px;font-weight:800;font-size:11px; }
.toast { position:fixed;right:24px;bottom:24px;z-index:20;max-width:380px;background:#28221e;color:white;padding:13px 17px;border-radius:11px;box-shadow:0 12px 35px rgba(0,0,0,.25);font-size:12px;animation:toast-in .2s ease-out; }.toast::before { content:'✓';color:#e4bd72;margin-right:8px;font-weight:900; }@keyframes toast-in{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1100px){.client-grid{grid-template-columns:1fr}.tech-board{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.detail-side{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.whatsapp-layout{grid-template-columns:1fr}.whatsapp-info{position:static}.quick-cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.client-grid,.delivery-grid,.detail-side{grid-template-columns:1fr}.table-head{display:none}.table-row{grid-template-columns:1fr 1fr}.form-grid,.form-grid.three{grid-template-columns:1fr}.field.wide{grid-column:auto}.specialty-selector{grid-template-columns:1fr}.specialty-option{grid-template-columns:auto 1fr}.specialty-option select{grid-column:2}.hero h3{font-size:25px}.toolbar{align-items:stretch;flex-direction:column}.search{min-width:0}.action-panel{align-items:stretch;flex-direction:column}.inline-action{align-items:stretch;flex-direction:column}.chat-form{grid-template-columns:1fr}.chat{height:420px}.phone-shell{max-width:none}}

/* Acceso por área */
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(340px,.9fr) minmax(520px,1.1fr); background: var(--paper); }
.login-brand { position: relative; overflow: hidden; display: grid; place-items: center; padding: 55px; color: white; background: linear-gradient(145deg,#2d1a11,#4b2b1b 62%,#6b4124); }
.login-brand::before,.login-brand::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(244,216,168,.12); }
.login-brand::before { width:440px;height:440px;right:-250px;top:-180px; }.login-brand::after { width:300px;height:300px;left:-170px;bottom:-150px; }
.login-brand-inner { position:relative;z-index:1;max-width:470px; }
.login-brand .eyebrow { color:var(--amber-soft); }.login-brand h1 { margin:12px 0 18px;font-family:Georgia,serif;font-size:52px;line-height:.98;letter-spacing:-.02em; }.login-brand h1 span { color:#f1c578; }.login-brand-inner>p:not(.eyebrow) { color:#ddcfc1;font-size:15px;line-height:1.7;max-width:420px;margin-bottom:35px; }
.login-feature { display:flex;align-items:center;gap:12px;margin:16px 0; }.login-feature>span { width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(215,150,45,.2);color:#f1c578;font-weight:900; }.login-feature strong,.login-feature small { display:block; }.login-feature strong { font-size:12px; }.login-feature small { margin-top:3px;color:#cdbdad;font-size:10px; }
.login-panel { display:grid;place-items:center;padding:45px;background:radial-gradient(circle at 100% 0%,rgba(215,150,45,.11),transparent 35%),#f8f3ea; }.login-card { width:min(640px,100%);padding:32px;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 65px rgba(62,40,25,.12); }.login-card h2 { margin:0;font-family:Georgia,serif;font-size:31px; }.login-copy { margin:5px 0 0;color:var(--muted);font-size:12px; }
.role-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0; }.role-card { display:grid;justify-items:start;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);text-align:left; }.role-card:hover { border-color:#c89b5a; }.role-card.active { border-color:var(--amber);background:#fff8eb;box-shadow:0 0 0 2px rgba(215,150,45,.12); }.role-card>span { width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#eee3d3;color:#70481f;font-weight:900; }.role-card.active>span { background:var(--amber);color:#321e10; }.role-card strong { font-size:12px;margin-top:4px; }.role-card small { color:var(--muted);font-size:9px; }
.login-fields { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.login-button { width:100%;margin-top:16px;padding:13px; }.demo-credentials { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px;padding:10px;border-radius:9px;background:#f7f1e7;color:var(--muted);font-size:10px; }.demo-credentials strong { color:#76511e; }.login-error { margin:12px 0 0;padding:9px 11px;border-radius:8px;background:#f6e3df;color:var(--red);font-size:11px; }
.account-menu { display:flex;align-items:center;gap:10px; }.account-avatar { width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--brown);color:#f3c77c;font-weight:900;font-size:12px; }.account-menu div { min-width:0; }.account-menu strong,.account-menu small { display:block; }.account-menu strong { font-size:11px; }.account-menu small { color:var(--muted);font-size:9px;margin-top:2px; }.account-menu button { margin-left:5px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--muted);padding:7px 9px;font-size:9px;font-weight:750; }

/* Catálogos */
.catalog-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;align-items:start; }.catalog-card { padding:22px; }.catalog-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:17px; }.catalog-heading h4 { margin:0;font-size:17px; }.catalog-heading>span { padding:6px 9px;border-radius:999px;background:#f3ebdf;color:var(--muted);font-size:10px;font-weight:800; }.catalog-form { display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--line); }.catalog-form button { height:38px; }.catalog-list { display:grid;gap:7px;max-height:430px;overflow-y:auto;list-style:none;margin:16px 0 0;padding:0 4px 0 0; }.catalog-list li { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fffefa;font-size:12px; }.catalog-list button { width:25px;height:25px;border:0;border-radius:7px;background:#f3e7df;color:var(--red);font-size:16px;line-height:1; }

/* Fotografías */
.photo-section { margin-top:18px;padding-top:16px;border-top:1px solid var(--line); }.photo-section>div:first-child { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px; }.photo-section>div:first-child strong { font-size:12px; }.photo-section>div:first-child span,.photo-detail .panel-heading>span { color:var(--muted);font-size:10px; }
.photo-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px; }.photo-slot { position:relative;aspect-ratio:4/3;display:grid;place-items:center;align-content:center;gap:3px;overflow:hidden;border:1px dashed #c8ad87;border-radius:11px;background:#fffaf1;color:#91652b;cursor:pointer;text-align:center;transition:.16s ease; }.photo-slot:hover { border-color:var(--amber);background:#fff5df;transform:translateY(-1px); }.photo-slot input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }.photo-slot .photo-icon { width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#f0dbb9;font-size:17px; }.photo-slot strong { font-size:10px; }.photo-slot small { color:var(--muted);font-size:8px; }.photo-slot.has-photo { border-style:solid;background:#241c17; }.photo-slot img { width:100%;height:100%;object-fit:cover; }.photo-detail h4 { margin:0; }

@media(max-width:980px){.login-page{grid-template-columns:1fr}.login-brand{display:none}.catalog-grid{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.login-panel{padding:20px}.login-card{padding:22px}.role-cards{grid-template-columns:1fr}.role-card{grid-template-columns:auto 1fr;align-items:center}.role-card small{grid-column:2}.login-fields{grid-template-columns:1fr}.account-menu div{display:none}.account-menu button{margin:0}.photo-grid{grid-template-columns:repeat(2,1fr)}}

/* Sistema visual 2026: taller de precisión */
::selection { background: #cfe0ff; color: var(--ink); }

button,
input,
select,
textarea { transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { outline: 3px solid rgba(20, 85, 217, .25); outline-offset: 2px; }

.workspace {
  background-color: var(--cream);
  background-image: linear-gradient(rgba(14, 28, 36, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 28, 36, .025) 1px, transparent 1px);
  background-size: 32px 32px;
}

.sidebar { background: var(--brown); color: #f7fafb; padding: 26px 18px; gap: 25px; border-right: 1px solid #263b47; }
.brand { padding: 2px 10px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand small { color: #8fb5ff; letter-spacing: .18em; }
.brand h1,
.topbar h2,
.hero h3,
.detail-hero h3,
.detail-panel h4,
.login-brand h1,
.login-card h2 {
  font-family: "Bahnschrift SemiCondensed", "Arial Narrow", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
}
.brand h1 { font-size: 26px; line-height: .98; margin-top: 10px; }
.nav { gap: 4px; }
.nav button { position: relative; min-height: 42px; padding: 11px 13px; border-radius: 4px; color: #b9c6cd; font-size: 13px; }
.nav button:hover { color: white; background: rgba(255,255,255,.07); }
.nav button.active { background: #1455d9; color: white; box-shadow: inset 3px 0 0 #8fb5ff; }
.nav-icon { color: #82949e; }
.nav button.active .nav-icon { color: white; }
.demo-card { padding: 15px; border-color: rgba(143,181,255,.24); background: #142832; border-radius: 5px; box-shadow: inset 3px 0 0 #f26a2e; }
.demo-card strong { color: #fff; font-size: 12px; }
.demo-card span { color: #9fb0ba; }
.demo-card button { color: #b8d0ff; text-underline-offset: 3px; }

.topbar { height: 76px; padding: 0 32px; background: rgba(255,255,255,.96); border-color: var(--line); box-shadow: 0 1px 0 rgba(14,28,36,.02); }
.eyebrow,
.section-kicker { color: var(--amber); font-family: "Cascadia Mono", Consolas, monospace; letter-spacing: .11em; }
.topbar h2 { font-size: 25px; }
.account-avatar { border-radius: 4px; background: var(--brown); color: #fff; box-shadow: inset 0 -3px 0 #1455d9; }
.account-menu button { border-radius: 4px; }
.account-menu button:hover { border-color: var(--amber); color: var(--amber); }
.main { padding: 30px 32px 48px; max-width: 1500px; margin-inline: auto; }
.hero { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.hero h3 { font-size: 32px; line-height: 1; }

.primary { border-radius: 4px; background: var(--signal); color: #fff; box-shadow: 0 5px 12px rgba(242,106,46,.18); }
.primary:hover { background: #d9521b; transform: translateY(-1px); }
.secondary { border-radius: 4px; background: #fff; }
.secondary:hover { border-color: var(--amber); background: #f5f8ff; color: #1048b9; }
.text-button,
.back { color: var(--amber); }

.stat,
.panel { border-radius: 6px; box-shadow: var(--shadow); }
.stat { position: relative; overflow: hidden; padding: 19px 20px; border-top: 3px solid #9fb0ba; }
.stat strong { font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; font-size: 34px; line-height: 1; }
.stat.accent { background: var(--brown); border-color: #1455d9; }
.stat.accent span,
.stat.accent small { color: #b4c3cb; }
.panel { border-color: var(--line); }
.panel-heading { border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.panel-heading h4 { font-family: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif; font-size: 18px; }
.clickable:hover,
.table-row:hover { background: #f3f7f9; }

.badge { position: relative; border-radius: 2px; padding: 6px 12px 6px 9px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); font-family: "Cascadia Mono", Consolas, monospace; font-size: 9px; letter-spacing: .01em; }
.badge.neutral { background: #e7edf0; color: #485b66; }
.badge.blue { background: #dce8ff; color: #1048b9; }
.badge.amber { background: #fff0d9; color: #935000; }
.badge.purple { background: #eee4fa; color: #63318d; }
.badge.orange { background: #ffe5d8; color: #a33e15; }
.badge.green { background: #dff3e9; color: #12683f; }
.badge.red { background: #fae3e1; color: #972f2b; }
.badge.dark { background: #dfe6e9; color: #25363f; }
.alert-dot { border-radius: 2px; }
.alert-dot.amber { background: #ef9a24; }
.alert-dot.orange { background: var(--signal); }

.search { border-radius: 4px; box-shadow: inset 3px 0 0 #c7d2d8; }
.filter select,
.inline-action select,
.field input,
.field textarea,
.field select { border-radius: 4px; }
.field { color: #4c606b; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(20,85,217,.12); }
.step-title > span { border-radius: 3px; background: var(--amber); font-family: "Cascadia Mono", Consolas, monospace; }
.appliance-draft { border-radius: 5px; background: #f6f9fa; border-left: 3px solid #9fb0ba; }
.add-device { border-color: #8aa4b1; border-radius: 4px; background: #f4f8fa; color: #31505f; }
.add-device:hover { border-color: var(--amber); color: var(--amber); background: #f5f8ff; }
.form-footer { border-radius: 5px; background: var(--brown); box-shadow: inset 4px 0 0 var(--signal); }
.equipment-label,
.folio-line,
.table-row > span:first-child strong { font-family: "Cascadia Mono", Consolas, monospace; }
.equipment-label { color: var(--amber); }

.orders-table { border-radius: 5px; }
.table-head { color: #536a76; font-family: "Cascadia Mono", Consolas, monospace; }
.table-row { background: #fff; }
.detail-hero { padding: 17px 19px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 5px; }
.detail-hero h3 { font-size: 30px; }
.order-tabs button { position: relative; border-radius: 4px; background: #edf2f4; }
.order-tabs button:hover { border-color: #91a7b2; background: #fff; }
.order-tabs button.active { border-color: var(--amber); box-shadow: inset 4px 0 0 var(--amber); }
.order-tabs button.active::after { content: "ORDEN ACTIVA"; position: absolute; top: 9px; right: 9px; color: var(--amber); font-family: "Cascadia Mono", Consolas, monospace; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.info-grid div { border-radius: 3px; background: #f0f4f6; border-left: 2px solid #c5d1d7; }
.reported-fault { border-color: var(--signal); background: var(--signal-soft); }
.reported-fault span { color: #9a411d; }
.authorization { border-radius: 3px; background: #fff1dc; color: #805013; }
.timeline-dot { border-radius: 2px; }
.timeline-dot.current { background: var(--amber); box-shadow: 0 0 0 4px #dce8ff; }
.action-panel { border-color: #a9bad2; box-shadow: inset 3px 0 0 var(--amber); }
.notice-panel { border-left-width: 4px; }

.client-card,
.tech-column,
.job-card,
.catalog-list li { border-radius: 4px; }
.client-card { background: #fff; }
.avatar { border-radius: 4px; background: #dfe8ed; color: #23404f; }
.avatar.tech { border-radius: 4px; }
.client-meta { color: var(--amber); }
.tech-column { background: #edf2f4; }
.tech-head { border-top: 3px solid #6e8794; }
.tech-head > strong { color: var(--amber); }
.job-card:hover { border-color: var(--amber); }
.catalog-heading > span { border-radius: 2px; background: #e8eef1; font-family: "Cascadia Mono", Consolas, monospace; }
.catalog-list li { background: #fff; }
.catalog-list button { border-radius: 3px; background: #fae9e7; }

.photo-slot { border-color: #89a0ab; border-radius: 4px; background: #f3f7f9; color: #31505f; }
.photo-slot:hover { border-color: var(--amber); background: #edf3ff; transform: translateY(-1px); }
.photo-slot .photo-icon { border-radius: 3px; background: #dce5e9; }
.photo-slot.has-photo { background: var(--brown); }

.whatsapp-info { border-top: 3px solid #25845b; }
.wa-title > span,
.wa-avatar { border-radius: 4px; }
.security-note { border-radius: 4px; background: #eef3f5; border-left: 3px solid #6d8490; }
.quick-cases button { border-radius: 4px; }
.quick-cases button:hover { border-color: #25845b; background: #f0faf5; }
.phone-shell { border: 5px solid #24353e; border-radius: 10px; background: #dfe7e3; box-shadow: 0 12px 28px rgba(14,28,36,.14); }
.phone-head { background: #1d6949; }
.chat { background-color: #e9efec; background-image: radial-gradient(rgba(36,53,62,.08) 1px, transparent 1px); }
.message,
.wa-order-card,
.chat-form input,
.chat-form button,
.wa-primary { border-radius: 4px; }
.message.user { background: #d8f2e4; }
.wa-budget { border-radius: 3px; background: #edf2f4; }

.login-page { background: #fff; }
.login-brand { align-items: center; background: var(--brown); }
.login-brand::before,
.login-brand::after { border-radius: 0; border-color: rgba(143,181,255,.14); transform: rotate(16deg); }
.login-brand::before { box-shadow: inset 10px 0 0 rgba(20,85,217,.32); }
.login-brand .eyebrow { color: #8fb5ff; }
.login-brand h1 { font-size: 54px; }
.login-brand h1 span { color: #ff8d59; }
.login-brand-inner > p:not(.eyebrow) { color: #b8c5cc; }
.login-feature > span { border-radius: 3px; background: #173b4d; color: #8fb5ff; }
.login-feature small { color: #9fb0ba; }
.login-panel { background-color: var(--cream); background-image: linear-gradient(rgba(14,28,36,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(14,28,36,.035) 1px, transparent 1px); background-size: 28px 28px; }
.login-card { border-radius: 6px; border-top: 4px solid var(--amber); box-shadow: 0 16px 38px rgba(14,28,36,.11); }
.role-card { border-radius: 4px; }
.role-card:hover { border-color: var(--amber); }
.role-card.active { border-color: var(--amber); background: #edf3ff; box-shadow: inset 0 -3px 0 var(--amber); }
.role-card > span { border-radius: 3px; background: #e2e9ed; color: #334c59; }
.role-card.active > span { background: var(--amber); color: #fff; }
.demo-credentials { border-radius: 3px; background: #edf2f4; }
.demo-credentials strong { color: var(--amber); }
.login-error { border-radius: 3px; }

.toast { border-radius: 4px; background: var(--brown); border-left: 4px solid var(--signal); }
.toast::before { color: #ff8d59; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Autenticación real mediante el proxy local privado */
.auth-loading { min-height:100vh;display:grid;place-content:center;justify-items:center;gap:9px;background:var(--cream);color:var(--ink); }
.auth-loading small { color:var(--muted); }
.auth-spinner { width:32px;height:32px;border:3px solid #d5dde1;border-top-color:var(--amber);border-radius:50%;animation:auth-spin .7s linear infinite; }
.auth-note { display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px 12px;border:1px solid #cad6dc;border-radius:4px;background:#edf2f4;color:var(--muted); }
.auth-note > span { color:var(--green);font-size:10px;line-height:1.5; }
.auth-note strong,.auth-note small { display:block; }
.auth-note strong { color:var(--ink);font-size:11px; }
.auth-note small { margin-top:2px;font-size:9px;line-height:1.45; }
.login-button:disabled { cursor:wait;opacity:.72;transform:none; }
.login-success { margin:12px 0 0;padding:10px 12px;border-left:3px solid #16865c;background:#e9f7f1;color:#145d44;font-size:11px;line-height:1.5; }
.auth-link { width:100%;margin-top:12px;border:0;background:transparent;color:var(--blue);font:700 11px/1.2 inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer; }
.auth-link:hover { color:#0b3ea8; }
.auth-link:focus-visible { outline:3px solid rgba(20,85,217,.25);outline-offset:3px; }
.auth-single-field { margin-top:22px; }
.account-security { max-width:820px;display:grid;gap:24px;padding:28px; }
.organization-profile { max-width:980px; }
.account-security h4 { margin:4px 0 8px;font-size:22px; }
.account-security > div > p:last-child { color:var(--muted);max-width:620px; }
.account-security .inline-action { align-items:end;display:grid;grid-template-columns:minmax(260px,1fr) auto; }
.account-security .security-note { margin:0; }
.user-layout { display:grid;grid-template-columns:minmax(340px,.82fr) minmax(520px,1.18fr);gap:18px;align-items:start; }
.user-create { border-top:3px solid var(--amber); }
.user-create .security-note { margin:0; }
.user-matrix { padding:0;overflow:hidden; }
.user-matrix > .panel-heading { padding:22px 24px;border-bottom:1px solid var(--line); }
.user-list { display:grid; }
.user-row { display:grid;grid-template-columns:34px minmax(180px,1.25fr) minmax(125px,.8fr) auto auto;gap:13px;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line);background:#fff; }
.user-row:last-child { border-bottom:0; }
.user-row > div strong,.user-row > div small { display:block; }
.user-row > div small { margin-top:3px;color:var(--muted);font-size:10px; }
.user-role-mark { width:30px;height:30px;display:grid;place-items:center;border-radius:3px;background:#e4ebef;color:#284350;font:800 12px/1 "Cascadia Mono",Consolas,monospace; }
.user-role-mark.administracion { background:#dce8ff;color:#1548a5; }
.user-role-mark.recepcion { background:#fff0dc;color:#9b4c12; }
.user-role-mark.tecnico { background:#e2f2e9;color:#176842; }
.current-user { color:var(--muted);font-size:10px;font-weight:700;white-space:nowrap; }
.row-actions { display:flex;align-items:center;justify-content:flex-end;gap:6px; }
.client-card .row-actions { flex:0 0 auto; }
.field[hidden] { display:none; }
.delivery-queue .toolbar { align-items:center; }
.queue-count { padding:7px 10px;border:1px solid #cbd6dc;border-radius:3px;background:#edf2f4;color:#405762;font:700 10px/1.2 "Cascadia Mono",Consolas,monospace;white-space:nowrap; }
.aging-alert { display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 18px 16px;padding:12px 14px;border-left:4px solid var(--signal);background:#fff0e8;color:#87401f; }
.aging-alert strong { font-size:12px; }
.aging-alert span { font-size:10px; }
.checkout-focus { display:grid;grid-template-columns:minmax(300px,.72fr) minmax(460px,1.28fr);gap:18px;align-items:start; }
.checkout-identity,.checkout-form { padding:24px; }
.checkout-identity { position:sticky;top:18px;border-top:3px solid var(--green); }
.checkout-form { border-top:3px solid var(--amber); }
.warranty-reentry { max-width:900px;border-top:3px solid var(--green); }
.warranty-reentry>.notice-panel { grid-column:1/-1;margin:0 0 16px; }
.warranty-reentry .form-footer { gap:22px; align-items:center; }
.warranty-reentry .form-footer>div { min-width:0; }
.warranty-reentry .form-footer span { line-height:1.45; }
.warranty-reentry .primary { white-space:nowrap; }
.photo-slot.read-only { cursor:default; }
.report-filter { display:flex; justify-content:space-between; align-items:center; gap:28px; padding:22px 24px; border-top:3px solid var(--signal); }
.report-filter h4 { margin:4px 0; }
.report-filter small { color:var(--muted); }
.report-dates { display:grid; grid-template-columns:repeat(2,minmax(150px,1fr)); gap:12px; min-width:340px; }
.report-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:16px 0; }
.report-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:16px; }
.report-chart,.report-table,.report-notes { padding:22px 24px; }
.bar-list { display:grid; gap:13px; margin-top:18px; }
.bar-row>div:first-child { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; }
.bar-row strong { color:var(--ink); }
.bar-track { height:9px; background:#edf0f1; border-radius:999px; overflow:hidden; margin-top:6px; }
.bar-fill { display:block; height:100%; border-radius:999px; background:var(--ink); }
.bar-fill.green { background:var(--green); }.bar-fill.blue { background:#2d6cdf; }.bar-fill.amber { background:#d58b22; }.bar-fill.purple { background:#8155b4; }.bar-fill.orange { background:#d86e29; }.bar-fill.red { background:#bd4c46; }.bar-fill.dark { background:#33434e; }
.mini-table { margin-top:17px; font-size:12px; }
.mini-head,.mini-row { display:grid; grid-template-columns:minmax(0,1fr) 75px 75px; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
.mini-head { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.mini-row span { color:var(--muted); }
.report-notes { display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:20px; }
.insight-list { display:flex; flex-wrap:wrap; gap:10px; }
.insight-list p { padding:10px 13px; margin:0; border:1px solid var(--line); background:#fbfcfc; color:var(--muted); }
.insight-list strong { color:var(--ink); font-size:18px; margin-right:4px; }
.notice-panel button { margin-top:12px; }
.notice-panel small { display:block;margin-top:9px;color:var(--muted); }
@media(max-width:680px){.account-security .inline-action{grid-template-columns:1fr}.account-security .inline-action button{width:100%}}
@media(max-width:760px){.report-grid{grid-template-columns:1fr}.report-filter,.report-notes{align-items:stretch;flex-direction:column}.report-dates{grid-template-columns:1fr;min-width:0;width:100%}.report-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.warranty-reentry .form-footer{align-items:stretch;flex-direction:column}.warranty-reentry .primary{width:100%;white-space:normal}}
@media(max-width:760px){.catalog-card .catalog-form{grid-template-columns:1fr}.catalog-card .catalog-form .primary{width:100%}}
@media(max-width:1100px){.user-layout{grid-template-columns:1fr}.user-row{grid-template-columns:34px minmax(170px,1fr) minmax(120px,.8fr) auto auto}}
@media(max-width:980px){.checkout-focus{grid-template-columns:1fr}.checkout-identity{position:static}.aging-alert{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.user-row{grid-template-columns:34px 1fr auto}.user-area{grid-column:2}.user-row>.badge{grid-column:3;grid-row:1}.user-row>.row-actions{grid-column:3;grid-row:2}}
@keyframes auth-spin { to { transform:rotate(360deg); } }

/* Patrón común de formularios: la tarjeta de Usuarios del taller es la
   referencia visual para cualquier captura o edición interna. */
.form-section,
.account-security,
.organization-profile,
.catalog-card,
.checkout-identity,
.checkout-form,
.warranty-reentry,
.report-filter {
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber);
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--shadow);
}
.form-section { padding: 24px; }
.form-section > form { margin-top: 0; }
.form-section .step-title { margin-bottom: 22px; }
.form-section .step-title > span { background: var(--amber); border-radius: 3px; }
.form-section .security-note,
.form-section .notice-panel { border-radius: 3px; }
.form-section .button-pair,
.form-section .align-right { justify-content: flex-end; }
.catalog-card { padding: 22px 24px; }
.catalog-card .catalog-heading { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.catalog-card .catalog-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: end; margin: 18px 0; }
.account-security,
.organization-profile,
.checkout-identity,
.checkout-form,
.warranty-reentry { padding: 24px; }
.checkout-identity { border-top-color: var(--green); }
.warranty-reentry { border-top-color: var(--green); }
.report-filter { border-top-color: var(--signal); }
.records-form { padding:24px; overflow:hidden; border-top-color:var(--amber); }
.records-title { align-items:center; }
.records-title > div { min-width:0; }
.records-title > .queue-count { margin-left:auto; font-weight:700; }
.records-form > .toolbar { margin:0 0 18px; padding:0; background:transparent; border:0; }
.records-form .orders-table { overflow:hidden; border:1px solid var(--line); border-radius:4px; background:#fff; }
.records-form .table-head { padding:11px 14px; background:#f7f9fa; border-bottom:1px solid var(--line); }
.records-form .table-row:first-of-type { border-top:0; }
.orders-workspace,
.delivery-queue,
.history-records { border-top-color:var(--amber); }
.delivery-workspace { align-items: start; }
.delivery-intro { grid-column: 1/-1; display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border:1px solid var(--line); border-top:3px solid var(--amber); border-radius:4px; background:#fff; box-shadow:var(--shadow); }
.delivery-intro h4 { margin:4px 0; }
.delivery-intro span { color:var(--muted); font-size:11px; }
.delivery-card { border-top:3px solid var(--green); border-radius:4px; padding:22px 24px; box-shadow:var(--shadow); }
.delivery-card .panel-heading { margin-bottom:2px; }
@media(max-width:760px){.records-title{align-items:flex-start;flex-wrap:wrap}.records-title>.queue-count{margin-left:42px}.records-form>.toolbar{align-items:stretch}.records-form .search{width:100%;min-width:0}}

@media (max-width: 680px) {
  .main { padding-inline: 18px; }
  .topbar { padding-inline: 18px; }
  .hero { border-bottom: 0; }
  .detail-hero { align-items: flex-start; gap: 14px; }
}