:root {
  --signature-height: 24px;
  --topbar-height: 64px;
  --sidebar-width: 244px;
  --bg: #07101b;
  --bg-soft: #0a1421;
  --surface: #0e1a29;
  --surface-raised: #122235;
  --surface-input: #091522;
  --line: #22344a;
  --line-soft: #18283b;
  --text: #e8eef7;
  --muted: #93a4b9;
  --primary: #2f6fdf;
  --primary-strong: #1e5fcf;
  --cyan: #28a9ba;
  --green: #1f9d69;
  --amber: #d99421;
  --red: #ce4b52;
  --shadow: 0 12px 30px rgba(1, 8, 18, .22);
  color: var(--text);
  background: var(--bg);
  color-scheme: dark;
  font-family: "Segoe UI Variable", "Segoe UI", Inter, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.42;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding-top: var(--signature-height);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% -10%, rgba(36, 95, 168, .10), transparent 32rem),
    var(--bg);
}

button,
input,
select { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

button,
summary { user-select: none; }

.hidden { display: none !important; }

h1,
h2,
h3,
p { margin-top: 0; }

h1,
h2,
h3 { color: #f6f9fd; letter-spacing: -.025em; }

h1 { font-size: clamp(2.15rem, 4vw, 3.8rem); line-height: 1.05; }
h2 { margin-bottom: .25rem; font-size: clamp(1.42rem, 2.2vw, 1.85rem); line-height: 1.15; }
h3 { margin-bottom: .65rem; font-size: 1.03rem; line-height: 1.25; }

.developer-signature {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--signature-height);
  padding-top: env(safe-area-inset-top, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  overflow: hidden;
  background: #050c14;
  border-bottom: 1px solid rgba(116, 148, 185, .16);
  color: rgba(235, 243, 252, .72);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .055em;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.developer-signature-mark {
  width: .38rem;
  height: .38rem;
  flex: 0 0 auto;
  transform: rotate(45deg);
  border: 1px solid #4db8c6;
  border-radius: 1px;
}

.eyebrow,
.product-label {
  display: inline-block;
  margin-bottom: .4rem;
  color: #6fc8d3;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .115em;
  text-transform: uppercase;
}

.muted { color: var(--muted); font-size: .82rem; }
.generated-code { min-height: 42px; padding: .7rem .8rem; border: 1px dashed var(--line); border-radius: .55rem; color: #9fc5ff; background: var(--surface-input); }
.production-folder,.production-order { margin: .65rem; border: 1px solid var(--line); border-radius: .7rem; overflow: hidden; background: var(--surface); }
.production-folder > summary,.production-order > summary { display:flex; align-items:center; gap:.65rem; padding:.85rem 1rem; cursor:pointer; list-style:none; }
.production-folder > summary span:last-child,.production-order > summary span:last-child { margin-left:auto; color:var(--muted); font-size:.8rem; }
.production-order { background:var(--surface-raised); }
.folder-orders,.order-full-detail { padding:.2rem .45rem .65rem; }
.order-full-detail > p { margin:.65rem; color:var(--muted); }
.folder-icon { font-size:1.05rem; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; }

/* Login */

.login-shell {
  min-height: calc(100dvh - var(--signature-height));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  background: var(--bg);
}

.login-brand-panel {
  position: relative;
  min-height: calc(100dvh - var(--signature-height));
  padding: clamp(2rem, 5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(9, 27, 47, .88), rgba(5, 16, 29, .96)),
    linear-gradient(135deg, #102d50, #07111e 68%);
  border-right: 1px solid rgba(77, 123, 174, .20);
}

.login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(91, 135, 181, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 135, 181, .12) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(135deg, #000, transparent 72%);
  pointer-events: none;
}

.login-brand-panel::after {
  content: "";
  position: absolute;
  right: -8rem;
  bottom: -10rem;
  width: 30rem;
  height: 30rem;
  border: 1px solid rgba(65, 153, 184, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(39, 104, 144, .035), 0 0 0 9rem rgba(39, 104, 144, .025);
}

.login-brand-content { position: relative; z-index: 1; max-width: 43rem; }

.login-brand-logo {
  width: min(19rem, 62%);
  max-height: 6rem;
  margin: 1.5rem 0 3rem;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.login-brand-content h1 { margin-bottom: 1.4rem; max-width: 40rem; font-weight: 650; }

.login-brand-content > p {
  max-width: 39rem;
  margin-bottom: 2rem;
  color: #aebed0;
  font-size: 1.03rem;
  line-height: 1.65;
}

.login-capabilities { display: flex; flex-wrap: wrap; gap: .7rem 1.35rem; color: #d2deeb; font-size: .82rem; }
.login-capabilities span { display: flex; align-items: center; gap: .48rem; }
.login-capabilities i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(40, 169, 186, .10); }

.login-brand-foot {
  position: absolute;
  left: clamp(2rem, 5vw, 5.5rem);
  bottom: 1.6rem;
  z-index: 1;
  color: rgba(189, 207, 225, .45);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .09em;
}

.login-access-panel {
  min-height: calc(100dvh - var(--signature-height));
  padding: 2rem;
  display: grid;
  place-items: center;
  background: #09131f;
}

.login-card { position: relative; width: min(100%, 27rem); padding: 2rem; }
.phone-view-control { display: none; }
html.phone-device .phone-view-control { display: block; }
.login-view-menu { position: absolute; top: .7rem; right: .7rem; z-index: 4; }
.login-view-menu summary { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: .55rem; background: #0b1928; color: #b8c8da; font-size: 1.35rem; line-height: 1; cursor: pointer; list-style: none; }
.login-view-menu summary::-webkit-details-marker { display: none; }
.login-view-menu[open] summary { border-color: #37649a; background: #142a43; color: #fff; }
.login-view-menu button { position: absolute; top: 2.6rem; right: 0; width: max-content; min-height: 2.35rem; padding: .5rem .75rem; border: 1px solid #2a4058; border-radius: .55rem; background: #102238; color: #e8eef7; font: inherit; font-size: .75rem; font-weight: 700; box-shadow: var(--shadow); cursor: pointer; }
.login-mobile-brand { display: none; }
.login-heading { margin-bottom: 1.65rem; }
.login-heading h2 { margin-bottom: .55rem; font-size: 1.75rem; }
.login-heading p { margin-bottom: 0; color: var(--muted); }
.login-form { display: grid; gap: .9rem; }
.field-group { min-width: 0; }
.login-submit { margin-top: .35rem; }
.local-apk-download {
  margin-top: .8rem;
  padding: .72rem .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12rem;
  border: 1px solid #294766;
  border-radius: .55rem;
  background: rgba(20, 42, 67, .45);
  color: #d9e8f8;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.local-apk-download small { color: #8298b0; font-size: .65rem; font-weight: 500; }
.local-apk-download:hover { border-color: #3f6f9f; background: #142a43; color: #fff; }
.login-security { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); color: #75879c; font-size: .72rem; text-align: center; }
.login-security span { margin-right: .35rem; color: var(--green); font-size: .62rem; }
.form-status { min-height: 1.4rem; margin: .65rem 0 0; color: #f2a0a4; font-size: .82rem; }

/* Application shell */

.top {
  position: fixed;
  top: var(--signature-height);
  right: 0;
  left: 0;
  z-index: 30;
  height: var(--topbar-height);
  padding: 0 1.15rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(9, 20, 33, .97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(1, 8, 18, .16);
  backdrop-filter: blur(14px);
}

.app-brand { min-width: calc(var(--sidebar-width) - 1.15rem); display: flex; align-items: center; gap: .75rem; }
.app-brand img { width: 8.7rem; height: 2.5rem; object-fit: contain; object-position: left center; }
.app-brand > div { padding-left: .75rem; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.app-brand strong { color: #dfe8f4; font-size: .78rem; font-weight: 700; }
.app-brand span { color: #73859a; font-size: .66rem; }

.server-state { display: flex; align-items: center; gap: .55rem; color: #a8bacd; }
.server-state i,
.sidebar-status i { width: .5rem; height: .5rem; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(31, 157, 105, .10); }
.server-state > div { display: flex; flex-direction: column; }
.server-state strong { color: #cfdbe8; font-size: .7rem; font-weight: 700; }
.server-state span { max-width: 18rem; overflow: hidden; color: #7f93a9; font: .68rem/1.25 "Cascadia Mono", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.spacer { flex: 1; }
.session-user { min-width: 0; display: flex; flex-direction: column; text-align: right; }
.who { max-width: 24rem; overflow: hidden; color: #e4ebf4; font-size: .78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.session-user small { color: #708399; font-size: .65rem; }

.icon-button {
  width: 2.45rem;
  height: 2.45rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: #0c1928;
  color: var(--text);
  cursor: pointer;
}

.mobile-menu-button { display: none; align-content: center; gap: .24rem; }
.mobile-menu-button span { width: 1rem; height: 1px; display: block; background: #c2cfdd; }
.mobile-menu-button .menu-dots { width: auto; height: auto; background: none; color: #c2cfdd; font-size: 1.5rem; line-height: 1; }

.app-layout { min-height: calc(100dvh - var(--signature-height)); padding-top: var(--topbar-height); }

.sidebar {
  position: fixed;
  top: calc(var(--signature-height) + var(--topbar-height));
  bottom: 0;
  left: 0;
  z-index: 20;
  width: var(--sidebar-width);
  padding: .85rem .72rem .75rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #091522;
  border-right: 1px solid var(--line);
}

.nav { display: flex; flex: 1; flex-direction: column; gap: .16rem; }
.nav-group-label { margin: .85rem .7rem .32rem; color: #60758c; font-size: .61rem; font-weight: 800; letter-spacing: .11em; }
.nav-group-label:first-child { margin-top: .2rem; }

.nav-item {
  position: relative;
  width: 100%;
  min-height: 2.55rem;
  padding: .42rem .62rem;
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  background: transparent;
  color: #9fb0c3;
  font-size: .79rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.nav-item:hover { background: rgba(28, 52, 79, .55); color: #e2eaf3; }
.nav-item.active { background: #142a43; border-color: #264668; color: #f5f8fc; }
.nav-item.active::before { content: ""; position: absolute; top: .52rem; bottom: .52rem; left: -.73rem; width: 3px; border-radius: 0 3px 3px 0; background: #4a8cf0; }

.nav-code {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid #2a4058;
  border-radius: .42rem;
  background: #0b1928;
  color: #78a5d8;
  font-size: .57rem;
  font-weight: 850;
  letter-spacing: .03em;
}

.nav-item.active .nav-code { border-color: #37649a; background: #183a60; color: #b8d6f7; }
.local-apk-nav { text-decoration: none; }
.chat-nav-button.has-unread { color: #fff; }
.sidebar-view-mode { margin-top: .45rem; padding-top: .55rem; border-top: 1px solid var(--line-soft); }
.sidebar-view-mode .nav-item { color: #b6c6d8; }

.sidebar-foot { margin-top: .8rem; padding: .8rem .7rem .15rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line-soft); }
.sidebar-foot small { color: #5f7288; font-size: .61rem; }
.sidebar-status { display: inline-flex; align-items: center; gap: .42rem; color: #8598ae; font-size: .67rem; }
.sidebar-status i { width: .38rem; height: .38rem; box-shadow: none; }

.workspace {
  width: calc(100% - var(--sidebar-width));
  min-height: calc(100dvh - var(--signature-height) - var(--topbar-height));
  margin-left: var(--sidebar-width);
  padding: 1.45rem clamp(1rem, 2.15vw, 2.25rem) 3rem;
}

.nav-overlay,
.mobile-dock { display: none; }

/* Reusable components */

.btn {
  min-height: 2.45rem;
  padding: .54rem .88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid transparent;
  border-radius: .52rem;
  background: var(--primary);
  color: #fff;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.btn:hover { background: #397cea; }
.btn:active { transform: translateY(1px); }
.btn.red,
.btn.danger { background: #a83b43; border-color: #c25159; }
.btn.red:hover,
.btn.danger:hover { background: #b9444c; }
.btn.green { background: #197d56; border-color: #24966a; }
.btn.green:hover { background: #1f8b61; }
.btn.gray,
.btn.ghost { background: #101f30; border-color: #2a3d53; color: #c7d3df; }
.btn.gray:hover,
.btn.ghost:hover { background: #172b41; border-color: #3a5878; color: #fff; }
.btn.small { min-height: 2.05rem; padding: .4rem .66rem; font-size: .72rem; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn:focus-visible,
.icon-button:focus-visible,
.nav-item:focus-visible,
.mobile-dock button:focus-visible,
input:focus-visible,
select:focus-visible,
.file-button:focus-visible,
summary:focus-visible {
  outline: 2px solid #75aaf2;
  outline-offset: 2px;
}

.card {
  margin: 0 0 .85rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .72rem;
  box-shadow: var(--shadow);
}

.action-card { border-top-color: #315579; }
.data-card { padding-bottom: .75rem; }
.narrow { max-width: 42rem; }
.account-card { padding: 1.2rem; }

.card-head { margin-bottom: .8rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card-head h3 { margin-bottom: .18rem; }
.card-head p { margin-bottom: 0; }

.section { display: none; max-width: 1680px; margin: 0 auto; }
.section.active { display: block; animation: section-in .18s ease-out; }

@keyframes section-in {
  from { opacity: .45; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-title { min-height: 3.8rem; margin: 0 0 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.section-title p { margin: 0; color: var(--muted); font-size: .84rem; }
.dashboard-title { align-items: center; }
.context-chip { padding: .38rem .65rem; border: 1px solid #2b4968; border-radius: 999px; background: #102237; color: #9bbddd; font-size: .69rem; font-weight: 750; }

.grid { display: grid; gap: .72rem; }

.process-strip {
  margin-bottom: .85rem;
  padding: .7rem .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  overflow-x: auto;
  background: #0a1725;
  border: 1px solid var(--line);
  border-radius: .65rem;
  color: #a8b7c8;
  scrollbar-width: thin;
}

.process-strip span { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .38rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.process-strip b { color: #72afd9; font-size: .63rem; }
.process-strip i { width: clamp(1rem, 3vw, 3rem); height: 1px; flex: 0 1 3rem; background: #29425e; }

.kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: .85rem; }
.kpi {
  position: relative;
  min-width: 0;
  min-height: 7.2rem;
  padding: .85rem .9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .68rem;
  box-shadow: 0 8px 20px rgba(1, 8, 18, .16);
}

.kpi::after { content: ""; position: absolute; right: -1.2rem; bottom: -1.65rem; width: 5rem; height: 5rem; border: 1px solid rgba(74, 140, 240, .10); border-radius: 50%; }
.kpi span,
.kpi-label { color: #aab8c8; font-size: .71rem; font-weight: 650; }
.kpi b { margin: .28rem 0 0; overflow-wrap: anywhere; color: #8ebbf1; font-size: 1.7rem; line-height: 1.05; }
.kpi small { color: #64768b; font-size: .65rem; }

.local-card { border-color: #23545a; background: linear-gradient(135deg, rgba(16, 46, 52, .65), var(--surface) 62%); }
.dashboard-local { padding: 1.1rem 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .85fr); align-items: center; gap: 1.5rem; }
.dashboard-local h3 { margin-bottom: .35rem; }
.dashboard-local p { margin-bottom: 0; color: #9cabbc; font-size: .8rem; }

.address {
  margin: .35rem 0;
  padding: .65rem .75rem;
  overflow-wrap: anywhere;
  background: #06131b;
  border: 1px solid #24636a;
  border-radius: .5rem;
  color: #71d1bd;
  font: 700 .92rem/1.35 "Cascadia Mono", Consolas, monospace;
}

.notice { margin-bottom: .8rem; padding: .7rem .85rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border-radius: .62rem; }
.notice > div { display: flex; flex-direction: column; }
.notice strong { font-size: .79rem; }
.notice span { font-size: .72rem; opacity: .82; }
.notice.warning { background: #34240f; border: 1px solid #8b6429; color: #ffe6b2; }
.notice.danger { background: #32161a; border: 1px solid #884149; color: #ffd0d3; }

/* Forms */

label { display: block; margin: .35rem 0 .24rem; color: #b7c5d4; font-size: .72rem; font-weight: 700; }

input,
select {
  width: 100%;
  min-height: 2.42rem;
  padding: .5rem .65rem;
  border: 1px solid #2b4058;
  border-radius: .48rem;
  background: var(--surface-input);
  color: #f0f5fa;
  font-size: .8rem;
}

input::placeholder { color: #5f7287; }
input:hover,
select:hover { border-color: #395774; }
input:focus,
select:focus { border-color: #4c83c8; background: #0b1928; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .7rem; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-two { grid-column: span 2; }
.two-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.two-cols > .card { margin-bottom: .85rem; }
.field-compact { max-width: 28rem; margin-bottom: .55rem; }
.form-actions { margin-top: .75rem; display: flex; align-items: center; gap: .75rem; }
.inline-submit { margin-top: .55rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .65rem; }
.inline-submit.compact { grid-template-columns: minmax(15rem, .42fr) auto; justify-content: start; }

/* Tables */

.tablewrap { max-width: 100%; overflow: auto; border: 1px solid var(--line-soft); border-radius: .52rem; scrollbar-color: #38516c #0a1522; }
table { width: 100%; min-width: 44rem; border-collapse: collapse; background: #0b1724; }
th,
td { padding: .56rem .62rem; border-bottom: 1px solid #1c2d41; text-align: left; vertical-align: top; font-size: .77rem; }
th { position: sticky; top: 0; z-index: 1; background: #101f30; color: #92aac1; font-size: .66rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(40, 69, 99, .18); }
.empty { margin: 0; padding: 1.5rem; color: #718399; font-size: .8rem; text-align: center; }
.actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.order-code { color: #8bbafa; font-weight: 750; }
.order-selected { outline: 1px solid #4b8ee6; outline-offset: -1px; background: #10243b; }
.task-items { margin-top: .35rem; white-space: nowrap; line-height: 1.5; }
.status { font-weight: 750; }
.NO-INICIADO { color: #e46c71; }
.EN-PROCESO { color: #e8a34a; }
.CULMINADO { color: #55c68e; }
.negative { color: #ef767b; font-weight: 750; }

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: .1rem .4rem;
  border: 1px solid #30475f;
  border-radius: 999px;
  background: #142235;
  color: #aebfd1;
  font-size: .62rem;
  font-weight: 700;
}

/* Chat */

.chat-alert { margin-bottom: .9rem; overflow: hidden; border: 1px solid #b84c53; border-left: 4px solid #e15a62; border-radius: .62rem; background: linear-gradient(90deg, #3a171c, #23151b); box-shadow: 0 10px 24px rgba(5, 7, 15, .28); }
.chat-alert-button { width: 100%; padding: .7rem .85rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; }
.chat-alert-button > span:nth-child(2) { display: flex; flex-direction: column; }
.chat-alert-button strong { font-size: .82rem; }
.chat-alert-button small { color: #d9a6aa; font-size: .67rem; }
.chat-alert-button > b { color: #f5c3c6; font-size: .7rem; }

.apk-request-alert {
  margin-bottom: .9rem;
  padding: .75rem .85rem;
  border: 1px solid #d28b24;
  border-left: 4px solid #f0a52f;
  border-radius: .62rem;
  background: linear-gradient(100deg, #3b260d, #21180f);
  box-shadow: 0 10px 24px rgba(5, 7, 15, .3);
}
.apk-request-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; }
.apk-request-head > div { display: flex; flex-direction: column; }
.apk-request-head strong { color: #fff3dc; font-size: .82rem; letter-spacing: .015em; }
.apk-request-head small { color: #d8bd91; font-size: .68rem; }
.apk-request-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .5rem; background: #b66e12; color: #fff; font-size: .66rem; font-weight: 900; }
.apk-request-list { margin-top: .65rem; display: grid; gap: .5rem; }
.apk-request-item { padding: .62rem .7rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; border: 1px solid rgba(255, 213, 146, .24); border-radius: .52rem; background: rgba(10, 17, 26, .68); }
.apk-request-item strong { display: block; color: #fff; font-size: .78rem; }
.apk-request-item small { display: block; margin-top: .12rem; color: #b8a687; font-size: .65rem; }
.apk-request-actions { display: flex; gap: .45rem; }

/* Primera instalación Android por LAN */

.installer-body { display: grid; min-height: 100dvh; }
.installer-shell { width: 100%; min-height: calc(100dvh - var(--signature-height)); padding: 1.2rem; display: grid; place-items: center; }
.installer-card { width: min(100%, 31rem); padding: 1.7rem; border: 1px solid #263b52; border-radius: .9rem; background: linear-gradient(160deg, #112238, #0a1522 58%); box-shadow: 0 22px 58px rgba(0, 0, 0, .32); text-align: center; }
.installer-logo { width: min(15rem, 70vw); height: 4.6rem; margin: 0 auto 1.1rem; display: block; object-fit: contain; }
.installer-card h1 { margin-bottom: .7rem; font-size: clamp(1.6rem, 5vw, 2.15rem); }
.installer-intro { margin: 0 auto 1.15rem; max-width: 27rem; color: var(--muted); font-size: .85rem; }
.installer-state { padding: .85rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; border: 1px solid #294867; border-radius: .65rem; background: #0b1a2a; text-align: left; }
.installer-state > div { display: flex; flex-direction: column; }
.installer-state strong { color: #f5f8fc; font-size: .88rem; }
.installer-state small { margin-top: .15rem; color: #91a8bf; font-size: .71rem; }
.installer-state.authorized,
.installer-state.complete { border-color: #317d62; background: #0d2a22; }
.installer-state.rejected,
.installer-state.error { border-color: #93464d; background: #32171c; }
.installer-state.expired { border-color: #89632d; background: #302310; }
.installer-pulse { width: .78rem; height: .78rem; border-radius: 50%; background: #47b8c6; box-shadow: 0 0 0 0 rgba(71, 184, 198, .5); animation: installer-pulse 1.5s infinite; }
@keyframes installer-pulse { 70% { box-shadow: 0 0 0 .65rem rgba(71, 184, 198, 0); } 100% { box-shadow: 0 0 0 0 rgba(71, 184, 198, 0); } }
.installer-facts { margin: 1rem 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: .62rem; overflow: hidden; text-align: left; }
.installer-facts div { min-width: 0; padding: .65rem; border-right: 1px solid var(--line-soft); }
.installer-facts div:last-child { border-right: 0; }
.installer-facts dt { color: #71869e; font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.installer-facts dd { margin: .18rem 0 0; overflow-wrap: anywhere; color: #dfe9f5; font-size: .7rem; font-weight: 700; }
.installer-back { margin-top: .85rem; display: inline-block; color: #91b9e8; font-size: .72rem; text-decoration: none; }
.installer-security { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line-soft); color: #708398; font-size: .66rem; }
.alert-icon { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border: 1px solid #b94f56; border-radius: .46rem; background: #66262c; font-size: .62rem; font-weight: 850; }

.unread-badge { min-width: 1.35rem; height: 1.35rem; padding: 0 .33rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #dc4c54; color: #fff; font-size: .66rem; font-style: normal; font-weight: 850; line-height: 1; box-shadow: 0 0 0 2px #5b2025; }
.unread-total { padding: .35rem .62rem; display: inline-flex; align-items: center; border: 1px solid #2b4259; border-radius: 999px; background: #101f30; color: #a7b7c9; font-size: .69rem; font-weight: 750; white-space: nowrap; }
.unread-total.has-unread { border-color: #b1474e; background: #3a171b; color: #ffd0d3; }

.chat-layout { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); align-items: start; gap: .85rem; }
.chat-conversations { position: sticky; top: calc(var(--signature-height) + var(--topbar-height) + 1.45rem); max-height: calc(100dvh - var(--signature-height) - var(--topbar-height) - 3rem); overflow: auto; }
.chat-area-list { display: grid; gap: .38rem; }
.chat-area-item { width: 100%; padding: .62rem .65rem; display: block; border: 1px solid #263b52; border-radius: .55rem; background: #0a1623; color: #e9eff6; text-align: left; cursor: pointer; }
.chat-area-item:hover { border-color: #3d6288; background: #102238; }
.chat-area-item.selected { border-color: #4c81bb; background: #132b47; box-shadow: inset 3px 0 #4a8cf0; }
.chat-area-item.unread { border-color: #a7444b; background: #32161a; box-shadow: inset 3px 0 #dd5159; }
.chat-area-item.unread.selected { border-color: #d35a61; }
.chat-area-head { display: flex; align-items: center; justify-content: space-between; gap: .45rem; }
.chat-area-head strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-area-preview { margin-top: .25rem; display: block; overflow: hidden; color: #94a5b7; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-area-time { margin-top: .2rem; display: block; color: #61748a; font-size: .61rem; }

.chat-panel { min-width: 0; }
.chat-panel-head { align-items: center; }
.chat-back { display: none; flex: 0 0 auto; }
.chat-routing { margin-bottom: .3rem; }
.chatlog { height: clamp(20rem, 50dvh, 34rem); padding: .65rem; overflow: auto; background: #08131f; border: 1px solid #20344b; border-radius: .55rem; scrollbar-color: #38516c #0a1522; }
.msg { max-width: min(90%, 47rem); margin: .42rem 0; padding: .55rem .65rem; background: #111f30; border: 1px solid #22374e; border-left: 3px solid #3c7fdc; border-radius: .5rem; }
.msg.admin { border-left-color: #8d70c9; }
.msg.unread { border-color: #b3444c; border-left: 4px solid #df535b; background: #2b1519; }
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .34rem; }
.msg-head b { color: #81b2ee; font-size: .74rem; }
.msg-admin { color: #bca9e5; font-size: .68rem; font-weight: 750; }
.msg-text { margin: .32rem 0 0; color: #dfe7f0; font-size: .78rem; white-space: pre-wrap; }
.message-state { padding: .08rem .36rem; display: inline-flex; align-items: center; border-radius: 999px; font-size: .6rem; font-weight: 800; }
.message-state.new { background: #9f353c; color: #fff; }
.message-state.seen { background: #164d38; color: #b5efd4; }
.message-state.sent { background: #193b67; color: #b9d6f5; }
.attachment { margin-top: .35rem; padding: .4rem .48rem; display: flex; align-items: center; gap: .45rem; border: 1px solid #253b52; border-radius: .4rem; background: #091521; }

.composer { margin-top: .55rem; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .42rem; }
.file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.file-button { min-height: 2.42rem; padding: .5rem .72rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #2a3d53; border-radius: .48rem; background: #101f30; color: #c7d3df; font-size: .74rem; font-weight: 750; cursor: pointer; }
.file-name { min-height: 1rem; margin: .28rem 0 0; }
.composer-note { margin: .15rem 0 0; font-size: .66rem; }

.chat-quick { position: fixed; right: 1rem; bottom: 1rem; z-index: 25; min-height: 2.75rem; padding: .52rem .72rem; display: flex; align-items: center; gap: .45rem; border: 1px solid #477ab8; border-radius: 999px; background: #173b65; color: #fff; font-size: .73rem; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.chat-quick > span:first-child { width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; border-radius: 50%; background: #2d639d; font-size: .56rem; }
.chat-quick.has-unread { border-color: #dc5b62; background: #6d252b; }

/* Network */

.network-primary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .85rem; }
.network-primary-grid .kpi { min-height: 6.3rem; }
.network-primary-grid .kpi b { font-size: .88rem; line-height: 1.3; }
.network-control-card { padding: 1.05rem; }
.network-actions { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.primary-actions { margin-bottom: .8rem; }
.network-summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(15rem, .6fr); align-items: stretch; gap: .7rem; }
.network-summary > div:first-child > span { color: #8ca0b5; font-size: .67rem; font-weight: 700; }
.network-summary .address { margin-bottom: 0; }
.network-credentials { padding: .55rem .65rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: .25rem .65rem; background: #08151f; border: 1px solid #23545a; border-radius: .5rem; }
.network-credentials span { color: #81aeb2; font-size: .63rem; }
.network-credentials b { overflow-wrap: anywhere; color: #e9f4f3; font: 700 .73rem/1.3 "Cascadia Mono", Consolas, monospace; }
.network-message { margin: .65rem 0 0; color: #b9c8d8; font-size: .77rem; font-weight: 650; }
.network-message.warning { color: #e4b25e; }
.network-message.good { color: #63c796; }
.network-value-good { color: #56c48a !important; }
.network-value-warning { color: #e3a64c !important; }
.network-steps { margin: .6rem 0 0; padding: .65rem .75rem .65rem 1.8rem; border: 1px solid #765526; border-radius: .5rem; background: #2d210f; color: #edcd94; font-size: .75rem; }
.network-steps li + li { margin-top: .25rem; }
.isolation-card { border-left: 3px solid #b04a50; }
.physical-warning { margin: .65rem 0 0; padding: .58rem .66rem; border-radius: .48rem; background: #281e10; color: #d8bd8e; font-size: .72rem; }
.infrastructure-content { margin: .8rem; }
.infrastructure-content p { max-width: 70rem; margin: .7rem 0 0; color: #8fa2b7; font-size: .74rem; }
.infrastructure-options { display: flex; flex-wrap: wrap; gap: .38rem; }
.infrastructure-options span { padding: .3rem .5rem; border: 1px solid #2b4961; border-radius: .4rem; background: #0b1b2a; color: #9ab5cb; font-size: .67rem; font-weight: 700; }
.network-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: .9rem 0; }
.network-grid .kpi { min-height: 5.7rem; padding: .68rem .72rem; box-shadow: none; }
.network-grid .kpi b { font-size: .78rem; line-height: 1.28; }
.diagnostic-block + .diagnostic-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.diagnostic-block h3 { margin-bottom: .15rem; }

/* Disclosure and feedback */

.disclosure { padding: 0; overflow: hidden; }
.disclosure summary { min-height: 3.8rem; padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; cursor: pointer; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: "+"; width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border: 1px solid #2e455e; border-radius: .42rem; color: #91a7bd; font-size: 1rem; }
.disclosure[open] summary::after { content: "−"; }
.disclosure summary > span { display: flex; flex-direction: column; }
.disclosure summary strong { color: #dce5ef; font-size: .8rem; }
.disclosure summary small { margin-top: .12rem; color: #72859b; font-size: .67rem; }
.disclosure[open] summary { border-bottom: 1px solid var(--line-soft); }
.disclosure > .tablewrap,
.disclosure > .network-actions,
.disclosure > .network-grid,
.disclosure > .diagnostic-block { margin-right: .85rem; margin-left: .85rem; }
.disclosure > .tablewrap:last-child,
.disclosure > .network-actions:last-child,
.disclosure > .diagnostic-block:last-child { margin-bottom: .85rem; }

.toast { position: fixed; right: 1rem; bottom: 4.7rem; z-index: 60; width: min(25rem, calc(100vw - 2rem)); padding: .72rem .82rem; border: 1px solid #3b6fa7; border-radius: .55rem; background: #122238; color: #e7eef7; font-size: .76rem; box-shadow: 0 15px 35px rgba(0, 0, 0, .45); }
.toast.error { border-color: #b84b52; background: #32171b; }

/* Responsive tablet */

@media (max-width: 1180px) {
  :root { --sidebar-width: 220px; }
  .app-brand { min-width: calc(var(--sidebar-width) - 1rem); }
  .app-brand > div { display: none; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-grid .kpi:nth-child(4),
  .kpi-grid .kpi:nth-child(5) { min-height: 6.4rem; }
  .network-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  :root { --sidebar-width: 204px; }
  .server-state span { max-width: 11rem; }
  .dashboard-local { grid-template-columns: 1fr; gap: .7rem; }
  .network-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .network-summary { grid-template-columns: 1fr; }
  .network-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-cols { grid-template-columns: 1fr; }
}

/* Mobile application layout */

@media (max-width: 760px) {
  :root { --topbar-height: 56px; }

  .login-shell { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .login-access-panel { min-height: calc(100dvh - var(--signature-height)); padding: 1rem; background: linear-gradient(180deg, #0c1d31, #07101b 44%); }
  .login-card { width: min(100%, 26rem); padding: 1.25rem 1rem; }
  .login-mobile-brand { margin-bottom: 2rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
  .login-mobile-brand img { width: min(13rem, 68vw); height: 4.2rem; object-fit: contain; }
  .login-mobile-brand span { color: #70869d; font-size: .59rem; font-weight: 800; letter-spacing: .11em; }
  .login-heading { margin-bottom: 1.25rem; text-align: center; }
  .login-heading h2 { font-size: 1.55rem; }
  .login-heading p { font-size: .82rem; }
  .login-security { margin-bottom: env(safe-area-inset-bottom, 0); }
  .installer-shell { padding: .8rem; align-items: start; }
  .installer-card { margin-top: .65rem; padding: 1.15rem .9rem; }
  .installer-facts { grid-template-columns: 1fr; }
  .installer-facts div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .installer-facts div:last-child { border-bottom: 0; }

  .top { padding: 0 .65rem; gap: .55rem; }
  .mobile-menu-button { display: inline-grid; flex: 0 0 auto; }
  .app-brand { min-width: 0; flex: 0 1 auto; }
  .app-brand img { width: 6.75rem; height: 2.15rem; }
  .app-brand > div { display: none; }
  .server-state { margin-left: auto; }
  .server-state > div { display: none; }
  .server-state i { width: .48rem; height: .48rem; }
  .top .spacer { display: none; }
  .session-user { max-width: 8rem; margin-left: 0; }
  .who { font-size: .68rem; }
  .session-user small { display: none; }
  .logout-button { width: 2.35rem; min-height: 2.35rem; padding: 0; }
  .logout-button span { display: none; }
  .logout-button b { font-size: 1rem; }

  .sidebar {
    top: calc(var(--signature-height) + var(--topbar-height));
    bottom: calc(4.35rem + env(safe-area-inset-bottom, 0));
    width: min(82vw, 19.5rem);
    padding: .8rem .72rem;
    transform: translateX(-102%);
    transition: transform .2s ease;
    box-shadow: 18px 0 45px rgba(0, 0, 0, .42);
  }

  #appView.nav-open .sidebar { transform: translateX(0); }
  .nav-overlay { position: fixed; inset: calc(var(--signature-height) + var(--topbar-height)) 0 calc(4.35rem + env(safe-area-inset-bottom, 0)); z-index: 18; display: block; visibility: hidden; border: 0; background: rgba(1, 7, 14, .65); opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
  #appView.nav-open .nav-overlay { visibility: visible; opacity: 1; }

  .workspace { width: 100%; margin-left: 0; padding: 1rem .7rem calc(5.5rem + env(safe-area-inset-bottom, 0)); }
  .section-title { min-height: 3.2rem; margin-bottom: .75rem; align-items: flex-start; }
  .section-title h2 { font-size: 1.4rem; }
  .section-title p { font-size: .76rem; }
  .section-title .eyebrow { margin-bottom: .25rem; }
  .context-chip { align-self: center; }

  .mobile-dock {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 35;
    height: calc(4.35rem + env(safe-area-inset-bottom, 0));
    padding: .38rem .28rem env(safe-area-inset-bottom, 0);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: rgba(7, 17, 28, .98);
    border-top: 1px solid #263a50;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, .24);
    backdrop-filter: blur(14px);
  }

  .mobile-dock button { position: relative; min-width: 0; padding: .25rem .08rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .16rem; border: 0; border-radius: .48rem; background: transparent; color: #708499; cursor: pointer; }
  .mobile-dock button > span { min-width: 1.65rem; height: 1.48rem; padding: 0 .28rem; display: inline-grid; place-items: center; border-radius: .4rem; color: #8198b1; font-size: .56rem; font-weight: 850; letter-spacing: .03em; }
  .mobile-dock button > b { max-width: 100%; overflow: hidden; font-size: .58rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-dock button > .menu-dots { font-size: 1.05rem; line-height: 1; }
  .mobile-dock button.active { color: #dfeaf6; background: #102238; }
  .mobile-dock button.active > span { background: #1c4673; color: #c7def7; }
  .mobile-dock button.has-unread > span { background: #64262c; color: #ffd8da; }
  .mobile-dock .unread-badge { position: absolute; top: .15rem; left: calc(50% + .45rem); min-width: 1.08rem; height: 1.08rem; padding: 0 .22rem; font-size: .55rem; }

  .chat-quick { display: none; }
  .apk-request-item { grid-template-columns: 1fr; }
  .apk-request-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .apk-request-actions .btn { width: 100%; }
  .toast { right: .7rem; bottom: calc(4.9rem + env(safe-area-inset-bottom, 0)); width: calc(100vw - 1.4rem); }

  .process-strip { justify-content: flex-start; padding: .62rem .7rem; }
  .process-strip i { width: 1rem; flex-basis: 1rem; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .kpi-grid .kpi { min-height: 6rem; }
  .kpi-grid .kpi:last-child { grid-column: span 2; min-height: 5.2rem; }
  .kpi { padding: .72rem; }
  .kpi b { font-size: 1.45rem; }
  .dashboard-local { padding: .85rem; }

  .card { margin-bottom: .65rem; padding: .8rem; border-radius: .62rem; }
  .card-head { margin-bottom: .62rem; gap: .55rem; }
  .card-head .btn { flex: 0 0 auto; }
  .action-card { padding: .85rem; }

  .form-grid,
  .form-grid.three,
  .form-grid.four,
  .two-cols { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .inline-submit,
  .inline-submit.compact { grid-template-columns: 1fr; }
  .inline-submit .btn { width: 100%; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .btn { width: 100%; }

  .data-card { padding-bottom: .8rem; }
  .tablewrap { overflow: visible; border: 0; background: transparent; }
  table { min-width: 0; display: block; background: transparent; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  tbody { display: grid; gap: .55rem; }
  tr { display: block; overflow: hidden; background: #0a1724; border: 1px solid #21354b; border-radius: .55rem; }
  tbody tr:hover { background: #0a1724; }
  td { min-height: 2rem; padding: .48rem .58rem; display: grid; grid-template-columns: minmax(6.8rem, 38%) minmax(0, 1fr); gap: .55rem; border-bottom: 1px solid #1d2e41; font-size: .73rem; overflow-wrap: anywhere; }
  td:last-child { border-bottom: 0; }
  td::before { content: attr(data-label); color: #6f849a; font-size: .61rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
  td .actions { justify-content: flex-start; }
  .order-selected { outline: 1px solid #4b8ee6; }
  .task-items { white-space: normal; }
  .disclosure > .tablewrap { margin: .7rem; }

  .chat-layout { display: block; }
  .chat-conversations { position: static; max-height: none; }
  #chat .chat-panel { display: none; }
  #chat.chat-conversation-open .chat-conversations { display: none; }
  #chat.chat-conversation-open .chat-panel { display: block; }
  .chat-back { display: inline-grid; }
  .chat-area-list { gap: .45rem; }
  .chat-area-item { min-height: 4.25rem; padding: .68rem; }
  .chatlog { height: calc(100dvh - 25.5rem); min-height: 16rem; max-height: 31rem; }
  .composer { grid-template-columns: minmax(0, 1fr) auto; }
  .composer input:first-child { grid-column: 1 / -1; }
  .composer .btn,
  .composer .file-button { min-width: 6rem; }

  .network-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .network-primary-grid .kpi { min-height: 5.4rem; }
  .network-primary-grid .kpi b { font-size: .73rem; }
  .network-summary { grid-template-columns: 1fr; }
  .network-actions .btn { flex: 1 1 12rem; }
  .isolation-card .card-head { flex-direction: column; }
  .isolation-card .btn { width: 100%; }
  .network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .network-grid .kpi { min-height: 5rem; }
}

@media (max-width: 430px) {
  .developer-signature { padding: 0 .3rem; font-size: .56rem; letter-spacing: .015em; }
  .developer-signature-mark { width: .3rem; height: .3rem; }
  .app-brand img { width: 5.9rem; }
  .session-user { max-width: 6.8rem; }
  .who { font-size: .61rem; }
  .section-title { flex-wrap: wrap; }
  .section-title .context-chip { align-self: flex-start; }
  .chat-alert-button { grid-template-columns: auto minmax(0, 1fr) auto; }
  .chat-alert-button > b { display: none; }
  .network-primary-grid .kpi b { font-size: .67rem; }
  .network-credentials { grid-template-columns: 1fr; }
  td { grid-template-columns: minmax(5.9rem, 36%) minmax(0, 1fr); }
}

.device-use-selector,
.installer-platform { margin: 0 0 .9rem; padding: .72rem; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; border: 1px solid var(--line, #263a50); border-radius: .65rem; background: rgba(7, 17, 28, .55); }
.device-use-selector legend,
.installer-platform legend { padding: 0 .35rem; color: #9db0c4; font-size: .68rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.device-use-selector label,
.installer-platform label { min-width: 0; padding: .62rem; display: flex; align-items: flex-start; gap: .5rem; border: 1px solid #263a50; border-radius: .52rem; background: #0b1826; cursor: pointer; }
.device-use-selector label:has(input:checked),
.installer-platform label:has(input:checked) { border-color: #4b8ee6; background: #102943; box-shadow: inset 0 0 0 1px rgba(75, 142, 230, .25); }
.device-use-selector input,
.installer-platform input { width: auto; margin: .18rem 0 0; accent-color: #4b8ee6; }
.device-use-selector span,
.installer-platform span { min-width: 0; display: grid; gap: .15rem; }
.device-use-selector b,
.installer-platform b { color: #e6eef7; font-size: .72rem; }
.device-use-selector small,
.installer-platform small { color: #8195aa; font-size: .61rem; line-height: 1.35; }

.status-legend { margin: -.2rem 0 .7rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.status-legend span { padding: .3rem .52rem; border-radius: 999px; font-size: .65rem; font-weight: 800; }
.legend-pending { color: #fecaca; background: rgba(185, 28, 28, .18); border: 1px solid rgba(248, 113, 113, .35); }
.legend-running { color: #fed7aa; background: rgba(194, 65, 12, .18); border: 1px solid rgba(251, 146, 60, .35); }
.legend-done { color: #bbf7d0; background: rgba(21, 128, 61, .18); border: 1px solid rgba(74, 222, 128, .35); }
.process-board-card { padding-bottom: .8rem; }
.process-table table { min-width: 1280px; }
.process-row.NO-INICIADO { box-shadow: inset 3px 0 #ef4444; }
.process-row.EN-PROCESO { box-shadow: inset 3px 0 #f97316; }
.process-row.CULMINADO { box-shadow: inset 3px 0 #22c55e; }
.process-elapsed { color: #dbeafe; font-variant-numeric: tabular-nums; font-weight: 750; white-space: nowrap; }
.delivery-status { display: inline-block; padding: .25rem .45rem; border-radius: 999px; font-size: .63rem; font-weight: 850; }
.delivery-status.PENDIENTE_CONFIRMACION { color: #fed7aa; background: rgba(194, 65, 12, .2); }
.delivery-status.CONFIRMADA { color: #bbf7d0; background: rgba(21, 128, 61, .2); }
.delivery-status.RECHAZADA { color: #fecaca; background: rgba(185, 28, 28, .2); }
.table-select { min-width: 8.5rem; padding: .4rem .45rem; font-size: .7rem; }
.compact-check { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.compact-check input { width: auto; }
.about-card { text-align: center; }
.about-card img { width: min(16rem, 82%); max-height: 6rem; object-fit: contain; }
.about-card dl { margin: 1rem 0 0; display: grid; gap: .55rem; text-align: left; }
.about-card dl div { padding: .62rem; display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; border: 1px solid #21354b; border-radius: .5rem; background: #0a1724; }
.about-card dt { color: #7890a8; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.about-card dd { margin: 0; color: #e3edf7; font-size: .75rem; }
.admin-developer-footer { margin: 1.2rem 0 .3rem; padding-top: .75rem; border-top: 1px solid #1d3043; color: rgba(215, 228, 241, .5); font-size: .62rem; letter-spacing: .035em; text-align: center; }
.bootstrap-mode-choice { margin-top: .85rem; display: grid; gap: .55rem; }
.bootstrap-mode { width: 100%; padding: .72rem .78rem; display: grid; gap: .22rem; border: 1px solid #2a4057; border-radius: .58rem; background: #0b1927; color: #e5eef8; text-align: left; cursor: pointer; }
.bootstrap-mode:hover { border-color: #4b8ee6; background: #10243a; }
.bootstrap-mode b { font-size: .76rem; }
.bootstrap-mode span,
.bootstrap-explanation { color: #8297ac; font-size: .65rem; line-height: 1.45; }
.bootstrap-explanation { margin: 0 0 .25rem; }

@media (max-width: 760px) {
  .device-use-selector,
  .installer-platform { grid-template-columns: 1fr; }
  .process-table table { min-width: 0; }
  .process-row.NO-INICIADO { box-shadow: inset 3px 0 #ef4444; }
  .process-row.EN-PROCESO { box-shadow: inset 3px 0 #f97316; }
  .process-row.CULMINADO { box-shadow: inset 3px 0 #22c55e; }
  .about-card dl div { grid-template-columns: 1fr; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}