/* SUI — Sistema Unificado de Invernada · mock styles
   Colors, paddings and font shorthands are taken verbatim from the design
   prototype (project/SUI Screens.dc.html + Sidebar/Topbar). */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #e9edf1;
  font-family: 'IBM Plex Sans', sans-serif;
  color: #16202c;
}
button { font-family: inherit; }
table { border-collapse: collapse; }

.mono { font-family: 'IBM Plex Mono', monospace; }

/* ---------- App shell ---------- */
.app {
  display: flex;
  height: 100vh;
  min-width: 1180px;
  overflow: hidden;
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #f6f7f9;
}
.content {
  flex: 1;
  min-height: 0;
  padding: 22px;
  overflow: auto;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 236px;
  flex: none;
  align-self: stretch;
  background: #13283c;
  display: flex;
  flex-direction: column;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 15px; }
.sb-logo {
  width: 34px; height: 34px; border-radius: 8px; background: #B5532A;
  display: flex; align-items: center; justify-content: center;
  font: 700 14px 'IBM Plex Sans'; color: #fff;
}
.sb-brand-title { font: 700 14px 'IBM Plex Sans'; color: #fff; letter-spacing: .02em; }
.sb-brand-sub { font: 500 11px 'IBM Plex Sans'; color: #7d93a8; }
.sb-divider { height: 1px; background: #22405a; margin: 0 16px 6px; }
.sb-nav { display: flex; flex-direction: column; gap: 1px; padding: 4px 12px; flex: 1; overflow: auto; }
.sb-group { font: 600 10px 'IBM Plex Sans'; letter-spacing: .13em; color: #5d748c; padding: 9px 10px 5px; }
.sb-group + .sb-group, .sb-nav .sb-item + .sb-group { padding-top: 11px; }
.sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; border-radius: 7px;
  font: 500 13px 'IBM Plex Sans'; text-decoration: none;
  color: #a9bccd; background: transparent; cursor: pointer; border: none; text-align: left;
}
.sb-item:hover { color: #d6e2ec; }
.sb-item.active {
  color: #fff; background: #21405b; box-shadow: inset 3px 0 0 #B5532A;
}
.sb-user { display: flex; align-items: center; gap: 10px; padding: 11px 18px 16px; }
.sb-user-av {
  width: 30px; height: 30px; border-radius: 50%; background: #21405b;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px 'IBM Plex Sans'; color: #cfe0ee;
}
.sb-user-name { font: 600 12px 'IBM Plex Sans'; color: #e7eef4; }
.sb-user-role { font: 500 11px 'IBM Plex Sans'; color: #7d93a8; }

/* ---------- Topbar ---------- */
.topbar {
  height: 58px; flex: none; background: #fff; border-bottom: 1px solid #e2e6eb;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
}
.tb-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tb-crumb { font: 500 13px 'IBM Plex Sans'; color: #8a97a6; white-space: nowrap; }
.tb-negocio {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 12px; background: #f3f5f8; border: 1px solid #e2e6eb; border-radius: 8px;
}
.tb-negocio-id { font: 600 12px 'IBM Plex Mono'; color: #1B4965; }
.tb-right { display: flex; align-items: center; gap: 14px; }
.tb-search {
  display: flex; align-items: center; gap: 9px; width: 236px; height: 34px; padding: 0 12px;
  background: #f3f5f8; border: 1px solid #e2e6eb; border-radius: 8px;
}
.tb-search span { font: 400 13px 'IBM Plex Sans'; color: #9aa6b4; }
.tb-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #1B4965;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px 'IBM Plex Sans'; color: #fff;
}

/* ---------- Screens ---------- */
.screen { display: none; }
.screen.active { display: block; }

/* ---------- Generic building blocks ---------- */
.card { background: #fff; border: 1px solid #e2e6eb; border-radius: 10px; }
.card-hd {
  padding: 11px 16px; border-bottom: 1px solid #eef1f4;
  font: 600 13px 'IBM Plex Sans'; color: #1a2330;
}
.card-hd.flex { display: flex; align-items: center; justify-content: space-between; }

.section-title { font: 600 19px 'IBM Plex Sans'; color: #16202c; }
.section-sub { font: 400 13px 'IBM Plex Sans'; color: #7a8694; margin-top: 2px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }

/* Form fields */
.label { font: 500 11px 'IBM Plex Sans'; color: #7a8694; margin-bottom: 5px; display: block; }
.field {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 11px; background: #fbfcfd; border: 1px solid #dfe4ea; border-radius: 7px;
  font: 500 13px 'IBM Plex Sans'; color: #1a2330;
}
.field.m { font-family: 'IBM Plex Mono'; }
.field.ro { background: #eef3f7; border-color: #d4e1ea; }
.field.ro.m { font-weight: 600; color: #1B4965; }
.field .u { font: 500 11px 'IBM Plex Sans'; color: #9aa6b4; }

/* Key/value rows */
.kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f2f5; }
.kv:last-child { border-bottom: none; }
.kv-k { font: 500 13px 'IBM Plex Sans'; color: #5b6776; }
.kv-v { font: 600 13px 'IBM Plex Mono'; color: #33414f; }

/* KPI tiles */
.kpi { background: #fff; border: 1px solid #e2e6eb; border-radius: 10px; padding: 13px 14px; }
.kpi-lbl { font: 500 11px 'IBM Plex Sans'; color: #8a97a6; }
.kpi-val { font: 700 22px 'IBM Plex Mono'; color: #16202c; margin-top: 4px; }
.kpi-val .u { font: 500 12px 'IBM Plex Sans'; color: #9aa6b4; }

/* Info note */
.note {
  padding: 9px 11px; background: #f3f7fa; border: 1px solid #dbe7ef; border-radius: 8px;
  font: 400 11.5px 'IBM Plex Sans'; color: #496074; line-height: 1.45;
}

/* Alert banners */
.alert {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; background: #fdecea; border: 1px solid #f3c9c4; border-radius: 9px;
}
.alert span { font: 500 13px 'IBM Plex Sans'; color: #8f2018; }
.alert b { font-weight: 600; }

/* Status pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font: 600 11px 'IBM Plex Sans'; white-space: nowrap;
}
.pill--green { background: #e6f3ec; color: #1f7a4d; border: 1px solid #c2e3d0; }
.pill--amber { background: #fbf2dd; color: #9a6605; border: 1px solid #f0dca8; }
.pill--red   { background: #fbe9e7; color: #b3261e; border: 1px solid #f3c9c4; }
.pill--blue  { background: #e5eef3; color: #1B4965; border: 1px solid #c3d6e1; }
.pill--gray  { background: #eef1f4; color: #5b6776; border: 1px solid #dfe4ea; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Small square tags (table source labels) */
.tag {
  display: inline-flex; padding: 2px 8px; border-radius: 6px; font: 600 11px 'IBM Plex Sans';
}
.tag--blue  { background: #eef3f7; color: #1B4965; }
.tag--brown { background: #f3f0ec; color: #8a5a2b; }
.tag--gray  { background: #eef1f4; color: #5b6776; }
.tag--amber { background: #fbf2dd; color: #9a6605; }
.tag--green { background: #e6f3ec; color: #1f7a4d; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font: 600 11px 'IBM Plex Sans'; color: #8a97a6; text-align: left;
  padding: 9px 16px; border-bottom: 1px solid #e2e6eb;
  text-transform: uppercase; letter-spacing: .03em;
}
.tbl td {
  font: 500 13px 'IBM Plex Sans'; color: #33414f;
  padding: 10px 16px; border-bottom: 1px solid #f0f2f5;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl .m { font-family: 'IBM Plex Mono'; }
.tbl .r { text-align: right; }
.tbl .c { text-align: center; }
.tbl tr.total td { background: #fafbfc; }
.tbl tr.total td { font-weight: 600; }

/* Buttons */
.btn {
  height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  font: 600 13px 'IBM Plex Sans';
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn--primary { border: 1px solid #1B4965; background: #1B4965; color: #fff; }
.btn--default { border: 1px solid #d3dae1; background: #fff; color: #33414f; }
.btn--muted   { border: 1px solid #e4e8ec; background: #fff; color: #8a97a6; }
.btn--danger  { border: 1px solid #f0c8c3; background: #fff; color: #b3261e; }
.btn--block { width: 100%; height: 38px; }

/* Layout helpers */
.col { display: flex; flex-direction: column; }
.gap14 { gap: 14px; }
.gap13 { gap: 13px; }
.gap9 { gap: 9px; }
.flexstretch { display: flex; gap: 14px; align-items: stretch; }
.mb16 { margin-bottom: 16px; }
.mt14 { margin-top: 14px; }
.mt16 { margin-top: 16px; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
.grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }

/* Placeholder screen */
.placeholder {
  display: flex; align-items: center; justify-content: center; height: 100%;
}
.placeholder .card { padding: 40px 56px; text-align: center; max-width: 420px; }
.placeholder h2 { font: 600 18px 'IBM Plex Sans'; color: #16202c; margin: 14px 0 6px; }
.placeholder p { font: 400 13px 'IBM Plex Sans'; color: #7a8694; margin: 0; line-height: 1.5; }