:root {
  --side: #343a40;
  --side2: #2b3035;
  --side-t: #c2c7d0;
  --top: #343a40;
  --bg: #f4f6f9;
  --card: #fff;
  --text: #212529;
  --muted: #6c757d;
  --line: #dee2e6;
  --soft: #f8f9fa;
  --red: #dc3545;
  --teal: #17a2b8;
  --green: #28a745;
  --grey: #6c757d;
  --blue: #2563eb;
  --orange: #ff9800;
  --wa: #16a34a;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1f23;
    --card: #272b30;
    --text: #e9ecef;
    --muted: #9aa1a9;
    --line: #3a3f45;
    --soft: #2f343a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1f23;
  --card: #272b30;
  --text: #e9ecef;
  --muted: #9aa1a9;
  --line: #3a3f45;
  --soft: #2f343a;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family:
    "Source Sans 3",
    "Segoe UI",
    system-ui,
    -apple-system,
    Arial,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  display: flex;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Sidebar */
.side {
  width: 250px;
  background: var(--side);
  color: var(--side-t);
  flex: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  transition: margin 0.2s;
}
body.collapsed .side {
  margin-left: -250px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 19px;
  color: #fff;
  border-bottom: 1px solid #4b545c;
}
.brand i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #8a9199;
  display: inline-block;
}
.user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #4b545c;
  color: #fff;
  font-size: 14px;
}
.user i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #4b545c;
  display: grid;
  place-items: center;
  font-style: normal;
}
.search {
  display: flex;
  margin: 12px 8px;
}
.search input {
  flex: 1;
  min-width: 0;
  background: #3f474e;
  border: 1px solid #56606a;
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px 0 0 4px;
  font: inherit;
  font-size: 14px;
}
.search input::placeholder {
  color: #aab0b6;
}
.search button {
  background: #3f474e;
  border: 1px solid #56606a;
  border-left: 0;
  color: #fff;
  padding: 0 12px;
  border-radius: 0 4px 4px 0;
}
.side h6 {
  margin: 10px 16px 6px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}
.nav {
  list-style: none;
  margin: 0;
  padding: 0 8px;
}
.nav a,
.nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  background: none;
  color: var(--side-t);
  text-align: left;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.nav a:hover,
.nav button:hover,
.nav .on {
  background: #4b545c;
  color: #fff;
}
.nav .ic {
  width: 22px;
  text-align: center;
}
.nav .ch {
  margin-left: auto;
  font-size: 11px;
  transition: transform 0.15s;
}
.nav li.open > button .ch {
  transform: rotate(-90deg);
}
.sub {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 4px 32px;
}
.nav li.open > .sub {
  display: block;
}
.sub a {
  font-weight: 400;
  padding: 6px 8px;
  font-size: 13.5px;
}

/* Main */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.top {
  background: var(--top);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  flex: none;
  flex-wrap: wrap;
}
.top .tg {
  background: none;
  color: #fff;
  font-size: 20px;
  padding: 2px 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.b-red {
  background: var(--red);
}
.b-teal {
  background: var(--teal);
}
.tag {
  background: #1f2327;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}
.sp {
  flex: 1;
}
.top small {
  display: block;
  font-size: 11px;
  color: #adb5bd;
  line-height: 1;
}
.top .who {
  font-size: 14px;
  line-height: 1.2;
}
.content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 28px;
}

/* Alerta */
.alert {
  background: var(--card);
  border-radius: 18px;
  border-left: 5px solid var(--red);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  padding: 26px 28px;
  display: flex;
  gap: 26px;
  align-items: center;
  margin-bottom: 16px;
}
.alert .ico {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: #fde8ea;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--red);
}
.pill {
  display: inline-block;
  background: #fde8ea;
  color: var(--red);
  font-weight: 700;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 99px;
}
.alert h2 {
  margin: 10px 0 4px;
  font-size: 21px;
}
.alert p {
  margin: 0 0 12px;
  color: var(--muted);
  max-width: 70ch;
}
.estado {
  display: inline-block;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: 14px;
}
.estado span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.estado b {
  font-size: 16px;
}
.acts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.b-or {
  background: var(--orange);
}
.b-wa {
  background: var(--wa);
}
.b-help {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--line);
}
.btn.r {
  border-radius: 10px;
}

/* Contrato */
.panel {
  background: var(--card);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin-bottom: 16px;
}
.panel > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 700;
}
.act {
  background: var(--green);
  color: #fff;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 99px;
}
.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  padding: 16px;
}
.info div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--soft);
}
.info em {
  font-style: normal;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.info span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.info b {
  font-size: 14px;
}

/* Tarjetas */
.grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.sm {
  background: var(--card);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
  overflow: hidden;
  min-height: 70px;
}
.sm i {
  width: 70px;
  align-self: stretch;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: #fff;
  font-style: normal;
}
.sm span {
  display: block;
  font-size: 14px;
}
.sm b {
  font-size: 15px;
}
.big {
  background: var(--soft);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.big .v {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  flex: 1;
}
.big strong {
  font-size: 32px;
  display: block;
}
.big small {
  font-size: 15px;
  color: var(--text);
}
.big .gl {
  font-size: 46px;
  opacity: 0.18;
}
.big a {
  background: var(--line);
  text-align: center;
  padding: 3px;
  font-size: 14px;
}

/* Inferior */
.low {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .low {
    grid-template-columns: 1fr;
  }
  .alert {
    flex-direction: column;
    align-items: flex-start;
  }
}
.hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.hd h3 {
  margin: 0;
  font-size: 19px;
}
.b-blue {
  background: var(--blue);
  padding: 6px 12px;
}
table {
  width: calc(100% - 32px);
  margin: 12px 16px;
  border-collapse: collapse;
}
th {
  text-align: left;
  padding: 10px;
  border: 1px solid var(--line);
  font-size: 14px;
}
th:last-child {
  text-align: right;
}
td {
  text-align: center;
  padding: 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
}
.donut {
  display: grid;
  place-items: center;
  padding: 28px;
}
.donut div {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  display: grid;
  place-items: center;
}
.donut div div {
  width: 110px;
  height: 110px;
}
.empty {
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  margin: 0 0 14px;
}
.view[hidden] {
  display: none;
}
.crumb {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  margin-bottom: 10px;
}
.lh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px;
  background: linear-gradient(
    90deg,
    rgba(40, 167, 69, 0.1),
    rgba(37, 99, 235, 0.1)
  );
  border-radius: 6px 6px 0 0;
}
.lh h3 {
  margin: 0;
  font-size: 19px;
}
.lb {
  padding: 14px 16px 16px;
}
.b-grey {
  background: #6c757d;
  padding: 7px 12px;
}
.b-green {
  background: var(--green);
  padding: 4px 10px;
  font-size: 12px;
}
.b-red2 {
  background: var(--red);
  padding: 4px 10px;
  font-size: 12px;
}
.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 8px;
}
.tab {
  background: none;
  color: var(--text);
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 13px;
}
.tab.on {
  background: var(--blue);
  color: #fff;
}
.cnt {
  display: inline-block;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
.c0 {
  background: var(--red);
}
.c1 {
  background: var(--green);
}
.c2 {
  background: var(--grey);
}
.expo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}
.dt {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
  font-size: 13px;
}
.dt select,
.dt input {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
}
.dt input {
  width: 200px;
  max-width: 100%;
}
.tw {
  overflow-x: auto;
}
.tw table {
  width: 100%;
  margin: 0;
  font-size: 12.5px;
}
.tw th {
  background: var(--soft);
  text-align: center;
  font-size: 12px;
}
.tw td {
  font-weight: 400;
  color: var(--text);
  padding: 8px;
}
.tw td.none {
  font-weight: 700;
}
.pg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px;
}
.pg button {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 99px;
  padding: 6px 14px;
}
.ft {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin: 26px 0 0;
}
.ft a {
  color: var(--blue);
}
.mini {
  background: var(--red);
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
}
dialog {
  border: 0;
  border-radius: 8px;
  padding: 20px;
  background: var(--card);
  color: var(--text);
  width: min(420px, 92vw);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
dialog label {
  display: block;
  font-size: 13px;
  margin: 10px 0 4px;
}
dialog input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--soft);
  color: var(--text);
  font: inherit;
}
.dact {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.nav .sub a.on {
  background: #f4f6f9;
  color: #212529;
}
.mapa {
  display: grid;
  place-items: center;
  min-height: 360px;
  background: var(--bg);
}
.mapa div {
  background: var(--card);
  padding: 18px 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  color: var(--red);
  text-align: center;
  font-size: 12px;
}
.mapa b {
  display: block;
  font-size: 20px;
}
.sk {
  display: flex;
  gap: 10px;
}
.sk div {
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 8px;
  padding: 6px 14px;
  min-width: 100px;
}
.sk small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
}
.note {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  padding: 10px;
  border-top: 1px solid var(--line);
  margin: 0;
}
.ed {
  background: #ffc107;
  color: #212529;
}
.pbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}
.chip {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12px;
}
.chip.dk {
  background: #1f2327;
  color: #fff;
  border-color: #1f2327;
}
.chip.on {
  background: rgba(37, 99, 235, 0.12);
  border-color: var(--blue);
}
.chip i {
  font-style: normal;
  background: rgba(37, 99, 235, 0.2);
  border-radius: 99px;
  padding: 0 6px;
  font-size: 11px;
}
.stk {
  display: inline-block;
  background: rgba(23, 162, 184, 0.18);
  border-radius: 99px;
  padding: 4px 12px;
  font-weight: 700;
}
.pre {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
}
.ibtn {
  display: flex;
  margin-bottom: 10px;
}
.ibtn span {
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
}
.g1 {
  background: #1e7e34;
}
.g2 {
  background: #ffc107;
  color: #212529 !important;
}
.g3 {
  background: var(--green);
}
.ifl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .ifl {
    grid-template-columns: 1fr;
  }
}
.ifl label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 4px;
}
.ifl input,
.ifl select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
}
.ifl small {
  font-size: 11px;
  color: var(--muted);
}
.iact {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.new {
  background: var(--green);
  color: #fff;
  font-size: 9px;
  padding: 0 4px;
  border-radius: 4px;
  margin-left: 4px;
}
.cpre {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
}
@media (max-width: 700px) {
  .cpre {
    grid-template-columns: 1fr;
  }
}
.ch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ch small {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
}
.ci {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 193, 7, 0.25);
  display: grid;
  place-items: center;
}
.ci.blue {
  background: rgba(37, 99, 235, 0.15);
  color: var(--blue);
}
.cbox label {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.cbox input.rf {
  flex: 1;
  min-width: 140px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
}
.cbox > small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.big2 {
  justify-content: center;
  padding: 12px;
}
.xg {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 800px) {
  .xg {
    grid-template-columns: 1fr;
  }
}
.drop {
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  background: var(--soft);
  align-self: start;
}
.drop .dh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.drop input[type="file"] {
  width: 100%;
  margin: 8px 0;
  font: inherit;
  font-size: 13px;
}
.drop small,
.cab > small {
  font-size: 11px;
  color: var(--muted);
}
.cab {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.cg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.kv {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--soft);
  font-weight: 600;
}
.kv.w2 {
  grid-column: span 2;
}
.kv small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
}
.xh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
#v-importar-xml .tw {
  padding: 0 16px;
}
.nav > li > a.on,
.nav li.cur > button {
  background: #3d9a6a;
  color: #fff;
}
.nav li.open > button {
  background: #4b545c;
  color: #fff;
}
.nav li.cur > button {
  background: #3d9a6a;
}
.svg-inline--fa {
  vertical-align: -0.125em;
}
.gi {
  display: inline-block;
}
.pg .pn {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
}
.fl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}
.mut {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}
.kp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.kp > div {
  color: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 28px;
  font-weight: 700;
}
.kp small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.ctl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
.reg {
  background: #3c8dbc;
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  display: grid;
  gap: 8px;
}
.reg input {
  padding: 8px;
  border: 0;
  border-radius: 4px;
  text-align: center;
}
.hint {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  padding: 10px;
}
.b-grey2 {
  background: #fff;
  color: #3c8dbc;
  justify-content: center;
}
.two2 {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
}
@media (max-width: 800px) {
  .ctl,
  .two2 {
    grid-template-columns: 1fr;
  }
}
.cbox2 {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  min-height: 180px;
}
.bar {
  display: flex;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  margin: 10px 0;
}
.bar span {
  display: block;
  height: 100%;
}
.kp3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.kp3 > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.kp3 small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.bluebar {
  background: #007bff;
  color: #fff;
  padding: 10px 16px;
  border-radius: 4px 4px 0 0;
  font-size: 19px;
}
.info2b {
  background: #17a2b8;
  color: #fff;
  border-radius: 4px;
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: 13px;
}
.fgrid {
  padding: 16px;
  display: grid;
  gap: 10px;
}
.fgrid input,
.fgrid select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
}
.fgrid label {
  font-size: 13px;
  font-weight: 700;
}
.eye {
  display: flex;
}
.eye input {
  border-radius: 4px 0 0 4px;
}
.eye button {
  background: var(--blue);
  color: #fff;
  padding: 0 14px;
  border-radius: 0 4px 4px 0;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.mc {
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 6px;
  padding: 10px;
  background: var(--card);
  font-size: 12.5px;
}
.mc.oc {
  border-top-color: var(--red);
}
.mc .row {
  display: flex;
  justify-content: space-between;
  margin: 3px 0;
  color: var(--muted);
}
.mc .row b {
  color: var(--text);
}
.mc .go {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.mc .go button {
  flex: 1;
  padding: 7px;
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
}
.pbar .chip {
  cursor: pointer;
}
.full {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: auto;
  background: var(--bg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.full .ft {
  display: none;
}
.ybar {
  background: #ffc107;
  color: #212529;
  padding: 10px 16px;
  border-radius: 4px 4px 0 0;
  font-size: 19px;
}
.b-yellow {
  background: #ffc107;
  color: #212529;
}
.b-info {
  background: #3c8dbc;
}
.kds {
  padding: 10px 14px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kh {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--card);
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.kh input[type="search"],
.kh select {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.ar {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
}
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #28a745;
}
.kcols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
}
@media (max-width: 800px) {
  .kcols {
    grid-template-columns: 1fr;
  }
}
.kc {
  background: var(--soft);
  border: 1px solid var(--line);
  border-top: 3px solid;
  border-radius: 6px;
  padding: 8px;
  min-height: 300px;
}
.kt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}
.kt i {
  font-style: normal;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0 8px;
  font-size: 11px;
}
.ke {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
  padding: 28px 10px;
  color: var(--muted);
  font-size: 12px;
}
.kf {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}
.kdd {
  background: #111827;
  color: #fff;
  min-height: 100vh;
  position: relative;
}
.kdd h2 {
  margin: 0;
  text-align: center;
  padding: 14px;
  font-size: 30px;
}
.kdd .kb {
  position: absolute;
  left: 10px;
  top: 10px;
  background: none;
  color: #fff;
  opacity: 0.35;
  font-size: 20px;
}
.online {
  position: absolute;
  right: 14px;
  top: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 12px;
}
.kdc {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.kdl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  font-size: 24px;
  position: relative;
}
.kdl i {
  font-style: normal;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 15px;
  position: absolute;
  right: 14px;
}
.kde {
  min-height: 60vh;
  display: grid;
  place-content: center;
  text-align: center;
  color: #6b7280;
  font-size: 18px;
  border-right: 1px solid #1f2937;
}
.kde span {
  font-size: 40px;
  display: block;
}
.pf {
  background: var(--soft);
  margin: 6px -16px -16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.strip {
  height: 12px;
  background: var(--line);
  border-radius: 3px;
}
.dd {
  display: inline-block;
}
.dgrey {
  background: #6c757d;
  color: #fff;
  border-radius: 99px;
  padding: 5px 14px;
  font-size: 12px;
}
.ddm {
  z-index: 70;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  min-width: 150px;
  text-align: left;
}
.ddm[hidden] {
  display: none;
}
.ddm button {
  display: block;
  width: 100%;
  background: none;
  color: var(--text);
  padding: 8px 12px;
  text-align: left;
}
.rg4 {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 1.3fr 1.2fr 1.2fr;
  gap: 12px;
}
.rg2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .rg4 {
    grid-template-columns: 1fr 1fr;
  }
  .rg2 {
    grid-template-columns: 1fr;
  }
}
.teal {
  background: #17a2b8;
  color: #fff;
  border-radius: 4px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
}
.rbox {
  border: 1px solid var(--line);
  border-radius: 4px;
  min-height: 140px;
  margin-top: 8px;
  padding: 8px;
  display: grid;
  align-content: start;
  gap: 4px;
}
.rbox .emp {
  place-self: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 30px 0;
}
.rr {
  background: none;
  color: var(--text);
  text-align: left;
  padding: 7px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 13px;
}
.rr:hover {
  background: var(--soft);
  border-color: var(--line);
}
.rbox2 {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  min-height: 40px;
  margin-top: 6px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.ri {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.7fr 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  font-size: 12.5px;
}
.ri .rx {
  background: none;
  color: var(--red);
}
.pf2 {
  text-align: right;
  font-size: 20px;
  margin-top: 18px;
}
.fgrid #re-base {
  background: var(--line);
}
.fgrid input[type="checkbox"] {
  width: auto;
  justify-self: start;
}
.seld {
  position: relative;
}
.seld .dot {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
}
.seld select {
  padding-left: 34px;
}
.pm {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  min-width: 170px;
  z-index: 80;
  text-align: left;
}
.pm[hidden] {
  display: none;
}
.pm button {
  display: block;
  width: 100%;
  background: none;
  color: inherit;
  padding: 9px 14px;
  text-align: left;
  font-size: 14px;
}
.pm button:hover {
  background: var(--soft);
}
.pm button.on {
  font-weight: 700;
}
.pf2 b {
  color: var(--red);
  font-size: 24px;
}
.tabr {
  border-bottom: 1px solid var(--line);
}
.tabr span {
  display: inline-block;
  border: 1px solid var(--line);
  border-bottom: 0;
  padding: 6px 12px;
  border-radius: 4px 4px 0 0;
  font-size: 13px;
}

/* Restaurante: pedidos por mesa, cocina e imágenes de platos */
dialog [hidden] {
  display: none !important;
}
dialog.wide {
  width: min(1040px, 96vw);
  max-height: 94vh;
  overflow: auto;
  padding: 14px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.rimg {
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  line-height: 1;
  vertical-align: middle;
}
.rimg.rs {
  width: 38px;
  height: 38px;
  font-size: 22px;
}
.rimg.rl {
  width: 100%;
  height: 104px;
  font-size: 54px;
  border-radius: 0;
}
.rimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.od {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  align-items: start;
}
.od.solo {
  grid-template-columns: 1fr;
}
.od.solo .od-l {
  display: none;
}
@media (max-width: 820px) {
  .od {
    grid-template-columns: 1fr;
  }
}
.od-top {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.od-top h3 {
  margin: 0;
}
.od-top input {
  width: auto;
  flex: 1;
  min-width: 140px;
  max-width: 240px;
}
.od-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.od-cats .chip {
  cursor: pointer;
}
.od-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
  max-height: 58vh;
  overflow: auto;
  padding: 2px;
}
.od-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  text-align: left;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font: inherit;
}
.od-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.od-card b {
  display: block;
  padding: 6px 8px 0;
  font-size: 13px;
}
.od-card .pr {
  padding: 2px 8px 8px;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}
.od-card.ag {
  opacity: 0.45;
  cursor: not-allowed;
}
.od-card.ag .pr {
  color: var(--red);
}
.od-r {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
}
.od-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.od-hd small {
  color: var(--muted);
}
.od-lines {
  max-height: 44vh;
  overflow: auto;
  display: grid;
  gap: 6px;
}
.od-ln {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
}
.od-lh {
  display: flex;
  gap: 8px;
  align-items: center;
}
.od-nm {
  flex: 1;
  min-width: 0;
}
.od-nm b,
.od-nm small {
  display: block;
}
.od-nm small {
  color: var(--muted);
}
.od-lq {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4px;
}
.od-sub {
  min-width: 56px;
  text-align: right;
}
.od-note {
  margin-top: 4px;
  font-size: 12px;
  padding: 4px 6px !important;
}
.od-nt {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}
.od-st {
  font-size: 11px;
  color: #fff;
  border-radius: 99px;
  padding: 1px 8px;
  white-space: nowrap;
}
.st-0 {
  background: #6c757d;
}
.st-1 {
  background: #f0a030;
}
.st-2 {
  background: #17a2b8;
}
.st-3 {
  background: #28a745;
}
.st-4 {
  background: #495057;
}
.od-tot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin: 10px 0;
}
.od-chg {
  text-align: right;
  color: var(--muted);
  font-size: 13px;
}
.od-act,
.od-act2 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.od-act .btn {
  flex: 1;
  justify-content: center;
}
.od-msg {
  background: rgba(40, 167, 69, 0.15);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.od-empty {
  text-align: center;
  color: var(--muted);
  padding: 22px 10px;
  font-size: 13px;
}
.kcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid #17a2b8;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.kcard.late {
  border-left-color: var(--red);
}
.kcard header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.kcard header small {
  color: var(--muted);
  flex: 1;
}
.kage {
  font-size: 12px;
  font-weight: 700;
}
.kcard.late .kage {
  color: var(--red);
}
.kcard ul {
  list-style: none;
  margin: 6px 0;
  padding: 0;
}
.kcard li {
  padding: 2px 0;
  font-size: 14px;
}
.kcard li em {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.kcard .btn {
  width: 100%;
  justify-content: center;
}
.kdcol {
  border-right: 1px solid #1f2937;
  min-height: 60vh;
}
.kdcol .kde {
  border-right: 0;
}
.kdts {
  display: grid;
  gap: 10px;
  padding: 14px;
}
.kdt {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 18px;
}
.kdt b {
  display: block;
  font-size: 30px;
}
.kdt span {
  opacity: 0.9;
}
.kdt.prep {
  background: #78350f;
}
.kdt.ok {
  background: #166534;
}

/* Menú Comedor (mosaicos tipo Android) */
.mcm{min-height:100vh;display:flex;flex-direction:column;color:#fff;background:linear-gradient(180deg,#1b2b36,#2c4a5c)}
.mch{display:flex;justify-content:space-between;padding:12px 18px;font-size:18px;background:rgba(0,0,0,.25)}
.mcg{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:16px;align-content:center}
.mct{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:18px;color:#fff;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:20px;font-weight:600}
.mct:hover,.mct:focus-visible{border-color:#ff7043;background:rgba(255,255,255,.16)}
.mct i{font-style:normal;font-size:54px;width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.mcf{display:flex;justify-content:space-around;align-items:center;background:#000;padding:6px;color:#9ec9e6;font-weight:600}
.mcf button{background:none;color:#cfd8dc;font-size:16px;padding:12px 24px}
@media (max-width:800px){.mcg{grid-template-columns:repeat(2,1fr)}.mct{min-height:140px;font-size:17px}.mct i{width:72px;height:72px;font-size:38px}}

/* Modo Android restaurante */
.andv{background:var(--bg)}
.abar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:8px 12px;background:#1b2b36;color:#fff;font-size:18px}
.abar button{background:#ff7043;color:#fff;border-radius:10px;padding:12px 20px;font-size:17px;font-weight:700}
.andv .crumb{display:none}

/* ===== TEMA AZUL Y BLANCO (corporativo) ===== */
:root:not([data-theme="dark"]) {
  --side: #ffffff; --side2: #f1f5fb; --side-t: #334155; --top: #1448b8;
  --bg: #f1f5fb; --card: #ffffff; --text: #0f172a; --muted: #64748b;
  --line: #e2e8f0; --soft: #f8fafc;
  --red: #dc2626; --teal: #0ea5e9; --green: #16a34a; --grey: #64748b;
  --blue: #1d5be0; --orange: #f59e0b;
  --brand: #1d5be0; --brand-d: #1448b8; --brand-dd: #0a1f5c; --brand-l: #dbeafe; --brand-xl: #eff6ff;
  --sh: 0 4px 20px rgba(30, 64, 175, 0.08);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --side: #0f1b3d; --side2: #0b1530; --side-t: #c7d2fe; --top: #0b1530;
  --bg: #0a1226; --card: #111c3a; --text: #e8eeff; --muted: #94a3c4; --line: #1f2d57; --soft: #16234a;
  --brand: #3d7bf0; --brand-d: #60a5fa; --brand-dd: #bfdbfe; --brand-l: #0a1f5c; --brand-xl: #14214a;
  --sh: 0 4px 20px rgba(0, 0, 0, 0.35);
}
body { font-feature-settings: "tnum"; }
/* Barra lateral */
.side { border-right: 1px solid var(--line); box-shadow: 2px 0 18px rgba(30, 64, 175, 0.05); }
.brand { color: var(--brand-d); font-weight: 800; letter-spacing: 0.3px; border-bottom: 1px solid var(--line); padding: 16px; }
.brand i { width: 30px; height: 30px; border: 0; background: linear-gradient(135deg, #3d7bf0, #1448b8); box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4); position: relative; }
.brand i::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.user { color: var(--text); border-bottom: 1px solid var(--line); font-weight: 600; }
.user i { background: var(--brand-l); color: var(--brand-d); }
.search input { background: var(--soft); border: 1px solid var(--line); color: var(--text); border-radius: 8px 0 0 8px; }
.search input::placeholder { color: #94a3b8; }
.search button { background: var(--brand); border: 1px solid var(--brand); color: #fff; border-radius: 0 8px 8px 0; }
.side h6 { color: var(--muted); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.nav a, .nav button { border-radius: 10px; color: var(--side-t); }
.nav a:hover, .nav button:hover { background: var(--brand-xl); color: var(--brand-d); }
.nav .on, .nav > li > a.on { background: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35); }
.nav li.open > button { background: var(--brand-xl); color: var(--brand-d); }
.nav li.cur > button { background: var(--brand-l); color: var(--brand-d); }
.sub a { color: var(--muted); }
.sub a:hover { color: var(--brand-d); }
.sub a.on { color: #fff; }
/* Barra superior */
.top { background: linear-gradient(90deg, #0a1f5c, #1d5be0); box-shadow: 0 2px 12px rgba(30, 64, 175, 0.25); }
.top .btn.b-red, .top .btn.b-teal { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.5); }
.top .btn.b-red:hover, .top .btn.b-teal:hover { background: rgba(255, 255, 255, 0.28); }
.top .tag { background: rgba(255, 255, 255, 0.22); color: #fff; }
.top small { color: #bfdbfe; }
/* Botones */
.btn { border-radius: 9px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); transition: filter 0.15s, transform 0.05s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.b-blue { background: linear-gradient(180deg, #3d7bf0, #1d5be0); }
.b-green { background: #16a34a; } .b-red, .b-red2 { background: #dc2626; }
.b-grey, .b-grey2 { background: #64748b; } .b-teal, .b-info { background: #0ea5e9; }
.b-or { background: #f59e0b; } .b-yellow { background: #fbbf24; color: #1e293b; }
.b-help { background: #fff; color: var(--brand-d); border: 1px solid #bfdbfe; box-shadow: none; }
.b-help:hover { background: var(--brand-xl); }
/* Paneles, tablas, formularios */
.panel, .crumb { border-radius: 14px; box-shadow: var(--sh); border: 1px solid var(--line); }
.crumb { box-shadow: none; padding: 8px 14px; color: var(--muted); }
.lh { background: linear-gradient(90deg, var(--brand-xl), var(--card)); border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--line); }
.lh h3, .hd h3 { color: var(--brand-dd); }
.ybar { background: linear-gradient(90deg, #1448b8, #3d7bf0); color: #fff; border-radius: 14px 14px 0 0; }
th { background: var(--brand-xl); color: var(--brand-dd); border-color: var(--line); text-transform: none; }
td { border-color: var(--line); }
tbody tr:hover td { background: var(--brand-xl); }
input, select, textarea { border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand) !important; }
dialog { border-radius: 18px; box-shadow: 0 20px 60px rgba(15, 42, 107, 0.35); border: 1px solid var(--line); }
dialog::backdrop { background: rgba(15, 42, 107, 0.45); backdrop-filter: blur(2px); }
.chip.on, .pg .pn { background: var(--brand); color: #fff; border-color: var(--brand); }
.alert { border-left-color: var(--brand); border-radius: 16px; box-shadow: var(--sh); }
.mini { border-radius: 8px; }
a { color: inherit; }
/* Menu Comedor tipo tableta */
.mcm { background: linear-gradient(180deg, #eef3fc, #dbe7fb); color: var(--brand-dd); }
.mch { background: linear-gradient(90deg, #0a1f5c, #1d5be0); color: #fff; }
.mct { background: #fff; border: 1px solid #cfdcf5; color: var(--brand-dd); box-shadow: 0 6px 22px rgba(30, 64, 175, 0.12); border-radius: 20px; }
.mct:hover, .mct:focus-visible { border-color: var(--brand); background: var(--brand-xl); box-shadow: 0 10px 28px rgba(37, 99, 235, 0.25); transform: translateY(-2px); }
.mct i { background: linear-gradient(135deg, #3d7bf0, #1448b8) !important; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4); }
.mcf { background: #fff; border-top: 1px solid #cfdcf5; color: var(--brand-d); }
.mcf button { color: var(--brand-d); }
.abar { background: linear-gradient(90deg, #0a1f5c, #1d5be0); }
.abar button { background: #fff; color: var(--brand-d); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.kdd { background: linear-gradient(180deg, #0a1f5c, #0a1f5c); }

.mct i b { color: #fff; font-size: 44px; line-height: 1; display: block; }
.mct i svg { width: 48px; height: 48px; color: #fff; }
.rimg[style] { background: linear-gradient(135deg, #eaf1ff, #cfe0ff) !important; }
.sm i { background: linear-gradient(135deg, #3d7bf0, #1448b8) !important; }
.sm { border-radius: 14px; overflow: hidden; box-shadow: var(--sh); }
.big { border-radius: 14px; box-shadow: var(--sh); }
.b-or { background: #1d5be0; }

.brand-logo { justify-content: center; padding: 18px 14px 14px; }
.brand-logo img { width: 100%; max-width: 210px; height: auto; display: block; }
.mcl { display: block; height: 110px; width: auto; margin: 18px auto 0; }
.mcm .mcg { flex: 1; }
@media (max-width: 800px) { .mcl { height: 80px; } }

/* ===== Menú Comedor con vida ===== */
.mcm { position: relative; overflow: hidden; background: linear-gradient(180deg, #f3f7ff 0%, #e4edff 55%, #fff4e8 100%); }
.mcm > * { position: relative; z-index: 1; }
.mcm .mcb1, .mcm .mcb2, .mcm .mcb3 { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.mcb1 { width: 380px; height: 380px; left: -90px; top: 120px; background: #8ec5ff; animation: mcFloat 14s ease-in-out infinite; }
.mcb2 { width: 340px; height: 340px; right: -80px; top: 60px; background: #ffd1a1; animation: mcFloat 17s ease-in-out infinite reverse; }
.mcb3 { width: 300px; height: 300px; right: 30%; bottom: -120px; background: #b7f0d8; animation: mcFloat 19s ease-in-out infinite; }
@keyframes mcFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -30px); } }
.mch { align-items: center; }
.mch small { display: block; font-weight: 400; font-size: 12px; opacity: .85; }
.mch small::first-letter { text-transform: uppercase; }
#mcm-t { font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.mcs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 12px 16px 0; }
.mcs span { background: rgba(255, 255, 255, .85); border: 1px solid #d6e2fa; border-radius: 99px; padding: 6px 14px; font-size: 14px; color: #1e3a8a; box-shadow: 0 2px 8px rgba(30, 64, 175, .08); backdrop-filter: blur(4px); }
.mcs b { font-size: 16px; }
.mcs .c2 b { color: #e11d48; } .mcs .c3 b { color: #059669; } .mcs .c1 b { color: #ea580c; } .mcs .c4 b { color: #0369a1; }
.mcg { gap: 18px; padding: 18px 20px; }
.mct { position: relative; overflow: hidden; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 8px 26px rgba(15, 42, 107, .12); animation: mcIn .6s cubic-bezier(.2, .8, .2, 1) both; transition: transform .2s, box-shadow .2s; }
.mct::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.mct::after { content: ""; position: absolute; inset: auto -30px -60px auto; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, var(--c1), transparent 70%); opacity: .16; transition: opacity .25s, transform .25s; }
.mct:nth-child(1) { animation-delay: .05s; } .mct:nth-child(2) { animation-delay: .12s; } .mct:nth-child(3) { animation-delay: .19s; } .mct:nth-child(4) { animation-delay: .26s; }
.mct:nth-child(5) { animation-delay: .33s; } .mct:nth-child(6) { animation-delay: .4s; } .mct:nth-child(7) { animation-delay: .47s; } .mct:nth-child(8) { animation-delay: .54s; }
@keyframes mcIn { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
.mct:hover, .mct:focus-visible { background: #fff; border: 0; transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 38px rgba(15, 42, 107, .22); }
.mct:hover::after { opacity: .3; transform: scale(1.3); }
.mct:active { transform: scale(.97); }
.mct[style] i { background: linear-gradient(135deg, var(--c1), var(--c2)) !important; box-shadow: 0 10px 22px color-mix(in srgb, var(--c2) 45%, transparent); transition: transform .25s; }
.mct:hover i { transform: rotate(-6deg) scale(1.08); }
.mct span { color: #0f172a; font-weight: 700; }
.mcn { position: absolute; top: 16px; right: 14px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--c2); background: color-mix(in srgb, var(--c1) 16%, #fff); border-radius: 99px; padding: 3px 10px; z-index: 2; }
.mcn:empty { display: none; }
.mcn.hot { color: #fff; background: #e11d48; animation: mcPulse 1.4s ease-in-out infinite; }
[data-n="kds-display"].hot { background: #059669; }
@keyframes mcPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .5); } 50% { box-shadow: 0 0 0 9px rgba(225, 29, 72, 0); } }
.mcf { background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); }
@media (max-width: 800px) { .mcg { gap: 12px; padding: 12px; } .mcn { font-size: 11px; top: 12px; } #mcm-t { font-size: 20px; } .mcs span { font-size: 12px; padding: 5px 10px; } }
@media (prefers-reduced-motion: reduce) { .mct, .mcb1, .mcb2, .mcb3, .mcn.hot { animation: none; } }

.ri select.ru { padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--text); font: inherit; font-weight: 600; }
@media (max-width: 800px) { .ri { grid-template-columns: 1fr 1fr; } }

dialog select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--text); font: inherit; }

/* ===== TOQUE ELEGANTE: cristal, brillo y movimiento rápido ===== */
:root:not([data-theme="dark"]) body {
  background:
    radial-gradient(620px 420px at 0% 0%, rgba(29, 91, 224, 0.22), transparent 62%),
    radial-gradient(520px 520px at 0% 100%, rgba(14, 165, 233, 0.20), transparent 62%),
    radial-gradient(700px 500px at 100% 0%, rgba(91, 155, 255, 0.14), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(620px 420px at 0% 0%, rgba(61, 123, 240, 0.28), transparent 62%),
    radial-gradient(520px 520px at 0% 100%, rgba(14, 165, 233, 0.16), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
:root:not([data-theme="dark"]) .side {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(226, 237, 255, 0.58));
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 4px 0 28px rgba(20, 72, 184, 0.12), inset -1px 0 0 rgba(29, 91, 224, 0.08);
}
:root[data-theme="dark"] .side {
  background: linear-gradient(180deg, rgba(15, 27, 61, 0.78), rgba(11, 21, 48, 0.62));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.nav a, .nav button { transition: background 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s; }
.nav a:hover, .nav button:hover {
  background: rgba(29, 91, 224, 0.10);
  transform: translateX(3px);
}
.nav a .ic, .nav button .ic { transition: transform 0.2s; display: inline-block; }
.nav a:hover .ic, .nav button:hover .ic { transform: scale(1.18) rotate(-4deg); }
.nav li.open > button {
  background: rgba(29, 91, 224, 0.10);
  box-shadow: inset 0 0 0 1px rgba(29, 91, 224, 0.18);
}
.nav li.cur > button { background: rgba(29, 91, 224, 0.16); }
.nav .on, .nav > li > a.on, .sub a.on {
  background: linear-gradient(135deg, #3d7bf0, #1448b8);
  color: #fff;
  box-shadow: 0 6px 18px rgba(29, 91, 224, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: translateX(3px);
  animation: navPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.sub { animation: subIn 0.22s ease; }
.search input { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(6px); }
@keyframes navPop { 0% { transform: translateX(-4px) scale(0.96); opacity: 0.6; } 100% { transform: translateX(3px) scale(1); opacity: 1; } }
@keyframes subIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Ventanas: entran con rebote suave y fondo de cristal */
dialog { border-radius: 18px; box-shadow: 0 24px 70px rgba(10, 31, 92, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.5); }
dialog[open] { animation: dlgIn 0.24s cubic-bezier(0.18, 0.9, 0.3, 1.15); }
dialog[open]::backdrop {
  background: rgba(10, 31, 92, 0.38);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  animation: bdIn 0.24s ease;
}
@keyframes dlgIn { from { opacity: 0; transform: translateY(18px) scale(0.94); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes bdIn { from { opacity: 0; } to { opacity: 1; } }

/* Pantallas: aparecen con un fundido corto */
.view:not([hidden]) { animation: viewIn 0.26s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Botones con vida */
.btn { transition: transform 0.12s, box-shadow 0.15s, filter 0.15s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  dialog[open], dialog[open]::backdrop, .view:not([hidden]), .nav .on, .sub { animation-duration: 0.01s; }
  .nav a:hover, .nav button:hover { transform: none; }
}

/* Banner de bienvenida PC PLANET */
.hero { max-width: 1200px; margin: 0 auto 18px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 12px 34px rgba(20, 72, 184, 0.14); animation: heroIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hero img { display: block; width: 100%; height: auto; }
@keyframes heroIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero { animation-duration: 0.01s; } }

/* Firma electrónica: franja compacta debajo del banner, del mismo ancho */
.alert.firma { max-width: 1200px; margin: 0 auto 18px; padding: 12px 16px; border-radius: 20px; border-left: 0; border-top: 3px solid var(--red); gap: 12px 16px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(20, 72, 184, 0.10); }
.alert.firma .fi { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; flex: 1 1 300px; min-width: 0; }
.alert.firma h2 { margin: 0; font-size: 15px; }
.alert.firma p { display: none; }
.alert.firma .estado { margin: 0; padding: 4px 12px; border-radius: 10px; }
.alert.firma .estado span { display: inline; margin-right: 6px; font-size: 10px; }
.alert.firma .estado b { font-size: 13px; }
.alert.firma .acts { flex: 0 0 auto; }
@media (max-width: 900px) { .alert.firma { flex-direction: row; align-items: center; } }

/* Inicio: ocultar el cuadro de sucursal/contrato */
.panel.nosuc { display: none !important; }

/* Inicio: el banner ocupa toda la pantalla (fondo = el mismo banner difuminado) */
.content:has(> #v-inicio:not([hidden])) { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#v-inicio:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
#v-inicio > .hero { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; margin: 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; animation: none; }
#v-inicio > .hero::before { content: ""; position: absolute; inset: -40px; background: url("./banner-pcplanet.jpg") center / cover no-repeat; filter: blur(34px) saturate(1.15); transform: scale(1.1); }
#v-inicio > .hero::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.18); }
#v-inicio > .hero img { position: relative; z-index: 1; width: min(94%, calc((100vh - 140px) * 2.4)); height: auto; border-radius: 22px; box-shadow: 0 18px 50px rgba(10, 31, 92, 0.35); }
/* Firma electrónica (dentro de Configuraciones): aviso grande */
#v-config .alert.firma {
  width: 100%; box-sizing: border-box; min-height: 320px; margin: 0 auto 6px;
  flex-direction: column; justify-content: center; align-items: center; text-align: center;
  gap: 22px; padding: 30px 24px; border-radius: 24px;
}
#v-config .alert.firma .fi { flex: 0 0 auto; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
#v-config .alert.firma h2 { font-size: clamp(24px, 3.2vw, 38px); }
#v-config .alert.firma p { display: block; max-width: 640px; margin: 8px auto 0; font-size: 16px; line-height: 1.5; }
#v-config .alert.firma .pill { font-size: 14px; padding: 6px 18px; }
#v-config .alert.firma .estado { padding: 8px 18px; }
#v-config .alert.firma .estado span { font-size: 12px; }
#v-config .alert.firma .estado b { font-size: 16px; }
#v-config .alert.firma .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
#v-config .alert.firma .acts .btn { font-size: 16px; padding: 14px 26px; border-radius: 14px; }

/* Registrar venta local: formato horizontal (rectangular) en dos columnas */
dialog:has(.sale-layout) { width: min(1000px, 96vw); padding: 26px 30px; }
.sale-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr); gap: 26px; align-items: stretch; margin-top: 4px; }
.sale-left { min-width: 0; }
.sale-left .sale-table { max-height: 230px !important; }
.sale-right { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.sale-right .sale-pay { flex-direction: column; align-items: stretch !important; gap: 14px; margin-top: 0 !important; }
.sale-right .sale-pay label select { width: 100% !important; }
.sale-right #sale-total { font-size: 30px !important; text-align: right; color: #0f2a6b; padding: 12px 0; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.sale-right #sale-change { font-size: 15px !important; font-weight: 600; margin-top: 4px; }
@media (max-width: 760px) { .sale-layout { grid-template-columns: 1fr; gap: 14px; } }

/* Productos: formulario horizontal (rectangular) en varias columnas */
dialog:has(.prod-grid) { width: min(980px, 96vw); padding: 26px 30px; }
.prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; margin-top: 8px; }
.prod-grid .pf-field:first-child { grid-column: span 2; }
.prod-grid .pf-field label { margin-top: 12px; }
@media (max-width: 760px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ventas múltiples: pestañas dentro de la ventana de venta */
.sale-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sale-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.sale-tab { border: 1px solid var(--line); background: var(--soft); color: var(--text); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sale-tab:hover { border-color: #1d5be0; }
.sale-tab.on { background: #1d5be0; border-color: #1d5be0; color: #fff; }
.sale-tab.add { background: transparent; border-style: dashed; color: #1d5be0; }

/* Venta: cuadro de pago con azul degradado */
.sale-right { background: linear-gradient(160deg, #3b7bff 0%, #1d5be0 42%, #0f2a6b 100%); border: 0; box-shadow: 0 12px 30px rgba(15, 42, 107, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); color: #fff; }
.sale-right label { color: rgba(255, 255, 255, 0.95); font-weight: 600; }
.sale-right select, .sale-right input { background: #fff !important; color: #10224d !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; border-radius: 10px !important; box-shadow: 0 2px 6px rgba(10, 31, 92, 0.18); }
.sale-right select:focus, .sale-right input:focus { outline: 2px solid #9fc2ff; outline-offset: 1px; }
.sale-right #sale-total { color: #fff !important; border-top: 2px solid rgba(255, 255, 255, 0.35) !important; border-bottom: 2px solid rgba(255, 255, 255, 0.35) !important; text-shadow: 0 2px 8px rgba(5, 20, 70, 0.45); }
.sale-right #sale-change { color: #d6e5ff !important; }

/* Bodega: pantalla de despacho */
.bod { min-height: 100%; display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; background: linear-gradient(180deg, #eef3fc 0%, #d9e6ff 100%); }
.bod-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(135deg, #2f6df0 0%, #1d5be0 45%, #0f2a6b 100%); color: #fff; border-radius: 18px; padding: 14px 20px; box-shadow: 0 10px 28px rgba(15, 42, 107, 0.3); }
.bod-t b { display: block; font-size: 22px; }
.bod-t small { opacity: 0.8; }
.bod-h .sp { flex: 1; }
.bod-k { display: flex; gap: 10px; }
.bk { background: rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 6px 14px; font-size: 12px; line-height: 1.1; text-align: center; }
.bk b { display: block; font-size: 24px; }
.bod-h input[type="search"] { padding: 10px 14px; border: 0; border-radius: 12px; min-width: 240px; font: inherit; font-size: 14px; background: #fff; color: #10224d; }
.bod-tabs { display: flex; background: rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 3px; }
.bod-tabs button { border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.bod-tabs button.on { background: #fff; color: #1d5be0; }
.bod-tool { border: 1px solid rgba(255, 255, 255, 0.45); background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 12px; cursor: pointer; }
.bod-tool:hover { background: rgba(255, 255, 255, 0.15); }
.bod-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-content: start; flex: 1; }
.bod-c { background: #fff; border-radius: 18px; border-top: 7px solid #1d5be0; box-shadow: 0 8px 24px rgba(15, 42, 107, 0.15); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bod-c.warn { border-top-color: #f59e0b; }
.bod-c.late { border-top-color: #dc3545; }
.bod-c.nuevo { animation: bodPulse 1s ease-in-out infinite; }
.bod-c.anul { border-top-color: #6b7280; background: #fff5f5; }
.bod-c.done { border-top-color: #22c55e; opacity: 0.92; }
.bod-ch { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bod-num { font-size: 28px; color: #0f2a6b; letter-spacing: 0.02em; }
.bod-c.anul .bod-num { text-decoration: line-through; color: #6b7280; }
.bod-ago { font-size: 13px; font-weight: 600; color: #1d5be0; background: #eef3fc; border-radius: 99px; padding: 5px 11px; white-space: nowrap; }
.bod-c.warn .bod-ago { background: #fff4dd; color: #b45309; }
.bod-c.late .bod-ago { background: #fde8e8; color: #b91c1c; }
.bod-ban { background: #dc3545; color: #fff; font-weight: 700; text-align: center; border-radius: 10px; padding: 8px; letter-spacing: 0.03em; }
.bod-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bod-meta small { display: block; color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.bod-meta b { font-size: 16px; color: #10224d; word-break: break-word; }
.bod-items { list-style: none; margin: 0; padding: 0; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.bod-items li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; font-size: 17px; border-bottom: 1px solid #eef2f7; color: #10224d; }
.bod-items li:last-child { border-bottom: 0; }
.bq { min-width: 76px; font-weight: 800; font-size: 19px; color: #0f2a6b; }
.bq small { font-weight: 600; font-size: 11px; color: #64748b; }
.bod-ok { margin-top: auto; border: 0; border-radius: 14px; padding: 15px; font: inherit; font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 6px 16px rgba(21, 128, 61, 0.35); cursor: pointer; }
.bod-ok:hover { filter: brightness(1.06); }
.bod-c.anul .bod-ok { background: linear-gradient(135deg, #6b7280, #374151); box-shadow: none; }
.bod-undo { margin-top: auto; border: 1px solid #cbd5e1; border-radius: 12px; padding: 10px; font: inherit; font-weight: 600; color: #475569; background: #fff; cursor: pointer; }
.bod-empty { grid-column: 1 / -1; text-align: center; padding: 70px 20px; font-size: 24px; font-weight: 600; color: #334155; }
.bod-empty small { font-size: 15px; font-weight: 400; color: #64748b; }
.bod-f { display: flex; justify-content: space-between; color: #475569; font-size: 12px; }
@keyframes bodPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(29, 91, 224, 0.35), 0 8px 24px rgba(15, 42, 107, 0.2); } 50% { box-shadow: 0 0 0 9px rgba(29, 91, 224, 0.12), 0 8px 24px rgba(15, 42, 107, 0.2); } }
@media (max-width: 760px) { .bod-h input[type="search"] { min-width: 0; width: 100%; } .bod-g { grid-template-columns: 1fr; } }
.bod-num { white-space: nowrap; font-size: 26px; }
.bod-ch { flex-wrap: wrap; }
.bod-ago { font-size: 12px; }
.bod-f { padding-left: 56px; }
.bod-h input[type="search"] { min-width: 200px; }

/* Venta: lista de productos siempre visible a la izquierda */
dialog:has(.sale-layout) { width: min(1320px, 97vw); }
.sale-layout { grid-template-columns: minmax(250px, 1fr) minmax(0, 1.9fr) minmax(250px, 1fr); }
.sale-cat { display: flex; flex-direction: column; gap: 8px; min-width: 0; background: #f4f8ff; border: 1px solid #d5e3fb; border-radius: 14px; padding: 14px; }
.cat-h { font-weight: 700; font-size: 15px; color: #0f2a6b; }
.sale-cat #sale-product { margin: 0; border-radius: 10px; background: #fff; }
.cat-list { display: flex; flex-direction: column; gap: 6px; overflow: auto; max-height: 470px; padding-right: 2px; }
.cat-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; width: 100%; border: 1px solid #dbe6f8; background: #fff; color: #10224d; border-radius: 10px; padding: 9px 12px; font: inherit; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, transform 0.05s; }
.cat-item:hover { border-color: #1d5be0; box-shadow: 0 3px 10px rgba(29, 91, 224, 0.18); }
.cat-item:active { transform: scale(0.99); }
.cat-item.first { border-color: #1d5be0; box-shadow: 0 0 0 2px rgba(29, 91, 224, 0.2); }
.cat-item .ci-n { font-weight: 700; font-size: 14px; }
.cat-item .ci-n em { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #1d5be0; border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
.cat-item .ci-p { font-weight: 800; color: #1d5be0; font-size: 14px; }
.cat-item .ci-s { grid-column: 1 / -1; font-size: 11px; color: #64748b; }
.cat-item.out { opacity: 0.5; cursor: not-allowed; }
.cat-empty { text-align: center; color: #64748b; padding: 22px 8px; font-size: 13px; }
.sale-left .sale-table { max-height: 300px !important; }
@media (max-width: 1100px) { .sale-layout { grid-template-columns: 1fr 1fr; } .sale-cat { grid-column: 1 / -1; } .cat-list { max-height: 220px; } }
@media (max-width: 760px) { .sale-layout { grid-template-columns: 1fr; } }

/* Bodega: observación del vendedor */
.bod-note { background: #fff8db; border: 2px solid #f5c518; border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 600; color: #5b4300; white-space: pre-wrap; word-break: break-word; }
.bod-note small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9a7400; margin-bottom: 3px; }


/* ===== Restaurante · modo táctil (pantalla completa, deslizar categorías, barra "Ver pedido") ===== */
.od-bar, .od-x, .od-hide { display: none; }
dialog.wide.touch {
  width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden;
}
.touch .od { display: flex; flex-direction: column; align-items: stretch; gap: 0; height: 100%; position: relative; }
.touch .od-l { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.touch .od-top { background: linear-gradient(135deg, #0f2a6b, #1d4ed8); color: #fff; padding: 10px 14px; flex-wrap: nowrap; gap: 8px; }
.touch .od-top h3 { color: #fff; font-size: 18px; flex: 1; }
.touch .od-top h3 small { color: rgba(255, 255, 255, .8) !important; }
.touch .od-top input { display: none; }
.touch .od-mode { background: rgba(255, 255, 255, .18); color: #fff; border: 0; border-radius: 10px; padding: 8px 10px; }
.touch .od-x { display: inline-flex; background: rgba(255, 255, 255, .18); color: #fff; border: 0; border-radius: 10px; width: 40px; height: 38px; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }
.touch .od-cats { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 10px 12px; background: var(--card); border-bottom: 1px solid var(--line); scrollbar-width: none; flex: none; }
.touch .od-cats::-webkit-scrollbar { display: none; }
.touch .od-cats .chip { flex: none; padding: 10px 18px; font-size: 15px; border-radius: 999px; }
.touch .od-grid { flex: 1; min-height: 0; max-height: none; padding: 14px 14px 110px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; align-content: start; }
@media (min-width: 700px) { .touch .od-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .touch .od-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.touch .od-card { border-radius: 18px; box-shadow: 0 4px 14px rgba(15, 42, 107, .08); }
.touch .od-card:active { transform: scale(.97); }
.touch .od-card .rimg.rl { height: 150px; font-size: 72px; }
@media (min-width: 700px) { .touch .od-card .rimg.rl { height: 190px; } }
@media (min-width: 1100px) { .touch .od-card .rimg.rl { height: 220px; } }
.touch .od-card b { font-size: 15px; padding: 10px 12px 0; min-height: 36px; }
.touch .od-card .pr { padding: 4px 12px 12px; font-size: 17px; }
.touch .od-bar {
  display: flex; position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4;
  align-items: center; justify-content: space-between; background: #0f2a6b; color: #fff; border: 0;
  border-radius: 18px; padding: 16px 20px; font: 700 17px inherit; cursor: pointer; box-shadow: 0 10px 30px rgba(15, 42, 107, .45);
}
.touch .od-bar:disabled { opacity: .45; }
.touch .od-bar i { font-style: normal; background: #fff; color: #0f2a6b; border-radius: 999px; padding: 2px 12px; margin-right: 10px; }
.touch .od.sheet-open .od-bar { display: none; }
.touch .od-r { position: absolute; inset: 0; z-index: 5; display: none; border: 0; border-radius: 0; overflow: auto; padding: 16px; background: var(--soft); }
.touch .od.sheet-open .od-r { display: block; }
.touch .od-hide { display: inline-flex; margin-bottom: 10px; }
.touch .od-r .btn { padding: 14px 12px; font-size: 15px; }
@media (min-width: 900px) {
  .touch .od.sheet-open .od-r { inset: 0 0 0 auto; width: min(480px, 100%); box-shadow: -12px 0 30px rgba(0, 0, 0, .25); }
}
.od-mode { background: #64748b; color: #fff; border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }

/* ====== PLANO DE MESAS (Órdenes) ====== */
.pl-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pl-z{display:flex;gap:6px;flex-wrap:wrap}
.pl-z button{border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:999px;padding:8px 16px;font:600 14px inherit;cursor:pointer}
.pl-z button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.pl-sp{flex:1}
.pl-ed{border:1px solid var(--blue);background:var(--card);color:var(--blue);border-radius:10px;padding:8px 14px;font:700 14px inherit;cursor:pointer}
.pl-ed.on{background:var(--blue);color:#fff}
.pl-pal{display:none;gap:8px;flex-wrap:wrap;padding:8px 10px;margin-top:8px;background:var(--soft);border:1px solid var(--line);border-radius:10px}
.pl-pal.on{display:flex}
.pl-pal button{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;padding:7px 11px;font:600 13px inherit;cursor:pointer}
.pl-leg{display:flex;gap:14px;font-size:12px;color:var(--muted);padding:8px 2px}
.pl-leg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.pl-floor{position:relative;margin:0 auto;width:100%;max-width:1200px;aspect-ratio:16/10;border-radius:22px;touch-action:none;user-select:none;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.35) 25%,transparent 25%) 0 0/46px 46px,linear-gradient(315deg,rgba(0,0,0,.035) 25%,transparent 25%) 0 0/46px 46px,linear-gradient(160deg,#e9d8b8,#d6bd8f);
  box-shadow:inset 0 0 0 10px #8b5e34,inset 0 0 40px rgba(0,0,0,.25),0 14px 30px rgba(60,40,10,.25)}
.pl-floor.terraza{background:linear-gradient(135deg,rgba(255,255,255,.25) 25%,transparent 25%) 0 0/46px 46px,linear-gradient(160deg,#cfe8c5,#9fcf8f)}
.pl-it{position:absolute;transform:translate(-50%,-50%);cursor:pointer}
.pl-edit .pl-it{cursor:grab;outline:2px dashed rgba(29,78,216,.55);outline-offset:4px;border-radius:10px}
.pl-it.drag{cursor:grabbing;z-index:20;filter:drop-shadow(0 18px 14px rgba(0,0,0,.35))}
.pl-deco{font-size:clamp(28px,5vw,60px);filter:drop-shadow(0 8px 4px rgba(0,0,0,.28));line-height:1}
.pl-col{width:clamp(18px,3vw,34px);height:clamp(40px,7vw,80px);border-radius:8px;background:linear-gradient(90deg,#d6d3d1,#fafaf9,#a8a29e);box-shadow:0 10px 10px rgba(0,0,0,.3)}
.pl-barra{width:clamp(120px,22vw,260px);height:clamp(28px,5vw,52px);border-radius:10px;background:linear-gradient(#7c4a1d,#4a2a0e);box-shadow:0 14px 12px rgba(0,0,0,.35);color:#fde68a;font:700 12px inherit;display:flex;align-items:center;justify-content:center}
.pl-tb{width:clamp(70px,11vw,132px)}
.pl-tb svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 8px rgba(0,0,0,.32))}
.pl-tb .lb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none;line-height:1.1}
.pl-tb .lb small{font-size:clamp(9px,1.4vw,12px);font-weight:600}
.pl-tb .lb b{font-size:clamp(14px,2.4vw,24px)}
.pl-tb.sel svg{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 8px #3b82f6) drop-shadow(0 12px 8px rgba(0,0,0,.3))}
.pl-hint{margin:8px auto 0;color:var(--muted);font-size:13px;text-align:center}
.pl-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#111827;color:#fff;border-radius:12px;padding:10px 16px;font-size:14px;z-index:5000;box-shadow:0 10px 30px rgba(0,0,0,.4)}