/* Generado desde app.css por app/core/assets.py.
   No editar a mano: los cambios se pierden al regenerar.
   Para modificar estilos, edita la hoja correspondiente. */

/* ---- tokens.css ---- */
:root {
  --bg: #f3f6f8;
  --panel: #ffffff;
  --ink: #0d2136;
  --muted: #3d4f64;
  --line: #cfd8df;
  --accent: #006f78;
  --accent-dark: #005e65;
  --warn: #b42318;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.kicker {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 6px;
  text-transform: uppercase;
}

/* ---- layout.css ---- */
.topbar {
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 24px;
  min-height: 64px;
  padding: 0 28px;
}

.brand {
  font-size: 18px;
  font-weight: 800;
}

.nav {
  display: flex;
  gap: 16px;
  margin-right: auto;
}

.nav a,
.muted-link {
  color: var(--muted);
  font-weight: 650;
}

.page {
  margin: 0;
  max-width: none;
  min-width: 0;
  padding: 0;
  width: 100%;
}

.section-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: clamp(20px, 1.6vw, 34px);
}

.metric-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.login-shell {
  width: min(420px, calc(100vw - 32px));
}

.login-secondary-actions {
  gap: 6px;
  margin-top: 8px;
}

.login-secondary-actions .button-link {
  font-size: 13px;
}

@media (max-width: 760px) {
  .topbar,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- sidebar.css ---- */
.app-shell {
  background: #f3f6f8;
  display: grid;
  gap: 22px;
  grid-template-columns: 274px minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  padding: 12px;
}

.sidebar {
  background: #fff;
  border: 1px solid #cbd6de;
  border-radius: 8px;
  box-shadow:
    0 14px 32px rgb(15 35 54 / 7%),
    0 2px 7px rgb(15 35 54 / 8%);
  color: #14243a;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  font-size: 14px;
  gap: 18px;
  height: calc(100vh - 24px);
  min-height: 0;
  overflow: hidden;
  padding: 16px 8px 12px;
}

.brand {
  font-size: 18px;
  font-weight: 700;
  padding: 0 18px;
}

.side-nav,
.nav-group {
  display: grid;
  gap: 10px;
}

.side-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 8px 0 0;
  scrollbar-color: #8c9399 transparent;
  scrollbar-width: thin;
}

.side-nav::-webkit-scrollbar {
  width: 8px;
}

.side-nav::-webkit-scrollbar-track {
  background: transparent;
}

.side-nav::-webkit-scrollbar-thumb {
  background: #8c9399;
  border-radius: 999px;
}

.nav-label {
  align-items: center;
  color: #4e5d6f;
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 10px;
  grid-template-columns: 1fr auto 1fr;
  letter-spacing: .08em;
  line-height: 1;
  padding: 4px 0;
  text-transform: uppercase;
}

.nav-label span {
  background: #d9e0e6;
  height: 1px;
}

.nav-item {
  align-items: center;
  background: #fff;
  border: 1px solid #d2dbe2;
  border-radius: 8px;
  box-shadow:
    0 9px 18px rgb(15 35 54 / 7%),
    inset 0 1px 0 rgb(255 255 255 / 70%);
  color: #26384e;
  display: grid;
  font-size: 14px;
  font-weight: 700;
  gap: 10px;
  grid-template-columns: 0 34px minmax(0, 1fr);
  min-height: 48px;
  padding: 7px 12px 7px 0;
}

.nav-item.active {
  background: linear-gradient(135deg, #007a7f, #00606b);
  border-color: #00606b;
  box-shadow:
    0 14px 24px rgb(0 111 120 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 18%);
  color: #fff;
}

.nav-rail {
  display: block;
  height: 1px;
  width: 0;
}

.nav-item.active .nav-rail {
  background: transparent;
}

.nav-icon {
  border-radius: 9px;
  box-shadow: 0 8px 16px rgb(15 35 54 / 14%);
  display: grid;
  height: 32px;
  place-items: center;
  position: relative;
  width: 32px;
}

.nav-item.active .nav-icon {
  background: transparent;
  box-shadow: none;
}

.panel-icon {
  background: linear-gradient(135deg, #1fb5c1, #006f78);
}

.users-icon {
  background: linear-gradient(135deg, #20c77a, #0a9e62);
}

.accounts-icon {
  background: linear-gradient(135deg, #ffb33f, #ff8a00);
}

.tables-icon {
  background: linear-gradient(135deg, #3ec4d3, #1090a0);
}

.bottles-icon {
  background: linear-gradient(135deg, #6c50f4, #07aeb7);
}

.panel-icon::before,
.users-icon::before,
.accounts-icon::before,
.tables-icon::before,
.bottles-icon::before {
  color: white;
  font-size: 18px;
  font-weight: 800;
}

.panel-icon::before {
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 6px 6px,
    linear-gradient(currentColor, currentColor) 11px 0 / 6px 6px,
    linear-gradient(currentColor, currentColor) 0 11px / 6px 6px,
    linear-gradient(currentColor, currentColor) 11px 11px / 6px 6px;
  background-repeat: no-repeat;
  content: "";
  height: 17px;
  width: 17px;
}

.users-icon::before {
  content: "U";
  font-size: 14px;
}

.accounts-icon::before {
  content: "$";
  font-size: 15px;
}

.tables-icon::before {
  content: "M";
  font-size: 14px;
}

.bottles-icon::before {
  content: "BT";
  font-size: 11px;
}

.content-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: calc(100vh - 24px);
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pagebar {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd6de;
  border-radius: 8px;
  box-shadow:
    0 14px 32px rgb(15 35 54 / 7%),
    0 2px 7px rgb(15 35 54 / 8%);
  display: flex;
  gap: 22px;
  justify-content: flex-end;
  min-height: 78px;
  padding: 0 16px;
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }

  .sidebar {
    height: auto;
    min-height: auto;
  }

  .side-nav {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    overflow-x: auto;
  }

  .content-shell {
    height: auto;
    overflow: visible;
  }
}

/* ---- sidebar-dropdown.css ---- */
.nav-dropdown {
  display: grid;
  gap: 8px;
}

.nav-dropdown summary {
  list-style: none;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown .nav-item {
  cursor: pointer;
}

.inventory-icon {
  background: linear-gradient(135deg, #7c5cff, #2b78ff);
}

.purchases-icon {
  background: linear-gradient(135deg, #0f766e, #22c55e);
}

.clients-icon {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
}

.administration-icon {
  background: linear-gradient(135deg, #7d8a99, #344154);
}

.audit-icon {
  background: linear-gradient(135deg, #14b8a6, #0f766e);
}

.accounting-icon {
  background: linear-gradient(135deg, #64748b, #0f766e);
}

.shifts-icon {
  background: linear-gradient(135deg, #8b5cf6, #14b8a6);
}

.inventory-icon::before,
.purchases-icon::before,
.clients-icon::before,
.administration-icon::before,
.audit-icon::before,
.accounting-icon::before {
  color: white;
  font-size: 14px;
  font-weight: 700;
}

.inventory-icon::before {
  content: "I";
}

.purchases-icon::before {
  content: "C";
}

.clients-icon::before {
  content: "CL";
  font-size: 12px;
}

.administration-icon::before {
  content: "A";
}

.audit-icon::before {
  content: "AU";
  font-size: 11px;
}

.accounting-icon::before {
  content: "CO";
  font-size: 11px;
}

.shifts-icon::before {
  color: white;
  content: "T";
  font-size: 14px;
  font-weight: 700;
}

.nav-text-row {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.nav-caret::before {
  color: #25384d;
  content: "+";
  font-size: 14px;
  font-weight: 800;
}

.nav-item.active .nav-caret::before {
  color: #fff;
}

.nav-dropdown[open] .nav-caret::before {
  content: "-";
}

.nav-submenu {
  display: grid;
  gap: 8px;
  margin: 0 4px 2px 48px;
}

.nav-subitem {
  align-items: center;
  background: #fff;
  border: 1px solid #d2dbe2;
  border-radius: 8px;
  box-shadow: 0 7px 14px rgb(15 35 54 / 5%);
  color: #2a3c51;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  min-height: 36px;
  padding: 0 10px;
}

.nav-subitem.active {
  background: #eef8fb;
  border-color: #b9dbe2;
  color: #0b5d65;
}

/* Los grupos del menu de Contabilidad, como en JC SOFTS. */
.nav-subgroup {
  color: #6b7c8f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 6px 2px -2px;
  text-transform: uppercase;
}

.nav-subgroup:first-child {
  margin-top: 0;
}

/* Los grupos del menu de Contabilidad se pliegan y se despliegan con su titulo (pedido del usuario, 19/10/2026). Al
   entrar a una pagina solo queda abierto el grupo de esa pagina (sidebar.html). */
.nav-subsection {
  display: grid;
  gap: 8px;
}

.nav-subsection-head {
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 3px 4px 3px 2px;
}

.nav-subsection-head::-webkit-details-marker { display: none; }
.nav-subsection-head .nav-subgroup { margin: 0; }
.nav-subsection-head:hover .nav-subgroup { color: #25384d; }
.nav-subsection-head:focus-visible { outline: 2px solid #006f78; outline-offset: 1px; }

.nav-subsection-items {
  display: grid;
  gap: 8px;
}

.nav-dropdown .nav-subsection .nav-caret::before {
  color: #6b7c8f;
  content: "+";
  font-size: 12px;
}

.nav-dropdown .nav-subsection[open] > .nav-subsection-head .nav-caret::before {
  content: "-";
}

/* ---- brand-logo.css ---- */
.brand {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 122px;
  padding: 2px 18px 8px;
}

.brand img {
  border-radius: 0;
  height: auto;
  max-height: 112px;
  object-fit: contain;
  object-position: center;
  width: min(100%, 190px);
}

.pagebar {
  justify-content: flex-end;
}

.pagebar-user {
  align-items: center;
  display: flex;
  gap: 16px;
}

.pagebar-user form {
  margin: 0;
}

.pagebar-user-pill {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd6de;
  border-radius: 999px;
  box-shadow:
    0 9px 18px rgb(15 35 54 / 7%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
  color: #0d5260;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  white-space: nowrap;
}

.pagebar-user-pill svg,
.pagebar-password svg,
.pagebar-logout svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 20px;
}

.pagebar-password,
.pagebar-logout {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd6de;
  border-radius: 10px;
  box-shadow:
    0 9px 18px rgb(15 35 54 / 7%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
  color: #25384d;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  text-decoration: none;
}

.login-logo {
  border-radius: 12px;
  display: block;
  height: auto;
  margin: 0 auto 18px;
  max-height: 220px;
  object-fit: contain;
  object-position: center;
  width: min(100%, 320px);
}

@media (max-width: 860px) {
  .pagebar {
    align-items: center;
    flex-wrap: wrap;
    padding-block: 12px;
    row-gap: 12px;
  }

  .pagebar-user {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
  }
}

/* En el telefono la llave sola: el texto sigue ahi para el lector de pantalla. */
@media (max-width: 520px) {
  .pagebar-password {
    padding: 0 14px;
  }

  .pagebar-password span {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

/* ---- components.css ---- */
.metric-card,
.table-shell,
.form-panel,
.login-panel,
.empty-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metric-card {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.metric-card span,
small {
  color: var(--muted);
}

.metric-card strong {
  font-size: 24px;
}

.pill,
.tag {
  background: #e8f5f3;
  border: 1px solid #b7ddd8;
  border-radius: 999px;
  color: var(--accent-dark);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  margin: 2px;
  padding: 5px 10px;
}

button,
.button-link {
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  padding: 11px 16px;
}

.soft {
  background: #f7fbfc;
  border: 1px solid #d2dbe2;
  color: #25384d;
}


.ghost {
  background: transparent;
  color: var(--muted);
  padding: 9px 0;
}

.table-shell {
  overflow-x: auto;
  width: 100%;
}

table {
  border-collapse: collapse;
  min-width: min(1040px, 100%);
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 15px 16px;
  text-align: left;
}

th {
  color: var(--muted);
  font-size: 13px;
}

.login-panel,
.empty-state {
  padding: 28px;
}

/* La clave del login y de Cambiar clave: un campo de texto con puntos, para que el navegador no ofrezca guardarla
   (login-secret.js lo vuelve contrasena donde esto no se soporte). */
.login-secret {
  -webkit-text-security: disc;
}

.alert {
  background: #fff0ed;
  border: 1px solid #ffcdc5;
  border-radius: 6px;
  color: var(--warn);
  padding: 10px 12px;
}

/* ---- forms.css ---- */
.form-panel,
.form-stack {
  display: grid;
  gap: 16px;
}

.form-panel {
  max-width: 620px;
  padding: 24px;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 650;
}

input,
select,
textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  padding: 12px;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
}

.check-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 18px 1fr;
}

.check-row span {
  display: grid;
}

.form-note {
  color: var(--muted);
  font-weight: 650;
  margin: 0;
}

/* ---- validation.css ---- */
.field-error {
  color: #b42318;
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-top: -2px;
}

[hidden] {
  display: none !important;
}

.field-invalid {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgb(217 45 32 / 12%);
}

.order-products.field-invalid,
button.field-invalid,
.button-link.field-invalid {
  outline: 3px solid rgb(217 45 32 / 25%);
  outline-offset: 3px;
}

button.field-invalid,
.button-link.field-invalid {
  background: #b42318;
}

.form-error {
  background: #fff4f2;
  border: 1px solid #fecdca;
  border-radius: 8px;
  color: #912018;
  font-weight: 700;
  padding: 10px 12px;
}

.form-error p {
  margin: 0;
}

.form-error ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.modal.error-feedback-modal {
  max-width: min(430px, calc(100vw - 32px));
  width: min(430px, calc(100vw - 32px));
}

.error-feedback-modal .error-feedback-panel {
  gap: 12px;
  padding: 18px 20px;
}

.error-feedback-modal .modal-head h2 {
  font-size: 22px;
}

.error-feedback-body {
  display: grid;
  gap: 8px;
}

.error-feedback-body p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.error-feedback-body ul {
  background: #fff4f2;
  border: 1px solid #fecdca;
  border-radius: 8px;
  color: #912018;
  display: grid;
  font-weight: 700;
  gap: 8px;
  margin: 0;
  padding: 12px 12px 12px 28px;
}

.error-feedback-modal .error-feedback-actions {
  justify-content: flex-end;
}

.error-feedback-modal .error-feedback-actions button {
  padding: 10px 14px;
}

.selected-product.field-invalid {
  border-color: #d92d20;
  color: #7a271a;
}

label:has(.field-invalid) {
  color: #7a271a;
}

.supply-panel .field-error {
  align-items: center;
  background: #2f3033;
  border: 1px solid #202124;
  border-radius: 4px;
  color: white;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  line-height: 1;
  margin-top: 2px;
  padding: 8px 11px 8px 8px;
  position: relative;
  box-shadow: 0 10px 22px rgb(15 23 42 / 28%);
  width: fit-content;
  z-index: 2;
}

.supply-panel .field-error::before {
  background: #f79009;
  border-radius: 3px;
  color: white;
  content: "!";
  display: inline-flex;
  flex: 0 0 22px;
  font-size: 15px;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  align-items: center;
  width: 22px;
}

.supply-panel .field-error::after {
  border-color: transparent transparent #2f3033;
  border-style: solid;
  border-width: 0 6px 6px;
  content: "";
  left: 18px;
  position: absolute;
  top: -6px;
}

/* ---- module-card.css ---- */
.module-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow:
    0 14px 32px rgb(15 35 54 / 7%),
    0 2px 7px rgb(15 35 54 / 8%);
  display: grid;
  gap: 18px;
  padding: clamp(18px, 1.7vw, 32px);
}

.module-card-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.module-card-head h1 {
  margin: 0;
}

.module-card-table {
  margin: 0;
}

@media (max-width: 760px) {
  .module-card {
    padding: 16px;
  }

  .module-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---- dashboard.css ---- */
.dashboard-card {
  gap: 14px;
  margin-bottom: 22px;
  padding: 22px 30px 18px;
}

.dashboard-head {
  align-items: center;
}

.dashboard-head h1 {
  color: #0d2136;
  font-size: 36px;
  letter-spacing: 0;
}

.dashboard-head-actions {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}

.dashboard-quick-account {
  align-items: center;
  background: linear-gradient(135deg, #007e86, #005c66);
  border: 1px solid #00555e;
  border-radius: 8px;
  box-shadow:
    0 14px 24px rgb(0 111 120 / 22%),
    inset 0 1px 0 rgb(255 255 255 / 18%);
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 40px;
  min-width: 150px;
  padding: 0 16px;
}

.dashboard-quick-account svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 18px;
}

.dashboard-quick-account:disabled {
  cursor: not-allowed;
  filter: none;
  opacity: 1;
}

.dashboard-quick-account-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  max-width: 240px;
  text-align: right;
}

.dashboard-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-metric,
.dashboard-panel {
  background: #fff;
  border: 1px solid #cbd6de;
  border-radius: 8px;
  box-shadow:
    0 13px 26px rgb(15 35 54 / 7%),
    0 2px 7px rgb(15 35 54 / 8%);
}

.dashboard-metric {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 118px;
  overflow: hidden;
  padding: 16px 18px 15px 16px;
  position: relative;
}

.dashboard-metric::before {
  background: #007780;
  content: "";
  height: calc(100% - 36px);
  left: 0;
  position: absolute;
  top: 18px;
  width: 3px;
}

.dashboard-metric-icon {
  align-items: center;
  background: #e8f1f2;
  border-radius: 999px;
  color: #006f78;
  display: flex;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.dashboard-metric-icon svg,
.dashboard-panel-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.dashboard-metric-icon svg {
  height: 26px;
  width: 26px;
}

.dashboard-metric-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dashboard-metric-copy > span {
  color: #1f3045;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-metric-copy strong {
  color: #0d2136;
  font-size: 26px;
  line-height: 1.05;
}

.dashboard-metric-copy small,
.dashboard-list span,
.dashboard-alerts p,
.muted-copy {
  color: #314459;
}

.dashboard-metric-copy small {
  font-size: 12px;
}

.dashboard-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 441px;
}

.dashboard-main {
  align-content: start;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-panel {
  min-height: 0;
  overflow: hidden;
}

.dashboard-main .dashboard-panel {
  min-height: 580px;
}

.dashboard-panel-head {
  align-items: center;
  background: linear-gradient(180deg, #f7fbfc, #edf5f8);
  border-bottom: 1px solid #cbd6de;
  display: flex;
  gap: 16px;
  min-height: 66px;
  padding: 0 24px;
}

.dashboard-panel-head h2 {
  color: #005e65;
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

.dashboard-panel-icon {
  color: #006f78;
  display: inline-flex;
}

.dashboard-panel-icon svg {
  height: 25px;
  width: 25px;
}

.dashboard-list {
  display: grid;
  gap: 0;
  padding: 14px 24px 26px;
}

.dashboard-list article {
  align-items: center;
  border-bottom: 1px solid #cbd6de;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 58px;
  padding: 13px 0;
}

.dashboard-list article:last-child {
  border-bottom: 0;
}

.dashboard-list span {
  font-size: 16px;
}

.dashboard-list strong {
  color: #0d2136;
  font-size: 17px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.dashboard-side {
  align-content: start;
  display: grid;
  gap: 8px;
}

.dashboard-alerts,
.dashboard-links {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.dashboard-alerts:empty {
  display: none;
}

.dashboard-side > .dashboard-panel:last-child {
  min-height: 84px;
}

.dashboard-alerts p {
  background: #f8fbfc;
  border: 1px solid #d7e1e7;
  border-radius: 8px;
  margin: 0;
  padding: 10px 12px;
}

.dashboard-links a {
  background: #f8fbfc;
  border: 1px solid #d7e1e7;
  border-radius: 8px;
  color: #0d5260;
  font-weight: 800;
  padding: 10px 12px;
}

@media (max-width: 1280px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1400px) and (min-height: 900px) {
  .dashboard-shell {
    overflow-y: hidden;
  }
}

@media (max-width: 1100px) {
  .dashboard-main,
  .dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-main .dashboard-panel {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .dashboard-card {
    padding: 20px;
  }

  .dashboard-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-metric {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 112px;
    padding: 16px;
  }

  .dashboard-metric-icon {
    height: 48px;
    width: 48px;
  }
}

/* ---- dashboard-bottles.css ---- */
.dashboard-bottles {
  min-height: 486px;
}

.dashboard-bottle-head {
  color: #005e65;
  font-size: 16px;
  font-weight: 900;
  padding: 0 20px 10px;
}

.dashboard-stale-status {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  color: #9a3412;
  font-size: 13px;
  font-weight: 800;
  margin: 0 14px 10px;
  padding: 8px 10px;
}

.dashboard-bottle-list {
  display: grid;
  gap: 10px;
  max-height: 388px;
  overflow-y: auto;
  padding: 0 14px 16px;
  scrollbar-color: #8c9399 transparent;
  scrollbar-width: thin;
}

.dashboard-bottle-list::-webkit-scrollbar {
  width: 8px;
}

.dashboard-bottle-list::-webkit-scrollbar-thumb {
  background: #8c9399;
  border-radius: 999px;
}

.dashboard-bottle {
  background: #fff;
  border: 1px solid #cbd6de;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgb(15 35 54 / 6%);
  display: grid;
  gap: 8px;
  padding: 14px 14px 12px;
}

.dashboard-bottle > div:first-child {
  display: grid;
  gap: 3px;
}

.dashboard-bottle span {
  color: #0d2136;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-bottle small {
  color: #314459;
  font-size: 13px;
}

.dashboard-bottle strong {
  color: #006f78;
  font-size: 22px;
  line-height: 1;
}

.dashboard-bottle.low strong {
  color: #b42318;
}

.dashboard-bottle-meter {
  background: #dce5e8;
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.dashboard-bottle-meter span {
  background: #007880;
  display: block;
  height: 100%;
}

/* ---- users.css ---- */
.users-table {
  background: var(--panel);
  border: 1px solid #ccd7e4;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
}

.users-module-card {
  gap: 22px;
}

.users-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.users-module-card .users-table {
  box-shadow: none;
}

.users-card-head {
  align-items: flex-start;
}

.users-table h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  padding: 14px 16px 0;
}

.users-table table {
  min-width: min(1040px, 100%);
  table-layout: fixed;
  width: 100%;
}

.users-table th:nth-child(1), .users-table td:nth-child(1) { width: 14%; }
.users-table th:nth-child(2), .users-table td:nth-child(2) { width: 24%; }
.users-table th:nth-child(3), .users-table td:nth-child(3) { width: 22%; }
.users-table th:nth-child(4), .users-table td:nth-child(4) { width: 16%; }
.users-table th:nth-child(5), .users-table td:nth-child(5) { width: 24%; }

.users-table td small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

.user-code-cell span {
  color: var(--muted);
  font-weight: 500;
}

.users-table th {
  background: #e6edf7;
  color: #001332;
  font-size: 12px;
  font-weight: 700;
}

.users-table td {
  color: #001b3d;
  font-size: 14px;
  height: 52px;
  vertical-align: middle;
}

.status-badge {
  background: #dff7ef;
  border: 1px solid #9bd8c7;
  border-radius: 6px;
  color: #007960;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  margin-right: 4px;
  padding: 5px 10px;
}

.status-badge.warn {
  background: #e8fbfb;
  border-color: #9ddddd;
  color: #007073;
}

.status-badge.inactive {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.status-badge.danger {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.row-actions {
  padding-left: 12px;
}

.actions-wrap {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.actions-wrap form {
  margin: 0;
}

.small-muted-action {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.small-button {
  background: white;
  border: 1px solid #d5dce5;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 16%);
  color: #001332;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 9px 11px;
}

.modal.user-create-modal {
  max-width: min(500px, calc(100vw - 32px));
}

.modal-panel.user-create-panel {
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.user-create-head {
  background: #fbfcfe;
  border-bottom: 1px solid #e0e7ef;
  padding: 18px 20px 12px;
}

.user-create-head .kicker {
  color: #007960;
  font-size: 12px;
  margin: 0 0 6px;
}

.user-create-head h2 {
  color: #001332;
  font-size: 22px;
  letter-spacing: 0;
}

.user-create-close {
  border-color: #d7e0ea;
  box-shadow: 0 3px 10px rgb(15 23 42 / 8%);
  font-size: 22px;
  line-height: 1;
}

.user-create-body {
  display: grid;
  gap: 13px;
  padding: 16px 20px;
}

.user-create-fields {
  display: grid;
  gap: 12px;
}

.user-create-field {
  color: #001332;
  font-size: 14px;
  gap: 7px;
}

.user-create-field span {
  font-weight: 800;
}

.user-create-field input {
  background: #fff;
  border-color: #cbd7e2;
  border-radius: 8px;
  min-height: 42px;
  padding: 9px 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.user-create-field input:focus {
  border-color: #007960;
  box-shadow: 0 0 0 4px rgb(0 121 96 / 12%);
  outline: none;
}

.user-create-note {
  align-items: start;
  background: #f4faf8;
  border: 1px solid #cfe7e0;
  border-radius: 8px;
  display: grid;
  gap: 2px;
  padding: 9px 11px;
}

.user-create-note strong {
  color: #006f61;
  font-size: 12px;
}

.user-create-note span {
  color: #52635f;
  font-size: 12px;
  font-weight: 700;
}

.user-create-actions {
  background: #fbfcfe;
  border-top: 1px solid #e0e7ef;
  padding: 14px 20px 18px;
}

.user-create-actions .ghost-button {
  border-color: #cfd8e3;
  box-shadow: 0 2px 5px rgb(15 23 42 / 8%);
  color: #001332;
}

.user-create-actions button[type="submit"] {
  background: #007960;
  box-shadow: 0 6px 12px rgb(0 121 96 / 16%);
}

.temp-password-box {
  background: #eef8f7;
  border: 1px solid #bfe4df;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
}

.temp-password-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.temp-password-box strong {
  color: var(--accent);
  font-size: 18px;
}

.temporary-password-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.copy-password-button {
  border-color: #9bd8c7;
  color: #007960;
}

.created-password-box {
  max-width: 460px;
}

.created-password-box small {
  color: var(--muted);
}

.blocked-users-card {
  background: #fbfdff;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  max-width: 760px;
  padding: 12px;
}

.blocked-users-card > header,
.blocked-user-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto;
}

.blocked-users-card h2 {
  color: #001332;
  font-size: 16px;
  margin: 0;
}

.blocked-users-card .kicker {
  margin-bottom: 2px;
}

.blocked-users-card > header > strong {
  align-items: center;
  background: #eef8f7;
  border: 1px solid #bfe4df;
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  font-size: 13px;
  height: 30px;
  justify-content: center;
  min-width: 30px;
  padding: 0 10px;
}

.blocked-users-list {
  display: grid;
  gap: 8px;
}

.blocked-user-row {
  background: white;
  border: 1px solid #e4ebf3;
  border-radius: 7px;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.3fr) auto;
  padding: 9px 10px;
}

.blocked-user-row strong,
.blocked-user-row small {
  display: block;
}

.blocked-user-row small,
.blocked-users-empty,
.blocked-user-meta {
  color: var(--muted);
  font-size: 12px;
}

.blocked-user-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.blocked-user-meta span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 8px;
}

.blocked-user-row form {
  margin: 0;
}

.unlock-button {
  border-color: #9bd8c7;
  color: #007960;
}

.blocked-users-empty {
  margin: 0;
}

@media (max-width: 760px) {
  .user-create-head,
  .user-create-body,
  .user-create-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .user-create-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .user-create-actions button {
    width: 100%;
  }

  .blocked-user-row {
    grid-template-columns: 1fr;
  }
}

/* ---- clients.css ---- */
.clients-module-card {
  gap: 14px;
}

.clients-module-card .purchase-panel {
  box-shadow: none;
}

.clients-page-head {
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 4px;
}

.clients-page-head h1 {
  font-size: 30px;
  line-height: 1;
}

.clients-page-head [data-client-modal-open="new-client"] {
  font-size: 13px;
  min-height: 34px;
  padding: 8px 13px;
}

.clients-module-card .table-shell th:last-child {
  width: 124px;
}

.clients-module-card .purchase-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 112px;
  white-space: normal;
}

.clients-module-card .purchase-actions > .button-link,
.clients-module-card .purchase-actions > button,
.clients-module-card .purchase-actions > form {
  margin-right: 0;
  width: 100%;
}

.clients-module-card .purchase-actions > form {
  display: flex;
}

.clients-module-card .purchase-actions .button-link,
.clients-module-card .purchase-actions button {
  font-size: 12px;
  height: 28px;
  min-height: 28px;
  min-width: 0;
  padding: 0 8px;
}

.modal.client-dialog {
  border-radius: 12px;
  max-width: min(520px, calc(100vw - 32px));
}

.modal.client-dialog::backdrop {
  backdrop-filter: blur(7px);
  background: rgb(15 23 42 / 44%);
}

.modal-panel.client-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  gap: 12px;
  padding: 18px 18px 0;
}

.client-modal-head {
  align-items: flex-start;
}

.client-head-main {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.client-head-icon {
  background:
    linear-gradient(135deg, rgb(20 184 166 / 16%), rgb(59 130 246 / 10%)),
    #ffffff;
  border: 1px solid #9edbd4;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 70%);
  display: inline-grid;
  height: 38px;
  place-items: center;
  width: 38px;
}

.client-head-icon::before {
  border: 2px solid var(--accent);
  border-radius: 999px 999px 7px 7px;
  content: "";
  height: 16px;
  width: 16px;
}

.client-modal-head h2 {
  color: #111827;
  font-size: 25px;
  line-height: 1.05;
  margin: 0;
}

.client-close {
  border-color: #d9e2df;
  box-shadow: 0 8px 18px rgb(15 23 42 / 10%);
  color: #2f3d3a;
  font-size: 16px;
  height: 32px;
  width: 32px;
}

.client-form-grid {
  display: grid;
  column-gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 68px));
  justify-content: center;
  row-gap: 10px;
}

.client-field {
  color: #22312d;
  font-size: 13px;
  gap: 6px;
  grid-column: span 3;
}

.client-field.wide-field {
  grid-column: 1 / -1;
}

.client-compact-field {
  grid-column: span 2;
}

.client-credit-field {
  grid-column: span 3;
}

.client-label {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.client-mini-icon {
  border: 2px solid var(--accent);
  border-radius: 6px;
  height: 13px;
  width: 13px;
}

.name-icon {
  border-radius: 999px 999px 5px 5px;
}

.card-icon,
.mail-icon {
  border-radius: 4px;
}

.phone-icon,
.pin-icon {
  border-radius: 3px;
  transform: rotate(-35deg);
}

.terms-icon {
  border-radius: 50%;
}

.pay-icon {
  border-radius: 3px;
}

.type-icon {
  border-radius: 999px;
}

.credit-icon {
  border-radius: 4px;
  transform: rotate(45deg);
}

.client-field input,
.client-field select {
  background: #ffffff;
  border: 1px solid #cbd8d4;
  border-color: #cbd8d4;
  border-radius: 8px;
  color: #17211f;
  font-size: 14px;
  min-height: 36px;
  padding: 7px 10px;
  width: 100%;
}

.client-field input:focus,
.client-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(15 118 110 / 13%);
  outline: 0;
}

.client-field small {
  color: var(--muted);
  font-size: 12px;
}

.client-terms.credit {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.client-type.employee {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.client-type.client {
  background: #ecfeff;
  border-color: #a5f3fc;
  color: #155e75;
}

.client-terms.cash,
.client-payment-status.paid {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.client-payment-status.unpaid {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.client-payment-status.none {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.client-actions {
  background: #f7faf8;
  border-top: 1px solid #dce6e2;
  margin: 2px -18px 0;
  padding: 12px 18px 14px;
}

.client-cancel {
  border-color: #cfd9d5;
  border-radius: 8px;
  color: #24312e;
  padding: 9px 15px;
}

.client-submit {
  align-items: center;
  background: linear-gradient(135deg, #159485, #0f766e);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgb(15 118 110 / 18%);
  display: inline-flex;
  gap: 8px;
  padding: 10px 16px;
}

@media (max-width: 700px) {
  .modal-panel.client-panel { padding: 18px 16px 0; }
  .client-form-grid { grid-template-columns: 1fr; }
  .client-field,
  .client-field.wide-field,
  .client-compact-field,
  .client-credit-field { grid-column: 1 / -1; }
  .client-actions { margin-inline: -16px; padding-inline: 16px; }
}


/* Filtros del registro de clientes. Misma forma que los del catalogo de
   inventario, con una columna menos: aqui son cuatro selectores. */
.clients-filters {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(124px, 1fr)) auto;
  margin: 0 0 16px;
  padding: 14px;
}

.clients-filters label {
  color: #203047;
  font-size: 12px;
  gap: 6px;
}

.clients-filters input,
.clients-filters select {
  background: #fff;
  font-size: 13px;
  min-height: 38px;
  padding: 8px 10px;
}

.clients-filter-actions {
  align-items: end;
  display: flex;
  gap: 8px;
}

.clients-filter-actions button,
.clients-filter-actions a {
  border-radius: 6px;
  font-weight: 700;
  min-height: 36px;
  padding: 8px 12px;
  text-decoration: none;
}

.clients-filter-actions a {
  background: #eef3f0;
  color: var(--muted);
}

@media (max-width: 1320px) {
  .clients-filters {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }

  .clients-search {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .clients-filters {
    grid-template-columns: 1fr;
  }

  .clients-search {
    grid-column: auto;
  }
}

/* ---- modals.css ---- */
.modal {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
  max-width: min(620px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.modal.wide,
.modal-panel.wide {
  max-width: min(820px, calc(100vw - 32px));
}

.modal::backdrop {
  background: rgb(15 23 42 / 45%);
}

.modal-panel {
  background: var(--panel);
  display: grid;
  gap: 16px;
  padding: 22px;
}

.modal-head,
.modal-actions {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.modal-head h2,
.modal-title {
  font-size: 24px;
  line-height: 1.1;
  margin: 0;
}

.modal-subtitle {
  color: var(--muted);
  margin: 6px 0 0;
}

/* El aspa de cierre de la cabecera (macro partials/modal_close.html). Tamano y lugar de PCR: 28 px, a la derecha y a la
   altura del titulo, que va debajo del antetitulo (13 px x 1.45 + 6 de margen, y el titulo de 26 px centrado con los 28
   del boton). Colores del Bar: sin fondo, el gris de los textos secundarios y un velo de la tinta al pasar. Le gana a la
   sombra y al salto que button-effects.css pone a todos los botones. */
.modal .modal-close {
  align-items: center;
  align-self: flex-start;
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  height: 28px;
  justify-content: center;
  margin-left: auto;
  margin-top: 24px;
  min-height: 28px;
  padding: 0;
  transform: none;
  width: 28px;
}

.modal .modal-close::before {
  content: "\00d7";
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.modal .modal-close:hover,
.modal .modal-close:active {
  background: rgb(13 33 54 / 8%);
  box-shadow: none;
  color: var(--ink);
  filter: none;
  transform: none;
}

.modal .modal-close:focus-visible {
  box-shadow: 0 0 0 3px rgb(59 130 246 / 22%);
  color: var(--ink);
}

/* Cuando la cabecera trae otro boton (Nueva, en Chequeras), los dos van juntos a la derecha, centrados en la misma
   franja de 28 px que el aspa sola: el boton mas alto sobresale un poco y no la corre. */
.modal .modal-head-actions {
  align-items: center;
  align-self: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  height: 28px;
  margin-left: auto;
  margin-top: 24px;
}

.modal .modal-head-actions > .modal-close {
  align-self: center;
  margin: 0;
}

.modal-body,
.modal-section {
  display: grid;
  gap: 12px;
}

.modal-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px 14px;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  padding: 12px;
}

.modal-summary span {
  color: var(--muted);
}

/* Un resumen que se calcula mientras se escribe (el pago de una factura en dolares) empieza oculto. */
.modal-summary[hidden] {
  display: none;
}

.modal-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #7c2d12;
  margin: 0;
  padding: 10px 12px;
}

.icon-button,
.ghost-button {
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
}

.icon-button {
  aspect-ratio: 1;
  border-radius: 999px;
  padding: 0;
  width: 34px;
}

.permission-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* ---- permission-modal.css ---- */
.permissions-modal {
  max-width: min(940px, calc(100vw - 44px));
}
.permission-panel {
  background: var(--panel);
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-height: min(760px, calc(100vh - 44px));
}

.permission-head {
  align-items: center;
  border-bottom: 1px solid #d6dde8;
  display: flex;
  justify-content: space-between;
  padding: 16px;
}

.permission-head h2 {
  color: #172033;
  font-size: 18px;
  line-height: 1.15;
  margin: 0 0 2px;
}

.permission-head p:not(.kicker),
.permission-help {
  color: #566b87;
  font-size: 12px;
  margin: 0;
}

.permission-body {
  display: grid;
  gap: 16px;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 30px 16px;
}

.permission-tabs {
  background: #edf4f8;
  border: 1px solid #d2dce8;
  border-radius: 8px 8px 0 0;
  display: flex;
  /* Las trece pestanas no caben en una fila: bajan a la siguiente en vez de
     esconderse detras de una barra de desplazamiento. */
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 10px 10px 9px;
}

.permission-tab {
  align-items: center;
  background: #f7fbff;
  border: 1px solid #d4deea;
  border-radius: 8px;
  color: #223044;
  display: inline-flex;
  font-size: 12px;
  gap: 12px;
  padding: 8px 11px;
  white-space: nowrap;
}

.permission-tab.active {
  background: #2f6df6;
  border-color: #2f6df6;
  color: white;
}

.permission-tab span {
  background: #e4ecf6;
  border-radius: 999px;
  color: #52657d;
  font-size: 11px;
  min-width: 24px;
  padding: 1px 7px;
}

.permission-tab.active span {
  background: rgb(255 255 255 / 18%);
  color: white;
}

.permission-tab-panel {
  border: 1px solid #d2dce8;
  border-radius: 0 0 8px 8px;
  display: none;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 14px;
}

.permission-tab-panel.active {
  display: grid;
}

.permission-tab-panel header {
  align-items: center;
  background: #f8fbff;
  border: 1px solid #d9e2ee;
  border-radius: 7px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 12px;
}

.permission-tab-panel header span {
  color: #65758d;
  font-size: 12px;
}

.permission-check {
  align-items: flex-start;
  display: grid;
  gap: 4px 10px;
  grid-template-columns: 16px 1fr;
  padding: 5px 0;
}

.permission-check input {
  height: 13px;
  margin-top: 3px;
  width: 13px;
}

.permission-check span {
  color: #263244;
  font-size: 14px;
  line-height: 1.25;
}

.permission-check small {
  color: #65758d;
  font-size: 12px;
  grid-column: 2;
}

.permission-footer {
  align-items: center;
  border-top: 1px solid #d6dde8;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 16px;
}

/* ---- accounts.css ---- */
.accounts-head {
  align-items: flex-start;
}

/* Lo que hizo la accion anterior: devolver o anular. */
.account-notice {
  background: #e8f5f3;
  border: 1px solid #b7ddd8;
  border-radius: 8px;
  color: var(--accent-dark);
  font-weight: 700;
  margin: 0 0 18px;
  padding: 12px 16px;
}

.quick-account {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto;
  max-width: 650px;
}

.accounts-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

.accounts-list,
.account-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.accounts-list {
  align-content: start;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.accounts-list h2,
.account-title h2 {
  font-size: 18px;
  margin: 0;
}

.account-card {
  align-items: center;
  background: #f8fbff;
  border: 1px solid #d9e2ee;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  padding: 12px;
}

.account-card div {
  display: grid;
}

.account-card span,
.account-title p,
.empty-copy {
  color: var(--muted);
  margin: 0;
}

.account-card p {
  color: var(--accent-dark);
  font-weight: 800;
  margin: 0;
}

.accounts-detail {
  display: grid;
  gap: 18px;
}

.account-panel {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.account-title {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.account-title > strong {
  font-size: 22px;
}

.items-list {
  border: 1px solid #d9e2ee;
  border-radius: 8px;
  display: grid;
}

.item-row {
  align-items: center;
  border-bottom: 1px solid #e8edf4;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 150px 130px;
  padding: 11px 12px;
}

.item-row:last-child {
  border-bottom: 0;
}

.item-row small {
  color: var(--muted);
}

.item-form {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 90px 130px auto;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.account-merge-panel {
  max-width: 620px;
}

.account-merge-target {
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.account-merge-target span,
.account-merge-target small,
.account-merge-help {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.account-merge-options {
  border: 0;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.account-merge-options legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.account-merge-option {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.account-merge-option input {
  height: 18px;
  width: 18px;
}

.account-merge-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-merge-option small {
  color: var(--muted);
  font-size: 12px;
}

.account-merge-option b {
  white-space: nowrap;
}

.account-merge-option:has(input:checked) {
  border-color: #0f766e;
  background: #ecfdf5;
}

@media (max-width: 980px) {
  .accounts-layout,
  .quick-account,
  .item-form {
    grid-template-columns: 1fr;
  }
}

/* ---- account-register.css ---- */
.account-register {
  border: 0;
  border-radius: 0;
}

.account-register-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.account-register-head h2 {
  margin: 0;
}

.account-register-head p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin: 2px 0 0;
}

.account-filters {
  align-items: end;
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(220px, 1fr) minmax(118px, 140px) minmax(118px, 140px) minmax(126px, 144px) minmax(126px, 144px) auto;
  margin: 0 0 10px;
  padding: 8px;
}

.account-filter-field {
  color: var(--muted);
  display: grid;
  font-size: 10px;
  font-weight: 800;
  gap: 3px;
  letter-spacing: 0;
  line-height: 1;
  min-width: 0;
  text-transform: uppercase;
}

.account-filters input,
.account-filters select,
.account-filters button {
  width: 100%;
}

.account-filters input,
.account-filters select {
  border-radius: 6px;
  font-size: 13px;
  height: 34px;
  min-height: 34px;
  padding: 6px 9px;
}

.account-filter-actions {
  align-items: center;
  align-self: end;
  display: flex;
  gap: 8px;
}

.account-filter-actions .small-button {
  min-height: 34px;
  padding: 8px 12px;
  white-space: nowrap;
}

.account-register table {
  min-width: 980px;
}

.account-register th {
  background: #eaf1f8;
  color: #06101f;
}

.account-register td {
  vertical-align: middle;
}

.account-register td:first-child {
  display: grid;
  gap: 3px;
}

.account-register small {
  color: var(--muted);
}

.account-register td:last-child {
  text-align: right;
}

.account-register-actions {
  gap: 6px;
  justify-content: flex-end;
}

.account-register-actions button {
  min-height: 30px;
  padding: 7px 10px;
}

.account-status {
  justify-content: center;
  min-width: 76px;
  border-radius: 7px;
  font-weight: 800;
}

.account-status.status-open {
  border-color: #8fd3e8;
  background: #e8f8fc;
  color: #075985;
}

.account-status.status-paid {
  border-color: #85d6a8;
  background: #e8f8ef;
  color: #047244;
}

.account-status.status-credit {
  border-color: #f4c76d;
  background: #fff7df;
  color: #8a4b00;
}

.account-status.status-cancelled {
  border-color: #f2a29b;
  background: #fff0ef;
  color: #b42318;
}

.account-status.status-merged {
  border-color: #a7b0be;
  background: #f3f6f8;
  color: #334155;
}

.account-register-pager {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 0 0;
}

.account-register-pager div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.account-register-pager strong {
  color: var(--text);
  white-space: nowrap;
}

.account-register-pager .button-link,
.account-pager-disabled {
  min-height: 40px;
  padding: 10px 14px;
}

.account-pager-disabled {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: inline-flex;
}

@media (max-width: 760px) {
  .account-filters {
    grid-template-columns: minmax(180px, 1fr) minmax(112px, 130px);
  }

  .account-filter-search,
  .account-filter-actions {
    grid-column: 1 / -1;
  }

  .account-register-pager,
  .account-register-pager div {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---- account-reports.css ---- */
.account-reports-menu {
  position: relative;
}

.account-reports-menu summary {
  background: #6d5dfc;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(109, 93, 252, 0.22);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  padding: 12px 18px;
}

.account-reports-menu summary::-webkit-details-marker {
  display: none;
}

.account-reports-menu[open] summary {
  background: #5848df;
}

.account-reports-menu div {
  background: #fff;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(17, 24, 39, 0.16);
  display: grid;
  gap: 6px;
  min-width: 230px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
}

.account-reports-menu a {
  border-radius: 6px;
  color: #111827;
  font-weight: 700;
  padding: 10px 12px;
  text-decoration: none;
}

.account-reports-menu a:hover {
  background: #eef4ff;
}

.account-report-card {
  gap: 18px;
}

.report-actions {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.report-actions form {
  align-items: end;
  display: flex;
  gap: 8px;
}

.report-actions label {
  color: var(--muted);
  display: grid;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 4px;
}

.report-actions input {
  min-height: 48px;
}

.report-actions button,
.report-actions .button-link {
  align-items: center;
  min-height: 48px;
}

.report-metrics {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.report-metrics article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.report-metrics span,
.report-code,
.account-report-table small {
  color: var(--muted);
}

.report-metrics strong {
  font-size: 24px;
}

.account-report-table table {
  min-width: 760px;
}

.daily-sales-report {
  background:
    radial-gradient(circle at 16% 20%, rgba(0, 116, 122, 0.055), transparent 34%),
    radial-gradient(circle at 74% 22%, rgba(55, 98, 158, 0.055), transparent 30%),
    var(--panel);
  gap: 26px;
  padding: 30px 36px 36px;
}

.daily-report-hero {
  align-items: flex-start;
  display: flex;
  gap: 28px;
  justify-content: space-between;
}

.daily-report-title {
  display: grid;
  gap: 12px;
}

.daily-report-title .kicker {
  color: var(--accent-dark);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.daily-report-title-row {
  align-items: center;
  display: flex;
  gap: 18px;
}

.daily-report-title-row h1 {
  color: var(--ink);
  font-size: 38px;
  line-height: 1.08;
  margin: 0;
}

.daily-report-title-icon {
  align-items: center;
  background: linear-gradient(135deg, #007c80, #005d64);
  border-radius: 4px;
  box-shadow: 0 12px 22px rgba(0, 94, 101, 0.22);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  height: 45px;
  justify-content: center;
  width: 45px;
}

.daily-report-title-icon svg,
.daily-report-date svg,
.daily-report-filter svg,
.daily-report-detail-panel header svg,
.daily-report-export svg,
.daily-report-metric-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.daily-report-title-icon svg {
  height: 29px;
  width: 29px;
}

.daily-report-date {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 16px;
  gap: 10px;
  margin: 0;
}

.daily-report-date svg {
  color: var(--ink);
  height: 20px;
  width: 20px;
}

.daily-report-filter {
  align-items: flex-end;
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  min-width: 520px;
}

.daily-report-range-filter {
  gap: 12px;
  min-width: 0;
}

.daily-report-filter label {
  color: var(--ink);
  display: grid;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
}

.daily-report-filter input,
.daily-report-filter select {
  background: #fff;
  border: 1px solid #cfd8df;
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(15, 35, 54, 0.04);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  height: 54px;
  padding: 0 18px;
  width: 254px;
}

.daily-report-range-filter input,
.daily-report-range-filter select {
  width: 168px;
}

.daily-report-filter button,
.daily-report-filter .button-link {
  align-items: center;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0, 94, 101, 0.16);
  display: inline-flex;
  gap: 10px;
  height: 54px;
  min-height: 54px;
  padding: 0 24px;
}

.daily-report-range-filter button,
.daily-report-range-filter .button-link {
  padding: 0 18px;
}

.daily-report-filter button {
  background: linear-gradient(135deg, #007c80, #005d64);
}

.daily-report-filter .button-link {
  background: #f7fafb;
  border: 1px solid #cfd8df;
  box-shadow: 0 8px 18px rgba(15, 35, 54, 0.08);
  color: var(--ink);
  text-decoration: none;
}

.daily-report-filter svg {
  height: 20px;
  width: 20px;
}

.daily-report-metrics {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.daily-report-metric {
  align-items: center;
  border: 1px solid rgba(0, 94, 101, 0.2);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(15, 35, 54, 0.06);
  display: flex;
  gap: 22px;
  min-height: 148px;
  padding: 24px;
}

.daily-report-metric > span:last-child {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.daily-report-metric b {
  color: var(--ink);
  font-size: 16px;
}

.daily-report-metric strong {
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.daily-report-metric small {
  color: #2e4055;
  font-size: 15px;
}

.daily-report-metric-icon {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  height: 70px;
  justify-content: center;
  width: 70px;
}

.daily-report-metric-icon svg {
  height: 34px;
  stroke-width: 2.2;
  width: 34px;
}

.metric-paid {
  background: linear-gradient(135deg, #f4fbf5, #f8fdf8);
  border-color: #b8dcc7;
}

.metric-paid .daily-report-metric-icon {
  background: linear-gradient(135deg, #62b67b, #3c8f58);
  box-shadow: 0 12px 22px rgba(62, 145, 88, 0.22);
}

.metric-subtotal {
  background: linear-gradient(135deg, #f2fbfb, #f8fdfe);
  border-color: #b5d9dc;
}

.metric-subtotal .daily-report-metric-icon {
  background: linear-gradient(135deg, #4ba6a4, #287c7d);
  box-shadow: 0 12px 22px rgba(40, 124, 125, 0.22);
}

.metric-tax {
  background: linear-gradient(135deg, #f5f9ff, #fbfdff);
  border-color: #b9cce8;
}

.metric-tax .daily-report-metric-icon {
  background: linear-gradient(135deg, #4f78ba, #2d568d);
  box-shadow: 0 12px 22px rgba(45, 86, 141, 0.22);
}

.metric-tip {
  background: linear-gradient(135deg, #fbf8ff, #fffaff);
  border-color: #d0c1e3;
}

.metric-tip .daily-report-metric-icon {
  background: linear-gradient(135deg, #8f70c7, #654f9d);
  box-shadow: 0 12px 22px rgba(101, 79, 157, 0.22);
}

.metric-total {
  background: linear-gradient(135deg, #fffaf0, #fffdf8);
  border-color: #ecd69e;
}

.metric-total .daily-report-metric-icon {
  background: linear-gradient(135deg, #ffc02b, #f0a600);
  box-shadow: 0 12px 22px rgba(240, 166, 0, 0.22);
}

.daily-report-detail-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(15, 35, 54, 0.05);
  overflow: hidden;
}

.daily-report-detail-panel > header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 76px;
  padding: 14px 24px;
}

.daily-report-detail-panel h2 {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 22px;
  gap: 12px;
  margin: 0;
}

.daily-report-detail-panel h2 svg {
  color: var(--accent-dark);
  height: 24px;
  width: 24px;
}

.daily-report-export {
  position: relative;
}

.daily-report-export summary {
  align-items: center;
  background: #f7fafb;
  border: 1px solid #cfd8df;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 10px;
  height: 48px;
  list-style: none;
  padding: 0 18px;
}

.daily-report-export summary::-webkit-details-marker {
  display: none;
}

.daily-report-export summary svg {
  height: 18px;
  width: 18px;
}

.daily-report-export .chevron {
  height: 16px;
  margin-left: 4px;
  width: 16px;
}

.daily-report-export div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 28px rgba(15, 35, 54, 0.14);
  display: grid;
  min-width: 160px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
}

.daily-report-export button {
  background: transparent;
  color: var(--ink);
  justify-content: flex-start;
}

.daily-report-detail-panel .table-shell {
  border: 0;
  border-radius: 0;
  overflow-x: auto;
}

.daily-report-detail-panel table {
  min-width: 1040px;
}

.daily-report-detail-panel th {
  background: #f5f8f9;
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 900;
  padding: 18px 24px;
}

.daily-report-detail-panel td {
  color: var(--ink);
  padding: 18px 24px;
}

.daily-report-detail-panel tbody tr:nth-child(even) td {
  background: #fbfcfd;
}

.daily-report-total-cell,
.daily-report-detail-panel tfoot td {
  color: var(--accent-dark);
  font-weight: 900;
}

.daily-report-detail-panel tfoot td {
  background: #f5f9f9;
  border-top: 1px solid #bdcbd1;
  font-size: 16px;
}

.daily-report-detail-panel tfoot td:first-child {
  text-transform: uppercase;
}

.daily-report-detail-panel .report-code,
.daily-report-detail-panel .report-code + small {
  color: var(--ink);
  display: inline;
}

@media (max-width: 1280px) {
  .daily-report-hero {
    display: grid;
  }

  .daily-report-filter {
    justify-content: flex-start;
    min-width: 0;
  }

  .daily-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .daily-sales-report {
    padding: 18px;
  }

  .daily-report-title-row h1 {
    font-size: 30px;
  }

  .daily-report-filter,
  .daily-report-filter label,
  .daily-report-filter input,
  .daily-report-filter select,
  .daily-report-filter button,
  .daily-report-filter .button-link {
    width: 100%;
  }

  .daily-report-filter {
    display: grid;
  }

  .daily-report-metrics {
    grid-template-columns: 1fr;
  }
}

/* ---- shifts.css ---- */
.shift-actions {
  display: flex;
  gap: 10px;
}

.shift-report-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.shift-report-actions .ticket {
  background: #0f766e;
}

.shift-report-title {
  color: var(--accent);
}

.shift-status {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.shift-status article {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 16px;
}

.shift-status span,
.muted-code small,
.shift-modal-note {
  color: var(--muted);
}

.shift-status strong {
  font-size: 18px;
}

.muted-code {
  color: #66736b;
  font-weight: 500;
}

.shifts-table td.muted-code {
  display: table-cell;
  line-height: 1.35;
}

.shifts-table td.muted-code small {
  display: block;
  margin-top: 4px;
}

.shift-link-button {
  background: #6d5dfc;
}

.shift-report-button {
  background: #475569;
}

.shift-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shift-row-actions .small-button {
  min-height: 32px;
  padding: 8px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.shift-segment-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 10px;
}

.shift-segment-list h3 {
  color: var(--accent);
  font-size: 12px;
  margin: 0;
  text-transform: uppercase;
}

.shift-segment-list p {
  align-items: center;
  border-top: 1px solid #edf2ef;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto auto;
  margin: 0;
  padding-top: 8px;
}

.shift-segment-list span {
  color: var(--muted);
  font-size: 12px;
}

.shift-list-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.shift-list-head h2 {
  margin: 0;
}

.shift-list-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin: 2px 0 0;
}

.shift-filters {
  align-items: end;
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(210px, 1fr) minmax(112px, 130px) minmax(126px, 144px) minmax(126px, 144px) auto;
  margin: 0 0 10px;
  padding: 8px;
}

.shift-filter-field {
  color: var(--muted);
  display: grid;
  font-size: 10px;
  font-weight: 800;
  gap: 3px;
  letter-spacing: 0;
  line-height: 1;
  min-width: 0;
  text-transform: uppercase;
}

.shift-filters input,
.shift-filters select,
.shift-filters button {
  width: 100%;
}

.shift-filters input,
.shift-filters select {
  border-radius: 6px;
  font-size: 13px;
  height: 34px;
  min-height: 34px;
  padding: 6px 9px;
}

.shift-filter-actions,
.shift-pager,
.shift-pager div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.shift-filter-actions {
  align-self: end;
}

.shift-filter-actions .small-button {
  min-height: 34px;
  padding: 8px 12px;
  white-space: nowrap;
}

.shift-pager .button-link,
.shift-pager-disabled {
  min-height: 40px;
  padding: 10px 14px;
}

.shift-pager {
  color: var(--muted);
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  justify-content: space-between;
  padding: 14px 0 0;
}

.shift-pager strong {
  color: var(--text);
  white-space: nowrap;
}

.shift-pager-disabled {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: inline-flex;
}

.shift-report-filters {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, 180px) minmax(150px, 180px) minmax(180px, 240px) minmax(180px, 240px) minmax(130px, 180px);
  max-width: 1080px;
}

.shift-report-filters label,
.shift-report-filters button {
  min-width: 0;
}

.shift-report-filters input,
.shift-report-filters select,
.shift-report-filters button {
  width: 100%;
}

.shift-report-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.shift-report-metrics article {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 14px;
}

.shift-report-metrics span {
  color: var(--muted);
}

.shift-report-metrics strong {
  font-size: 20px;
}

.shift-report-metrics small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.shift-report-grid {
  display: grid;
  gap: 16px;
}

.shifts-operator-table table {
  min-width: 620px;
}

#transition-shift {
  max-width: min(560px, calc(100vw - 32px));
}

#transition-shift .modal-panel {
  gap: 10px;
  max-height: calc(100vh - 36px);
  overflow: visible;
  padding: 16px 18px 18px;
}

#transition-shift .modal-head {
  gap: 10px;
}

#transition-shift .modal-head h2 {
  font-size: 20px;
}

#transition-shift .kicker {
  margin-bottom: 2px;
}

#transition-shift .shift-modal-note {
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

#transition-shift .checkout-breakdown {
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px;
}

#transition-shift .checkout-breakdown span {
  align-items: flex-start;
  display: grid;
  font-size: 11px;
  gap: 4px;
  line-height: 1.2;
  min-width: 0;
}

#transition-shift .checkout-breakdown strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

#close-shift .checkout-breakdown span {
  align-items: flex-start;
  display: grid;
  gap: 4px;
}

#close-shift .checkout-breakdown small {
  color: #b6b6b6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

#transition-shift label {
  font-size: 13px;
  gap: 5px;
}

#transition-shift input,
#transition-shift select,
#transition-shift textarea {
  font-size: 13px;
  min-height: 36px;
  padding: 8px 10px;
}

#transition-shift textarea {
  min-height: 54px;
  resize: vertical;
}

#transition-shift .modal-actions {
  gap: 10px;
  margin-top: 2px;
}

#transition-shift .modal-actions button {
  min-height: 38px;
  padding: 9px 14px;
}

@media (max-width: 760px) {
  .shift-status {
    grid-template-columns: 1fr;
  }

  .shift-report-actions {
    justify-content: flex-start;
  }

  .shift-filters {
    grid-template-columns: minmax(180px, 1fr) minmax(112px, 130px);
  }

  .shift-filter-search,
  .shift-filter-actions {
    grid-column: 1 / -1;
  }

  .shift-pager,
  .shift-pager div {
    align-items: stretch;
    flex-direction: column;
  }

  .shift-report-filters,
  .shift-report-metrics {
    grid-template-columns: 1fr;
  }

  #transition-shift .checkout-breakdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- shift-adjustments.css ---- */
/* Ajustes contables del reporte de turnos y el modal «Ajustar cierre».
   El modal es el del asiento manual (accounting-books.css, .journal-modal); aqui solo lo que le agrega. */

.shift-adjust-panel {
  display: grid;
  gap: 12px;
}

.shift-adjust-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  padding: 0 16px;
}

.shift-adjust-subtitle {
  font-size: 14px;
  margin: 4px 0 0;
  padding: 0 16px;
}

/* Un ajuste anulado se tacha por el codigo y el motivo (la regla de los libros tacha la tercera columna,
   que aqui es la fecha). */
.shift-adjust-panel .book-row-voided td {
  color: var(--muted);
}

.shift-adjust-panel .book-row-voided td:nth-child(3) {
  text-decoration: none;
}

.shift-adjust-panel .book-row-voided td:nth-child(4) {
  text-decoration: line-through;
  text-decoration-color: rgb(180 35 24 / 45%);
}

/* El asiento del cierre, a la vista y solo para leer: se ve que se corrige sin ocupar el formulario. */
.shift-adjust-original {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.shift-adjust-original h3 {
  font-size: 13px;
  margin: 0;
}

.shift-adjust-original h3 span {
  color: var(--muted);
  font-weight: 600;
  margin-left: 6px;
}

.shift-adjust-original .table-shell {
  max-height: 200px;
  overflow: auto;
}

.shift-adjust-original table {
  font-size: 12.5px;
  min-width: 0;
  width: 100%;
}

.shift-adjust-original th,
.shift-adjust-original td {
  padding: 5px 8px;
}

/* `.table-shell th:last-child` (purchase-table-actions.css) alinea a la izquierda la ultima columna de
   toda tabla; las cifras van a la derecha, tambien la ultima. */
.shift-adjust-original .table-shell th.num,
.shift-adjust-original .table-shell td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  width: 120px;
}

/* La fecha del cierre no se edita: se lee, pero no se ve como un campo libre. */
.shift-adjust-modal input[data-adjust-date] {
  background: #f1f5f9;
  color: var(--muted);
  cursor: default;
}

/* ---- audit.css ---- */
.audit-table {
  border: 0;
  border-radius: 0;
}

.audit-table table {
  min-width: 1120px;
}

.audit-filters {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(130px, 1fr));
  padding: 16px;
}

.audit-filters label {
  color: #203047;
  font-size: 12px;
  gap: 6px;
}

.audit-filters input,
.audit-filters select {
  background: #fff;
  font-size: 13px;
  min-height: 38px;
  padding: 8px 10px;
}

.audit-search {
  grid-column: span 2;
}

.audit-filter-actions {
  align-items: end;
  display: flex;
  gap: 10px;
}

.audit-filter-actions button,
.audit-filter-actions a {
  min-height: 38px;
  padding: 9px 14px;
}

.audit-toolbar,
.audit-pager {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 16px;
}

.audit-toolbar h2 {
  margin: 0;
}

.audit-toolbar form,
.audit-toolbar label,
.audit-pager nav {
  align-items: center;
  display: flex;
  gap: 10px;
}

.audit-toolbar label {
  color: var(--muted);
  font-size: 13px;
}

.audit-toolbar select {
  padding: 8px 28px 8px 10px;
}

.audit-table th {
  background: #eaf1f8;
  color: #06101f;
}

.audit-table td {
  vertical-align: middle;
}

.audit-code,
.audit-code strong,
.audit-table small {
  color: #66756d;
}

.audit-code {
  display: grid;
  gap: 3px;
}

.audit-pager {
  border-top: 1px solid var(--line);
}

.pager-button {
  background: var(--accent);
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  padding: 8px 12px;
  text-decoration: none;
}

.pager-button.disabled {
  background: #eef3f0;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .audit-filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .audit-search {
    grid-column: span 3;
  }
}

@media (max-width: 760px) {
  .audit-filters,
  .audit-search {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .audit-toolbar,
  .audit-pager {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---- account-receipt.css ---- */
.closed-account-panel {
  background: linear-gradient(180deg, #ffffff, #f7faf8);
  gap: 14px;
}

.receipt-hero {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
}

.receipt-hero h2 {
  font-size: 24px;
  margin: 8px 0 2px;
}

.receipt-hero p,
.receipt-total span,
.receipt-footer span {
  color: var(--muted);
  margin: 0;
}

.receipt-total {
  display: grid;
  justify-items: end;
}

.receipt-total strong {
  color: var(--accent-dark);
  font-size: 30px;
}

.closed-account-panel.cancelled .receipt-total strong {
  color: var(--warn);
}

.receipt-meta {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.receipt-meta span {
  background: #f1f5f4;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 4px;
  padding: 12px;
}

.receipt-meta b {
  color: var(--ink);
}

.receipt-box {
  border: 1px solid #d9e2ee;
  border-radius: 8px;
  overflow: hidden;
}

.receipt-box header,
.receipt-row,
.receipt-footer {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 150px 130px;
  padding: 12px 14px;
}

.receipt-box header {
  background: #eaf1f8;
  color: #06101f;
}

.receipt-box header span,
.receipt-row small {
  color: var(--muted);
}

.receipt-row {
  border-top: 1px solid #e8edf4;
}

.receipt-empty {
  display: grid;
  gap: 4px;
  padding: 22px 14px;
}

.receipt-empty span {
  color: var(--muted);
}

.receipt-tax-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.receipt-tax-box span {
  align-items: center;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

.receipt-tax-box strong {
  color: var(--ink);
}

.receipt-payment-box {
  border: 1px solid #d5e7e2;
  border-radius: 8px;
  overflow: hidden;
}

.receipt-payment-box header,
.receipt-payment-box div {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1.3fr 130px;
  padding: 10px 14px;
}

.receipt-payment-box header {
  background: #eefaf7;
}

.receipt-payment-box header span,
.receipt-payment-box small {
  color: var(--muted);
}

.receipt-payment-box div {
  border-top: 1px solid #e3eeeb;
}

.receipt-payment-box div span {
  font-weight: 800;
}

.receipt-footer {
  background: #eef7f4;
  border: 1px solid #cde3dc;
  border-radius: 8px;
  font-size: 18px;
}

@media (max-width: 760px) {
  .receipt-hero,
  .receipt-total {
    align-items: flex-start;
    justify-items: start;
  }

  .receipt-hero {
    display: grid;
    gap: 12px;
  }

  .receipt-meta,
  .receipt-payment-box header,
  .receipt-payment-box div,
  .receipt-box header,
  .receipt-row,
  .receipt-footer {
    grid-template-columns: 1fr;
  }
}

/* ---- open-accounts-modal.css ---- */
.accounts-head {
  align-items: center;
  margin-bottom: 12px;
}

.accounts-head .kicker {
  font-size: 11px;
  line-height: 1;
  margin-bottom: 4px;
}

.accounts-head h1 {
  font-size: 26px;
  line-height: 1.05;
}

.accounts-head-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.accounts-head-actions > button,
.accounts-head-actions .button-link,
.accounts-head-actions .account-reports-menu summary {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  font-size: 13px;
  line-height: 1.05;
  min-height: 36px;
  padding: 8px 13px;
  white-space: nowrap;
}

.accounts-head-actions .account-reports-menu summary {
  box-shadow: 0 6px 14px rgba(109, 93, 252, 0.18);
}

.accounts-history-shell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.accounts-history-shell > header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.accounts-history-shell h2,
.accounts-history-shell p {
  margin: 0;
}

.accounts-history-shell p {
  color: var(--muted);
}

.open-accounts-modal {
  max-width: min(980px, calc(100vw - 32px));
}

.open-accounts-panel {
  background: var(--panel);
  display: grid;
}

.open-accounts-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 18px;
}

.open-accounts-head h2 {
  margin: 0;
}

.open-account-list {
  display: grid;
  gap: 10px;
  max-height: min(68vh, 640px);
  overflow: auto;
  padding: 16px;
}

.open-account-row {
  align-items: center;
  background: #f8fbff;
  border: 1px solid #d9e2ee;
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  padding: 14px;
}

.open-account-main {
  display: grid;
  gap: 3px;
}

.open-account-main span,
.open-account-main small,
.open-account-empty span {
  color: var(--muted);
}

.open-account-total {
  color: var(--accent-dark);
  font-size: 18px;
  justify-self: end;
}

.open-account-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.open-account-actions button {
  white-space: nowrap;
}

.open-account-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 22px;
}

@media (max-width: 760px) {
  .accounts-head-actions,
  .open-account-actions {
    flex-direction: column;
    width: 100%;
  }

  .open-account-row {
    grid-template-columns: 1fr;
  }

  .open-account-total {
    justify-self: start;
  }
}

/* ---- account-modal.css ---- */
.account-open-modal {
  max-width: min(1040px, calc(100vw - 28px));
}

.account-open-panel {
  background: #fbfcfc;
  display: grid;
}

.account-modal-head,
.account-map-panel header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.account-modal-head {
  gap: 12px;
  background: linear-gradient(180deg, #ffffff, #fafafa);
  border-bottom: 1px solid #d7dcda;
  padding: 9px 12px;
}

.account-modal-title {
  min-width: 0;
}

.account-current-total-card {
  background: linear-gradient(180deg, #f5fffb, #e3f6ef);
  border: 1px solid #9bd7c5;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgb(13 127 120 / 10%);
  display: grid;
  justify-items: end;
  line-height: 1.05;
  margin-left: auto;
  min-width: 156px;
  padding: 6px 10px;
}

.account-current-total-card[hidden] {
  display: none;
}

.account-current-total-card span {
  color: #0d756f;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-current-total-card strong {
  color: #071f1d;
  font-size: 18px;
  letter-spacing: 0;
}

.account-modal-head .icon-button {
  border-color: #cfd4d3;
  box-shadow: 0 2px 8px rgb(15 23 42 / 14%);
  color: #15191d;
  font-size: 16px;
  min-height: 34px;
  width: 34px;
}

.account-modal-head h2,
.account-map-panel h3,
.account-open-form h3 {
  font-size: 20px;
  margin: 0;
}

.account-open-body {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .75fr);
  padding: 10px;
}

.account-map-panel,
.account-open-form {
  border: 1px solid #d2d8d6;
  border-radius: 12px;
  align-content: start;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.account-map-panel p {
  color: var(--muted);
  margin: 0;
}

.account-table-map {
  background-color: #f8faf9;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 1px dashed #cbd5cf;
  border-radius: 8px;
  height: clamp(230px, 32vh, 320px);
  position: relative;
}

.account-map-table {
  align-items: center;
  background: #dce4e1;
  border: 1px solid #cbd5cf;
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  font-size: 13px;
  height: 58px;
  justify-items: center;
  padding: 6px;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 108px;
}

.account-map-table.occupied {
  background: #287647;
  border-color: #287647;
  color: white;
}

.account-map-table.selected {
  outline: 3px solid #247cff;
}

.account-map-table small {
  color: inherit;
  font-weight: 700;
}

.account-kind-grid {
  border: 1px solid #cfd5d3;
  border-radius: 9px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.account-kind-grid button {
  background: white;
  border: 0;
  border-right: 1px solid #cfd5d3;
  color: var(--ink);
  display: grid;
  font-size: 13px;
  gap: 2px;
  justify-content: center;
  min-height: 38px;
  padding: 6px 8px;
  text-align: center;
}

.account-kind-grid button:last-child {
  border-right: 0;
}

.account-kind-grid button[data-account-kind="table"] {
  background: linear-gradient(180deg, #ffffff, #f8faf9);
  color: #18211f;
}

.account-kind-grid button[data-account-kind="bar"] {
  background: linear-gradient(180deg, #ffffff, #f8faf9);
  color: #18211f;
}

.account-kind-grid button[data-account-kind="takeout"] {
  background: linear-gradient(180deg, #ffffff, #f8faf9);
  color: #18211f;
}

.account-kind-grid button[data-account-kind="external"] {
  background: linear-gradient(180deg, #ffffff, #f8faf9);
  color: #18211f;
}

.account-kind-grid button.selected {
  background: #e7f7f5;
  border-color: var(--accent);
  color: var(--accent-dark);
}

.account-kind-grid button[data-account-kind].selected {
  box-shadow: inset 0 0 0 1px rgb(31 105 50 / 20%);
  font-weight: 900;
}

.account-kind-grid button[data-account-kind="table"].selected {
  background: linear-gradient(180deg, #8ddc83, #67c86c);
  color: #102914;
}

.account-kind-grid button[data-account-kind="bar"].selected {
  background: linear-gradient(180deg, #8ddc83, #67c86c);
  color: #102914;
}

.account-kind-grid button[data-account-kind="takeout"].selected {
  background: linear-gradient(180deg, #8ddc83, #67c86c);
  color: #102914;
}

.account-kind-grid button[data-account-kind="external"].selected {
  background: linear-gradient(180deg, #8ddc83, #67c86c);
  color: #102914;
}

.account-kind-grid button span {
  display: none;
}

.account-kind-grid span,
.account-summary {
  color: var(--muted);
}

.account-open-form {
  align-content: start;
}

/* ---- account-modal-form.css ---- */
.account-open-form h3 {
  font-size: 19px;
  line-height: 1.05;
}

.account-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.account-chips span {
  background: linear-gradient(180deg, #f2f5f3, #e4e9e7);
  border: 1px solid #ccd2d0;
  border-radius: 999px;
  color: #18211f;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
}

.account-open-form label {
  gap: 5px;
}

.account-open-form input,
.account-open-form select {
  border-color: #cfd4d3;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 4%);
  padding: 7px 9px;
}

.open-form-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.account-summary {
  background: rgb(255 255 255 / 70%);
  border: 1px solid #cfd4d3;
  border-radius: 10px;
  display: grid;
  font-size: 12px;
  gap: 0 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  padding: 5px 8px;
}

.account-summary span {
  border-bottom: 1px dashed var(--line);
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.account-summary span:last-child {
  border-bottom: 0;
}

.initial-dispatch {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
}

.initial-dispatch h4 {
  font-size: 14px;
  margin: 0;
}

.takeout-payment-panel {
  background: rgb(255 255 255 / 62%);
  border: 1px solid #cfd4d3;
  border-radius: 10px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
}

.takeout-payment-panel[hidden] {
  display: none;
}

.split-balanced {
  color: #059669;
}

.takeout-payment-panel h4 {
  font-size: 14px;
  margin: 0;
}

.takeout-charge-total {
  align-items: baseline;
  background: #f3fffb;
  border: 1px solid #b9e3dc;
  border-radius: 8px;
  display: grid;
  gap: 2px 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  padding: 8px 10px;
}

.takeout-charge-total[hidden] {
  display: none;
}

.takeout-charge-total span {
  color: #475569;
  font-weight: 700;
}

.takeout-charge-total strong {
  color: #0d6b65;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.takeout-charge-total small {
  color: #475569;
  font-variant-numeric: tabular-nums;
  grid-column: 1 / -1;
  text-align: right;
}

.takeout-payment-options {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.takeout-payment-options button {
  background: white;
  border: 1px solid #cfd4d3;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgb(15 23 42 / 8%);
  color: var(--ink);
  min-height: 42px;
  padding: 8px;
}

.takeout-payment-options button.selected {
  background: #f3fffb;
  border-color: #0d7f78;
  box-shadow: inset 0 0 0 1px rgb(13 127 120 / 35%), 0 2px 5px rgb(15 23 42 / 8%);
  color: #0d6b65;
}

.account-open-form {
  background: linear-gradient(135deg, #f8faf9, #eef4f2);
  font-size: 12px;
  gap: 6px;
  min-width: 0;
}

.account-open-modal[data-account-mode="add"] .account-open-form {
  grid-template-rows: auto auto auto auto;
  padding-bottom: 58px;
  position: relative;
}

.account-open-form > *,
.initial-dispatch > * {
  min-width: 0;
}

.account-open-form input,
.account-open-form select {
  width: 100%;
}

.account-open-form > button {
  background: linear-gradient(180deg, #128c85, #0e7a73);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 3px 7px rgb(15 23 42 / 12%);
  color: white;
  min-height: 34px;
  padding: 8px 12px;
}

@media (max-width: 980px) {
  .account-open-body,
  .account-kind-grid,
  .open-form-grid,
  .takeout-payment-options {
    grid-template-columns: 1fr;
  }
}

/* ---- account-open-dispatch.css ---- */
.open-dispatch-panel {
  background: white;
  border: 1px solid #d2d8d6;
  border-radius: 10px;
  display: grid;
  gap: 7px;
  min-height: 0;
  padding: 8px;
}

.open-dispatch-panel header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.open-dispatch-panel h3 {
  font-size: 14px;
  margin: 0;
}

.open-dispatch-panel span,
.open-dispatch-row small,
.open-dispatch-empty {
  color: var(--muted);
}

.open-dispatch-list {
  background: #ffffff;
  border: 1px solid #d9dde8;
  border-radius: 8px;
  display: grid;
  overflow: auto;
}

.open-dispatch-empty {
  align-content: center;
  display: grid;
  font-size: 16px;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 12px;
}

.dispatch-empty-icon {
  color: #d0d3da;
  height: clamp(130px, 15vw, 176px);
  opacity: .92;
  width: clamp(176px, 20vw, 244px);
}

.open-dispatch-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px 8px;
}

.open-dispatch-row div {
  display: grid;
}

.open-dispatch-row[hidden],
.open-dispatch-empty[hidden] {
  display: none;
}

/* ---- account-open-flow.css ---- */
.account-map-modal {
  max-width: min(1500px, calc(100vw - 28px));
}

.account-picker-panel {
  margin: 12px;
}

.account-picker-panel .account-table-map {
  background-size: 40px 40px;
  height: clamp(360px, 56vh, 560px);
}

.account-picker-panel .account-map-table {
  height: 60px;
  width: 104px;
}

.account-open-product-body {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
}

.account-dispatch-column {
  display: grid;
  min-width: 0;
}

.account-dispatch-column .open-dispatch-panel {
  grid-template-rows: auto auto;
  min-height: 0;
}

.account-dispatch-column .open-dispatch-list {
  align-content: start;
  max-height: min(48vh, 380px);
  min-height: 0;
}

.account-dispatch-column .open-dispatch-empty {
  min-height: 90px;
}

.open-dispatch-panel.field-invalid {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgb(217 45 32 / 12%);
}

.open-dispatch-header,
.open-dispatch-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(160px, 1fr) 52px 104px 96px 38px;
}

.open-dispatch-header {
  background: #f4faf8;
  border-bottom: 1px solid #d9dde8;
  box-shadow: 0 1px 0 rgb(15 23 42 / 4%);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  padding: 5px 8px;
  position: sticky;
  top: 0;
  text-transform: uppercase;
  z-index: 2;
}

.open-dispatch-header[hidden] {
  display: none;
}

.open-dispatch-product {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.open-dispatch-product strong {
  font-size: 14px;
  line-height: 1.15;
}

.open-dispatch-product small {
  font-size: 12px;
  line-height: 1.2;
}

.open-dispatch-product strong,
.open-dispatch-product small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-dispatch-quantity,
.open-dispatch-price-tier {
  display: grid;
  gap: 3px;
  margin: 0;
}

.open-dispatch-quantity span,
.open-dispatch-price-tier span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.open-dispatch-quantity input,
.open-dispatch-quantity select {
  font-size: 13px;
  height: 32px;
  padding: 5px 7px;
}

.open-dispatch-quantity input {
  max-width: 52px;
  width: 52px;
}

.open-dispatch-quantity select {
  max-width: 104px;
  width: 104px;
}

.open-dispatch-price-tier strong {
  align-items: center;
  color: #17211f;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  height: 32px;
  line-height: 1;
}

.open-dispatch-row > [data-dispatch-line-total] {
  justify-self: end;
}

.open-dispatch-existing-row {
  border-top: 1px solid #e3e7e6;
}

.open-dispatch-existing-row:first-child {
  border-top: 0;
}

.open-dispatch-existing-row.is-pending-merged {
  background: #f2fbf8;
}

.open-dispatch-existing-row .open-dispatch-product strong,
.open-dispatch-existing-row .open-dispatch-product small,
.open-dispatch-existing-row .open-dispatch-existing-quantity,
.open-dispatch-existing-row .open-dispatch-existing-price,
.open-dispatch-existing-row .open-dispatch-existing-total {
  font-weight: 400;
}

.open-dispatch-existing-quantity,
.open-dispatch-existing-price {
  color: #33413e;
}

.open-dispatch-existing-total {
  color: #17211f;
  justify-self: end;
}

.open-dispatch-pending-row {
  background: #f7fbff;
  border-top: 1px solid #dbe6ef;
}

.open-dispatch-pending-row:first-child {
  border-top: 0;
}

.open-dispatch-remove-button {
  align-items: center;
  background: #fff1f1;
  border: 1px solid #ef8f8f;
  border-radius: 999px;
  color: #c1121f;
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  height: 28px;
  justify-self: center;
  line-height: 1;
  padding: 0;
  width: 28px;
}

.open-dispatch-remove-button:hover {
  background: #ffe1e1;
  border-color: #df4f4f;
  color: #9f0712;
}

.account-open-modal[data-account-mode="add"] [data-create-only] {
  display: none;
}

.account-item-remove-modal {
  max-width: min(430px, calc(100vw - 28px));
}

.account-item-remove-panel {
  gap: 12px;
}

.account-item-remove-copy {
  color: #33413e;
  margin: 0;
}

.account-item-remove-copy strong {
  color: #13211f;
}

@media (max-width: 980px) {
  .account-open-product-body {
    grid-template-columns: 1fr;
  }

  .account-dispatch-column .open-dispatch-panel {
    grid-template-rows: auto minmax(260px, 1fr);
  }
}

/* ---- account-inventory-picker.css ---- */
.open-dispatch-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.open-dispatch-actions button {
  background: white;
  border: 1px solid #5d6b82;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgb(15 23 42 / 9%);
  color: #344767;
  min-height: 32px;
  padding: 6px 12px;
}

/* Cabecera del selector: antetitulo, titulo, filtros (Tragos, Productos,
   Servicios, Todos) y acciones (contador, Listo y x) como celdas de una grilla.
   En escritorio los filtros van junto al titulo; en pantallas angostas bajan a
   su propia fila, y en telefono el contador sube a la linea del antetitulo
   para que los filtros tengan todo el ancho. Nada cambia de lugar al elegir el
   primer consumo, y la cabecera queda fija arriba cuando el dialogo se desplaza
   en pantallas bajas. */
.inventory-picker-head {
  align-items: center;
  display: grid;
  gap: 0 10px;
  grid-template-areas:
    "kicker filters count done close"
    "title filters count done close";
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  position: sticky;
  top: 0;
  z-index: 2;
}

.inventory-picker-title,
.inventory-picker-head-actions {
  display: contents;
}

.inventory-picker-title .kicker {
  align-self: end;
  grid-area: kicker;
}

.inventory-picker-title h2 {
  align-self: start;
  grid-area: title;
  min-width: 0;
}

.inventory-picker-selection-count {
  background: #e8f7f3;
  border: 1px solid #9bd7c5;
  border-radius: 999px;
  color: #0d756f;
  font-size: 12px;
  font-weight: 900;
  grid-area: count;
  justify-self: end;
  min-width: 11em;
  padding: 7px 10px;
  text-align: center;
  white-space: nowrap;
}

/* Vacio no se ve, pero guarda su lugar: aparecer no corre la cabecera. */
.inventory-picker-selection-count.is-empty {
  visibility: hidden;
}

.inventory-picker-done {
  grid-area: done;
  min-height: 36px;
}

.inventory-picker-head [data-product-search-close] {
  grid-area: close;
}

.inventory-picker-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-area: filters;
}

.inventory-picker-filters button {
  background: white;
  border: 1px solid #cfd4d3;
  border-radius: 999px;
  box-shadow: 0 2px 5px rgb(15 23 42 / 9%);
  color: #344767;
  font-size: 13px;
  font-weight: 800;
  min-height: 32px;
  padding: 6px 14px;
}

/* El elegido va en oscuro: no se confunde con el contador y no depende de un
   matiz para distinguirse. */
.inventory-picker-filters button[aria-checked="true"] {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: none;
  color: white;
  font-weight: 900;
}

@media (max-width: 960px) {
  .inventory-picker-head {
    grid-template-areas:
      "kicker count done close"
      "title count done close"
      "filters filters filters filters";
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  .inventory-picker-filters {
    margin-top: 8px;
  }
}

@media (max-width: 560px) {
  .inventory-picker-head {
    grid-template-areas:
      "kicker kicker kicker"
      "title done close"
      "filters filters filters";
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  /* A la derecha del antetitulo, sobre toda la fila: asi no ensancha las
     columnas de Listo y x ni le quita ancho al titulo. */
  .inventory-picker-selection-count {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 6px;
  }
}

.inventory-picker-notice {
  align-items: center;
  color: #3f4f4a;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 4px 10px;
  margin: 0;
}

.inventory-picker-notice button {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 900;
  min-height: 0;
  padding: 0;
  text-decoration: underline;
}

/* Solo para lector de pantalla: dice que cambio lo que muestra la lista. */
.inventory-picker-announce {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.account-open-modal.inventory-picker-active {
  max-width: min(1180px, calc(100vw - 28px));
}

.inventory-picker-host-active > :not(.inventory-picker-modal) {
  display: none !important;
}

.inventory-picker-modal {
  background: var(--panel);
  display: grid;
  min-height: min(720px, calc(100vh - 40px));
  width: 100%;
}

.inventory-picker-modal[hidden] {
  display: none !important;
}

/* El selector tiene alto minimo: con una lista corta (un filtro, una busqueda
   sin resultados) el sobrante va al final, no a estirar la cabecera ni el
   buscador. */
.inventory-picker-panel {
  align-content: start;
  background: var(--panel);
  display: grid;
  min-height: 0;
}

.inventory-picker-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.inventory-picker-list {
  display: grid;
  gap: 14px;
  max-height: 500px;
  overflow: auto;
}

.inventory-picker-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  min-width: 0;
}

.inventory-picker-section-title {
  align-items: center;
  background: #f8fbff;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}

.inventory-picker-section-title h3 {
  font-size: 14px;
  margin: 0;
}

.inventory-picker-section-title span {
  color: var(--muted);
  font-size: 12px;
}

.inventory-picker-table {
  display: grid;
  min-width: 0;
}

.inventory-picker-product-head,
.inventory-picker-product-option {
  align-items: center;
  column-gap: 14px;
  display: grid;
  grid-template-columns:
    92px minmax(180px, 1.5fr) 120px 110px 110px
    100px 92px 136px 92px 52px;
  justify-content: stretch;
  justify-items: start;
  min-width: 1016px;
  width: 100%;
}

.inventory-picker-drink-head,
.inventory-picker-drink-option {
  align-items: center;
  column-gap: 14px;
  display: grid;
  grid-template-columns: 92px minmax(180px, 1.3fr) 136px minmax(260px, 2fr) 90px 52px;
  justify-content: stretch;
  justify-items: start;
  min-width: 856px;
  width: 100%;
}

.inventory-picker-product-head,
.inventory-picker-drink-head {
  background: #eaf2fb;
  border-bottom: 1px solid var(--line);
  color: #334155;
  font-size: 11px;
  font-weight: 400;
  padding: 9px 12px;
  text-transform: uppercase;
}

.inventory-picker-product-option,
.inventory-picker-drink-option {
  background: white;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  min-height: 42px;
  padding: 8px 12px;
  text-align: left;
  transform: none;
}

.inventory-picker-product-option > span,
.inventory-picker-drink-option > span,
.inventory-picker-product-head > span,
.inventory-picker-drink-head > span {
  min-width: 0;
}

.inventory-picker-product-option:hover,
.inventory-picker-drink-option:hover {
  background: #f3f8ff;
}

.inventory-picker-product-option.selected,
.inventory-picker-drink-option.selected {
  background: #e9f8f3;
  box-shadow: inset 4px 0 0 var(--accent);
}

.inventory-picker-product-option:disabled,
.inventory-picker-drink-option:disabled {
  background: #f6f7f7;
  color: var(--muted);
  cursor: not-allowed;
}

.inventory-picker-product-option:hover,
.inventory-picker-product-option:active,
.inventory-picker-drink-option:hover,
.inventory-picker-drink-option:active {
  transform: none;
}

.inventory-picker-list span {
  color: #3f4f4a;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-price-tiers {
  display: grid;
  gap: 2px;
}

.picker-price-tiers strong,
.picker-price-tiers small {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.inventory-picker-product-option span:first-child,
.inventory-picker-product-option span:nth-child(3),
.inventory-picker-product-option span:last-child,
.inventory-picker-drink-option span:first-child,
.inventory-picker-drink-option span:last-child {
  color: var(--muted);
}

.inventory-picker-type-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-width: 64px;
  padding: 6px 9px;
  text-transform: uppercase;
}

.inventory-picker-type-badge.unit {
  background: #eef8f7;
  border: 1px solid #bfe4df;
  color: #007960;
}

.inventory-picker-type-badge.drink {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  color: #3440a3;
}

.inventory-picker-type-badge.service {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

.inventory-picker-list small,
.selected-product {
  color: var(--muted);
}

.selected-product {
  border: 1px dashed #cbd5cf;
  border-radius: 8px;
  padding: 10px;
}

.selected-product.selected {
  background: #eefaf6;
  border-color: #9bd9c9;
  color: var(--ink);
  font-weight: 800;
}

.inventory-picker-empty {
  color: var(--muted);
  padding: 16px;
}

.drink-choice-modal {
  align-items: center;
  background: rgb(15 23 42 / 38%);
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 18px;
  position: absolute;
  z-index: 20;
}

.drink-choice-modal[hidden] {
  display: none !important;
}

.drink-choice-panel {
  background: #fff;
  border: 1px solid #cfd8d4;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgb(15 23 42 / 22%);
  display: grid;
  gap: 12px;
  max-width: min(520px, calc(100vw - 44px));
  padding: 14px;
  width: 100%;
}

.drink-choice-panel > header,
.drink-choice-panel > footer {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.drink-choice-panel h3,
.drink-choice-panel h4 {
  margin: 0;
}

.drink-choice-group-head {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.drink-choice-group-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.drink-choice-group-head.compact {
  justify-content: flex-start;
}

.drink-choice-body,
.drink-choice-options {
  display: grid;
  gap: 8px;
}

.drink-choice-option {
  align-items: center;
  border: 1px solid #d5ded9;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 18px 1fr;
  padding: 10px;
}

.drink-choice-option:has(input:checked) {
  background: #edf8f5;
  border-color: #0f8f86;
}

.drink-choice-option strong,
.drink-choice-option small {
  display: block;
  line-height: 1.25;
}

.drink-choice-option small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.drink-choice-option small[hidden] {
  display: none;
}

/* ---- checkout-modal.css ---- */
/* El cobro se lee de un golpe y se resuelve con el pulgar, asi que el modal
   cabe en pantalla sin scroll: con la seccion de divisa abierta pasaba de los
   900px de alto y el boton de cobrar quedaba fuera. Los tamanos de abajo son
   los de un panel compacto, no los de una pantalla completa. */
.checkout-panel {
  background: #1f1f1f;
  border-radius: 14px;
  color: white;
  display: grid;
  gap: 14px;
  padding: 18px 18px 16px;
}

.checkout-panel button {
  border-radius: 8px;
  min-height: 42px;
}

.checkout-head {
  border-bottom: 2px solid #3a3a3a;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding-bottom: 12px;
}

.checkout-head p {
  color: #a8a8a8;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  text-align: center;
}

.checkout-head strong {
  color: #11ef88;
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1;
}

.checkout-section {
  display: grid;
  gap: 7px;
}

.checkout-section h3 {
  color: #a8a8a8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  margin: 0;
  text-transform: uppercase;
}

.checkout-section-heading {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(190px, 230px);
}

.checkout-reference-field {
  color: #a8a8a8;
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
  justify-self: end;
  letter-spacing: .08em;
  text-transform: uppercase;
  width: min(230px, 100%);
}

.checkout-reference-field input {
  background: #2a2a2a;
  border: 2px solid #10e58c;
  border-radius: 0;
  color: white;
  font-size: 14px;
  font-weight: 700;
  min-height: 32px;
  padding: 6px 9px;
  text-transform: none;
}

.checkout-reference-field input:focus {
  box-shadow: 0 0 0 3px rgb(16 229 140 / 22%);
  outline: none;
}

.checkout-options {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.checkout-options button {
  background: #303030;
  border: 2px solid transparent;
  color: white;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  min-height: 38px;
  padding: 6px 8px;
  white-space: normal;
}

.checkout-options button.selected {
  background: #173a2a;
  border-color: #10e58c;
}

.payment-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payment-options.has-employee-credit {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payment-options.has-payroll {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-options button {
  min-height: 38px;
}

.checkout-breakdown {
  background: #2a2a2a;
  border: 1px solid #454545;
  border-radius: 10px;
  display: grid;
  font-size: 13px;
  gap: 5px;
  padding: 9px 11px;
}

.checkout-breakdown span {
  align-items: center;
  color: #b6b6b6;
  display: flex;
  justify-content: space-between;
}

/* El campo que vive dentro de una caja de desglose --los dolares recibidos,
   el monto de nomina-- heredaba el tamano de los formularios de pagina, y era
   lo que hacia de esa seccion la mas alta del modal. */
.checkout-panel .checkout-breakdown label {
  font-size: 11px;
  gap: 3px;
}

.checkout-panel .checkout-breakdown input {
  font-size: 14px;
  min-height: 32px;
  padding: 5px 8px;
}

/* La nota del vuelto es una pista, no un cartel. */
.checkout-panel .split-payment-summary {
  font-size: 12px;
  padding: 7px 10px;
}

.checkout-breakdown strong {
  color: white;
}

.payment-options [data-payment-method="cash"]::before {
  content: "$ ";
  color: #10e58c;
}

.payment-options [data-payment-method="card"]::before {
  content: "= ";
  color: #28c7ff;
}

.payment-options [data-payment-method="split"]::before {
  content: "% ";
  color: #ff4b63;
}

.payment-options [data-payment-method="employee_credit"]::before {
  content: "CR ";
  color: #facc15;
}

.payment-options [data-payment-method="payroll"]::before {
  color: #facc15;
  content: "N ";
}

.checkout-section input[type="number"] {
  background: #2a2a2a;
  border: 1px solid #4a4a4a;
  color: white;
}

.split-payment-summary {
  background: #13291f;
  border: 1px solid #10e58c;
  border-radius: 8px;
  color: #c9ffe3;
  font-weight: 800;
  margin: 0;
  padding: 10px 12px;
}

.split-payment-panel {
  background: #1f1f1f;
  box-sizing: border-box;
  color: white;
  display: grid;
  gap: 12px;
  max-height: min(690px, calc(100vh - 36px));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px;
}

.split-payment-dialog {
  box-sizing: border-box;
  overflow-x: hidden;
}

.split-payment-total {
  align-items: center;
  background: #2a2a2a;
  border: 1px solid #454545;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.split-payment-total span,
.split-payment-line label {
  color: #b6b6b6;
  font-weight: 800;
}

.split-payment-total strong {
  color: #11ef88;
  font-size: 23px;
}

.split-payment-lines {
  display: grid;
  gap: 8px;
}

.split-payment-line {
  align-items: end;
  box-sizing: border-box;
  display: grid;
  gap: 6px 8px;
  grid-template-columns: minmax(84px, .7fr) minmax(104px, .9fr) minmax(104px, 1fr) 30px;
  min-width: 0;
  padding-left: 62px;
  position: relative;
}

/* El boton de quitar se ancla al final de la primera fila. Dejandolo en el
   flujo, la fila con moneda --seis campos-- empujaba "Dolares recibidos" a la
   columna de 36px y la etiqueta quedaba cortada. */
.split-payment-line .split-line-remove {
  grid-column: 4;
  grid-row: 1;
}

/* Y la nota del vuelto ocupa la fila completa: en una columna de 110px se
   parte en vertical y no se lee. */
.split-payment-line .split-line-change {
  font-size: 11px;
  font-weight: 800;
  grid-column: 1 / -1;
  padding: 5px 8px;
}

/* Lo que le falta a un campo se lee sobre el fondo oscuro del cobro, tambien
   en la caja oscura de la autorizacion de Llevar; en una fila de la division
   va a lo ancho, como la nota del vuelto. El rojo oscuro de validation.css no
   se leia ahi, ni en el aviso ni en la etiqueta. */
.checkout-panel .field-error,
.split-payment-panel .field-error,
.checkout-breakdown .field-error,
.checkout-panel label:has(.field-invalid),
.split-payment-panel label:has(.field-invalid),
.checkout-breakdown label:has(.field-invalid) {
  color: #ff8b99;
}

.split-payment-line > .field-error {
  grid-column: 1 / -1;
  margin: 0;
}

.split-payment-line::before {
  align-items: center;
  background: #123329;
  border: 1px solid #0ddd78;
  border-radius: 999px;
  color: #c9ffe3;
  content: attr(data-split-label);
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 22px;
  justify-content: center;
  left: 0;
  line-height: 1;
  padding: 0 8px;
  position: absolute;
  text-transform: uppercase;
  top: 20px;
  white-space: nowrap;
}

.split-payment-line label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* Las etiquetas de la fila son referencia, no titulo: el cajero mira los
   montos. Al bajarlas de tamano caben en una linea, que es lo que hacia que
   la fila midiera el doble de lo necesario. */
.split-payment-line label {
  font-size: 10px;
  letter-spacing: .02em;
  line-height: 1.25;
}

.split-payment-line input,
.split-payment-line select {
  background: #2a2a2a;
  border: 1px solid #4a4a4a;
  border-radius: 8px;
  box-sizing: border-box;
  color: white;
  font-size: 13px;
  font-weight: 800;
  min-height: 30px;
  min-width: 0;
  padding: 4px 7px;
  width: 100%;
}

.split-payment-line input[data-split-amount] {
  border-radius: 8px;
  font-size: 17px;
  font-weight: 900;
}

.split-payment-line input.field-invalid {
  border-color: #ff4757;
  box-shadow: 0 0 0 3px rgb(255 71 87 / 18%);
}

.split-line-remove {
  background: #3b2023;
  border: 1px solid #ff6678;
  border-radius: 8px;
  color: #ff8b99;
  min-height: 38px;
  min-width: 36px;
  padding: 0;
}

.split-line-remove:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.split-line-add {
  border: 1px solid #10e58c;
  color: #075a38;
  font-weight: 900;
  min-height: 38px;
}

.split-balanced {
  color: #11ef88;
}

.split-payment-actions button:last-child {
  background: #0ddd78;
  color: #04130c;
}

.split-payment-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1.4fr;
}

.checkout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkout-actions > button {
  flex: 1 1 110px;
}

.checkout-actions > .checkout-submit {
  flex: 2 1 180px;
}

.checkout-cancel {
  background: transparent;
  border: 2px solid #ff4757;
  color: #ff4757;
}

.checkout-submit {
  background: #0ddd78;
  color: #04130c;
  font-size: 17px;
}

@media (max-width: 640px) {
  .checkout-section-heading {
    grid-template-columns: 1fr;
  }

  .checkout-reference-field {
    justify-self: stretch;
    width: 100%;
  }

  .checkout-options,
  .payment-options,
  .payment-options.has-employee-credit,
  .payment-options.has-payroll,
  .split-payment-actions {
    grid-template-columns: 1fr;
  }

  .checkout-actions > button,
  .checkout-actions > .checkout-submit {
    flex-basis: 100%;
  }

  .split-payment-panel {
    padding: 14px;
  }

  .split-payment-line {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
    padding-left: 0;
    padding-top: 30px;
  }

  .split-payment-line::before {
    top: 0;
  }

  .split-payment-line label:nth-child(3) {
    grid-column: 1 / span 2;
  }

  .split-payment-total {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 430px) {
  .split-payment-line {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .split-payment-line .split-line-remove {
    grid-column: 2;
  }

  .split-payment-line label:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  .split-payment-line label:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .split-payment-line label:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .split-line-remove {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ---- checkout-fiscal.css ---- */
/* El comprobante fiscal de una cuenta: en el modal de cobro (fondo oscuro) y en «Emitir comprobante» de una cuenta
   ya cobrada (ventana clara). Reutiliza los botones de opcion del cobro (.checkout-options); aqui solo lo que no
   traen: las columnas de las opciones, el aviso de la secuencia, y el comprador con su razon social. */

.fiscal-fields {
  display: grid;
  gap: 8px;
}

/* Sin comprobante, B02 y B01 (y B14 y B15 si el bar los tiene): las opciones que haya, repartidas. */
.fiscal-options {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.fiscal-hint {
  background: #3a2f10;
  border: 1px solid #facc15;
  border-radius: 8px;
  color: #fde68a;
  font-size: 12px;
  font-weight: 800;
  margin: 0;
  padding: 7px 10px;
}

.fiscal-buyer {
  display: grid;
  gap: 6px;
}

.fiscal-buyer label {
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
}

.fiscal-buyer-name {
  font-size: 12px;
  font-weight: 800;
  margin: 0;
}

.fiscal-buyer-name[data-tone="ok"] {
  color: #11ef88;
}

.fiscal-buyer-name[data-tone="warn"] {
  color: #facc15;
}

.fiscal-buyer-name[data-tone="bad"] {
  color: #ff8b99;
}

/* Dentro del cobro oscuro: los campos como los de la autorizacion de la tarjeta. */
.checkout-panel .fiscal-buyer label {
  color: #a8a8a8;
}

.checkout-panel .fiscal-buyer input {
  background: #2a2a2a;
  border: 1px solid #4a4a4a;
  color: white;
  font-size: 14px;
  min-height: 32px;
  padding: 5px 8px;
}

/* En la ventana clara de emitir y en «Abrir cuenta» (el cobro para llevar directo): botones y avisos con los colores
   de siempre. */
.modal-panel .fiscal-options button,
.takeout-fiscal .fiscal-options button {
  background: #f3f6f8;
  border: 2px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  min-height: 38px;
}

.modal-panel .fiscal-options button.selected,
.takeout-fiscal .fiscal-options button.selected {
  background: #e3f2f2;
  border-color: var(--accent);
  color: var(--accent-dark);
}

.modal-panel .fiscal-hint,
.takeout-fiscal .fiscal-hint {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #7c2d12;
}

.modal-panel .fiscal-buyer-name[data-tone="ok"],
.takeout-fiscal .fiscal-buyer-name[data-tone="ok"] {
  color: #047244;
}

.modal-panel .fiscal-buyer-name[data-tone="warn"],
.takeout-fiscal .fiscal-buyer-name[data-tone="warn"] {
  color: #8a4b00;
}

.modal-panel .fiscal-buyer-name[data-tone="bad"],
.takeout-fiscal .fiscal-buyer-name[data-tone="bad"] {
  color: var(--warn);
}

.modal-note {
  color: var(--muted);
  margin: 0;
}

/* El numero del comprobante bajo el codigo de la cuenta, en el registro. */
.account-register small.account-fiscal-ncf {
  color: var(--accent-dark);
  font-weight: 800;
  letter-spacing: .02em;
}

/* «Emitir comprobante» y «Anular comprobante» son ventanas chicas: pocos campos. */
.account-fiscal-dialog {
  max-width: min(460px, calc(100vw - 32px));
}

/* El comprobante del cobro para llevar directo vive dentro del panel claro de «Abrir cuenta». */
.takeout-fiscal {
  border-top: 1px solid #cfd4d3;
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.takeout-fiscal h4 {
  font-size: 14px;
  margin: 0;
}

.takeout-fiscal .fiscal-options {
  display: grid;
  gap: 8px;
}

/* ---- account-partial-refund.css ---- */
/* Devolver parte de una cuenta cobrada: la ventana de renglones y cantidades, y la ficha de lo ya devuelto.
   Ventana clara como «Devolver» y «Emitir comprobante»; solo lo que esas no traen. */

.account-partial-refund-dialog {
  max-width: min(880px, calc(100vw - 32px));
}

.partial-refund-table {
  max-height: 46vh;
  overflow: auto;
}

.partial-refund-table table {
  width: 100%;
}

.partial-refund-table th.num,
.partial-refund-table td.num {
  text-align: right;
  white-space: nowrap;
}

.partial-refund-table td small {
  color: var(--muted);
  display: block;
  font-size: 11px;
}

.partial-refund-table input[data-refund-quantity] {
  max-width: 76px;
  text-align: right;
}

/* Un renglon ya devuelto entero se ve, pero no se toca. */
.partial-refund-table tr.partial-refund-done {
  color: var(--muted);
}

.partial-refund-summary {
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 6px 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 10px 12px;
}

.partial-refund-summary span {
  color: var(--muted);
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 2px;
  text-transform: uppercase;
}

.partial-refund-summary strong {
  color: var(--ink);
  font-size: 15px;
}

.partial-refund-summary .partial-refund-total strong {
  color: var(--warn);
  font-size: 18px;
}

.partial-refund-tender {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 8px 12px 10px;
}

.partial-refund-tender legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding: 0 4px;
  text-transform: uppercase;
}

.partial-refund-tender label {
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
}

.partial-refund-tender small {
  color: var(--muted);
  font-size: 12px;
  grid-column: 1 / -1;
}

.partial-refund-auth {
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
}

/* En el registro: lo devuelto por partes bajo el total. */
.account-register small.account-refunded-note {
  color: var(--warn);
  font-weight: 800;
}

.account-refund-history .refund-history-entry {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.account-refund-history .refund-history-entry header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.account-refund-history .refund-history-entry header b {
  margin-left: auto;
}

.account-refund-history .refund-history-entry header span {
  color: var(--muted);
  font-size: 12px;
}

.account-refund-history .refund-history-entry ul {
  margin: 0;
  padding-left: 18px;
}

.account-refund-history .refund-history-entry li span {
  color: var(--muted);
  margin-left: 8px;
}

.account-refund-history .refund-history-totals,
.account-refund-history .refund-history-forms {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

@media (max-width: 720px) {
  .partial-refund-tender {
    grid-template-columns: 1fr;
  }
}

/* En el reporte de ventas: la tarjeta de lo devuelto por partes, y la nota bajo el total de cada cuenta. */
.metric-refunded {
  background: linear-gradient(135deg, #fff8f6, #fffcfb);
  border-color: #efc2b8;
}

.metric-refunded .daily-report-metric-icon {
  background: linear-gradient(135deg, #e0705c, #b42318);
  box-shadow: 0 12px 22px rgba(180, 35, 24, 0.22);
}

.account-report-table small.report-refunded {
  color: var(--warn);
  display: block;
  font-size: 11px;
  font-weight: 800;
}

.account-report-table tfoot .report-refunded-row td {
  color: var(--warn);
}

/* En el reporte del turno: lo devuelto por partes bajo las ventas. */
.shift-refunds-panel td small {
  color: var(--muted);
  display: block;
}

/* «Se boto» (pregunta 136): lo devuelto que no vuelve al inventario sale como merma. En la ventana de devolver la cuenta
   entera es una lista de casillas; en la de devolver parte, una columna. */
.refund-waste-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
}

.refund-waste-list small {
  color: var(--muted);
  font-size: 11px;
}

.refund-waste-option {
  align-items: center;
  display: flex;
  font-weight: 600;
  gap: 8px;
}

.partial-refund-table td input[name="refund_wasted"] {
  display: block;
  margin: 0 auto;
}

/* ---- tables.css ---- */
.tables-head,
.table-map-shell header,
.table-inventory header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.tables-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.tables-module-card {
  gap: 22px;
  margin-bottom: 18px;
}

.table-filter {
  display: flex;
  gap: 10px;
}

.table-metrics {
  margin-bottom: 18px;
}

.tables-module-card .table-metrics {
  margin-bottom: 0;
}

.table-map-shell,
.table-inventory {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.table-map-shell {
  margin-bottom: 18px;
  padding: 14px;
}

.table-map-shell h2,
.table-inventory h2 {
  font-size: 18px;
  margin: 0;
}

.table-map-shell p,
.table-inventory p {
  color: var(--muted);
  margin: 0;
}

.table-map {
  background-color: #f8faf9;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  border: 1px dashed #cbd5cf;
  border-radius: 8px;
  height: clamp(280px, 36vh, 460px);
  margin-top: 14px;
  position: relative;
}

.map-table {
  align-items: center;
  background: #dce4e1;
  border: 1px solid #cbd5cf;
  border-radius: 8px;
  display: grid;
  gap: 2px;
  height: 62px;
  justify-items: center;
  padding: 8px;
  place-content: center;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 108px;
}

.map-table strong,
.map-table small {
  display: block;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.map-table.occupied {
  background: #287647;
  border-color: #287647;
  color: white;
}

.map-table small {
  color: inherit;
  font-weight: 700;
}

.table-modal-form {
  gap: 14px;
}

.table-modal-form label {
  display: grid;
  gap: 6px;
}

.table-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.table-inventory {
  padding: 14px;
}

.table-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .table-form-grid {
    grid-template-columns: 1fr;
  }

  .tables-head,
  .tables-actions,
  .table-filter {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---- table-metrics-compact.css ---- */
.tables-module-card {
  gap: 14px;
  padding-bottom: 18px;
}

.tables-module-card .table-metrics {
  gap: 10px;
}

.tables-module-card .metric-card {
  gap: 8px;
  min-height: 76px;
  padding: 14px 18px;
}

.tables-module-card .metric-card span {
  font-size: 13px;
}

.tables-module-card .metric-card strong {
  font-size: 22px;
  line-height: 1;
}

/* ---- table-organizer.css ---- */
.map-organize-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.map-organize-actions button {
  min-height: 34px;
  padding: 8px 12px;
}

.map-organize-actions span {
  color: var(--muted);
  font-size: 12px;
}

.table-map.organizing {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px rgb(15 118 110 / 18%);
}

.table-map.organizing .map-table {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.table-map.organizing .map-table::after {
  background: rgb(15 118 110 / 16%);
  border-radius: 999px;
  content: "";
  inset: -8px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity .16s ease;
}

.table-map.organizing .map-table:hover::after,
.table-map.organizing .map-table.dragging::after {
  opacity: 1;
}

.map-table.dragging {
  cursor: grabbing;
  z-index: 5;
}

@media (max-width: 760px) {
  .map-organize-actions {
    justify-content: flex-start;
    margin-top: 10px;
    width: 100%;
  }
}

/* ---- table-cards.css ---- */
.table-card {
  border: 1px solid #d9e2ee;
  border-left: 4px solid #23804f;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.table-card.occupied {
  border-left-color: #b26a00;
}

.table-card.inactive {
  opacity: .72;
}

.table-card header,
.table-card footer,
.table-facts {
  display: flex;
  gap: 6px;
}

.table-card header {
  align-items: flex-start;
  justify-content: space-between;
}

.table-card h3 {
  font-size: 12px;
  margin: 0;
}

.table-card p {
  font-size: 11px;
  margin: 3px 0 0;
}

.table-card .status-badge {
  font-size: 11px;
  padding: 5px 9px;
}

.table-facts span {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  min-height: 30px;
  padding: 5px;
}

.table-facts b,
.table-notes {
  color: var(--muted);
  font-size: 10px;
}

.table-notes {
  margin: 0;
}

.table-card footer {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.table-card footer button,
.table-card footer .button-link {
  font-size: 13px;
  min-height: 30px;
  padding: 7px 12px;
}

.soft {
  background: #edf3f1;
  color: var(--ink);
}

.danger {
  background: var(--warn);
}

/* ---- inventory.css ---- */
.inventory-head h1 { margin: 0; }

.inventory-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  position: relative;
}

/* Enlaces (Exportar, Imprimir) y botones (Ajustar) con la misma letra y alto:
   el enlace tomaba 15px y el boton la letra del navegador. El borde de 1px
   del enlace se descuenta del relleno. */
.inventory-actions > button,
.inventory-actions > .button-link {
  font-size: 14px;
  line-height: 16px;
  white-space: nowrap;
}

.inventory-actions > .button-link { padding-block: 10px; }

.tools-menu { position: relative; }

.tools-trigger {
  background: #eef5ff;
  border: 1px solid #bcd4ff;
  box-shadow: 0 0 0 4px rgb(37 99 235 / 8%);
  color: #152033;
  min-width: 142px;
}

.tools-trigger span::before {
  content: "^";
  font-size: 11px;
  margin-left: 8px;
}

.tools-trigger.open span::before {
  content: "v";
}

.tools-panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgb(15 23 42 / 16%);
  display: grid;
  gap: 14px;
  padding: 14px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(408px, calc(100vw - 44px));
  z-index: 4;
}

.tools-panel[hidden] { display: none; }

.tools-panel h3 {
  font-size: 13px;
  letter-spacing: .06em;
  margin: 0;
}

.tools-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-button,
.tool-import {
  background: #f4f7ff;
  border: 1px solid #bfd4ff;
  border-radius: 12px;
  color: #252c34;
  font-weight: 700;
  padding: 12px;
}

.tools-panel form {
  display: grid;
  gap: 10px;
}

.tools-panel p {
  color: #252c34;
  font-size: 13px;
  margin: 0;
}

.tools-panel input[type="file"] { border: 0; padding: 0; }

.inventory-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.inventory-panel header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.inventory-panel h2 { font-size: 18px; margin: 0; }

.inventory-table { border: 0; border-radius: 0; }

.inventory-table table {
  min-width: 1120px;
}

.inventory-table th {
  background: #eaf1f8;
  color: #06101f;
}

.inventory-table td {
  vertical-align: middle;
}

.inventory-table .inventory-code,
.inventory-table .inventory-code strong {
  color: #66756d;
}

.inventory-table td small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

.inventory-row-actions {
  white-space: nowrap;
}

.inventory-row-actions .button-link {
  min-height: 34px;
  padding: 8px 12px;
  /* Ajustar es un button y no hereda la letra: sin esto sale mas chico que Auditar. */
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

.inventory-kind-product {
  background: #eef8f7;
  border: 1px solid #bfe4df;
  color: #007960;
}

.inventory-kind-service {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

.inventory-import-summary {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 1px;
  grid-template-columns: 2fr repeat(3, minmax(120px, 1fr));
  margin-bottom: 14px;
  overflow: hidden;
}

.inventory-import-summary div {
  background: white;
  display: grid;
  gap: 4px;
  padding: 14px;
}

.inventory-import-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.inventory-import-summary strong {
  color: #0f172a;
  overflow-wrap: anywhere;
}

.inventory-import-table table {
  min-width: 1280px;
}

.inventory-audit-identity {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 16px;
  overflow: hidden;
}

.inventory-audit-identity div {
  background: white;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
}

.inventory-audit-identity span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.inventory-audit-identity strong {
  color: #0f172a;
  overflow-wrap: anywhere;
}

.inventory-audit-metrics {
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 16px;
}

.inventory-audit-metrics .metric-card {
  align-content: center;
  gap: 6px;
  min-height: 88px;
  padding: 14px 16px;
}

.inventory-audit-metrics .metric-card span {
  font-size: 12px;
  line-height: 1.2;
}

.inventory-audit-metrics .metric-card strong {
  font-size: 21px;
  line-height: 1.1;
}

.inventory-audit-metrics .metric-card small {
  font-size: 11px;
  line-height: 1.25;
}

.inventory-audit-section {
  margin-top: 16px;
}

.inventory-audit-limit {
  color: var(--muted);
  font-size: 13px;
  margin: 12px 16px 0;
}

.inventory-audit-limit a {
  color: var(--primary);
  font-weight: 700;
  margin-left: 8px;
}

.inventory-audit-full {
  margin: -8px 0 14px;
}

.inventory-audit-table table {
  min-width: 1320px;
}

.inventory-movement-in {
  background: #e7f7f5;
  border-color: #b7ddd8;
  color: #007960;
}

.inventory-movement-out {
  background: #fff0ed;
  border-color: #ffcdc5;
  color: var(--warn);
}

.import-action-create {
  background: #dcfce7;
  color: #166534;
}

.import-action-update {
  background: #dbeafe;
  color: #1d4ed8;
}

.import-action-skip {
  background: #f4f4f5;
  color: #52525b;
}

.inventory-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#adjust-stock {
  max-width: min(560px, calc(100vw - 32px));
}

/* El relleno y la cabecera son los de marina-window: su banda cuenta con los 22 px del panel. */
#adjust-stock .inventory-adjust-panel {
  gap: 10px;
}

#adjust-stock .modal-head h2 {
  font-size: 20px;
}

#adjust-stock .kicker {
  margin-bottom: 2px;
}

#adjust-stock .inventory-form-grid {
  gap: 8px 12px;
}

#adjust-stock input,
#adjust-stock select {
  min-height: 40px;
  padding: 8px 10px;
}

#adjust-stock textarea {
  min-height: 64px;
  padding: 8px 10px;
  resize: vertical;
}

#adjust-stock .modal-actions {
  gap: 10px;
  margin-top: 0;
}

#adjust-stock .modal-actions button {
  min-height: 38px;
  padding: 8px 13px;
}

@media (max-width: 760px) {
  .inventory-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .tools-panel {
    left: 0;
    right: auto;
  }

  .inventory-form-grid {
    grid-template-columns: 1fr;
  }

  #adjust-stock .inventory-form-grid {
    grid-template-columns: 1fr;
  }

  .inventory-import-summary {
    grid-template-columns: 1fr;
  }

  .inventory-audit-identity {
    grid-template-columns: 1fr;
  }
}

/* ---- inventory-filters.css ---- */
.inventory-filters {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1.4fr) repeat(5, minmax(124px, 1fr)) auto;
  margin: 0 0 16px;
  padding: 14px;
}

.inventory-filters label {
  color: #203047;
  font-size: 12px;
  gap: 6px;
}

.inventory-filters input,
.inventory-filters select {
  background: #fff;
  font-size: 13px;
  min-height: 38px;
  padding: 8px 10px;
}

.inventory-search {
  grid-column: span 2;
}

.inventory-filter-actions {
  align-items: end;
  display: flex;
  gap: 8px;
}

.inventory-filter-actions button,
.inventory-filter-actions a,
.inventory-pager a,
.inventory-pager .disabled {
  border-radius: 6px;
  font-weight: 700;
  min-height: 36px;
  padding: 8px 12px;
  text-decoration: none;
}

.inventory-filter-actions a,
.inventory-pager .disabled {
  background: #eef3f0;
  color: var(--muted);
}

.inventory-pager {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 13px 16px;
}

.inventory-pager nav {
  align-items: center;
  display: flex;
  gap: 10px;
}

.inventory-pager span,
.inventory-pager strong {
  color: #66756d;
  font-size: 13px;
}

.inventory-pager a {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 1320px) {
  .inventory-filters {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }

  .inventory-search {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .inventory-filters,
  .inventory-search {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .inventory-pager {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---- supply-modal.css ---- */
.supply-dialog {
  border-radius: 8px;
  max-height: min(740px, calc(100vh - 32px));
  max-width: min(620px, calc(100vw - 28px));
}

.supply-dialog::backdrop {
  backdrop-filter: blur(7px);
  background: rgb(15 23 42 / 42%);
}

.supply-panel {
  box-sizing: border-box;
  gap: 12px;
  overflow-x: hidden;
  padding: 18px 18px 0;
}

.supply-modal-head {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.supply-head-main {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.supply-head-icon {
  border: 1px solid #72c9c0;
  border-radius: 8px;
  display: inline-grid;
  height: 36px;
  place-items: center;
  width: 36px;
}

.supply-head-icon::before {
  border: 2px solid var(--accent);
  content: "";
  height: 12px;
  transform: rotate(30deg);
  width: 12px;
}

.supply-modal-head h2 {
  color: #111c34;
  font-size: 21px;
  line-height: 1.1;
  margin: 0;
}

.supply-modal-head p:not(.kicker) {
  color: #60708f;
  font-size: 13px;
  margin: 0;
}

.supply-close {
  border-color: transparent;
  color: #36435e;
  font-size: 16px;
  height: 30px;
  width: 30px;
}

.supply-form-grid {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supply-tabbar {
  background: #eef5f4;
  border: 1px solid #cfe4e1;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px;
}

.supply-tab {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #45625d;
  font-size: 13px;
  font-weight: 900;
  min-height: 34px;
  padding: 7px 10px;
}

.supply-tab.active {
  background: white;
  box-shadow: 0 8px 18px rgb(15 118 110 / 12%);
  color: #0f766e;
}

.supply-price-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.supply-name-field {
  grid-column: 1 / -1;
}

.supply-price-field input {
  font-size: 16px;
  font-weight: 800;
}

.supply-field {
  color: #26324f;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.supply-label {
  align-items: center;
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
}

.supply-mini-icon {
  border: 2px solid var(--accent);
  border-radius: 4px;
  height: 12px;
  width: 12px;
}

.tag-icon, .brand-icon {
  border-radius: 6px;
  transform: rotate(45deg);
}

.house-icon, .folder-icon {
  border-radius: 3px 3px 0 0;
}

.ruler-icon {
  border-radius: 3px;
  transform: rotate(-35deg);
}

.supply-field input,
.supply-field select {
  border-color: #ccd5e5;
  border-radius: 7px;
  box-sizing: border-box;
  color: #26324f;
  font-size: 14px;
  min-height: 38px;
  min-width: 0;
  padding: 8px 10px;
  width: 100%;
}

.supply-actions {
  border-top: 1px solid #dbe2ec;
  margin: 4px 0 0;
  padding: 12px 0 14px;
}

.supply-cancel {
  border-color: var(--accent);
  border-radius: 7px;
  color: var(--accent);
  font-size: 14px;
  padding: 9px 14px;
}

.supply-submit {
  align-items: center;
  background: linear-gradient(135deg, #159485, #0f766e);
  border-radius: 7px;
  box-shadow: 0 14px 28px rgb(15 118 110 / 18%);
  font-size: 14px;
  gap: 8px;
  padding: 10px 16px;
}

.save-icon { border: 2px solid white; border-radius: 4px; height: 16px; width: 16px; }

@media (max-width: 700px) {
  .supply-panel { padding: 18px 16px 0; }
  .supply-form-grid,
  .supply-price-grid { grid-template-columns: 1fr; }
  .supply-actions { margin-inline: 0; padding-inline: 0; }
}

/* ---- administration.css ---- */
.admin-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  margin-bottom: 16px;
  overflow: hidden;
}

.action-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.admin-panel header {
  background: #eaf1f8;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.admin-panel h2 {
  font-size: 18px;
  margin: 0;
}

.admin-table {
  border: 0;
  border-radius: 0;
}

.admin-table table {
  min-width: 760px;
}

.admin-table th {
  background: #eaf1f8;
  color: #06101f;
}

.admin-table td {
  vertical-align: middle;
}

.admin-empty {
  display: grid;
  gap: 4px;
  padding: 22px 16px;
}

.admin-empty span {
  color: var(--muted);
}

.admin-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .admin-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- administration-catalog.css ---- */
.catalog-tools-block {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.catalog-tools-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.catalog-tools-block h4 {
  font-size: 14px;
  margin: 0;
}

.catalog-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}

.catalog-card {
  align-content: start;
  min-height: 0;
}

.catalog-table-wrap {
  padding: 14px;
}

.catalog-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.catalog-table th {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  padding: 0 4px 8px;
  text-align: left;
  text-transform: uppercase;
}

.catalog-table td {
  border-top: 1px solid var(--line);
  padding: 10px 4px;
  vertical-align: middle;
}

.catalog-table .actions-wrap {
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}

.catalog-table .small-button {
  font-size: 9px;
  min-width: 58px;
  padding: 6px 5px;
}

.catalog-table .pill {
  font-size: 10px;
  padding: 3px 5px;
}

.catalog-code {
  color: var(--muted);
  font-weight: 700;
}

.catalog-name {
  font-weight: 400;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .catalog-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- backups.css ---- */
.backups-module-card {
  max-width: none;
}

.backup-table table {
  min-width: 920px;
}

.backup-name {
  color: var(--muted);
  font-weight: 500;
}

.backup-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.backup-actions form {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 0;
}

.backup-actions .small-button {
  min-height: 34px;
  padding: 8px 12px;
}

.restore-button {
  background: #2563eb;
}

.restore-confirm-input {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 34px;
  min-width: 190px;
  padding: 7px 10px;
}

/* ---- diagnostic.css ---- */
.diag-card {
  gap: 16px;
}

.diag-card .module-card-head {
  align-items: flex-start;
}

.diag-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}

.diag-panel + .diag-panel {
  margin-top: 12px;
}

.diag-panel h2 {
  font-size: 17px;
  margin: 0 0 6px;
}

.diag-panel-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.diag-panel-head form {
  margin: 0;
}

.diag-flash {
  background: #e8f5f3;
  border: 1px solid #b7ddd8;
  border-radius: 8px;
  color: var(--accent-dark);
  font-weight: 700;
  margin: 0;
  padding: 12px 16px;
}

.diag-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.diag-action,
.diag-action button {
  margin: 0;
  width: 100%;
}

.diag-action button,
.diag-link {
  align-items: flex-start;
  background: #f9fbfd;
  border: 1px solid #d6dee8;
  border-radius: 10px;
  color: var(--ink);
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 14px 16px;
  text-align: left;
}

.diag-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.diag-tab {
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 16px;
}

.diag-tab.active {
  border-bottom-color: var(--accent);
  color: var(--accent-dark);
}

.diag-tally {
  display: flex;
  gap: 6px;
  margin: 0;
}

.diag-pill {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
}

.diag-pill.ok {
  background: #e8f5f3;
  border: 1px solid #b7ddd8;
  color: var(--accent-dark);
}

.diag-pill.warn {
  background: #fdf4e3;
  border: 1px solid #e6cf9a;
  color: #8a5b00;
}

.diag-pill.error {
  background: #fdeceb;
  border: 1px solid #f0b6b1;
  color: var(--warn);
}

.diag-check-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.diag-check {
  align-items: start;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px 12px;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  padding: 12px 14px;
}

.diag-check.ok {
  border-left-color: #2f9e8f;
}

.diag-check.warn {
  background: #fffdf7;
  border-left-color: #d9a441;
}

.diag-check.error {
  background: #fff8f7;
  border-left-color: var(--warn);
}

.diag-check strong {
  display: block;
}

.diag-check small {
  display: block;
}

.diag-dot {
  background: #2f9e8f;
  border-radius: 50%;
  height: 10px;
  margin-top: 6px;
  width: 10px;
}

.diag-check.warn .diag-dot {
  background: #d9a441;
}

.diag-check.error .diag-dot {
  background: var(--warn);
}

.diag-value {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.diag-sample {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.diag-table {
  min-width: 0;
}

.diag-table th[scope="row"] {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  width: 220px;
}

.diag-table td {
  overflow-wrap: anywhere;
}

.diag-table tr.active {
  background: #f2f9f8;
}

.diag-report-name {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
}

.diag-row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.diag-row-actions form {
  margin: 0;
}

.diag-row-actions .small-button.active {
  background: var(--accent-dark);
}

.diag-output {
  background: #0f172a;
  border-radius: 8px;
  color: #dbeafe;
  font-size: 13px;
  margin: 12px 0 0;
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

@media (max-width: 1200px) {
  .diag-grid {
    grid-template-columns: 1fr;
  }

  .diag-check {
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .diag-value {
    grid-column: 2;
    text-align: left;
  }
}

/* ---- catalog-alignment.css ---- */
.catalog-table th,
.catalog-table td {
  box-sizing: border-box;
}

.catalog-col-id {
  width: 7%;
}

.catalog-col-code {
  width: 22%;
}

.catalog-col-name {
  width: 29%;
}

.catalog-col-state {
  width: 14%;
}

.catalog-col-actions {
  width: 28%;
}

.catalog-table th:first-child,
.catalog-table td:first-child {
  text-align: center;
}

.catalog-table th:nth-child(4),
.catalog-table td:nth-child(4) {
  text-align: center;
}

.catalog-table th:nth-child(5),
.catalog-table td:nth-child(5) {
  text-align: right;
}

.catalog-code,
.catalog-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-code {
  font-size: 12px;
}

.catalog-table .actions-wrap {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  gap: 6px;
  justify-content: flex-end;
}

.catalog-table .actions-wrap form {
  display: contents;
}

.catalog-table .small-button {
  font-size: 9px;
  line-height: 1;
  min-height: 28px;
  min-width: 58px;
  padding: 6px 7px;
}

/* ---- purchases.css ---- */
.purchase-head h1 { margin: 0; }

.purchases-module-card {
  gap: 22px;
}

.suppliers-module-card {
  gap: 22px;
}

.purchases-card-head {
  align-items: flex-start;
}

/* El tope de ancho deja cinco columnas como maximo: dos filas parejas de
   filtros, con la busqueda ocupando dos. */
.purchase-filters {
  align-items: end;
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  flex: 1;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  max-width: 880px;
  min-width: 0;
  padding: 8px;
}

.purchase-filter-search {
  grid-column: span 2;
}

.purchase-filter-field {
  color: var(--muted);
  display: grid;
  font-size: 10px;
  font-weight: 800;
  gap: 3px;
  letter-spacing: 0;
  line-height: 1;
  min-width: 0;
  text-transform: uppercase;
}

.purchase-filters input,
.purchase-filters select {
  border-radius: 6px;
  font-size: 13px;
  height: 34px;
  min-height: 34px;
  padding: 6px 9px;
  width: 100%;
}

.purchase-filter-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.purchase-filter-actions .small-button {
  min-height: 34px;
  padding: 8px 12px;
  white-space: nowrap;
}

.purchase-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.purchases-module-card .purchase-panel {
  box-shadow: none;
}

.suppliers-module-card .purchase-panel {
  box-shadow: none;
}

.purchase-panel header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.purchase-panel h2 { font-size: 18px; margin: 0; }

.purchase-panel p {
  color: var(--muted);
  margin: 4px 0 0;
}

.purchase-table { border: 0; border-radius: 0; }

.purchase-table table {
  min-width: 980px;
}

.purchase-table th {
  background: #eaf1f8;
  color: #06101f;
}

.purchase-table td small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

.supplier-code-cell span {
  color: var(--muted);
  font-weight: 500;
}

.danger-button {
  background: #c43838;
}

.line-chip {
  background: #f5f8fb;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  margin: 2px;
  padding: 5px 9px;
}

.purchase-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wide-field {
  grid-column: 1 / -1;
}

.purchase-order-modal .modal-panel {
  max-width: min(760px, calc(100vw - 28px));
}

.order-lines {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.order-lines h3 {
  margin: 0;
}

.order-line-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1.5fr) minmax(120px, .75fr) minmax(120px, .75fr);
}

.status-approved, .status-received { background: #e7f7f5; }

.status-pending,
.status-partial {
  background: #fff8e6;
  border-color: #ead18b;
  color: #7a4b00;
}

.status-converted { background: #edf4ff; border-color: #b8d2ff; color: #214c96; }

.status-cancelled {
  background: #fff0ed;
  border-color: #ffcdc5;
  color: #b42318;
}

.status-returned { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.status-voided {
  background: #fff0ed;
  border-color: #ffcdc5;
  color: #b42318;
}

.purchase-detail-sub {
  color: var(--muted);
  margin: 4px 0 0;
}

/* Las cifras de una factura: lo que vale neta de devoluciones y, si tiene
   asiento vigente, lo facturado, lo devuelto, lo pagado y el saldo. Cuatro por
   fila, para que cada grupo quede en la suya. */
.purchase-receipt-figures {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px 16px;
}

.purchase-receipt-figures div {
  display: grid;
  gap: 2px;
}

.purchase-receipt-figures span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.purchase-receipt-figures strong {
  font-size: 14px;
}

.receive-panel {
  display: grid;
}

.receive-page-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 280px;
  padding: 16px;
}

.receive-page-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.receive-page-list {
  max-height: none;
}

.receive-page-summary {
  align-self: start;
  position: sticky;
  top: 16px;
}

.purchase-submit {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 14px 16px;
}

.purchase-submit .ghost-button,
.purchase-submit .po-submit {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 760px) {
  .purchase-filters {
    align-self: stretch;
    max-width: none;
  }

  .purchase-form-grid,
  .order-line-grid,
  .receive-page-layout {
    grid-template-columns: 1fr;
  }

  .receive-page-summary {
    position: static;
  }

  .purchase-receipt-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- accounting.css ---- */
.accounting-card {
  gap: 22px;
}

.accounting-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.accounting-metrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.accounting-metrics article {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-height: 74px;
  padding: 12px 14px;
}

.accounting-metrics span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.accounting-metrics strong {
  color: var(--ink);
  display: block;
  font-size: 1.05rem;
}

.accounting-table table {
  min-width: 980px;
}

.accounting-code span {
  color: var(--muted);
  font-weight: 500;
}

.accounting-code small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

.accounting-table form {
  margin: 0;
}

.accounting-table button {
  padding: 8px 12px;
}

.accounting-ledger-table table {
  min-width: 1080px;
}

.accounting-muted-detail {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

/* Rejilla de datos, una fila por empleado. Antes cada uno era una tarjeta
   de unos 280 px: diecisiete clientes no cabian en pantalla sin desplazarse
   varias veces, y en papel salian entre siete y nueve hojas. */
.credit-report-table table {
  min-width: 1040px;
}

.credit-report-table th,
.credit-report-table td {
  padding: 7px 12px;
  white-space: nowrap;
}

/* El encabezado se queda a la vista al desplazar la lista. */
.credit-report-table thead th {
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 1;
}

.credit-report-table tbody th {
  color: var(--ink);
  font-weight: 600;
}

.credit-report-table tbody tr:nth-child(even) {
  background: var(--bg);
}

.credit-report-table tbody tr:hover {
  background: #e8f1f3;
}

/* Cifras a la derecha y de ancho fijo: las columnas se leen como una suma. */
.credit-report-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.credit-report-table .total {
  font-weight: 700;
}

.credit-report-table .muted {
  color: var(--muted);
}

/* Los codigos son detalle: no deben ensanchar la fila mas que los importes. */
.credit-report-table .codes {
  color: var(--muted);
  font-size: 12px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.credit-report-table .pill {
  font-size: 11px;
  padding: 2px 8px;
  white-space: nowrap;
}

.credit-report-table tfoot th,
.credit-report-table tfoot td {
  background: var(--panel);
  border-bottom: 0;
  border-top: 2px solid var(--line);
  font-weight: 700;
}

.accounting-breakdown,
.accounting-report-items {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.accounting-breakdown li,
.accounting-report-items li {
  display: grid;
  gap: 2px;
}

.accounting-breakdown li {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.accounting-breakdown span,
.accounting-report-items small {
  color: var(--muted);
  font-size: 0.78rem;
}

.accounting-breakdown strong {
  font-size: 0.9rem;
  white-space: nowrap;
}

.accounting-report-items span {
  font-weight: 700;
}

.status-posted {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.bank-table table {
  min-width: 1120px;
}

.bank-table td {
  font-weight: 400;
}

.bank-modal-panel {
  max-width: 720px;
}

.bank-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .accounting-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .accounting-head-actions {
    justify-content: flex-start;
  }

  .accounting-metrics {
    grid-template-columns: 1fr;
  }
}

/* Tasa de cambio: el formulario de una linea y la tasa vigente en grande. */
.rate-active {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  gap: 10px;
  padding: 14px 16px 0;
}

.rate-active strong {
  color: var(--text);
  font-size: 22px;
}

.rate-active .rate-missing {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.rate-form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(110px, 150px) minmax(140px, 200px) minmax(0, 1fr) auto;
  padding: 14px 16px;
}

.rate-form label {
  color: var(--muted);
  display: grid;
  font-size: 10px;
  font-weight: 800;
  gap: 4px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rate-form input,
.rate-form select {
  border-radius: 6px;
  font-size: 13px;
  height: 36px;
  padding: 6px 9px;
  width: 100%;
}

.rate-form button {
  min-height: 36px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .rate-form {
    grid-template-columns: 1fr;
  }
}

/* El pago de la propina legal, al pie de su informe: los cuatro campos en una fila, el titulo de borde a borde. */
.tip-pay-form {
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 16px 14px;
}

.tip-pay-form > header {
  grid-column: 1 / -1;
  margin: 0 -16px;
}

.tip-pay-form > label {
  display: grid;
  gap: 4px;
}

/* Un error al guardar va justo encima del boton (modal-validation.js), tambien a lo ancho. */
.tip-pay-form > :is(.tip-pay-actions, .form-error) {
  grid-column: 1 / -1;
}

.tip-pay-form > .tip-pay-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .tip-pay-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---- accounting-books.css ---- */
/* Libros de Contabilidad: Diario, detalle del asiento, Mayor y Balanza.
   Se apoya en module-card, table-shell, pill y modal; aqui solo lo propio. */

/* Etiqueta de origen del asiento: el color agrupa por familia (journal_labels.py). */
.book-tone {
  border: 1px solid;
  margin: 0;
  padding: 3px 10px;
  white-space: nowrap;
}

.book-tone-green { background: #e9f7ee; border-color: #b9e3c7; color: #17653a; }
.book-tone-blue { background: #edf4ff; border-color: #b8d2ff; color: #214c96; }
.book-tone-teal { background: #e8f5f3; border-color: #b7ddd8; color: #005e65; }
.book-tone-amber { background: #fff8e6; border-color: #ead18b; color: #7a4b00; }
.book-tone-red { background: #fff0ed; border-color: #ffcdc5; color: #b42318; }
.book-tone-violet { background: #f3eefc; border-color: #d6c7f2; color: #5b3a99; }
.book-tone-gray { background: #f1f4f6; border-color: #d4dbe0; color: #3d4f64; }

/* Cabecera: el año fiscal y las acciones comparten fila. */
.book-year-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.book-year-form select {
  min-width: 150px;
  padding: 8px 10px;
}

.book-year-form button,
.book-filters button {
  padding: 9px 14px;
}

.book-notice {
  background: #e8f5f3;
  border: 1px solid #b7ddd8;
  border-radius: 8px;
  color: var(--accent-dark);
  font-weight: 700;
  margin: 0;
  padding: 10px 14px;
}

.book-warning {
  background: #fff8e6;
  border: 1px solid #ead18b;
  border-radius: 8px;
  color: #7a4b00;
  font-weight: 650;
  margin: 0;
  padding: 10px 14px;
}

.book-search {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.book-search form {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 0;
}

.book-search input[type="search"] {
  min-width: min(360px, 70vw);
  padding: 9px 12px;
}

.book-search small {
  color: var(--muted);
}

/* Tablas: cifras a la derecha y de ancho fijo para que las columnas se lean como suma. */
.book-table table {
  min-width: 960px;
}

.book-table th,
.book-table td {
  padding: 11px 14px;
}

/* `.table-shell th:last-child` (purchase-table-actions.css) alinea a la izquierda
   la ultima columna de toda tabla; las cifras de los libros van a la derecha
   tambien cuando son la ultima, y su ancho no es el de una columna de acciones. */
.table-shell.book-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.table-shell.book-table th:last-child {
  width: auto;
}

.book-table .button-link {
  font-size: 13px;
  padding: 6px 14px;
}

.book-table .code {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.book-table td small {
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.book-table tfoot th,
.book-table tfoot td {
  background: var(--panel);
  border-bottom: 0;
  border-top: 2px solid var(--line);
  font-weight: 700;
}

.book-table .muted {
  color: var(--muted);
}

.book-row-voided td {
  color: var(--muted);
}

.book-row-voided td:first-child a,
.book-row-voided td:nth-child(3) {
  text-decoration: line-through;
  text-decoration-color: rgb(180 35 24 / 45%);
}

.book-group-row td {
  background: #eaf1f8;
  color: #06101f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.book-link {
  color: var(--accent-dark);
  font-weight: 700;
}

.book-link:hover {
  text-decoration: underline;
}

.book-debit-warning {
  color: var(--warn);
  font-weight: 700;
}

/* Paginacion: la de JC, con Primera, Anterior, ventana de numeros, Siguiente y Ultima. */
.book-pager {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
}

.book-pager > span {
  color: var(--muted);
  font-size: 13px;
}

.book-pager nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.book-pager .pager-button {
  background: #f7fbfc;
  border: 1px solid #d2dbe2;
  color: #25384d;
  font-size: 13px;
  padding: 6px 11px;
}

.book-pager .pager-button.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.book-pager .pager-button.disabled {
  background: #eef3f0;
  color: var(--muted);
}

/* Filtros de informe (Mayor y Balanza): una tarjeta con la rejilla de campos. */
.book-filters {
  align-items: end;
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 14px 16px;
}

.book-filters label {
  color: #203047;
  font-size: 12px;
  gap: 6px;
}

.book-filters input,
.book-filters select {
  background: #fff;
  font-size: 13px;
  min-height: 38px;
  padding: 8px 10px;
}

.book-filters .field-account { flex: 1 1 260px; max-width: 420px; }
.book-filters .field-year { flex: 0 0 110px; }
.book-filters .field-date { flex: 0 0 150px; }
.book-filters .field-search { flex: 1 1 170px; max-width: 260px; }

.book-filters .filter-actions {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.book-heading {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
}

.book-heading h2 {
  margin: 0;
}

.book-heading p {
  color: var(--muted);
  margin: 4px 0 0;
}

.book-heading .opening {
  text-align: right;
}

.book-heading .opening span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.book-heading .opening strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

/* Buscador de cuenta: un campo de texto con la lista de cuentas; el codigo viaja aparte. */
.account-picker {
  display: block;
  min-width: 0;
  position: relative;
}

.account-picker input.account-picker-input {
  width: 100%;
}

.account-picker.is-unresolved input.account-picker-input {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgb(217 45 32 / 12%);
}

/* Detalle del asiento. */
.entry-facts {
  display: grid;
  gap: 14px 24px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0;
  padding: 14px 16px;
}

.entry-facts div {
  display: grid;
  gap: 4px;
}

.entry-facts dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.entry-facts dd {
  margin: 0;
}

.entry-facts .wide {
  grid-column: 1 / -1;
}

.entry-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 14px 16px;
}

.entry-actions p {
  margin: 0;
}

/* El asiento manual: un modal del ancho de JC (980 px). */
.modal.journal-modal {
  max-width: min(980px, calc(100vw - 32px));
}

.journal-modal .modal-panel {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.journal-head-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: 180px minmax(0, 1fr);
}

.journal-lines {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.journal-lines table {
  min-width: 860px;
}

.journal-lines th {
  background: #eaf1f8;
  color: #06101f;
  font-size: 12px;
  padding: 9px 8px;
}

.journal-lines td {
  padding: 6px 8px;
  vertical-align: middle;
}

.journal-lines input,
.journal-lines select {
  font-size: 13px;
  min-height: 36px;
  padding: 6px 9px;
  width: 100%;
}

.journal-lines .col-account { width: 31%; }
.journal-lines .col-amount { width: 140px; }
.journal-lines .col-center { width: 170px; }
.journal-lines .col-remove { width: 44px; }

.journal-lines input[data-journal-amount] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.journal-lines tr.has-both input[data-journal-amount] {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgb(217 45 32 / 12%);
}

.journal-line-remove {
  height: 34px;
  padding: 0;
  width: 34px;
}

.journal-line-remove:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.journal-totals {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
}

.journal-totals dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
}

.journal-totals dl div {
  display: grid;
  gap: 2px;
}

.journal-totals dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.journal-totals dd {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin: 0;
}

.journal-totals .difference.is-off dd {
  color: var(--warn);
}

.journal-totals .difference.is-balanced dd {
  color: #17653a;
}

/* Balanza de apertura: el estado a la izquierda; la plantilla y el archivo, a la derecha. */
.opening-panel {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin: 0 0 14px;
  padding: 14px 16px;
}

.opening-panel h2 {
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.opening-panel p {
  margin: 0;
}

.opening-panel-tools,
.opening-panel-tools form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

@media (max-width: 760px) {
  .journal-head-fields {
    grid-template-columns: 1fr;
  }

  .book-filters .filter-actions {
    margin-left: 0;
  }
}

@media print {
  .book-filters,
  .book-pager nav,
  .accounting-head-actions {
    display: none;
  }
}

/* ---- accounting-masters.css ---- */
/* Maestros de Contabilidad: catalogo de cuentas, cuentas del sistema, centros de
   costo, su informe y el hub de catalogos. Usan los componentes de siempre
   (module-card, purchase-panel, purchase-filters, modal); aqui solo lo que
   ninguno trae: la sangria por nivel, las etiquetas de estado, el ancho de las
   ventanas y la cuadricula de sus campos. */

.masters-card {
  gap: 18px;
}

.masters-notice {
  background: #e8f5f3;
  border: 1px solid #b7ddd8;
  border-radius: 8px;
  color: var(--accent-dark);
  font-weight: 700;
  margin: 0;
  padding: 12px 16px;
}

.masters-lead {
  color: var(--muted);
  margin: 0;
}

/* Cabecera: el filtro a la izquierda, las acciones a la derecha. */
.masters-head-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  position: relative;
}

.masters-head-actions > button,
.masters-head-actions > .button-link {
  font-size: 14px;
  line-height: 16px;
  white-space: nowrap;
}

.masters-head-actions > .button-link { padding-block: 10px; }

/* Las tablas son anchas: la jerarquia y los estados piden sus columnas. */
.masters-chart-table table { min-width: 1080px; }
.masters-system-table table { min-width: 940px; }
.masters-centers-table table { min-width: 960px; }
.masters-report-table table { min-width: 860px; }

/* Los detalles bajo un dato (caja o banco, moneda, la cuenta que respalda) van en su linea. */
.masters-card td small {
  display: block;
  margin-top: 3px;
}

.masters-chart-table th,
.masters-chart-table td {
  padding: 11px 12px;
}

.masters-code {
  background: #1f2b3a;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  white-space: nowrap;
}

/* La sangria sale del nivel de la cuenta en el catalogo: --depth viene de la fila. */
.masters-name {
  display: inline-block;
  padding-left: calc(var(--depth, 0) * 22px);
}

.masters-branch {
  color: var(--muted);
  font-weight: 400;
  margin-right: 6px;
}

.masters-chart-table tr.masters-row-off td { color: var(--muted); }

.masters-badge {
  background: #eef2f5;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #25384d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  white-space: nowrap;
}

.masters-badge--on {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.masters-badge--off {
  background: #fff0ed;
  border-color: #ffcdc5;
  color: var(--warn);
}

.masters-badge--warn {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.masters-muted { color: var(--muted); }

.masters-chart-table td.masters-center,
.masters-chart-table th.masters-center { text-align: center; }

.masters-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

th.masters-num { text-align: right; }

.masters-purpose { color: var(--muted); }

.masters-filter-search { grid-column: span 2; }

/* Ventanas. Los anchos son los de JC SOFTS: la de cuentas mide 680 px y la de
   centros de costo 520. El resto es el .modal de siempre. */
.modal.masters-modal { max-width: min(680px, calc(100vw - 32px)); }
.modal.masters-modal--sm { max-width: min(520px, calc(100vw - 32px)); }

/* Doce columnas, como las col-md-* de JC: cada campo dice cuantas ocupa. */
.masters-form-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.masters-form-grid label { min-width: 0; }
.masters-form-grid select,
.masters-form-grid input,
.masters-form-grid textarea { width: 100%; }

.masters-span-1 { grid-column: span 1; }
.masters-span-2 { grid-column: span 2; }
.masters-span-3 { grid-column: span 3; }
.masters-span-4 { grid-column: span 4; }
.masters-span-5 { grid-column: span 5; }
.masters-span-6 { grid-column: span 6; }
.masters-span-7 { grid-column: span 7; }
.masters-span-8 { grid-column: span 8; }
.masters-span-9 { grid-column: span 9; }
.masters-span-12 { grid-column: 1 / -1; }

.masters-section {
  border-top: 1px solid var(--line);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  grid-column: 1 / -1;
  letter-spacing: 0;
  margin: 4px 0 0;
  padding-top: 10px;
  text-transform: uppercase;
}

.masters-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.masters-note {
  color: var(--muted);
  font-size: 13px;
  grid-column: 1 / -1;
  margin: 0;
}

.masters-note--lock {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #7c2d12;
  padding: 8px 10px;
}

.masters-note[hidden] { display: none; }
/* Un boton de la cabecera que solo vale al editar (la «Nueva» de chequeras): `button` pone inline-flex y le gana al hidden. */
.masters-modal .modal-head button[hidden] { display: none; }

.masters-form-grid textarea { resize: vertical; }

.masters-modal select[disabled],
.masters-modal input[disabled] {
  background: #f1f5f9;
  color: var(--muted);
}

/* Cuentas del sistema: la codificacion usa los formularios de siempre. */
.masters-coding-forms {
  display: grid;
  gap: 10px;
}

/* Centros de costo. */
.masters-centers-table tr.masters-unassigned td { background: #f7faf8; }

.masters-centers-table tfoot th {
  background: var(--panel);
  border-top: 2px solid var(--line);
}

.masters-range-filters { max-width: 980px; }

/* Informe por centro de costo. */
.masters-report-table tr[data-row-kind="subtotal"] td,
.masters-report-table tr[data-row-kind="total"] td,
.masters-report-table tr[data-row-kind="unassigned"] td {
  background: #f7faf8;
  font-weight: 700;
}

.masters-report-table tr[data-row-kind="total"] td {
  border-top: 2px solid var(--line);
}

.masters-empty {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
}

.masters-empty h2 { font-size: 18px; margin: 0 0 6px; }
.masters-empty p { margin: 0; }

/* Vista previa de la importacion del catalogo: la de insumos, con una columna mas. */
.masters-import-summary {
  grid-template-columns: 2fr repeat(4, minmax(110px, 1fr));
}

.masters-import-table table { min-width: 1040px; }

.import-action-error {
  background: #fff0ed;
  color: var(--warn);
}

/* Hub de catalogos. */
.masters-hub {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.masters-hub-card {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 18px;
}

.masters-hub-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgb(15 35 54 / 8%);
}

.masters-hub-card strong { display: block; }
.masters-hub-card small { display: block; margin-top: 3px; }
.masters-hub-card > span {
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 760px) {
  .masters-form-grid > * { grid-column: 1 / -1; }
  .masters-hub { grid-template-columns: 1fr; }
  .masters-filter-search { grid-column: auto; }
}

/* ---- accounting-banks.css ---- */
/* Bancos y cuentas: el hub con sus pestanas, las transacciones y los informes.
   Usan los componentes de siempre (module-card, purchase-panel, table-shell,
   modal) y las clases masters-* de los maestros (rejilla de 12 columnas, etiquetas
   de estado, avisos); aqui solo lo que ninguno trae: la barra de pestanas, las
   filas que se editan en su sitio, las ventanas de las transacciones y el
   resumen de lo que se va a asentar. */

/* La barra de pestanas del hub, como los enlaces ?tab= de JC SOFTS. */
.bank-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bank-tab {
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 16px;
  white-space: nowrap;
}

.bank-tab:hover {
  background: #f1f6f8;
  color: var(--accent-dark);
}

.bank-tab.is-active {
  background: var(--panel);
  border-color: var(--line);
  color: var(--accent-dark);
  margin-bottom: -1px;
}

.bank-tab-panel {
  display: grid;
  gap: 16px;
}

/* Cabecera de cada pestana: titulo y explicacion a la izquierda, botones a la derecha. */
.bank-section-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.bank-section-head h2 {
  margin: 0;
}

.bank-section-head p {
  color: var(--muted);
  margin: 4px 0 0;
}

.bank-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* La linea de arriba de Bancos: el nombre del banco nuevo. */
.bank-create-form {
  display: block;
  max-width: 420px;
  padding: 12px 16px 4px;
}

.bank-create-form label {
  display: grid;
  gap: 4px;
}

/* Tablas con campos que se editan en su sitio. */
.bank-table table { min-width: 880px; }
.bank-table--banks table { min-width: 640px; }
.bank-table--accounts table { min-width: 1060px; }

.bank-table td input:not([type="hidden"]),
.bank-table td select {
  min-width: 100px;
  width: 100%;
}

.bank-table--accounts td select { min-width: 110px; }
/* La cuenta contable es la que mas texto trae: "BANK-2 — Banco BAN-000002". */
.bank-table--accounts td:nth-child(5) select { min-width: 190px; }

.bank-table td small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

/* Ventanas. El ancho de cada una es el de JC SOFTS: la cuenta bancaria mide 480 px y
   los formularios largos de transacciones, transferencias y cargos, 980 (el cascaron
   ui-form-modal). */
.modal.bank-modal--account { max-width: min(480px, calc(100vw - 32px)); }
.modal.bank-modal--form { max-width: min(980px, calc(100vw - 32px)); }
/* La transferencia a un tercero y el cheque miden 1240, como en JC (#modalBankTransfer y #modalCheque): para no
   desplazarse reparten sus campos a lo ancho. Van despues de bank-modal--form, que traen tambien, para ganarle. */
.modal.bank-modal--transfer { max-width: min(1240px, calc(100vw - 32px)); }
.modal.bank-modal--cheque { max-width: min(1240px, calc(100vw - 32px)); }
.modal.bank-modal--action { max-width: min(520px, calc(100vw - 32px)); }
/* La orden de pago mide 1120 px y su anulacion 680, como en PCR (#modalOrdenPago de cxp-payment-order-modal.css y el
   .modal-dialog de #anularOrdenPago). Van despues de bank-modal--form y bank-modal--action, que traen tambien. */
.modal.bank-modal--order { max-width: min(1120px, calc(100vw - 32px)); }
.modal.bank-modal--void { max-width: min(680px, calc(100vw - 32px)); }
/* Las tarjetas de la empresa (Bancos III): añadir tarjeta mide 520 px y pagar gasto con tarjeta 760, como en JC SOFTS
   (.accounting-banking-hub__card-create-dialog y el max-width de #cardPayModal). */
.modal.bank-modal--card { max-width: min(520px, calc(100vw - 32px)); }
.modal.bank-modal--card-pay { max-width: min(760px, calc(100vw - 32px)); }
/* La tabla de tarjetas edita la etiqueta y la cuenta contable en su sitio. */
.bank-table--cards td input { min-width: 140px; }
.bank-table--cards td select { min-width: 190px; }
/* La chequera mide 720 px en JC SOFTS (#chequeraFormModal .modal-dialog). */
.modal.bank-modal--chequera { max-width: min(720px, calc(100vw - 32px)); }

/* Lo que se esconde segun el tipo de movimiento, de tercero o de moneda (bank-transactions.js). */
.bank-modal--form [hidden],
.bank-transfer-form [hidden] {
  display: none !important;
}

/* Transacciones: dos paneles lado a lado, como el cascaron de JC. El de los datos es el ancho;
   el de los montos, la columna estrecha. */
.bank-tx-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
}

.bank-tx-layout--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* El formulario largo de JC reparte 1.5fr / 0.9fr: el panel largo a la izquierda y, a la derecha,
   campos cortos que caben de dos en dos. */
.bank-tx-layout--balanced {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
}

/* La transferencia a un tercero: el panel largo a la izquierda y «La transferencia», de 400 px, a la derecha (JC); el
   largo reparte sus campos en dos columnas, a quien va y contra que se aplica. */
.bank-tx-layout--transfer { grid-template-columns: minmax(0, 1fr) 400px; }

.bank-transfer-cols {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bank-transfer-col { min-width: 0; }

/* El cheque: tres columnas, de izquierda a derecha en el orden en que se pregunta (el papel, a quien se paga, el
   asiento), como #modalCheque de JC. */
.bank-tx-layout--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Documento (130 px) y Observacion en la misma fila, como .cheque-campo--documento de PCR. */
.bank-cheque-doc-row { display: grid; gap: 12px; grid-template-columns: 130px minmax(0, 1fr); }
.bank-cheque-doc-row label { min-width: 0; }
.bank-cheque-doc-row :is(input, textarea) { width: 100%; }

/* La orden de pago: un solo bloque de filas de izquierda a derecha, como .cxp-order-grid de PCR. Cada campo mide lo de
   su contenido, los que crecen se reparten lo que sobra y .bank-order-break corta la fila; las notas, el aviso de la
   chequera y la codificacion ocupan la fila entera. Lo escondido no deja su hueco (bank-modal--form). */
.bank-order-grid { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.bank-order-grid > * { min-width: 0; }
.bank-order-grid :is(input, select) { width: 100%; }
.bank-order-grid > p,
.bank-order-grid > .pay-coding { flex-basis: 100%; margin: 0; }
.bank-order-grid > p:empty { display: none; }
.bank-order-break { flex-basis: 100%; height: 0; }
.bank-order-field--grow { flex: 1 1 220px; }
.bank-order-field--account { flex: 1 1 260px; }
.bank-order-field--type,
.bank-order-field--date,
.bank-order-field--method,
.bank-order-field--amount { flex: 0 0 140px; }
.bank-order-field--currency { flex: 0 0 120px; }
.bank-order-field--rate { flex: 0 0 120px; }
.bank-order-field--button { align-self: flex-end; flex: 0 0 120px; }
/* «Cerrar» a la derecha del pie, como el modal-footer de PCR. */
.bank-modal--order .modal-actions { justify-content: flex-end; }

@media (max-width: 680px) {
  .bank-order-grid > * { flex-basis: 100%; }
}

.bank-tx-panel {
  display: grid;
  gap: 10px;
}

.bank-tx-panel .masters-section {
  margin-top: 0;
}

/* La tira de arriba del modal: en palabras, lo que se esta registrando. */
.bank-tx-summary {
  background: #eaf1f8;
  border-radius: 8px;
  color: #06101f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 10px 14px;
}

/* Junto al resumen, el recuadro «Codigo» de 150 px, como .banktx-metric de PCR. */
.bank-tx-summary-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 150px; }
.bank-tx-code {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
}
.bank-tx-code span { color: var(--muted); font-size: 11px; font-weight: 700; }
.bank-tx-code strong { font-size: 14px; font-variant-numeric: tabular-nums; }

.bank-tx-total {
  align-items: baseline;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}

.bank-tx-total span { color: var(--muted); }
.bank-tx-total strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

/* El interruptor del posteo automatico, junto a los botones de la cabecera. */
.bank-auto-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.bank-tx-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 124px;
}

.bank-tx-actions form { margin: 0; }
.bank-tx-actions button { font-size: 13px; padding: 6px 12px; white-space: nowrap; width: 100%; }
.bank-tx-actions button:disabled { cursor: not-allowed; opacity: 0.45; }

/* Las tablas de Bancos son anchas y la pantalla trae su menu lateral: menos relleno y letra de 13 px,
   para que quepa lo mas posible antes de desplazarse. */
.bank-table--tx table { min-width: 1240px; }
.bank-table--transfers table { min-width: 1040px; }
.bank-table--board table { min-width: 960px; }
.bank-table--movements table,
.bank-table--report table { min-width: 1000px; }

.bank-table--tx th,
.bank-table--tx td,
.bank-table--transfers th,
.bank-table--transfers td,
.bank-table--accounts th,
.bank-table--accounts td,
.bank-table--movements th,
.bank-table--movements td,
.bank-table--report th,
.bank-table--report td {
  font-size: 13px;
  padding: 9px 8px;
}

/* La descripcion de un movimiento es lo que mas se lee: que no se parta en tres lineas. */
.bank-table--movements td:nth-child(4),
.bank-table--report td:nth-child(5) {
  min-width: 190px;
}

.bank-table--movements td.code,
.bank-table--report td.code {
  white-space: nowrap;
}

/* La transferencia entre cuentas: una linea de campos y el boton al final. */
.bank-transfer-form {
  padding: 12px 16px 16px;
}

.bank-transfer-form .bank-transfer-submit {
  align-self: end;
}

.bank-transfer-form .bank-transfer-submit button { width: 100%; }

/* La ventana de transferencia entre cuentas: Guardar cierra la segunda fila, como en JC. */
.bank-account-transfer-submit { align-self: end; }
.bank-account-transfer-submit button { width: 100%; }

/* Cheques y ordenes de pago (Bancos II). */
.bank-tx-column {
  align-content: start;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.bank-table--cheques table { min-width: 1240px; }
.bank-table--orders table { min-width: 1180px; }

.bank-table--cheques th,
.bank-table--cheques td,
.bank-table--orders th,
.bank-table--orders td {
  font-size: 13px;
  padding: 9px 8px;
}

/* Un numero de cheque se coteja digito a digito contra el papel: monoespaciado para que no baile. */
.cheque-number {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

/* El aviso de una orden pagada cuyo cheque o movimiento ya no esta en pie. */
.pay-alert { color: var(--warn); }

/* Las acciones de una fila, de dos en dos como la rejilla de JC SOFTS. */
.cheque-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(88px, auto));
}

.cheque-actions form { margin: 0; }
.cheque-actions .button-link,
.cheque-actions button { font-size: 13px; padding: 6px 10px; white-space: nowrap; width: 100%; }
.cheque-actions button:disabled { cursor: not-allowed; opacity: 0.45; }

/* El monto en letras, bajo el importe. */
.pay-words {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  grid-column: 1 / -1;
  letter-spacing: 0.02em;
  margin: 0;
}

/* La codificacion: lineas de cuenta, importe y centro de costo, y lo que falta por repartir. */
.pay-coding { display: grid; gap: 8px; }

.pay-coding-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.pay-coding-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.pay-coding-table table { min-width: 460px; }

.pay-coding-table th {
  background: #eaf1f8;
  color: #06101f;
  font-size: 12px;
  padding: 8px;
}

.pay-coding-table td { padding: 5px 8px; vertical-align: middle; }

.pay-coding-table input,
.pay-coding-table select {
  font-size: 13px;
  min-height: 34px;
  padding: 5px 8px;
  width: 100%;
}

.pay-coding-table input[data-coding-amount] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pay-coding-table tfoot td { font-size: 13px; }
.pay-coding-diff { color: #17653a; font-weight: 700; }
.pay-coding-diff.is-off { color: var(--warn); }

/* El asiento que va a salir. */
.pay-preview-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  width: 100%;
}

.pay-preview-table th { background: #eaf1f8; font-size: 12px; padding: 7px 8px; text-align: left; }
.pay-preview-table th.num,
.pay-preview-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.pay-preview-table td { padding: 6px 8px; }

@media (max-width: 760px) {
  .cheque-actions { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .bank-tx-layout,
  .bank-tx-layout--even,
  .bank-tx-layout--balanced,
  .bank-tx-layout--transfer,
  .bank-tx-layout--thirds,
  .bank-transfer-cols {
    grid-template-columns: 1fr;
  }
}

/* ---- accounting-invoices-to-pay.css ---- */
/* Las facturas que paga una transferencia a un tercero o una orden de pago (JC SOFTS: facturas-a-pagar.css).

   La comparten las dos ventanas (`accounting/partials/invoices_to_pay.html`, que la pinta, e `invoices-to-pay.js`, que la
   gobierna). En el formulario solo hay un boton-resumen de la altura del campo que sustituye; la lista es una pagina del
   cuerpo de la ventana. La ventana no se desplaza: la lista no tiene barra propia, los textos largos se recortan con puntos
   suspensivos y lo que no cabe se pasa de pagina dentro de la propia lista. Los colores son los del Bar (tokens.css). */

/* El formulario solo ve el campo: el contenedor no hace caja y el campo es un elemento mas de la fila donde se incluye. */
.facturas-pagar { display: contents; }
.facturas-pagar [hidden] { display: none !important; }

.facturas-pagar__campo { min-width: 0; }
.facturas-pagar__resumen-caja { position: relative; }

/* La altura de un campo del formulario: el texto a la izquierda y recortado si no cabe. */
.facturas-pagar__resumen {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  display: block;
  font-weight: 400;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.facturas-pagar__resumen:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.75; }

/* Solo lleva el aviso de la lista: ocupa el boton y no se ve ni se toca. */
.facturas-pagar__validez {
  border: 0;
  height: 100%;
  inset: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.facturas-pagar__aviso { margin: 2px 0 0; }

/* La pagina de la lista: llena el cuerpo de la ventana mientras esta abierta (en la rejilla de la transferencia, de lado
   a lado). */
.facturas-pagar__pagina { grid-column: 1 / -1; flex-basis: 100%; min-width: 0; }
.facturas-pagar__cabecera { min-width: 0; }
.facturas-pagar__titulo { display: block; font-weight: 700; }
.facturas-pagar__controles { align-items: center; display: flex; gap: 8px; }
.facturas-pagar__buscar { flex: 1 1 120px; min-width: 0; }

/* La lista no es una `<table>`: la fila de una lista de elegir mide lo que su campo. Es una rejilla de seis columnas, con
   los roles de tabla para quien la lee sin verla. */
.facturas-pagar__tabla { color: var(--ink); font-size: 12px; margin-top: 4px; min-width: 0; width: 100%; }
.facturas-pagar__fila {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 0 6px;
  grid-template-columns: 26px minmax(0, 1fr) 76px 96px 96px 104px;
  height: 26px;
  padding: 0 4px;
}
.facturas-pagar__fila > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facturas-pagar__fila--cabecera { color: var(--muted); font-weight: 700; height: 18px; }
.facturas-pagar__num { font-variant-numeric: tabular-nums; text-align: right; }
.facturas-pagar__fila:hover,
.facturas-pagar__fila.is-marcada { background: var(--bg); }

/* El campo de texto de las ventanas mide mas de lo que cabe en la fila: este mide lo que la fila y se ve igual. */
.facturas-pagar__monto {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  font: inherit;
  height: 22px;
  min-width: 0;
  padding: 0 6px;
  text-align: right;
  width: 100%;
}
.facturas-pagar__monto:disabled { background: var(--bg); color: var(--muted); }

.facturas-pagar__estado { color: var(--muted); font-size: 12px; margin: 2px 0 0; }

/* Lo que impide enviar: se lee en la propia pagina, con el color de los avisos. Su linea ocupa siempre su sitio. */
.facturas-pagar__problema {
  color: var(--warn);
  font-size: 12px;
  font-weight: 700;
  height: 16px;
  line-height: 16px;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facturas-pagar__paginas { align-items: center; color: var(--muted); display: flex; flex: 0 0 auto; font-size: 12px; gap: 4px; }

/* ---- accounting-bridge.css ---- */
/* La cuenta puente de Bancos (la 0182): su ventana de configuracion, el resumen en Cuentas, el panel de Movimiento, las
   partidas en Cuentas por pagar y por cobrar y la etiqueta que deja un movimiento. Usan los componentes de siempre
   (modal, masters-*, table-shell, pill); aqui solo lo que ninguno trae. */

/* La ventana de configurar la cuenta mide 680 px, como el .modal-dialog a secas de JC SOFTS (#modalCuentaPuente). */
.modal.bank-modal--bridge { max-width: min(680px, calc(100vw - 32px)); }
/* Abonar o cobrar una partida: la ventana chica de JC (460 px). */
.modal.bank-modal--bridge-pay { max-width: min(460px, calc(100vw - 32px)); }
.bank-modal--bridge [hidden],
.bank-modal--bridge-pay [hidden] { display: none !important; }

.bank-bridge-name { color: var(--muted); font-weight: 400; }
.bank-bridge-check { align-items: center; display: flex; gap: 8px; }
.bank-bridge-check input { width: auto; }

/* Lo que dice una cuenta puente en su fila de Cuentas: los enlaces a lo que le falta por cobrar o por pagar. */
.bank-table td small .book-link + .book-link { margin-left: 8px; }

/* El panel de Movimiento: la cuenta es puente, a quien se le cobra y se le debe, y las partidas que dejo. */
.bridge-panel {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.bridge-panel h3 { margin: 0; }
.bridge-panel p { color: #7c2d12; margin: 0; }
.bridge-panel-totals { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bridge-panel-totals span { color: var(--muted); display: block; font-size: 12px; }
.bridge-panel-totals strong { font-variant-numeric: tabular-nums; }

/* Las partidas dentro de una tabla: el origen, los abonos vigentes y las acciones en una celda ancha. */
.bridge-origin small,
.bridge-payments small { color: var(--muted); display: block; margin-top: 2px; }
.bridge-payments form { display: inline-block; margin: 2px 0 0; }
.bridge-actions { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 6px; }
.bridge-row-off td { color: var(--muted); }

/* La etiqueta de lo que un movimiento dejo en la cuenta puente, bajo su codigo en las listas de transacciones. */
.bridge-tag {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #9a3412;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  margin: 3px 4px 0 0;
  padding: 2px 8px;
  white-space: nowrap;
}

.bridge-note { color: var(--muted); font-size: 13px; margin: 6px 0 0; }

/* ---- accounting-close.css ---- */
/* Periodos, Cierre contable y Panel de Contabilidad.
   Se apoya en module-card, purchase-panel, table-shell, pill, modal y las tablas de
   accounting-books.css; aqui solo lo propio. */

/* Periodos y cierre: una tarjeta por tema, con su titulo, la regla y la tabla. */
.close-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.close-panel-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
}

.close-panel .close-lead {
  margin: 4px 0 0;
}

.close-lead .pill {
  margin-left: 4px;
}

.close-lead code {
  background: #eef3f6;
  border-radius: 4px;
  color: var(--ink);
  font-size: 13px;
  padding: 1px 6px;
}

.purchase-panel .close-rule {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0;
  padding: 10px 14px;
}

.module-card-table > .close-rule {
  margin: 14px 16px;
}

/* Los avisos viven dentro de purchase-panel, cuyo `p` los pintaria de gris. */
.close-panel .book-warning,
.close-panel .book-notice {
  margin: 0;
}

.module-card-table > .book-notice {
  margin: 14px 16px;
}

/* Un mes con saldos en dolares sin su revaluacion no se cierra: el aviso va debajo del estado, con su enlace. */
.close-fx-gap {
  color: #7a4b00;
  display: block;
  font-weight: 650;
}

.close-year-form {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.close-year-form label {
  color: #203047;
  font-size: 12px;
  gap: 6px;
}

.close-year-form select,
.close-year-form input {
  font-size: 13px;
  min-height: 38px;
  min-width: 160px;
  padding: 8px 10px;
}

.close-year-form button {
  min-height: 38px;
  padding: 9px 14px;
}

.close-year-form .close-notes {
  min-width: min(300px, 70vw);
}

/* La pista debajo del campo, como el form-text de JC. */
.close-year-form .close-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.close-year-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* P01 y su nombre FY2026-P01: la marca oscura de JC. */
.period-tag {
  background: var(--ink);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
}

.book-table td .period-name {
  color: var(--muted);
  display: inline;
  margin-left: 4px;
}

.close-actions {
  white-space: nowrap;
}

.close-actions form {
  display: inline-flex;
  margin: 0;
}

.close-actions button {
  padding: 7px 14px;
}

/* El motivo de reapertura: el modal chico de JC (460 px). */
.modal.close-modal {
  max-width: min(460px, calc(100vw - 32px));
}

@media (max-width: 760px) {
  .close-year-form select,
  .close-year-form input {
    min-width: 0;
    width: 100%;
  }
}

@media print {
  .close-year-form,
  .close-actions {
    display: none;
  }
}

/* ---- accounting-panel.css ---- */
/* Panel de Contabilidad.
   Se apoya en module-card, purchase-panel y accounting-metrics (accounting.css); aqui solo lo propio. */

.panel-asof {
  color: var(--muted);
  margin: 6px 0 0;
}

.accounting-metrics.panel-metrics {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Cinco o seis cifras que se leen juntas (la propina legal: saldo inicial, generada, pagada, saldo final) van en una
   sola fila en una laptop. */
.accounting-metrics.panel-metrics--row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.accounting-metrics.panel-metrics--row .panel-metric strong {
  font-size: 19px;
  white-space: nowrap;
}

.panel-metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 14px 16px;
}

a.panel-metric:hover,
a.panel-metric:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgb(0 111 120 / 12%);
}

.panel-metric > span:first-child {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.panel-metric strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.panel-metric .panel-sub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
}

.panel-positive { color: #17653a; }
.panel-negative { color: var(--warn); }

/* La franja de seguimiento: cuantos periodos van cerrados y si hay cierre global. */
.panel-summary {
  align-items: center;
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 10px 16px;
}

.panel-summary a {
  color: var(--accent-dark);
  font-weight: 600;
}

.panel-summary a:hover {
  text-decoration: underline;
}

.panel-summary span {
  color: var(--muted);
}

.panel-section {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.panel-shortcuts,
.panel-links {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.panel-shortcuts a {
  background: #f7fbfc;
  border: 1px solid #d2dbe2;
  border-radius: 8px;
  display: grid;
  font-weight: 700;
  gap: 2px;
  padding: 12px 14px;
}

.panel-shortcuts a:hover,
.panel-shortcuts a:focus-visible {
  border-color: var(--accent);
}

.panel-shortcuts a span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.panel-links a {
  color: var(--accent-dark);
  font-weight: 700;
}

.panel-links a:hover {
  text-decoration: underline;
}

.panel-secondary summary {
  cursor: pointer;
  font-weight: 700;
}

.panel-secondary[open] summary {
  margin-bottom: 12px;
}

@media print {
  .panel-shortcuts {
    display: none;
  }
}

/* ---- accounting-statements.css ---- */
/* Estados financieros e Informes: Estado de resultados, Balance general,
   Comparativo de años fiscales y el hub de Informes. Se apoyan en module-card,
   purchase-panel, table-shell y los filtros de los libros (accounting-books.css);
   aqui solo la rejilla de tarjetas, el resumen y lo propio del comparativo. */

.statement-page {
  gap: 18px;
}

.statement-hint {
  color: var(--muted);
  margin: 0;
}

.statement-footnote {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* Campos de los filtros: el año y el periodo piden mas que los 110 px del Mayor. */
.book-filters .field-fy { flex: 0 0 170px; }
.book-filters .field-period { flex: 0 0 250px; }
.book-filters .field-view { flex: 0 1 340px; }

/* Una tarjeta por seccion, como las col-lg-4 y col-lg-6 de JC. */
.statement-grid {
  align-items: start;
  display: grid;
  gap: 16px;
}

.statement-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.statement-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.statement-stack {
  display: grid;
  gap: 16px;
}

.statement-card header small {
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.statement-card header h2 {
  font-size: 17px;
}

/* Las tablas de las tarjetas son angostas: sin el ancho minimo de las demas. */
.table-shell.statement-table table {
  min-width: 0;
  width: 100%;
}

.statement-table th,
.statement-table td {
  padding: 9px 12px;
}

.table-shell.statement-table th:first-child {
  width: 76px;
}

.table-shell.statement-table th:last-child {
  width: 124px;
}

.statement-table td:nth-child(2) {
  overflow-wrap: anywhere;
}

.statement-extra-row td {
  background: #f3f8f7;
}

/* El resumen de debajo: margen y resultado, o el cuadre del balance. */
.statement-summary {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  padding: 16px 20px;
}

.statement-summary dl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 0;
}

.statement-summary dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.statement-summary dd {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin: 2px 0 0;
}

.statement-summary dd.is-negative {
  color: var(--warn);
}

.statement-summary p {
  color: var(--muted);
  margin: 0;
  max-width: 520px;
}

/* Comparativo: seis columnas de cifras, o diez en el balance. */
.statement-compare table {
  min-width: 900px;
}

.statement-compare--wide table {
  min-width: 1560px;
}

.statement-compare th {
  white-space: normal;
}

/* El periodo y su mes van en una linea: partidos, cada fila del año mide el doble. */
.statement-compare td:first-child {
  white-space: nowrap;
}

.statement-compare td small {
  display: inline;
  margin: 0 0 0 4px;
}

.statement-period {
  background: #1f2b3a;
  border-color: #1f2b3a;
  color: #fff;
  margin: 0;
}

/* Hub de Informes: una tarjeta por grupo, con sus enlaces como botones. */
.reports-hub {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reports-hub-group header h2 {
  font-size: 16px;
}

.reports-hub-body {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.reports-hub-body p {
  margin: 0;
}

.reports-hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1180px) {
  .statement-grid--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .statement-grid--two,
  .reports-hub {
    grid-template-columns: 1fr;
  }
}

@media print {
  .statement-page .book-filters,
  .statement-page .accounting-head-actions {
    display: none;
  }

  .statement-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .statement-card,
  .statement-summary {
    break-inside: avoid;
  }
}

/* ---- accounting-suppliers.css ---- */
/* Proveedores y catalogos fiscales de las compras: el maestro de proveedores,
   los tipos de gasto y las retenciones de ITBIS e ISR. Usan los componentes de
   siempre (module-card, purchase-panel, modal); aqui solo lo que ninguno trae:
   el ancho de cada ventana y la rejilla de sus campos.

   Los anchos son los de JC SOFTS, medidos en su CSS: proveedores 1080 px, tipos
   de gasto 920 (su modal-xl), retencion de ISR 640 y de ITBIS 580. Cada uno
   gana al ancho generico de .masters-modal por venir despues en el manifiesto. */

.modal.suppliers-modal { max-width: min(1080px, calc(100vw - 32px)); }
.modal.masters-modal--xl { max-width: min(920px, calc(100vw - 32px)); }
.modal.masters-modal--ret-isr { max-width: min(640px, calc(100vw - 32px)); }
.modal.masters-modal--ret-itbis { max-width: min(580px, calc(100vw - 32px)); }

/* Un campo con mas que su etiqueta y su control (un buscador, un par de
   controles, una nota debajo) no puede ser un <label>: tendria dos controles
   dentro. Se pinta igual que uno. */
.masters-field {
  display: grid;
  font-weight: 650;
  gap: 8px;
  min-width: 0;
}

.masters-field > label { font-weight: 650; }

.masters-field-label { font-weight: 650; }

.masters-help {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.masters-optional {
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
  text-transform: none;
}

.masters-notice--warn {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #7c2d12;
}

.masters-field .account-picker { min-width: 0; }

/* Las casillas de un grupo (destinos, usos, reglas), una debajo de otra o en fila. */
.masters-checks {
  display: grid;
  gap: 8px;
}

.masters-checks--row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.masters-checks .check-row {
  font-weight: 400;
  grid-template-columns: 18px auto;
}

.masters-checks input[type="checkbox"] { width: auto; }

/* --- proveedores ------------------------------------------------------------ */

.masters-suppliers-table table { min-width: 1100px; }
.masters-ret-table table { min-width: 860px; }
.masters-concepts-table table { min-width: 1040px; }

.suppliers-warn {
  color: #9a3412;
  font-weight: 650;
}

.concepts-uses .masters-badge { margin: 0 4px 4px 0; }

/* Doce columnas. Los tramos son los de JC: RNC y estado 2, razon social 6,
   telefono 2, email 4, direccion 6. Las cuatro casillas de retencion van
   juntas: tipo 5 + porcentaje 1, y otra vez. */
.suppliers-span-1 { grid-column: span 1; }
.suppliers-span-2 { grid-column: span 2; }
.suppliers-span-5 { grid-column: span 5; }

/* La cuenta ocupa 6 y la pareja de ITBIS cabria a su lado: anclada a la
   primera columna se fuerza el corte y las dos retenciones caen juntas. */
.suppliers-break { grid-column: 1 / span 5; }

.suppliers-control-row {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.suppliers-control-row .button-link {
  align-items: center;
  display: inline-flex;
  white-space: nowrap;
}

/* Lo que dice el servidor del RNC al salir del campo: cruza las doce columnas
   y reserva su alto para que aparecer no descoloque la fila. */
.suppliers-rnc-status {
  min-height: 18px;
  margin-top: -4px;
}

.suppliers-rnc-status[data-tone="ok"] { color: #166534; }
.suppliers-rnc-status[data-tone="error"] { color: var(--warn); }
.suppliers-rnc-status[data-tone="aviso"] { color: #9a3412; }

.suppliers-account-problem {
  color: var(--warn);
  font-size: 13px;
  font-weight: 650;
}

.suppliers-account-problem[hidden] { display: none; }

/* --- retenciones ------------------------------------------------------------ */

/* ITBIS: el nombre toma lo que sobra y el estado y el porcentaje, lo que piden. */
.ret-itbis-grid {
  grid-template-columns: minmax(0, 1fr) 140px 120px;
}

.ret-itbis-wide { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .suppliers-span-1,
  .suppliers-span-2,
  .suppliers-span-5,
  .suppliers-break,
  .ret-itbis-name,
  .ret-itbis-status,
  .ret-itbis-rate {
    grid-column: 1 / -1;
  }

  .ret-itbis-grid { grid-template-columns: 1fr; }
}

/* ---- accounting-petty-cash.css ---- */
/* Caja chica: el panel de cada caja y su catalogo. Usan los componentes de
   siempre (module-card, purchase-panel, panel-metric, book-filters, modal); aqui
   solo lo que ninguno trae.

   Los anchos de las ventanas son los de JC SOFTS, medidos en su CSS: la caja
   720 px; reponer, arqueo y gasto 680 (el ancho de .masters-modal); traer gasto 720 (petty-expense-payment.css). */

.modal.petty-fund-modal { max-width: min(720px, calc(100vw - 32px)); }
.modal.petty-existing-modal { max-width: min(720px, calc(100vw - 32px)); }

/* El gasto elegido en «Traer gasto»: su codigo, lo que debe y el enlace a su ficha. */
.petty-selected-payment {
  border: 1px solid var(--line, #d7dee8);
  border-radius: 8px;
  padding: 8px 10px;
}

.petty-selected-payment h3 {
  font-size: 0.85rem;
  margin: 0 0 4px;
}

/* La caja con la que se trabaja: el selector y su boton, juntos. */
.petty-fund-picker {
  align-items: center;
  display: flex;
  gap: 8px;
}

.petty-fund-picker select {
  min-width: 220px;
  padding: 9px 12px;
}

.petty-fund-picker button {
  font-size: 14px;
  line-height: 16px;
}

/* El custodio es un nombre, no una cifra: mas chico que los importes. */
.petty-text-metric { font-size: 1.05rem; }

.petty-funds-table table { min-width: 900px; }
.petty-pending-table table { min-width: 980px; }
.petty-history-table table { min-width: 940px; }

.petty-pending-table td,
.petty-history-table td { vertical-align: middle; }

/* Las acciones de una fila: sus botones y formularios en linea. */
.petty-pending-table .purchase-actions,
.petty-history-table .purchase-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* El movimiento al que lleva un enlace queda marcado. */
.petty-card tr.petty-focus td { background: #fff8e6; }

/* Lo que se calcula en el arqueo mientras se escribe. */
.petty-difference {
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 12px;
}

/* Un campo escondido (Activa al crear una caja) no deja su hueco en la rejilla. */
.masters-form-grid [hidden] { display: none; }

/* ---- accounting-expenses.css ---- */
/* Gastos: la lista, el modal de alta y edicion, «Codificar» y la ficha. Usan los
   componentes de siempre (module-card, purchase-panel, panel-metric, book-filters,
   modal, masters-form-grid); aqui solo lo que ninguno trae.

   Los anchos de las ventanas son los de JC SOFTS, medidos en su CSS: el modal de
   Crear gasto usa el cascaron ui-form-modal (980 px) y la Codificacion Contable
   mide 860 px. */

.modal.expense-modal { max-width: min(980px, calc(100vw - 32px)); }
.modal.expense-codify-modal { max-width: min(860px, calc(100vw - 20px)); }

/* --- la lista ------------------------------------------------------------------- */

.expenses-table table { min-width: 1280px; }
.expenses-table td { font-size: 13px; vertical-align: middle; }
.expenses-table td:nth-child(3) { min-width: 170px; }
.expenses-table td:nth-child(4) { min-width: 230px; }
.expense-nowrap { white-space: nowrap; }

.expense-filters .field-select { flex: 1 1 150px; max-width: 220px; }
.expense-filters .expense-filter-search { flex: 2 1 240px; max-width: 360px; }

/* El estado de un gasto: borrador gris, aprobado azul, contabilizado verde, anulado rojo. */
.expense-status--approved {
  background: #e8f1ff;
  border-color: #bcd3f7;
  color: #1d4ed8;
}

.expense-status--posted {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.expense-status--void {
  background: #fff0ed;
  border-color: #ffcdc5;
  color: var(--warn);
}

/* «Nuevo pago»: la marca en la lista y la ficha, y el aviso del bloque del modal. */
.expense-badge-payment {
  background: #e8f1ff;
  border-color: #bcd3f7;
  color: #1d4ed8;
  margin-left: 6px;
}

/* --- el modal -------------------------------------------------------------------- */

.expense-body {
  display: grid;
  gap: 14px;
}

.expense-top-grid label,
.expense-general {
  font-size: 13px;
}

/* La rejilla de arriba y la del Nuevo pago tienen las 24 columnas de PCR y cada campo el ancho que le da su
   `expense-compact-layout.css`, por su clase y no por su posicion. «Empresa declarante» (6) no va en el Bar: su
   lugar lo toma el proveedor (5 + 6), asi «Tipo de gasto» abre la tercera fila como alla. */
.expense-top-grid.masters-form-grid { column-gap: 7px; grid-template-columns: repeat(24, minmax(0, 1fr)); }
/* Las fechas caben en sus 3 columnas con el relleno corto (sin el, el calendario tapaba el dia). */
.expense-top-grid input[type="date"] { min-width: 0; padding-left: 6px; padding-right: 4px; }
.expense-field--type { grid-column: span 4; }
.expense-field--rnc { grid-column: span 4; }
.expense-field--razon { grid-column: span 8; }
.expense-field--issue-date { grid-column: span 3; }
.expense-field--document { grid-column: span 5; }
.expense-field--supplier { grid-column: span 11; }
.expense-field--ncf-type { grid-column: span 8; }
.expense-field--ncf { grid-column: span 5; }
.expense-field--concept { grid-column: span 6; }
.expense-field--terms { grid-column: span 3; }
.expense-field--due-date { grid-column: span 3; }
.expense-field--payment-date { grid-column: span 4; }
.expense-field--payment { grid-column: span 4; }
.expense-field--petty { grid-column: span 5; }
.expense-field--pago-comprobante { grid-column: span 5; }
/* La tarjeta de la empresa (que PCR no tiene) va con el ancho de la cuenta bancaria. */
.expense-field--pago-banco { grid-column: span 9; }
.expense-field--pago-referencia { grid-column: span 6; }
.expense-field--pago-beneficiario { grid-column: span 6; }
.expense-top-grid label[hidden] { display: none; }

.expense-general {
  display: grid;
  gap: 6px;
}

.expense-general textarea { resize: vertical; width: 100%; }

/* El bloque de Nuevo pago: lo primero que se pide, con el aviso de lo que le falta al bar para emitir. */
.expense-payment-grid { margin: 0; }
.expense-payment-grid .expense-panel-note { margin: 0; }
/* El efectivo de la caja del turno que hoy no se puede (sin turno abierto, o en dolares): se dice en el color de los avisos. */
.expense-payment-grid .expense-panel-note[data-tone="error"] { color: var(--warn); }

.expense-payment-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  color: #7c2d12;
  font-size: 13px;
  margin: 0;
  padding: 8px 12px;
}

/* Lo que dice el servidor del RNC al salir del campo: reserva su alto para que
   aparecer no descoloque la fila. */
.expense-rnc-status {
  color: var(--muted);
  min-height: 18px;
}

.expense-rnc-status[data-tone="ok"] { color: #166534; }
.expense-rnc-status[data-tone="error"] { color: var(--warn); }
.expense-rnc-status[data-tone="aviso"] { color: #9a3412; }

.expense-amounts .masters-section { margin-bottom: 8px; }

/* Los cuatro paneles y el total neto, en las cinco columnas de PCR. */
.expense-amounts-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1.27fr .78fr 1.12fr 1.27fr .78fr;
}

.expense-panel {
  align-content: start;
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.expense-panel label {
  align-items: center;
  column-gap: 8px;
  display: grid;
  font-size: 12.5px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.expense-panel input,
.expense-panel select {
  font-size: 13px;
  min-height: 32px;
  padding: 5px 6px;
  width: 100%;
}

.expense-panel input[type="checkbox"] { min-height: 0; width: auto; }

.expense-panel output {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.expense-panel-total { border-top: 1px solid var(--line); padding-top: 8px; }

/* La «i» junto a una retencion: dice sobre que se calcula, al pasar el raton. */
.expense-hint-mark {
  background: #e8f1ff;
  border-radius: 50%;
  color: #1d4ed8;
  cursor: help;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  height: 15px;
  line-height: 15px;
  text-align: center;
  width: 15px;
}

.expense-panel-note {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

/* Apagado, el desplegable de un tipo de retencion hace de interruptor (expenses.js): el clic tiene que llegar a su
   etiqueta, porque un control deshabilitado se traga el clic y «lo pulso y no hace nada». */
.expense-panel label select:disabled { pointer-events: none; }

/* Un campo que lleva un desplegable de nombre largo va con su etiqueta encima; el destino del ITBIS tambien, porque
   su panel es la columna estrecha (como en PCR, a lo ancho de la columna). */
.expense-panel label:has(select[name^="ret_"]),
.expense-panel--retention label:has(select) { grid-template-columns: 1fr; row-gap: 4px; }

.expense-check {
  align-items: center;
  display: flex !important;
  gap: 8px;
}

/* La quinta columna de los montos, como en PCR: el rotulo arriba y el importe debajo, centrados. */
.expense-net-total {
  align-items: center;
  background: #e8f5f3;
  border: 1px solid #b7ddd8;
  border-radius: 8px;
  color: var(--accent-dark);
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-width: 0;
  padding: 8px 10px;
  text-align: center;
}

.expense-net-total span { font-weight: 700; }

.expense-net-total strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.expense-hint {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #7c2d12;
  margin: 8px 0 0;
  padding: 8px 10px;
}

.expense-hint[hidden] { display: none; }

.expense-detail-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.expense-detail-head .masters-section {
  border-top: 0;
  margin: 0;
  padding-top: 0;
}

.expense-detail-actions {
  align-items: center;
  display: flex;
  gap: 14px;
}

.expense-lines-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 8px;
  overflow-x: auto;
}

.expense-lines-table {
  border-collapse: collapse;
  min-width: 900px;
  width: 100%;
}

.expense-lines-table th,
.expense-lines-table td {
  border-bottom: 1px solid var(--line);
  padding: 6px;
  vertical-align: middle;
}

.expense-lines-table th {
  background: #f1f6f8;
  color: #25384d;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
}

.expense-lines-table th.masters-num { text-align: right; }

.expense-lines-table input,
.expense-lines-table select {
  font-size: 13px;
  min-height: 32px;
  padding: 5px 8px;
  width: 100%;
}

.expense-lines-table td:nth-child(4) input,
.expense-lines-table td:nth-child(5) input,
.expense-lines-table td:nth-child(6) input { text-align: right; }

.expense-lines-table th:nth-child(1) { width: 20%; }
.expense-lines-table th:nth-child(2) { width: 14%; }
.expense-lines-table th:nth-child(3) { width: 17%; }
.expense-lines-table th:nth-child(4) { width: 7%; }
.expense-lines-table th:nth-child(5) { width: 11%; }
.expense-lines-table th:nth-child(6) { width: 10%; }
.expense-lines-table th:nth-child(7) { width: 9%; }
.expense-lines-table th:nth-child(8),
.expense-lines-table th:nth-child(9) { width: 6%; }

.expense-line-total {
  display: block;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.expense-lines-table .soft { font-size: 12px; padding: 6px 9px; white-space: nowrap; }

.expense-summary {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(120px, 160px));
}

.expense-prepared {
  align-self: center;
  color: var(--muted);
  font-size: 13px;
}

/* El soporte del documento: el campo «Adjuntos» de JC junto a «Preparado por», en la columna de la izquierda del resumen. */
.expense-summary-left {
  align-self: center;
  display: grid;
  gap: 8px;
}

.expense-attachments {
  align-items: center;
  display: grid;
  gap: 4px 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.expense-attachments-label { display: grid; font-size: 12px; line-height: 1.2; }
.expense-attachments-label span { color: var(--muted); }
.expense-attachment-hint { color: var(--muted); font-size: 12px; grid-column: 1 / -1; }
.expense-attachment-hint[data-tone="error"] { color: var(--warn); }

/* El control de archivo: la etiqueta hace de boton y el campo nativo queda dentro, sin verse, para que el teclado lo alcance. */
.expense-file-control {
  align-items: center;
  border: 1px dashed var(--line, #cbd5e1);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 10px;
  position: relative;
}

.expense-file-control > span { font-weight: 600; }
.expense-file-control small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.expense-file-control input[type="file"] { cursor: pointer; inset: 0; opacity: 0; position: absolute; width: 100%; }
.expense-file-control:focus-within { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

/* La ficha: el archivo, quien lo subio y las acciones que su estado deja. */
.expense-attachment-panel .expense-attachment-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
}

.expense-attachment-row small { display: block; }
.expense-attachment-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.expense-attachment-actions form { margin: 0; }
.expense-attachment-form { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.expense-summary-card {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
}

.expense-summary-card span { color: var(--muted); font-size: 12px; }
.expense-summary-card strong { font-variant-numeric: tabular-nums; }

.expense-summary-total {
  background: #e8f5f3;
  border-color: #b7ddd8;
}

/* --- Codificar -------------------------------------------------------------------- */

/* Bajo el titulo, como en PCR: el monto del documento a la izquierda y Retornar a la derecha; debajo, el texto de la
   vista previa y el cuadre. */
.expense-codify-toolbar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.expense-codify-toolbar [data-codify-close] { justify-self: end; }

.expense-codify-amount {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr;
}

.expense-codify-amount span { color: var(--muted); font-size: 13px; }

.expense-codify-amount strong {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  text-align: right;
}

.expense-codify-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: 12px;
  justify-content: space-between;
}

@media (max-width: 760px) {
  .expense-codify-toolbar { grid-template-columns: 1fr; }
  .expense-codify-toolbar [data-codify-close] { justify-self: start; }
}

.expense-codify-table { max-height: 360px; overflow: auto; }
.expense-codify-table table { min-width: 640px; }

.expense-codify-table tr.is-manual td { background: #fff8e6; }

/* Renglones compactos, como la tabla de JC: el nombre de la cuenta y, a su lado, el texto del renglon (sin esto salen
   pegados: «Energia electricaLuz»). */
.expense-codify-table td { padding-bottom: 7px; padding-top: 7px; }
.expense-codify-table td small { margin-left: 8px; }

.expense-codify-account {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  min-height: 30px;
  padding: 4px 8px;
  width: 100%;
}

.expense-codify-account.is-invalid {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgb(217 45 32 / 12%);
}

.expense-codify-balance { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.expense-codify-balance.is-ok { color: #166534; }
.expense-codify-balance.is-error { color: #991b1b; }

[data-codify-notes].is-error { color: #991b1b; }

/* La diferencia va en rojo en la columna que se queda corta. */
.expense-codify-table td.is-short { color: #991b1b; font-weight: 700; }

/* --- la ficha --------------------------------------------------------------------- */

.expense-overview {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}

.expense-overview-eyebrow {
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.expense-overview-number { font-size: 26px; margin: 4px 0; }

.expense-overview-facts {
  color: var(--muted);
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.expense-overview-amounts {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 14px;
}

.expense-overview-amounts dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.expense-overview-amounts dl > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.expense-overview-amounts dt { color: var(--muted); }
.expense-overview-amounts dd { font-variant-numeric: tabular-nums; margin: 0; text-align: right; }

.expense-overview-amounts .expense-grand {
  border-top: 2px solid var(--line);
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
  padding-top: 6px;
}

.expense-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expense-actions form { margin: 0; }

.expense-blocker {
  color: var(--muted);
  font-size: 13px;
}

.expense-entry-table table { min-width: 720px; }
.expense-lines-view table { min-width: 880px; }

/* `.table-shell th:last-child` alinea a la izquierda la ultima columna de toda tabla; aqui la
   ultima son cifras (el total de la linea, el credito del asiento). */
.table-shell.expense-lines-view th:last-child,
.table-shell.expense-entry-table th:last-child {
  text-align: right;
  width: auto;
}
.expense-code-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 960px) {
  .expense-top-grid.masters-form-grid > * { grid-column: span 12; }
  .expense-top-grid.masters-form-grid > p { grid-column: 1 / -1; }
  .expense-amounts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expense-overview { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .expense-top-grid.masters-form-grid > * { grid-column: 1 / -1; }
  .expense-amounts-grid { grid-template-columns: 1fr; }
  .expense-summary { grid-template-columns: 1fr; }
  .expense-detail-head { align-items: flex-start; flex-direction: column; }
}

/* ---- accounting-expense-items.css ---- */
/* Articulos de gasto: el catalogo para las lineas del gasto (el «Inventario» de JC SOFTS). Usa los componentes de
   siempre (module-card, purchase-panel, masters-form-grid, modal); aqui solo lo que ninguno trae.

   El ancho de la ventana es el de JC, medido en su CSS (accounting-inventory.css): 760 px. Gana al ancho generico de
   .masters-modal por venir despues en el manifiesto. */

.modal.expense-items-modal { max-width: min(760px, calc(100vw - 32px)); }

/* La casilla del ITBIS mide lo que su texto, como en JC: es una casilla, no un campo de dato. */
.expense-items-check { width: fit-content; }

.expense-items-table table { min-width: 860px; }

/* ---- account-search.css ---- */
/* Buscador de cuentas con lista propia (account-search.js): la × para limpiar, la lupa del catalogo y la
   lista que se abre al entrar al campo. Se monta sobre el `account-picker` de siempre. */

.account-picker.is-selected input.account-picker-input { padding-right: 28px; }
.account-picker.has-lens input.account-picker-input { padding-right: 28px; }
.account-picker.has-lens.is-selected input.account-picker-input { padding-right: 52px; }

.account-search-clear,
.account-search-open {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--accent-dark, #0b6b66);
  cursor: pointer;
  display: flex;
  height: 22px;
  justify-content: center;
  min-height: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
}

.account-search-open { right: 4px; }
.account-search-clear { display: none; font-size: 16px; line-height: 1; right: 4px; }
.account-picker.is-selected .account-search-clear { display: flex; }
.account-picker.has-lens.is-selected .account-search-clear { right: 26px; }

.account-search-clear:hover,
.account-search-open:hover { background: rgb(15 23 42 / 8%); }

/* La lista va dentro de la ventana que la abre y se coloca sobre la pantalla: la tabla del detalle
   recorta lo que se sale de ella. */
.account-search-list {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #d6dee6);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgb(15 23 42 / 22%);
  display: none;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  position: fixed;
  z-index: 1300;
}

.account-search-list.is-open { display: grid; }

.account-search-option {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  font-size: 13px;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: start;
  min-height: 0;
  padding: 6px 8px;
  text-align: left;
  width: 100%;
}

.account-search-option:hover,
.account-search-option.is-active { background: #e8f5f3; }

.account-search-option__meta { color: var(--muted, #5b6b7b); font-size: 11px; }

.account-search-note {
  color: var(--muted, #5b6b7b);
  display: grid;
  font-size: 12px;
  gap: 1px;
  padding: 6px 8px;
}

/* La ventana del catalogo (la lupa). */
.modal.account-search-dialog { max-width: min(560px, calc(100vw - 32px)); }
.account-search-results { display: grid; gap: 3px; max-height: 280px; overflow: auto; }
.account-search-count { color: var(--muted, #5b6b7b); font-size: 12px; margin: 0; }

/* ---- accounting-reconciliation.css ---- */
/* Conciliacion bancaria: la pestaña del hub de Bancos. Usa los componentes de siempre (purchase-panel, table-shell,
   masters-badge, modal) y las clases masters-* de los maestros; aqui solo lo que ninguno trae: la franja del corte, las
   dos hojas del cuadre lado a lado, la verificacion y las celdas de conciliacion de cada fila. */

.recon-in { color: #166534; }
.recon-out { color: var(--warn); }
.recon-ok { color: #166534; }

/* El filtro principal son seis campos y dos botones: caben en una linea ancha y bajan en pantallas chicas. */
.recon-filter {
  align-items: end;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  max-width: none;
}

.recon-filter .purchase-filter-search { grid-column: span 2; }
.recon-filter .purchase-filter-actions { grid-column: span 2; justify-content: flex-end; }
.recon-filter input[type="date"] { min-width: 140px; }

/* La ventana de importar: el boton Importar cierra el formulario a lo ancho, como en JC (#reconImportModal). */
.recon-import-submit button { width: 100%; }

/* La franja del corte: Corte, Saldo inicial, Entradas y Salidas, en pequeño. */
.recon-summary {
  align-items: baseline;
  background: #f1f6f8;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 10px 14px;
}

.recon-summary b { color: var(--ink); font-variant-numeric: tabular-nums; }
.recon-summary b.recon-in { color: #166534; }
.recon-summary b.recon-out { color: var(--warn); }
.recon-summary[data-recon-summary-loading] { opacity: 0.6; }

/* El documento del periodo. */
.recon-archive { display: grid; gap: 8px; }
.recon-archive--closed { border-color: #bbf7d0; }

.recon-archive-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.recon-archive-title { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.recon-archive-title h3 { margin: 0; }
.recon-archive p { margin: 4px 0 0; }
.recon-archive-note { border-top: 1px solid var(--line); padding-top: 8px; }

.recon-current { background: #f1f6f8; }

/* Las Secciones A y B, lado a lado; en pantalla estrecha, una debajo de la otra. */
.recon-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recon-grid > .purchase-panel { align-content: start; }
.recon-grid h3 { margin: 0 0 8px; }

@media (max-width: 960px) {
  .recon-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Una hoja del cuadre: rotulo a la izquierda, importe a la derecha, y el total sobre fondo. */
.recon-sheet { border-collapse: collapse; width: 100%; }
.recon-sheet td,
.recon-sheet th { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: middle; }
.recon-sheet td.num,
.recon-sheet th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.recon-sheet tfoot th { background: #f1f6f8; }

/* La verificacion: la diferencia en grande y el estado al lado. */
.recon-check h3 { margin: 0 0 8px; }

.recon-check-body {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.recon-check p { margin: 4px 0; }
.recon-difference { font-size: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.recon-state { font-size: 1rem; padding: 6px 14px; }

/* Las tablas de la conciliacion. */
.recon-table table { min-width: 760px; }
.recon-table--movements table { min-width: 980px; }
.recon-table td small { color: var(--muted); display: block; margin-top: 2px; }
.recon-table tfoot th { background: #f1f6f8; }
.recon-table td select,
.recon-table td input:not([type="hidden"]):not([type="checkbox"]) { min-width: 90px; }

/* La celda de conciliacion: el estado, la fecha del banco y, si se puede, el boton para deshacer. */
.recon-cell { align-items: flex-start; display: grid; gap: 4px; justify-items: start; }

/* Conciliar un movimiento: la linea del extracto (si hay), la fecha del banco y el boton, en una fila. */
.recon-match-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recon-match-form select { max-width: 230px; }
.recon-match-form input[type="date"] { min-width: 140px; }
.recon-match-form[data-linked] input[type="date"] { opacity: 0.45; }

.recon-stats { margin-bottom: 8px; }
.recon-unposted { margin: 8px 0 0; }

/* El aviso de las reglas por defecto trae su boton dentro. */
.recon-defaults form { margin-top: 8px; }

.recon-rule-submit { align-self: end; }

/* La tabla de reglas: sus columnas se reparten el ancho, como las de JC (5, 22, 11, 22, 10, 8, 7 y 15 %), y solo en
   pantallas estrechas se desplaza de lado. */
.recon-rules-table table { min-width: 0; table-layout: fixed; width: 100%; }
.recon-rules-table th,
.recon-rules-table td { padding: 8px; }
.recon-rules-table th:nth-child(1) { width: 5%; }
.recon-rules-table th:nth-child(2) { width: 22%; }
.recon-rules-table th:nth-child(3) { width: 11%; }
.recon-rules-table th:nth-child(4) { width: 22%; }
.recon-rules-table th:nth-child(5) { width: 10%; }
.recon-rules-table th:nth-child(6) { width: 8%; }
.recon-rules-table th:nth-child(7) { width: 7%; }
.recon-rules-table th:nth-child(8) { width: 15%; }
.recon-rules-table td input:not([type="checkbox"]),
.recon-rules-table td select {
  font-size: 13px;
  min-width: 0;
  padding: 6px 8px;
  text-overflow: ellipsis;
  width: 100%;
}
/* La prioridad, de 5rem como en JC. */
.recon-rules-table td input[name="priority"] { width: 5rem; }

@media (max-width: 1100px) {
  .recon-rules-table table { min-width: 900px; }
  /* «Nueva regla» va en una fila solo en pantalla ancha (col-lg de JC); mas angosta, de a dos campos. */
  .recon-rule-form .masters-form-grid > * { grid-column: span 6; }
  .recon-rule-form .masters-form-grid > :first-child,
  .recon-rule-form .masters-form-grid > .recon-rule-submit { grid-column: 1 / -1; }
}

/* ---- accounting-cxp.css ---- */
/* Cuentas por pagar y el pago de la factura de un gasto. Usa los componentes de siempre
   (module-card, accounting-metrics, book-filters, modal); aqui solo lo que ninguno trae.

   Los anchos de las ventanas son los de JC SOFTS: el pago de una factura cabe en el cascaron chico
   (`ui-form-modal__dialog--sm`, 460 px) y la nota de credito usa el estandar (980 px, recortado a
   la pantalla). */

.modal.cxp-pay-modal { max-width: min(460px, calc(100vw - 32px)); }
.modal.cxp-void-modal { max-width: min(460px, calc(100vw - 32px)); }
.modal.cxp-note-modal { max-width: min(980px, calc(100vw - 32px)); }

.cxp-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* El rotulo «Filtrar consulta» de PCR, encima del filtro; la frase va en gris. */
.cxp-filter-title {
  font-weight: 700;
  margin: 0 0 6px;
}

.cxp-filter-title span {
  color: var(--muted);
  font-size: 0.9em;
  font-weight: 400;
  margin-left: 6px;
}

.cxp-filters .cxp-filter-actions {
  align-items: end;
  display: flex;
  gap: 8px;
}

.cxp-card .purchase-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cxp-card td small {
  color: var(--muted);
  display: block;
}

/* «Factura / Proveedor» de PCR: el numero, debajo el proveedor y, en gris, el NCF o el codigo. */
.cxp-card td .cxp-party { display: block; }

/* La nota «¿Como se calcula el disponible?» de PCR, plegada encima de la lista. */
.cxp-note {
  color: var(--muted);
  font-size: 0.9em;
  margin: 0 0 12px;
}

.cxp-note summary { cursor: pointer; }
.cxp-note p { margin: 6px 0 0; }

.cxp-pay-modal label[hidden],
.cxp-pay-modal p[hidden] {
  display: none;
}

.cxp-note-grid {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cxp-note-grid .wide {
  grid-column: 1 / -1;
}

/* Un desplegable de opciones largas («Compensacion o saldo a favor») no ensancha su columna: se queda en ella. */
.cxp-note-grid label { min-width: 0; }
.cxp-note-grid select,
.cxp-note-grid input { max-width: 100%; min-width: 0; width: 100%; }

/* La consulta a la DGII del expediente fiscal (gasto y cargo bancario). JC la pone en la pagina del expediente, en una
   rejilla de dos columnas (`received-fiscal.css`); aqui va en una ventana del ancho estandar (980 px) con la misma
   rejilla, los mismos anchos de campo y la misma caida a una columna en pantallas angostas. */
.modal.received-review-modal { max-width: min(980px, calc(100vw - 32px)); }

.received-review > header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.received-review td small { color: var(--muted); display: block; }
.received-review .received-review-notes { white-space: pre-wrap; }

.received-review-grid {
  align-items: start;
  display: grid;
  gap: 16px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.received-review-grid > * { min-width: 0; }
.received-review-grid .wide { grid-column: 1 / -1; }
.received-review-grid label small { display: block; margin-top: 6px; }
.received-review-grid :is(input, select) { max-width: 100%; }
.received-review-grid :is(#issuer-rnc, #buyer-rnc) { width: 19ch; }
.received-review-grid #security-code { width: 24ch; }
.received-review-grid #checked-at { width: 28ch; }
.received-review-grid select { width: auto; }
.received-review-grid textarea { width: 100%; }

@media (max-width: 720px) {
  .received-review-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- accounting-dgii.css ---- */
/* Los reportes de la DGII (hoy el 606 de compras). Usan los componentes de siempre (module-card, book-filters,
   table-shell, masters-badge); aqui solo lo que ninguno trae. */

.dgii-606-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dgii-606-actions .is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.dgii-606-filters .dgii-606-drafts {
  align-items: center;
  align-self: end;
  display: flex;
  gap: 6px;
  min-height: 38px;
}

.dgii-606-filters .dgii-606-drafts input { width: auto; }

.dgii-606-period { margin: 0 0 10px; }

/* Lo que el archivo de envio no admite, y los meses que una nota obliga a rectificar. */
.dgii-606-alert ul,
.dgii-606-notice ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.dgii-606-notice {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  color: #7c2d12;
  font-size: 13px;
  margin: 0 0 10px;
  padding: 8px 12px;
}

/* El 606 tiene 22 columnas: la tabla se desplaza dentro de su caja. */
.dgii-606-table table { min-width: 2300px; }
.dgii-606-table td { font-size: 13px; vertical-align: middle; }
.dgii-606-table td small { color: var(--muted); display: block; }
.dgii-606-table tr.dgii-606-excluded td { color: var(--muted); }
.dgii-606-table tfoot th,
.dgii-606-table tfoot td { background: #f1f5f9; font-weight: 700; }

/* ---- accounting-fixed-assets.css ---- */
/* Activos fijos: la lista, el formulario del activo, los catalogos, el alta y la baja hacia contabilidad,
   la depreciacion mensual y los informes. Usan los componentes de siempre (module-card, purchase-panel,
   panel-metric, masters-form-grid, modal); aqui solo lo que ninguno trae.

   Los anchos de las ventanas son los de JC SOFTS, medidos en su CSS: «Nuevo activo fijo» usa el cascaron
   ui-form-modal (980 px), la categoria el `modal-lg` (760 px) y la ubicacion el `modal-dialog` sin
   tamano (680 px). */

.modal.fixed-asset-modal { max-width: min(980px, calc(100vw - 32px)); }
.modal.fa-undo-modal { max-width: min(460px, calc(100vw - 32px)); }
.modal.fa-category-modal { max-width: min(760px, calc(100vw - 32px)); }
.modal.fa-location-modal { max-width: min(680px, calc(100vw - 32px)); }

/* Los paneles que no son tabla (formularios, fichas, tarjetas) llevan su propio relleno: `.purchase-panel` solo se
   lo da a su cabecera. */
.fa-pad,
.fa-entry-card { padding: 16px 18px; }
.fa-panel-note { padding: 0 18px 14px; }
.fa-panel-note--top { padding-top: 12px; }
.fa-card .module-card-head h1 { white-space: nowrap; }

/* --- la lista ------------------------------------------------------------------- */

.fa-assets-table table { min-width: 1180px; }
.fa-assets-table td:nth-child(2) { min-width: 190px; }
.fa-assets-table td:nth-child(3) { min-width: 160px; }
.fa-assets-table td { font-size: 13px; vertical-align: middle; }
.fa-assets-table td small { color: var(--muted); display: block; margin-top: 2px; }
.fa-categories-table table { min-width: 860px; }
.fa-locations-table table { min-width: 520px; }

.fa-currency { color: var(--muted); font-size: 12px; margin-left: 4px; }

.fa-filters .field-select { flex: 1 1 160px; max-width: 220px; }
.fa-filters .fa-filter-search { flex: 2 1 260px; max-width: 380px; }
.fa-filters .fa-filter-search input { width: 100%; }
/* La pista de JC, al final de la franja. */
.fa-filters .fa-filter-tip { align-self: center; color: var(--muted); font-size: 12px; margin-left: auto; }

/* El estado del activo: activo verde, vendido azul, dado de baja gris. */
.fa-status--ACTIVO {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.fa-status--VENDIDO {
  background: #e8f1ff;
  border-color: #bcd3f7;
  color: #1d4ed8;
}

.fa-status--DADO_DE_BAJA {
  background: #eef2f5;
  border-color: var(--line);
  color: #3d4f64;
}

.fa-status--BORRADOR {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.fa-status--POSTEADA {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

/* --- el formulario ---------------------------------------------------------------- */

.fa-form-body { display: grid; gap: 14px; }
.fa-modal-note { color: var(--muted); font-size: 13px; margin: 0; }

/* Los campos del activo van en 24 columnas, como en PCR (`.fa-form-grid`): cada campo ocupa lo que pide su contenido. */
.masters-form-grid.fa-fields { grid-template-columns: repeat(24, minmax(0, 1fr)); }
.fa-span-3 { grid-column: span 3; }
.fa-span-4 { grid-column: span 4; }
.fa-span-5 { grid-column: span 5; }
.fa-span-6 { grid-column: span 6; }
.fa-span-7 { grid-column: span 7; }
.fa-span-8 { grid-column: span 8; }
.fa-span-11 { grid-column: span 11; }
.fa-span-16 { grid-column: span 16; }

@media (max-width: 760px) {
  .masters-form-grid.fa-fields > * { grid-column: 1 / -1; }
}

.fa-form-body label[hidden],
.fa-fields label[hidden] { display: none; }
.fa-field-note { color: var(--muted); display: block; font-size: 12px; font-weight: 400; margin-top: 2px; }
.fa-readonly-field input { background: #f1f5f9; color: var(--muted); }

.fa-edit-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* --- la ficha --------------------------------------------------------------------- */

.fa-facts {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fa-facts div { min-width: 0; }
.fa-facts dt { color: var(--muted); font-size: 12px; margin: 0 0 3px; }
.fa-facts dd { font-weight: 700; margin: 0; overflow-wrap: anywhere; }

/* --- el alta y la baja hacia contabilidad ----------------------------------------- */

.fa-entries-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fa-entry-card {
  align-content: start;
  display: grid;
  gap: 12px;
}

.fa-entry-card h2 { font-size: 18px; margin: 0; }
.fa-entry-card form { display: grid; gap: 12px; }
.fa-entry-card label[hidden] { display: none; }

/* --- la depreciacion mensual ------------------------------------------------------ */

.fa-period-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fa-period-form input[type="number"] { width: 110px; }
.fa-period-note { color: var(--muted); margin: 0; }
.fa-run-tools { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.fa-run-tools form { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fa-units-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fa-prorate-check { align-items: center; color: var(--muted); display: flex; font-size: 13px; gap: 6px; }
.fa-prorate-check input { width: auto; }

/* --- los informes ----------------------------------------------------------------- */

.fa-hub-metrics { margin-bottom: 0; }
.fa-report-totals { margin-top: 4px; padding: 0 16px 16px; }
.fa-report-totals h3 { font-size: 14px; margin: 0 0 6px; }
.fa-report-totals table { min-width: 0; }

@media (max-width: 900px) {
  .fa-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa-entries-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .fa-facts { grid-template-columns: 1fr; }
}

/* --- importar con plantilla ------------------------------------------------------------ */

/* La vista previa de la importacion de activos: siete cifras arriba, la primera ancha por el nombre del archivo. */
.inventory-import-summary:has([data-import-create]) { grid-template-columns: 2fr repeat(6, minmax(110px, 1fr)); }
.import-warning { color: #7a4b00; display: block; font-size: 12px; }

/* ---- fiscal-base.css ---- */
/* Base fiscal: datos de la empresa, padron de RNC de la DGII y secuencias de comprobantes (NCF).
   Usan los componentes de siempre (module-card, purchase-panel, table-shell, pill, modal); aqui solo lo que
   ninguno trae. */

.fiscal-base-card {
  gap: 18px;
}

.fiscal-base-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.fiscal-base-lead {
  color: var(--muted);
  margin: 0;
}

.fiscal-base-form {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.fiscal-base-form .admin-form-grid input {
  width: 100%;
}

.fiscal-base-span {
  grid-column: 1 / -1;
}

.fiscal-base-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* El script del formulario pone el error antes del boton, dentro de esta fila: que ocupe todo el ancho. */
.fiscal-base-actions .form-error { flex: 1 1 100%; }

.fiscal-base-lead code {
  background: #eef3f6;
  border-radius: 4px;
  color: var(--ink);
  font-size: 13px;
  padding: 1px 6px;
}

.fiscal-base-progress {
  background: #e8f5f3;
  border: 1px solid #b7ddd8;
  border-radius: 8px;
  color: var(--accent-dark);
  font-weight: 700;
  margin: 0;
  padding: 10px 14px;
}

.fiscal-base-progress[hidden] { display: none; }

/* Como se leyo el archivo: pares dato y valor en una cuadricula. */
.fiscal-base-facts {
  display: grid;
  gap: 8px 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 0;
}

.fiscal-base-facts div { display: grid; gap: 2px; }
.fiscal-base-facts dt { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.fiscal-base-facts dd { margin: 0; overflow-wrap: anywhere; }

.fiscal-base-table table { min-width: 760px; }

/* Comprobantes fiscales: la tabla de secuencias y sus avisos. */
.fiscal-table table { min-width: 1020px; }
/* Cada secuencia se cambia en su fila, como en PCR: 130 px los numeros y 150 la fecha. */
.fiscal-seq-number { width: 130px; }
.fiscal-seq-date { width: 150px; }
.fiscal-seq-warning { width: 110px; }
.fiscal-table td :is(input[type="number"], input[type="date"]) { width: 100%; }
.fiscal-table td small { display: block; }

.fiscal-alerts {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #7c2d12;
  padding: 12px 16px;
}

.fiscal-alerts h2 { font-size: 15px; margin: 0 0 6px; }
.fiscal-alerts ul { margin: 0 0 6px; padding-left: 20px; }
.fiscal-alerts p { margin: 0; }
.fiscal-alerts li[data-tone="bad"] { color: var(--warn); }

.fiscal-state {
  background: #eef2f5;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #25384d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  white-space: nowrap;
}

.fiscal-state[data-tone="ok"] { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.fiscal-state[data-tone="warn"] { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.fiscal-state[data-tone="bad"] { background: #fff0ed; border-color: #ffcdc5; color: var(--warn); }

/* El membrete de la empresa en un reporte de pantalla que se imprime (el de ventas a credito pendientes): en pantalla
   no se ve, la hoja de impresion lo muestra (accounting-report-print.css). El aviso de datos que faltan se ve en
   pantalla y no sale impreso. */
.print-letterhead { display: none; }

.company-notice {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #7c2d12;
  margin: 0 0 12px;
  padding: 10px 14px;
}

.company-notice a { color: #9a3412; font-weight: 700; }

/* ---- accounting-fiscal-documents.css ---- */
/* Comprobantes emitidos, Libro NCF y los reportes 607 y 608 de la DGII. Usan los componentes de siempre (module-card,
   purchase-panel, table-shell, panel-metric, book-filters, masters-badge); aqui solo lo que ninguno trae: el ancho de
   las tablas, el comprobante anulado y el 607, que tiene las 23 columnas del formato de la DGII. */

.fiscal-docs-table table { min-width: 1120px; }
.fiscal-docs-table td { font-size: 13px; vertical-align: middle; }

/* La lista de comprobantes y el libro: el tipo y el comprador no se parten en tres renglones. */
.fiscal-register-table td:nth-child(2) { min-width: 150px; }
.fiscal-register-table td:nth-child(4) { min-width: 210px; }
.ncf-book-table td:nth-child(5) { min-width: 210px; }

/* Los totales de debajo de la lista: vendido, notas de credito y neto. */
.fiscal-docs-table tfoot th {
  background: #f1f6f8;
  font-variant-numeric: tabular-nums;
}

.fiscal-docs-table tfoot th small {
  display: block;
  font-weight: 400;
  margin-top: 2px;
}

.fiscal-docs-filters .field-select { flex: 1 1 150px; max-width: 230px; }
.fiscal-docs-filters .field-search { flex: 1 1 180px; max-width: 260px; }

/* Un comprobante anulado se lee apagado y con el NCF tachado: sigue en la lista porque su numero esta consumido. */
.fiscal-doc-voided td { color: var(--muted); }
.fiscal-doc-voided .masters-code,
.fiscal-doc-voided .masters-badge { text-decoration: line-through; }
.fiscal-doc-void-note { color: var(--warn); font-weight: 700; }

/* Numeros entregados que no tienen comprobante (Libro NCF). */
.fiscal-gap { color: var(--warn); }

.ncf-book-filters .field-period { flex: 0 0 290px; max-width: 290px; }

/* --- 607 y 608 ----------------------------------------------------------------------------------- */

.dgii-period-form .field-select { flex: 0 1 190px; }

/* El 607 trae 23 columnas: la tabla desplaza hacia el lado. */
.dgii-table table { font-size: 12px; min-width: 3200px; }
.dgii-table--narrow table { min-width: 880px; }
.dgii-table th { white-space: nowrap; }
.dgii-table td { white-space: nowrap; }
.dgii-table--narrow td.masters-muted { white-space: normal; }

.dgii-table tfoot th {
  background: #f1f6f8;
  font-variant-numeric: tabular-nums;
}

/* Un comprobante que impide el archivo se ve en la tabla. */
.dgii-row-bad td { background: #fff0ed; }

/* ---- accounting-other-journals.css ---- */
/* Otros diarios: el registro, el detalle y los informes. Usan los componentes de siempre (module-card, purchase-panel,
   table-shell, panel-metric, book-filters, book-tone, entry-facts); aqui solo lo que ninguno trae: el estado de un
   documento, el ancho de la tabla y las rejillas del informe. */

.oj-table table { min-width: 1080px; }
.oj-table td { font-size: 13px; vertical-align: middle; }
.oj-table td:nth-child(2) { min-width: 170px; }
.oj-table td:nth-child(3) { min-width: 150px; }
.oj-table td:nth-child(4) { min-width: 170px; }
.oj-table td small { display: block; }
.oj-table td.num small { display: inline; }

.oj-filters .oj-wide { flex: 2 1 260px; max-width: 380px; }
.oj-filters .field-select { flex: 1 1 150px; max-width: 220px; }
.oj-filters .field-search { flex: 1 1 190px; max-width: 280px; }
.oj-filters .field-per-page { flex: 0 0 110px; }

/* El estado de un documento: borrador gris, aprobado azul, pendiente ambar, contabilizado verde, anulado rojo. */
.oj-state {
  background: #eef2f5;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #25384d;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  white-space: nowrap;
}

.oj-state--approved {
  background: #e8f1ff;
  border-color: #bcd3f7;
  color: #1d4ed8;
}

.oj-state--pending {
  background: #fff8e6;
  border-color: #ead18b;
  color: #7a4b00;
}

.oj-state--posted {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.oj-state--void {
  background: #fff0ed;
  border-color: #ffcdc5;
  color: var(--warn);
}

/* El informe: dos tablas lado a lado que bajan una sobre otra en pantallas angostas. */
.oj-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oj-grid h3,
.oj-card h3 {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 10px 0 6px;
  text-transform: uppercase;
}

.oj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oj-chip {
  background: #eef2f5;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  padding: 4px 12px;
}

.oj-downloads {
  display: grid;
  gap: 10px;
}

.oj-downloads > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oj-downloads strong { min-width: 150px; }

.oj-caption {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 0;
  text-align: left;
}

@media (max-width: 900px) {
  .oj-grid { grid-template-columns: 1fr; }
}

/* ---- purchase-actions.css ---- */
.purchase-actions .button-link,
.purchase-actions button {
  align-items: center;
  display: inline-flex;
  font-size: 14px;
  height: 34px;
  justify-content: center;
  min-width: 78px;
  padding: 0 12px;
  white-space: nowrap;
}

.purchase-actions form button {
  width: 100%;
}

.purchase-actions .button-link {
  text-decoration: none;
}

/* ---- purchase-table-actions.css ---- */
.purchase-actions {
  gap: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

div.purchase-actions {
  align-items: center;
  display: flex;
}

td.purchase-actions {
  display: table-cell;
  line-height: 1.35;
}

.table-shell th:last-child,
.table-shell td.purchase-actions {
  text-align: left;
  vertical-align: middle;
}

.table-shell th:last-child { width: 190px; }

.purchase-actions form {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}

.purchase-actions > .button-link,
.purchase-actions > button,
.purchase-actions > form {
  margin-right: 8px;
}

.purchase-actions > :last-child {
  margin-right: 0;
}

/* ---- print-buttons.css ---- */
.button-link.print-button,
button.print-button {
  font-size: 12px;
  height: 30px;
  min-height: 30px;
  min-width: 68px;
  padding: 0 10px;
}

.receipt-print .print-button {
  height: 34px;
  min-height: 34px;
  min-width: 86px;
}

/* ---- purchase-order-picker.css ---- */
.purchase-order-modal,
.purchase-product-modal {
  max-width: min(960px, calc(100vw - 48px));
}

.purchase-order-modal .modal-panel {
  max-width: none;
}

.order-products {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.order-products header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.order-products h3 {
  margin: 0;
}

.order-products span {
  color: var(--muted);
  font-size: 13px;
}

.order-product-list {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  display: grid;
  min-height: 132px;
  padding: 10px;
}

.order-product-header,
.order-product-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 120px minmax(180px, 1fr) 120px 120px 92px;
}

.order-product-header {
  background: #eaf1f8;
  border-radius: 7px 7px 0 0;
  color: #06101f;
  font-size: 12px;
  padding: 10px 12px;
}

.order-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  min-height: 86px;
}

.order-product-row {
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding: 12px;
}

.order-product-row strong {
  align-self: center;
}

.order-product-row label {
  font-size: 0;
}

.order-product-row label input {
  font-size: 14px;
  width: 100%;
}

.purchase-product-panel {
  background: var(--panel);
  border-radius: 8px;
  margin: auto;
  max-width: none;
  overflow: hidden;
  width: 100%;
}

.purchase-product-panel > input {
  margin: 14px 16px;
  width: calc(100% - 32px);
}

.purchase-product-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
  padding: 0 16px 16px;
}

.purchase-product-list button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  padding: 12px;
  text-align: left;
}

.purchase-product-list small {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

@media (max-width: 760px) {
  .order-product-row,
  .purchase-product-list {
    grid-template-columns: 1fr;
  }
}

/* ---- purchase-order-compact.css ---- */
.purchase-order-modal .modal-panel {
  gap: 12px;
}

.purchase-order-meta {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, 35%) minmax(0, 1fr);
}

.purchase-order-meta label {
  min-width: 0;
}

.order-empty[hidden] {
  display: none;
}

.order-product-list {
  min-height: 210px;
}

.order-product-header {
  font-size: 11px;
  padding: 8px 10px;
}

.order-product-row {
  font-size: 12px;
  padding: 8px 10px;
}

.order-product-row strong {
  font-size: 12px;
}

.order-product-row label input {
  font-size: 12px;
  min-height: 34px;
  padding: 6px 8px;
}

.order-product-row .ghost-button {
  font-size: 12px;
  min-height: 34px;
  padding: 6px 10px;
}

@media (max-width: 760px) {
  .purchase-order-meta {
    grid-template-columns: 1fr;
  }
}

/* ---- purchase-product-modal.css ---- */
.purchase-product-modal {
  inset: 0;
  margin: auto;
  max-width: min(1080px, calc(100vw - 44px));
  width: 1080px;
}

.purchase-product-panel {
  background: var(--panel);
  border-radius: 8px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  margin: auto;
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  width: 100%;
}

.purchase-product-head {
  padding: 18px 18px 14px;
}

.purchase-product-head .kicker {
  font-weight: 400;
}

.purchase-product-head span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
}

.purchase-search-box {
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.purchase-search-box input {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  min-height: 40px;
  width: 100%;
}

.purchase-product-list {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr;
  max-height: min(520px, calc(100vh - 300px));
  overflow: auto;
  padding: 14px 16px;
}

.purchase-product-header,
.purchase-product-option {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 42px minmax(130px, 0.55fr) minmax(260px, 1.2fr) minmax(130px, 0.6fr) minmax(150px, 0.7fr) 70px;
}

.purchase-product-header {
  background: #eaf1f8;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  color: #263445;
  font-size: 10px;
  font-weight: 400;
  min-height: 34px;
  padding: 0 10px;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.purchase-product-option {
  background: #fff;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  min-height: 48px;
  padding: 7px 10px;
}

.purchase-product-option:hover {
  border-color: #8fc9bf;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.purchase-product-option input {
  height: 15px;
  width: 15px;
}

.product-code {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.product-name {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.product-reference,
.purchase-product-option span:last-child {
  color: var(--muted);
}

.purchase-product-header strong,
.purchase-product-option strong {
  font-weight: 400;
}

.purchase-product-option.already-added {
  background: #f3f7f5;
  color: #5f6f6a;
}

.purchase-product-actions {
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .purchase-product-option {
    grid-template-columns: 32px 1fr;
  }

  .purchase-product-header {
    display: none;
  }

  .purchase-product-option > span,
  .purchase-product-option > strong {
    grid-column: 2;
  }
}

/* ---- purchase-product-actions.css ---- */
.purchase-product-actions {
  padding: 10px 16px 12px;
}

.purchase-product-actions button {
  font-size: 12px;
  min-height: 34px;
  padding: 7px 12px;
}

/* ---- purchase-product-text.css ---- */
.purchase-product-option .product-code,
.purchase-product-option .product-reference,
.po-product-name span {
  color: #66736b;
  font-weight: 400;
}

.purchase-product-option .product-name,
.po-product-name strong {
  color: #06101f;
  font-weight: 400;
}

/* ---- purchase-order-modal.css ---- */
.purchase-order-modal {
  border-radius: 16px;
  max-width: min(1100px, calc(100vw - 30px));
}

.purchase-order-modal::backdrop {
  backdrop-filter: blur(8px);
  background: rgb(15 23 42 / 46%);
}

.purchase-order-modal .purchase-order-panel {
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  gap: 16px;
  max-width: none;
  padding: 24px 28px 0;
}

.po-head {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 58px 1fr 34px;
}

.po-head-icon {
  border: 1px solid #b9ebe5;
  border-radius: 10px;
  height: 56px;
  position: relative;
  width: 56px;
}

.po-head-icon::before,
.po-head-icon::after {
  border: 2px solid var(--accent);
  border-radius: 4px;
  content: "";
  position: absolute;
}

.po-head-icon::before {
  height: 25px;
  left: 13px;
  top: 16px;
  width: 20px;
}

.po-head-icon::after {
  height: 18px;
  left: 25px;
  top: 23px;
  width: 18px;
}

.po-head h2 {
  color: #101a33;
  font-size: 29px;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
}

.po-head p:not(.kicker) {
  color: #5f6e8c;
  font-size: 12px;
  margin: 6px 0 0;
}

.po-close {
  border-color: transparent;
  color: #26324f;
  font-size: 18px;
}

.po-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) 260px;
}

.po-main {
  display: grid;
  gap: 14px;
}

.po-fields {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.po-fields label {
  color: #26324f;
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  min-width: 0;
  position: relative;
}

.po-label {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.po-label::before {
  border: 2px solid var(--accent);
  border-radius: 4px;
  content: "";
  height: 10px;
  width: 10px;
}

.po-fields input,
.po-fields select,
.po-fields textarea {
  border-color: #cbd5e7;
  border-radius: 7px;
  color: #1f2a44;
  font-size: 13px;
  font-weight: 400;
  min-height: 36px;
  padding: 7px 10px;
}

.po-note textarea {
  min-height: 36px;
  resize: vertical;
}

.po-note small {
  bottom: 5px;
  color: #7a869f;
  font-size: 10px;
  position: absolute;
  right: 10px;
}

.po-actions {
  border-top: 1px solid #dbe2ec;
  margin: 0 -28px;
  padding: 14px 28px 16px;
}

/* ---- purchase-order-detail.css ---- */
.order-products {
  border: 1px solid var(--line);
  border-radius: 9px;
  gap: 8px;
  padding: 12px;
}

.order-products header h3 {
  color: #172033;
  font-size: 14px;
}

.order-products header button {
  background: white;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 12px;
  min-height: 34px;
  padding: 7px 12px;
}

.order-product-list {
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  min-height: 156px;
  padding: 0;
}

.order-product-header,
.order-product-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) 76px 76px 98px 52px 94px 70px;
}

.order-product-header {
  background: #eaf1f8;
  border-radius: 8px 8px 0 0;
  color: #526174;
  font-size: 11px;
  padding: 8px 10px;
}

.order-product-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  padding: 8px 10px;
}

.po-product-name {
  display: grid;
  gap: 2px;
}

.po-product-name strong {
  color: #172033;
  font-size: 12px;
  font-weight: 400;
}

.po-product-name span {
  color: #6c788b;
  font-size: 11px;
  font-weight: 400;
}

.po-unit {
  background: #eef8f7;
  border-radius: 5px;
  color: #275d58;
  display: inline-flex;
  font-size: 11px;
  justify-content: center;
  padding: 5px 7px;
}

.order-product-row label {
  font-size: 0;
}

.order-product-row label input {
  font-size: 12px;
  min-height: 30px;
  padding: 5px 7px;
}

.order-product-row [data-order-line-total] {
  font-size: 12px;
  font-weight: 400;
}

.order-product-row .ghost-button {
  font-size: 11px;
  min-height: 30px;
  padding: 5px 8px;
}

.po-summary {
  background: #f4fbfb;
  border: 1px solid #cde7e4;
  border-radius: 10px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.po-summary h3 {
  color: #174c50;
  font-size: 15px;
  margin: 0;
}

.po-summary span,
.po-summary dt {
  color: #60708f;
  font-size: 11px;
}

.po-summary strong {
  color: #101a33;
  display: block;
  font-size: 13px;
  font-weight: 400;
  margin-top: 3px;
}

.po-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.po-summary-chips span {
  background: #fff6e8;
  border: 1px solid #f0bd69;
  border-radius: 5px;
  color: #744800;
  font-weight: 800;
  padding: 4px 7px;
}

/* ---- purchase-order-summary.css ---- */
.po-summary dl {
  border-top: 1px solid #d8e6ea;
  display: grid;
  gap: 8px 10px;
  grid-template-columns: 1fr auto;
  margin: 0;
  padding-top: 10px;
}

.po-summary dd {
  color: #101a33;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
}

.po-summary dt:last-of-type,
.po-summary dd:last-of-type {
  color: #0f766e;
  font-size: 17px;
  margin-top: 8px;
}

.po-summary-note {
  background: #e8f7f5;
  border: 1px solid #c2e8e2;
  border-radius: 7px;
  color: #286963;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  padding: 10px;
}

.po-cancel {
  border-color: var(--accent);
  color: var(--accent);
  min-width: 110px;
}

.po-submit {
  background: linear-gradient(135deg, #159485, #0f766e);
  border-radius: 8px;
  min-width: 150px;
}

.po-tax {
  color: #172033;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .po-layout,
  .po-fields {
    grid-template-columns: 1fr;
  }

  .po-summary {
    order: -1;
  }

  .order-product-header,
  .order-product-row {
    grid-template-columns: 1fr;
  }
}

/* ---- purchase-order-reference.css ---- */
.purchase-order-modal {
  max-width: min(960px, calc(100vw - 44px));
  width: 960px;
}

.purchase-order-modal .purchase-order-panel {
  border-radius: 16px;
  box-shadow: 0 28px 80px rgb(15 23 42 / 32%);
  max-height: min(720px, calc(100vh - 34px));
  overflow: hidden;
  padding: 16px 28px 0;
}

.po-head {
  border-bottom: 0;
  gap: 12px;
  grid-template-columns: 54px minmax(0, 1fr) 34px;
  padding-bottom: 0;
}

.po-head-icon {
  background: #f6fcfb;
  display: grid;
  place-items: center;
}

.po-head-icon::before {
  border-radius: 6px;
  height: 26px;
  left: 14px;
  top: 14px;
  width: 20px;
}

.po-head-icon::after {
  border-left: 0;
  border-radius: 3px;
  height: 16px;
  left: 27px;
  top: 24px;
  width: 13px;
}

.po-head h2 {
  font-size: 26px;
}

.po-layout {
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 225px;
  min-height: 0;
}

.po-main {
  min-width: 0;
}

.po-fields {
  gap: 10px 22px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.po-fields input,
.po-fields select,
.po-fields textarea {
  background: #fff;
  font-size: 12px;
  min-height: 34px;
}

.po-note textarea {
  min-height: 34px;
}

.order-products {
  background: #fff;
  border-color: #d8e2ec;
  border-radius: 10px;
  padding: 10px 12px 12px;
}

.order-products header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.po-add-product {
  min-width: 130px;
}

.order-product-header,
.order-product-row {
  grid-template-columns: minmax(180px, 1fr) 62px 68px 82px 44px 82px 56px;
}

.order-product-header {
  position: sticky;
  top: 0;
  z-index: 1;
}

.order-product-row {
  min-height: 50px;
}

.po-product-name strong,
.order-product-row label input,
.order-product-row [data-order-line-total] {
  font-size: 11px;
}

.po-summary {
  align-self: stretch;
  background: linear-gradient(180deg, #f3fbfb 0%, #eef8f7 100%);
  border-color: #cce6e3;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}

.po-summary h3::before {
  border: 2px solid var(--accent);
  border-radius: 4px;
  content: "";
  display: inline-block;
  height: 12px;
  margin-right: 8px;
  vertical-align: -2px;
  width: 10px;
}

.po-actions {
  background: #fff;
}

@media (max-width: 920px) {
  .purchase-order-modal {
    width: min(720px, calc(100vw - 32px));
  }

  .po-layout {
    grid-template-columns: 1fr;
  }
}

/* ---- purchase-order-field-grid.css ---- */
.po-provider {
  grid-column: 1;
  grid-row: 1;
}

.po-warehouse {
  grid-column: 2;
  grid-row: 1;
  width: 138px;
}

.po-currency {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: 138px;
}

.po-payment {
  grid-column: 1;
  grid-row: 2;
}

.po-note {
  grid-column: 2;
  grid-row: 2;
}

.po-warehouse select,
.po-currency select {
  width: 138px;
}

.po-note textarea {
  height: 34px;
  resize: none;
}

/* ---- purchase-order-product-list.css ---- */
.order-product-list {
  --order-header-height: 34px;
  --order-list-height: 310px;
  display: block;
  max-height: var(--order-list-height);
  min-height: var(--order-list-height);
  overflow: auto;
  padding: 0;
}

.order-product-header {
  align-items: center;
  min-height: var(--order-header-height);
  padding: 7px 10px;
}

.order-product-list > .order-empty {
  align-items: center;
  justify-content: center;
  min-height: calc(var(--order-list-height) - var(--order-header-height));
  text-align: center;
}

/* ---- purchase-order-line-compact.css ---- */
.order-product-list {
  overflow-x: auto;
  overflow-y: auto;
}

.order-product-header,
.order-product-row {
  gap: 7px;
  grid-template-columns: minmax(150px, 1fr) 50px 58px 70px 38px 74px 50px;
}

.order-product-row {
  box-sizing: border-box;
  font-size: 10px;
  min-height: 34px;
  padding: 3px 8px;
}

.po-product-name {
  gap: 0;
}

.po-product-name strong,
.po-product-name span,
.order-product-row [data-order-line-total],
.order-product-row label input {
  font-size: 10px;
  line-height: 1.1;
}

.po-unit {
  border-radius: 4px;
  font-size: 10px;
  min-height: 24px;
  padding: 3px 5px;
}

.order-product-row label input {
  min-height: 24px;
  padding: 3px 5px;
}

.order-product-row .ghost-button {
  font-size: 10px;
  min-height: 24px;
  padding: 3px 6px;
}

/* ---- purchase-invoice-modal.css ---- */
.purchase-invoice-modal,
.purchase-receive-modal {
  max-width: min(1080px, calc(100vw - 30px));
}

.purchase-receive-modal .purchase-order-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(720px, calc(100vh - 34px));
}

.purchase-invoice-layout {
  grid-template-columns: minmax(0, 1fr) 240px;
}

.purchase-receive-modal .purchase-invoice-layout {
  min-height: 0;
  overflow: auto;
  padding-bottom: 12px;
}

.purchase-receive-modal .po-actions {
  position: relative;
  z-index: 2;
}

.purchase-invoice-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.purchase-invoice-fields input[readonly] {
  background: #f8fafc;
  color: #5f6d7e;
}

.purchase-invoice-products {
  display: grid;
}

.purchase-invoice-list {
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  max-height: 270px;
  overflow-y: auto;
}

.purchase-invoice-header,
.purchase-invoice-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(190px, 1fr) 82px 82px 82px 96px;
}

.purchase-invoice-header {
  background: #eaf1f8;
  color: #526174;
  font-size: 11px;
  padding: 8px 10px;
}

.purchase-invoice-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  padding: 8px 10px;
}

.purchase-invoice-row div {
  display: grid;
  gap: 2px;
}

.purchase-invoice-row small {
  color: #6c788b;
  font-size: 11px;
}

.purchase-invoice-row input {
  font-size: 12px;
  min-height: 30px;
  padding: 5px 7px;
}

/* La recepcion lleva ademas el costo de la factura en cada renglon. */
.receive-cost-list .purchase-invoice-header,
.receive-cost-list .purchase-invoice-row {
  grid-template-columns: minmax(190px, 1fr) 82px 82px 82px 96px 110px;
}

@media (max-width: 980px) {
  .purchase-invoice-layout,
  .purchase-invoice-fields,
  .purchase-invoice-header,
  .purchase-invoice-row,
  .receive-cost-list .purchase-invoice-header,
  .receive-cost-list .purchase-invoice-row {
    grid-template-columns: 1fr;
  }
}

/* ---- supplier-modal.css ---- */
.supplier-dialog {
  border-radius: 18px;
  max-width: min(980px, calc(100vw - 32px));
}

.supplier-dialog::backdrop {
  backdrop-filter: blur(8px);
  background: rgb(15 23 42 / 48%);
}

.supplier-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  gap: 14px;
  padding: 24px 28px 0;
}

.supplier-head { display: grid; gap: 7px; }

.supplier-head h2 {
  color: #101a33;
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1.02;
  margin: 0;
}

.supplier-head p:not(.kicker) {
  color: #5f6e8c;
  font-size: 13px;
  margin: 0;
}

.supplier-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) 250px;
}

.supplier-grid {
  display: grid;
  gap: 10px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supplier-field,
.summary-select {
  color: #26324f;
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 5px;
  position: relative;
}

.supplier-label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.supplier-mini-icon {
  border: 2px solid var(--accent);
  border-radius: 999px;
  height: 13px;
  width: 13px;
}

.card-icon,
.tag-icon,
.note-icon { border-radius: 4px; }

.phone-icon,
.pin-icon {
  border-radius: 3px;
  transform: rotate(-35deg);
}

.calendar-icon,
.mail-icon,
.shield-icon { border-radius: 3px; }

.supplier-grid input,
.supplier-grid select,
.supplier-grid textarea,
.supplier-summary select {
  border-color: #cbd5e7;
  border-radius: 8px;
  color: #1f2a44;
  font-size: 14px;
  min-height: 36px;
  padding: 7px 10px;
}

.supplier-grid textarea {
  min-height: 46px;
  padding-bottom: 20px;
  resize: vertical;
}

.wide-field { grid-column: 1 / -1; }

.supplier-notes { position: relative; }

.supplier-notes small {
  bottom: 7px;
  color: #7a869f;
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  right: 10px;
}

/* ---- supplier-modal-form.css ---- */
.supplier-summary {
  background: #fffbf5;
  border: 1px solid #ecd6b8;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgb(15 23 42 / 7%);
  display: grid;
  gap: 10px;
  padding: 14px;
}

.supplier-summary h3 {
  color: #26324f;
  font-size: 15px;
  margin: 0 0 4px;
}

.supplier-summary p,
.supplier-summary span {
  color: #64728e;
  font-size: 12px;
  margin: 0;
}

.supplier-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-chips input { display: none; }

.supplier-chips span {
  background: #eef8f7;
  border: 1px solid #c3e6e1;
  border-radius: 999px;
  color: #195c57;
  display: inline-flex;
  font-weight: 800;
  padding: 5px 9px;
}

.supplier-chips input:checked + span {
  background: #fff6e8;
  border-color: #f0bd69;
  color: #744800;
}

.supplier-summary-row strong {
  color: #101a33;
  display: block;
  font-size: 13px;
  margin-top: 2px;
}

.supplier-info-box {
  background: #ecfbf9;
  border: 1px solid #bde7e2;
  border-radius: 7px;
  color: #286963;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  padding: 10px;
}

.supplier-actions {
  border-top: 1px solid #dbe2ec;
  margin: 2px -28px 0;
  padding: 12px 28px 14px;
}

.supplier-cancel {
  border-color: var(--accent);
  border-radius: 8px;
  color: var(--accent);
  padding: 9px 18px;
}

.supplier-submit {
  align-items: center;
  background: linear-gradient(135deg, #159485, #0f766e);
  border-radius: 8px;
  box-shadow: 0 16px 30px rgb(15 118 110 / 20%);
  display: inline-flex;
  gap: 8px;
  padding: 10px 20px;
}

.supplier-submit .save-icon {
  border: 2px solid white;
  border-radius: 4px;
  height: 16px;
  width: 16px;
}

.supplier-panel .field-error {
  align-items: center;
  background: #2f3033;
  border-radius: 4px;
  box-shadow: 0 10px 22px rgb(15 23 42 / 28%);
  color: white;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  left: 0;
  margin-top: 0;
  padding: 8px 11px 8px 8px;
  position: absolute;
  top: calc(100% - 2px);
  width: fit-content;
  z-index: 4;
}

.supplier-panel .field-error::before {
  background: #f79009;
  border-radius: 3px;
  content: "!";
  display: inline-grid;
  height: 20px;
  place-items: center;
  width: 20px;
}

@media (max-width: 880px) {
  .supplier-layout,
  .supplier-grid { grid-template-columns: 1fr; }

  .supplier-panel { padding: 24px 20px 0; }

  .supplier-actions {
    margin-inline: -20px;
    padding-inline: 20px;
  }
}

/* ---- edit-buttons.css ---- */
button.edit-button,
.button-link.edit-button,
.small-button.edit-button,
.soft.edit-button,
.purchase-actions button.edit-button {
  background: #f97316;
  border-color: #f97316;
  color: white;
}

button.edit-button:hover,
.button-link.edit-button:hover,
.small-button.edit-button:hover,
.soft.edit-button:hover,
.purchase-actions button.edit-button:hover {
  background: #ea580c;
  border-color: #ea580c;
}

.small-button.danger-button {
  border-color: #c43838;
  color: white;
}

/* ---- button-effects.css ---- */
button,
.button-link,
.small-button,
.ghost-button,
.soft {
  align-items: center;
  backface-visibility: hidden;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 26%);
  gap: 7px;
  letter-spacing: 0;
  outline: 0;
  position: relative;
  text-rendering: geometricPrecision;
  transform: translateZ(0);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
  -webkit-font-smoothing: antialiased;
}

button:hover,
.button-link:hover,
.small-button:hover,
.ghost-button:hover,
.soft:hover {
  box-shadow:
    0 9px 18px rgb(15 23 42 / 12%),
    0 2px 5px rgb(15 23 42 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 32%);
  filter: saturate(1.08) contrast(1.04);
  transform: translateY(-1px) translateZ(0);
}

button:active,
.button-link:active,
.small-button:active,
.ghost-button:active,
.soft:active {
  box-shadow:
    0 2px 5px rgb(15 23 42 / 14%),
    inset 0 1px 2px rgb(15 23 42 / 15%);
  filter: saturate(1.02);
  transform: translateY(0) scale(0.985);
  transition-duration: 80ms;
}

button:focus-visible,
.button-link:focus-visible,
.small-button:focus-visible,
.ghost-button:focus-visible,
.soft:focus-visible {
  box-shadow:
    0 0 0 3px rgb(59 130 246 / 22%),
    0 9px 18px rgb(15 23 42 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 32%);
}

.account-map-table {
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    outline-color 140ms ease;
}

.account-map-table:hover,
.account-map-table:active,
.account-map-table:focus-visible {
  filter: none;
  transform: translate(-50%, -50%);
}

.account-map-table:hover {
  box-shadow:
    0 8px 16px rgb(15 23 42 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 24%);
}

.account-map-table:active {
  box-shadow:
    0 3px 8px rgb(15 23 42 / 14%),
    inset 0 1px 2px rgb(15 23 42 / 12%);
}

.account-map-table:focus-visible {
  box-shadow:
    0 0 0 3px rgb(59 130 246 / 22%),
    0 8px 16px rgb(15 23 42 / 12%);
}

button:disabled,
.button-link[aria-disabled="true"],
.small-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.15);
  opacity: 0.58;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  button,
  .button-link,
  .small-button,
  .ghost-button,
  .soft {
    transition: none;
  }

  button:hover,
  .button-link:hover,
  .small-button:hover,
  .ghost-button:hover,
  .soft:hover {
    transform: none;
  }
}

/* ---- accounting-windows.css ---- */
/* La letra de las ventanas de Contabilidad y Facturacion, como PCR (decision del usuario del 19/10/2026, pregunta N2).

   PCR mide sus ventanas para letra chica: etiquetas y textos a 11 px (.6875rem), lo que se escribe a 12 px (.75rem),
   botones a 13 px (.8125rem) y el titulo a .9rem (expense-compact-layout.css y ui-form-modal.css de PCR). Solo dentro
   de las paginas de /contabilidad (base.html marca el cuerpo con module-contabilidad): las ventanas de cuentas, turnos
   e inventario siguen con la letra del Bar. Va con !important porque las hojas de cada modulo fijan su letra en px con
   selectores mas largos, y esta regla tiene que ganarles a todas. */

body.module-contabilidad dialog.modal :is(label, legend, small, p, li, dt, dd, th, td, summary, output,
  .kicker, .modal-subtitle, .masters-label, .masters-muted, .masters-badge, .pill) {
  font-size: 11px !important;
}

body.module-contabilidad dialog.modal :is(input, select, textarea) {
  font-size: 12px !important;
}

body.module-contabilidad dialog.modal :is(button, .button-link) {
  font-size: 13px !important;
}

/* Los datos de un resumen (Pagar: proveedor, pendiente, retenciones) van con los campos, a 12 px. */
body.module-contabilidad dialog.modal .modal-summary :is(span, strong, b) {
  font-size: 12px !important;
}

body.module-contabilidad dialog.modal :is(.modal-head h2, .modal-title) {
  font-size: .9rem !important;
}

/* Y el tamano de los campos y los botones (recorrido visual del 19/10): los de PCR son los chicos de Bootstrap, de unos
   30 px de alto con 8 px de relleno; con los 44 px y los 12 px de relleno del Bar, «BENEFICIARIO» no cabia en el Tipo
   del cheque. Las casillas y los botones de radio no se tocan. */
body.module-contabilidad dialog.modal :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select) {
  height: 30px !important;
  min-height: 30px !important;
}

/* El relleno va aparte y con selectores cortos, para que la fecha y la lista de abajo le ganen. */
body.module-contabilidad dialog.modal input {
  padding: 0 8px !important;
}

/* La fecha lleva el calendario y la lista su flecha a la derecha: ahi el relleno es corto, o «dd/mm/aaaa» y «Pesos DOP»
   no caben en las columnas angostas (la fecha de vencimiento y la moneda del gasto). */
body.module-contabilidad dialog.modal input[type=date] {
  padding: 0 4px 0 6px !important;
}

body.module-contabilidad dialog.modal select {
  padding: 0 4px 0 8px !important;
}

body.module-contabilidad dialog.modal textarea {
  padding: 4px 8px !important;
}

/* «Facturas a pagar» de la transferencia y de la orden es un boton vestido de campo: mide como los campos de al lado. */
body.module-contabilidad dialog.modal .facturas-pagar__resumen-caja,
body.module-contabilidad dialog.modal button.facturas-pagar__resumen {
  height: 30px !important;
  min-height: 30px !important;
  font-size: 12px !important;
}

body.module-contabilidad dialog.modal button.facturas-pagar__resumen {
  padding: 0 8px !important;
}

body.module-contabilidad dialog.modal :is(.modal-actions button, .modal-actions .button-link) {
  min-height: 30px !important;
  padding: 0 14px !important;
}

/* ---- accounting-marina.css ---- */
/* El sistema marino de Contabilidad: la propuesta A, «cabecera marina», elegida por el usuario el 19/10/2026 para Gastos
   y extendida el mismo dia a Bancos y cuentas.

   Solo los colores del Bar (tokens.css: marino #0d2136, verde #006f78) y sus tintes. Una pagina lo toma con `marina-page`
   en su tarjeta (Gastos, y todas las de Bancos, que llevan bank-hub); una ventana, con `marina-window` en su <dialog>. Los
   campos, su orden y sus medidas son los de PCR: aqui solo cambian el fondo, las bandas y los acentos. La letra la fija
   accounting-windows.css. Lo propio de cada modulo va en su seccion: Gastos (expense-*) y Bancos (sus pestanas). */

/* --- la pagina ------------------------------------------------------------------- */

.module-card.marina-page {
  --marina-pad: clamp(18px, 1.7vw, 32px);
  --marina-gap: 18px;
  gap: var(--marina-gap);
  overflow: hidden;
}

/* La cabecera es una banda marina de borde a borde de la tarjeta. */
.marina-page > .module-card-head {
  align-items: flex-end;
  background: #0d2136;
  color: #fff;
  margin: calc(-1 * var(--marina-pad)) calc(-1 * var(--marina-pad)) 0;
  padding: 22px var(--marina-pad);
}

.marina-page > .module-card-head .kicker { color: #7fd3d9; }
.marina-page > .module-card-head h1 { color: #fff; }
.marina-page > .module-card-head :is(p, .masters-muted) { color: #c9d6e2; }

/* En la banda, lo secundario va delineado y el boton principal (Nuevo gasto, Pagar, Nueva orden) sigue verde. */
.marina-page > .module-card-head :is(.button-link.soft, .ghost-button, button.soft, button[data-expense-mode]) {
  background: transparent;
  border: 1px solid #3d5a78;
  box-shadow: none;
  color: #fff;
}

.marina-page > .module-card-head .pill {
  background: transparent;
  border: 1px solid #3d5a78;
  color: #c9d6e2;
}

/* Los indicadores, pegados a la banda: una sola tira marina dividida por filetes. */
.marina-page > .accounting-metrics {
  background: #0d2136;
  border-top: 1px solid #23405f;
  gap: 0;
  margin: calc(-1 * var(--marina-gap)) calc(-1 * var(--marina-pad)) 0;
}

.marina-page > .accounting-metrics .panel-metric {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-right: 1px solid #23405f;
  box-shadow: none;
  color: #fff;
  padding: 14px var(--marina-pad);
}

.marina-page > .accounting-metrics .panel-metric:last-child { border-right: 0; }
.marina-page > .accounting-metrics .panel-metric span { color: #a9bccd; }
.marina-page > .accounting-metrics .panel-metric strong { color: #fff; }

/* Los filtros, en una franja tenida. */
.marina-page .book-filters {
  background: #eef3f6;
  border-color: #d6e0e6;
}

/* La cabecera de cada tabla, tenida y en marino. */
.marina-page thead th {
  background: #e3ecf1;
  color: #0d2136;
}

/* --- las ventanas ----------------------------------------------------------------- */

.marina-window .modal-panel {
  background: #f5f8fa;
  /* 10 y no los 16 de modals.css: con la banda, los paneles blancos y el pie, el movimiento bancario cabe sin
     desplazarse en 768 de alto. */
  gap: 10px;
}

/* El titulo en una banda marina de borde a borde (el panel tiene 22 px de relleno: modals.css). */
.marina-window .modal-head {
  align-items: center;
  background: #0d2136;
  margin: -22px -22px 0;
  min-height: 42px;
  padding: 6px 16px;
}

.marina-window .modal-head .kicker { color: #7fd3d9; margin: 0; }
.marina-window .modal-head h2 { color: #fff; }
.marina-window .modal-head .modal-subtitle { color: #c9d6e2; }

.marina-window .modal-head .modal-close,
.marina-window .modal-head .modal-head-actions {
  margin-top: 0;
  align-self: center;
}

.marina-window .modal-head .modal-close {
  border: 1px solid #3d5a78;
  color: #fff;
}

.marina-window .modal-head .modal-close:hover,
.marina-window .modal-head .modal-close:focus-visible {
  background: #23405f;
  color: #fff;
}

/* Cada seccion de la ventana, un panel blanco. */
.marina-window .modal-body,
.marina-window .modal-summary {
  background: #fff;
  border: 1px solid #d6e0e6;
  border-radius: 8px;
  padding: 12px 14px;
}

/* Las ventanas de Bancos y de los maestros no envuelven su cuerpo en .modal-body: sus columnas (el cheque, el movimiento)
   y sus rejillas de campos van tambien en paneles blancos, como las secciones de Gastos. */
.marina-window .modal-panel > :is(.masters-form-grid, .modal-section),
.marina-window .bank-tx-layout > :is(.bank-tx-column, .bank-tx-panel) {
  background: #fff;
  border: 1px solid #d6e0e6;
  border-radius: 8px;
  padding: 8px 10px;
}

/* Con la barra de desplazamiento de la ventana, el relleno de los paneles no debe ensanchar la rejilla: cada pieza se
   encoge al ancho que hay (sin esto, la banda y el pie sobresalian 11 px). */
.marina-window .modal-panel > * {
  min-width: 0;
}

/* El titulo de cada seccion, en verde con su filete. */
.marina-window .masters-section {
  border-bottom: 2px solid #006f78;
  border-top: 0;
  color: #006f78;
  padding: 0 0 6px;
}

/* El pie en una franja tenida de borde a borde. */
.marina-window .modal-actions {
  background: #e3ecf1;
  border-top: 1px solid #cfd8df;
  margin: 0 -22px -22px;
  padding: 6px 16px;
}

.marina-window thead th {
  background: #e3ecf1;
  color: #0d2136;
}

/* --- Gastos ----------------------------------------------------------------------- */

/* Los estados del gasto, en tintes del Bar. */
.expense-identity .expense-status--posted { background: #d9f0f1; border-color: #d9f0f1; color: #005e65; }
.expense-identity .expense-status--approved { background: #fdebd0; border-color: #fdebd0; color: #8a4b00; }
.expense-identity .expense-status--draft { background: #eef1f4; border-color: #eef1f4; color: #3d4f64; }
.expense-identity .expense-status--void { background: #fff0ed; border-color: #fff0ed; color: #b42318; }

/* Las secciones de Crear gasto, paneles blancos como el cuerpo de las demas ventanas. */
.expense-window .expense-document,
.expense-window .expense-amounts,
.expense-window .expense-detail,
.expense-window .expense-summary {
  background: #fff;
  border: 1px solid #d6e0e6;
  border-radius: 8px;
  padding: 12px 14px;
}

.expense-window .expense-document {
  display: grid;
  gap: 10px;
}

.expense-window .expense-body > * {
  min-width: 0;
}

/* El total neto: el bloque verde del Bar. */
.expense-window .expense-net-total {
  background: #006f78;
  border-color: #006f78;
  color: #fff;
}

.expense-window .expense-net-total span { color: #d9f0f1; }

.expense-window .expense-summary-total {
  background: #006f78;
  border-color: #006f78;
  color: #fff;
}

.expense-window .expense-summary-total span { color: #d9f0f1; }

/* --- Bancos y cuentas -------------------------------------------------------------- */

/* Las pestanas viven en la banda marina, como fichas de carpeta: la banda baja hasta ellas y la activa se abre en blanco
   sobre su contenido. La cabecera del hub deja su relleno de abajo a las pestanas. */
.marina-page > .module-card-head:has(+ .bank-tabs) {
  padding-bottom: 14px;
}

.marina-page > .bank-tabs {
  background: #0d2136;
  border-bottom: 0;
  gap: 2px;
  margin: calc(-1 * var(--marina-gap)) calc(-1 * var(--marina-pad)) 0;
  padding: 0 var(--marina-pad);
}

.marina-page > .bank-tabs .bank-tab {
  border: 0;
  border-radius: 8px 8px 0 0;
  color: #a9bccd;
  margin-bottom: 0;
  padding: 9px 14px;
}

.marina-page > .bank-tabs .bank-tab:hover {
  background: #23405f;
  color: #fff;
}

.marina-page > .bank-tabs .bank-tab.is-active {
  background: #fff;
  color: #0d2136;
}

.marina-page > .bank-tabs .bank-tab:focus-visible {
  outline: 2px solid #7fd3d9;
  outline-offset: -2px;
}

/* --- Gastos: Crear gasto compacta, compacta como PCR para que quepa sin desplazarse ---------------------------------------------------
   El usuario, 19/10/2026: «ese modal de gastos no deberia tener scroll, todo esta muy agrandado». PCR lo mide para que
   quepa entero (expense-compact-layout.css): campos de 24 px, 4 px entre filas, el concepto de 28 px, los montos en filas
   de 18 a 22 px, la banda de 42 px y el pie de 40. Le gana a la medida general de las ventanas (accounting-windows.css). */

body.module-contabilidad dialog.expense-modal.expense-window .modal-head {
  margin: 0 -14px;
  min-height: 42px;
  padding: 4px 16px;
}

body.module-contabilidad dialog.expense-modal.expense-window .modal-panel {
  gap: 6px;
  padding: 0 14px;
}

body.module-contabilidad dialog.expense-modal.expense-window .modal-actions {
  margin: 0 -14px;
  min-height: 40px;
  padding: 5px 16px;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-body { gap: 6px; }

body.module-contabilidad dialog.expense-modal.expense-window :is(.expense-document, .expense-amounts, .expense-detail, .expense-summary) {
  gap: 4px;
  padding: 6px 8px;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-top-grid {
  column-gap: 7px;
  row-gap: 4px;
}

body.module-contabilidad dialog.expense-modal.expense-window :is(.expense-top-grid label, .expense-general) {
  gap: 2px;
}

body.module-contabilidad dialog.expense-modal.expense-window :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select) {
  height: 24px !important;
  min-height: 24px !important;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-general textarea {
  height: 28px !important;
  max-height: 28px !important;
  min-height: 28px !important;
  padding: 3px 6px !important;
  resize: none;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-rnc-status {
  margin: 0;
  min-height: 14px;
}

body.module-contabilidad dialog.expense-modal.expense-window .masters-section {
  margin: 0 0 4px;
  padding: 0 0 3px;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-amounts-grid { gap: 4px; }

body.module-contabilidad dialog.expense-modal.expense-window .expense-panel {
  gap: 3px;
  padding: 4px 6px;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-panel label { min-height: 18px; }

body.module-contabilidad dialog.expense-modal.expense-window .expense-panel :is(input:not([type=checkbox]), select) {
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 4px !important;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-panel-total { padding-top: 3px; }

body.module-contabilidad dialog.expense-modal.expense-window .expense-net-total { gap: 2px; padding: 4px; }

body.module-contabilidad dialog.expense-modal.expense-window .expense-lines-wrap { margin-top: 2px; }

body.module-contabilidad dialog.expense-modal.expense-window .expense-lines-table :is(th, td) { padding: 3px 4px; }

body.module-contabilidad dialog.expense-modal.expense-window .expense-summary-left { gap: 3px; }

body.module-contabilidad dialog.expense-modal.expense-window .expense-summary-card { padding: 4px 8px; }
/* Como PCR, en la cuarta columna «Tipo de retencion» y «Tipo de ret. ISR» van en linea con su campo; solo la columna
   estrecha (ITBIS retenido y su destino) los apila. Apilados, la ventana crecia 40 px y no cabia en un portatil. */
body.module-contabilidad dialog.expense-modal.expense-window .expense-panel:not(.expense-panel--retention) label:has(select[name^="ret_"]) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  row-gap: 0;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-panel { row-gap: 2px; }
body.module-contabilidad dialog.expense-modal.expense-window .expense-amounts .masters-section { margin-bottom: 2px; }
/* Las casillas de retencion en una linea, como PCR (`.expense-retention-check`, white-space: nowrap). */
body.module-contabilidad dialog.expense-modal.expense-window .expense-check { white-space: nowrap; }
/* Nuevo pago: su subtitulo en la banda y sus avisos, apretados como el resto de la ventana. */
body.module-contabilidad dialog.expense-modal.expense-window .modal-head .modal-subtitle {
  line-height: 1.25;
  margin: 1px 0 0;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-payment-warning {
  padding: 3px 8px;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-payment-grid { row-gap: 3px; }
/* Nuevo pago tambien cabe en una pantalla de 768 de alto (pedido del usuario, 19/10/2026). Le valen a las dos formas de
   la ventana: el subtitulo va junto al titulo en la banda, las etiquetas a renglon justo, los botones del detalle a 24 px
   y el resumen apretado. */
body.module-contabilidad dialog.expense-modal.expense-window .modal-head > div {
  align-items: baseline;
  column-gap: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

body.module-contabilidad dialog.expense-modal.expense-window .modal-head > div .kicker { grid-column: 1 / -1; }
body.module-contabilidad dialog.expense-modal.expense-window .modal-head .modal-subtitle { margin: 0; }

body.module-contabilidad dialog.expense-modal.expense-window :is(.expense-top-grid label, .expense-general, .expense-panel label, .masters-section) {
  line-height: 1.2;
}

body.module-contabilidad dialog.expense-modal.expense-window :is(.expense-detail-head button, .expense-lines-table button) {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 10px !important;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-body,
body.module-contabilidad dialog.expense-modal.expense-window .modal-panel { gap: 4px; }

body.module-contabilidad dialog.expense-modal.expense-window .expense-payment-warning { line-height: 1.2; }

body.module-contabilidad dialog.expense-modal.expense-window .expense-attachments { row-gap: 1px; }
body.module-contabilidad dialog.expense-modal.expense-window :is(.expense-attachment-hint, .expense-prepared, .expense-attachments-label) { line-height: 1.2; }
body.module-contabilidad dialog.expense-modal.expense-window .expense-summary-left { gap: 1px; }
/* Los ultimos pixeles, para que Nuevo pago quepa en 768 aun con un aviso de dos renglones. */
body.module-contabilidad dialog.expense-modal.expense-window :is(.expense-document, .expense-amounts, .expense-detail, .expense-summary) {
  padding: 5px 8px;
}

body.module-contabilidad dialog.expense-modal.expense-window .expense-payment-warning { padding: 2px 8px; }
body.module-contabilidad dialog.expense-modal.expense-window .expense-amounts .masters-section { margin-bottom: 0; }
/* Nuevo pago esconde «Comprobante recibido» (8 columnas): con el proveedor en 10, Proveedor + NCF + Tipo de gasto +
   Condiciones suman las 24 columnas y Condiciones no baja sola a otra fila (pedido del usuario, 19/10/2026). El modo lo
   marca expense-payment.js en el formulario (`data-payment-mode`). */
.expense-window .expense-form[data-payment-mode="1"] .expense-field--supplier { grid-column: span 10; }

/* ---- inventory-marina.css ---- */
/* Inventario con la identidad marina, pedida por el usuario el 21/10/2026 para el modulo completo: Catalogo de insumos,
   Inventario activo, Auditar insumo, Importar insumos y sus ventanas.

   La banda, la tarjeta y las ventanas son las del sistema comun (accounting-marina.css: marina-page en la tarjeta,
   marina-window en el <dialog>). Aqui va lo propio de Inventario: la franja de filtros en una fila, las tablas
   angostas con Acciones fija a la derecha, el estado de la existencia y las ventanas de insumo, que tienen su propia
   cabecera con pestanas. */

/* --- la pagina ------------------------------------------------------------------- */

.inventory-page .inventory-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Herramientas, en la banda, delineado como Exportar e Imprimir. */
.marina-page > .module-card-head .tools-trigger {
  background: transparent;
  border: 1px solid #3d5a78;
  box-shadow: none;
  color: #fff;
  min-width: 0;
}

.marina-page > .module-card-head .tools-trigger.open,
.marina-page > .module-card-head .tools-trigger:hover {
  background: #23405f;
}

.inventory-page .alert { margin: 0; }

/* --- los filtros: una franja tenida, en una fila mientras quepan --------------------- */

.inventory-page .inventory-filters {
  align-items: end;
  background: #eef3f6;
  border: 1px solid #d6e0e6;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 10px 12px;
}

.inventory-page .inventory-filters > label {
  color: #3d4f64;
  flex: 1 1 88px;
  font-size: 11px;
  font-weight: 700;
  gap: 3px;
  min-width: 0;
}

.inventory-page .inventory-filters > .inventory-search {
  flex: 2.6 1 180px;
  grid-column: auto;
}

/* Sin el ancho, cada lista media lo de su opcion mas larga y se montaba sobre la siguiente. */
.inventory-page .inventory-filters :is(input, select) {
  border-color: #cfd8df;
  min-width: 0;
  width: 100%;
  font-size: 13px;
  min-height: 34px;
  padding: 6px 8px;
}

.inventory-page .inventory-filter-actions {
  flex: 0 0 auto;
  gap: 6px;
}

.inventory-page .inventory-filter-actions :is(button, a) {
  font-size: 13px;
  min-height: 34px;
  padding: 6px 12px;
}

.inventory-page .inventory-filter-actions a {
  background: transparent;
  border: 1px solid #cfd8df;
  color: #3d4f64;
}

/* --- la tabla ------------------------------------------------------------------- */

.inventory-page .inventory-panel {
  border-color: #d6e0e6;
}

.inventory-page .inventory-panel > header {
  padding: 10px 16px;
}

/* Solo el de la cabecera del panel: las ventanas del catalogo se pintan dentro de el y su titulo va en blanco. */
.inventory-page .inventory-panel > header h2 {
  color: #0d2136;
  font-size: 16px;
}

.inventory-active-table table { min-width: 920px; }
.inventory-catalog-table table { min-width: 940px; }

/* 14 px y 10 px de lado: en 1366 de ancho las nueve columnas de Inventario activo caben sin desplazarse. */
.inventory-page .inventory-table :is(th, td) {
  padding: 9px 10px;
}

/* El catalogo lleva tres botones por fila: sus celdas van 2 px mas juntas para caber en 1366. */
.inventory-page .inventory-catalog-table :is(th, td) {
  padding-inline: 8px;
}

/* El nombre es lo que se busca con la vista: no se parte en tres lineas. */
.inventory-active-table td:nth-child(2),
.inventory-catalog-table td:nth-child(2) {
  min-width: 150px;
}

.inventory-page .inventory-table td {
  font-size: 14px;
}

.inventory-page .inventory-table th {
  font-size: 12px;
  white-space: nowrap;
}

.inventory-page .inventory-table .inventory-code {
  white-space: nowrap;
}

.inventory-page .inventory-table td > strong {
  color: #0d2136;
}

.inventory-page .inventory-table td small {
  color: #6b7a8a;
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}

.inventory-page .inventory-table .inventory-code strong {
  color: #3d4f64;
  font-size: 13px;
}

.inventory-table .inventory-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Acciones queda fija a la derecha: con una ventana angosta la tabla se desplaza por debajo y los botones siguen a la
   vista. El filete de la izquierda marca donde empieza. */
.inventory-page .inventory-table :is(th, td).inventory-row-actions {
  background: #fff;
  box-shadow: inset 1px 0 0 #e3ecf1;
  position: sticky;
  right: 0;
  white-space: nowrap;
  width: 1%;
  z-index: 1;
}

/* purchase-table-actions.css le da 190 px a la ultima cabecera de toda tabla; aqui mide lo que sus botones. */
.inventory-page .inventory-table th.inventory-row-actions:last-child {
  width: 1%;
}

.inventory-page .inventory-table th.inventory-row-actions {
  background: #e3ecf1;
  box-shadow: inset 1px 0 0 #cfd8df;
}

/* edit-buttons.css les da 78 px de ancho minimo; aqui miden su texto, para que Acciones no se coma la tabla. */
.inventory-page .inventory-row-actions :is(.button-link, button) {
  font-size: 13px;
  min-height: 32px;
  min-width: 0;
  padding: 6px 10px;
}
/* La existencia, con el color de su estado: los tintes del Bar que usan los estados de Gastos. */
.inventory-stock {
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-block;
  font-weight: 800;
  min-width: 68px;
  padding: 3px 10px;
  text-align: right;
}

.inventory-stock--ok { background: #d9f0f1; border-color: #b5e0e3; color: #005e65; }
.inventory-stock--low,
.inventory-stock--out { background: #fdebd0; border-color: #f4cf98; color: #8a4b00; }
.inventory-stock--negative { background: #fff0ed; border-color: #f5c2b8; color: #b42318; }

.inventory-table td small.inventory-stock-note { font-weight: 700; }
.inventory-stock--low + .inventory-stock-note,
.inventory-stock--out + .inventory-stock-note { color: #8a4b00; }
.inventory-stock--negative + .inventory-stock-note { color: #b42318; }

/* En el catalogo solo se marca el inactivo, junto a su tipo; la fila se apaga, menos sus botones. */
.inventory-kind-cell { white-space: nowrap; }
.inventory-kind-cell .pill + .pill { margin-left: 4px; }
.inventory-status--inactive { background: #eef1f4; border-color: #d6e0e6; color: #3d4f64; }

.inventory-row-inactive td:not(.inventory-row-actions) { color: #6b7a8a; }
.inventory-row-inactive td:not(.inventory-row-actions) > strong { color: #3d4f64; }

.inventory-page .inventory-pager {
  background: #f5f8fa;
  border-top-color: #d6e0e6;
  padding: 10px 16px;
}

/* --- Auditar insumo e Importar insumos ---------------------------------------------- */

/* La ficha del insumo y sus cifras, pegadas a la banda como los indicadores de Contabilidad. */
.inventory-page > .inventory-band-facts {
  background: #0d2136;
  border-top: 1px solid #23405f;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: calc(-1 * var(--marina-gap)) calc(-1 * var(--marina-pad)) 0;
}

.inventory-band-facts > div {
  align-content: start;
  border-right: 1px solid #23405f;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px var(--marina-pad);
}

.inventory-band-facts > div:last-child { border-right: 0; }

.inventory-band-facts span {
  color: #a9bccd;
  font-size: 12px;
  font-weight: 700;
}

.inventory-band-facts strong {
  color: #fff;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.inventory-band-facts small {
  color: #a9bccd;
  font-size: 11px;
  line-height: 1.3;
}

/* El nombre del insumo es lo que se lee primero: va en la banda, debajo del titulo, con su ficha al lado. */
.inventory-page .inventory-head-subject {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0 0;
}

.inventory-page .inventory-head-meta {
  color: #c9d6e2;
  font-size: 13px;
  margin: 2px 0 0;
}

.inventory-page .inventory-audit-limit {
  margin: 10px 16px 0;
}

.inventory-page > .inventory-audit-limit {
  margin: 0;
}

.inventory-page .inventory-audit-section { margin-top: 0; }

.inventory-page .inventory-import-table table { min-width: 1080px; }
.inventory-page .inventory-audit-table table { min-width: 900px; }

/* En Movimientos de inventario la cantidad lleva su signo y el color de su tipo, entre la existencia de antes y la de
   despues. */
.inventory-page .inventory-movements-table table { min-width: 1180px; }
.inventory-movements-table td:first-child { white-space: nowrap; }
.inventory-movement-qty-in { color: #005e65; font-weight: 700; }
.inventory-movement-qty-out { color: #b42318; font-weight: 700; }

/* --- las ventanas ----------------------------------------------------------------- */

/* Ajustar, Transferir y Desactivar: el cuerpo en un panel blanco (marina-window). */
.marina-window.inventory-window {
  max-width: min(560px, calc(100vw - 32px));
}

.marina-window.inventory-window .modal-body {
  gap: 10px;
}

/* Nuevo insumo y Editar insumo tienen su propia cabecera y pestanas (supply-modal.css). La cabecera pasa a la banda
   marina y las pestanas viven en ella como fichas de carpeta, igual que las de Bancos: la activa se abre en blanco sobre
   sus campos. El pie, en franja tenida. */
.supply-dialog .supply-panel {
  background: #fff;
  gap: 14px;
}

.supply-dialog .supply-modal-head {
  align-items: center;
  background: #0d2136;
  margin: -18px -18px 0;
  min-height: 42px;
  padding: 10px 16px 8px;
}

.supply-dialog .supply-head-icon,
.supply-dialog .supply-mini-icon,
.supply-dialog .save-icon {
  display: none;
}

.supply-dialog .supply-modal-head .kicker { color: #7fd3d9; margin: 0; }
.supply-dialog .supply-modal-head h2 { color: #fff; font-size: 19px; }

.supply-dialog .supply-close {
  background: transparent;
  border: 1px solid #3d5a78;
  box-shadow: none;
  color: #fff;
}

.supply-dialog .supply-close:hover,
.supply-dialog .supply-close:focus-visible {
  background: #23405f;
  color: #fff;
}

.supply-dialog .supply-tabbar {
  background: #0d2136;
  border: 0;
  border-radius: 0;
  gap: 2px;
  grid-template-columns: repeat(3, max-content);
  margin: -14px -18px 0;
  padding: 0 16px;
}

/* Sin la sombra de button-effects.css: en la banda, la ficha inactiva se veia como un boton suelto. */
.supply-dialog .supply-tab {
  border-radius: 8px 8px 0 0;
  box-shadow: none;
  color: #a9bccd;
  min-height: 0;
  padding: 8px 16px;
}

.supply-dialog .supply-tab:hover {
  background: #23405f;
  color: #fff;
}

.supply-dialog .supply-tab.active {
  background: #fff;
  box-shadow: none;
  color: #0d2136;
}

.supply-dialog .supply-tab:focus-visible {
  outline: 2px solid #7fd3d9;
  outline-offset: -2px;
}

.supply-dialog .supply-field {
  color: #3d4f64;
  gap: 4px;
}

.supply-dialog .supply-label {
  font-size: 12px;
  font-weight: 700;
}

.supply-dialog .supply-field :is(input, select) {
  border-color: #cfd8df;
  min-height: 36px;
  padding: 6px 10px;
}

.supply-dialog .supply-actions {
  background: #e3ecf1;
  border-top: 1px solid #cfd8df;
  margin: 0 -18px;
  padding: 8px 16px;
}

.supply-dialog .supply-cancel {
  background: #fff;
}

.supply-dialog .supply-submit {
  background: var(--accent);
  box-shadow: none;
}

@media (max-width: 760px) {
  /* La banda pone su contenido abajo a la derecha (flex-end); en columna eso lo corria al borde y cortaba el titulo. */
  .inventory-page > .module-card-head {
    align-items: stretch;
  }

  .inventory-page .inventory-actions {
    justify-content: flex-start;
  }

  /* En un telefono, Acciones fija tapaba casi toda la tabla: aqui se desplaza con las demas columnas. */
  .inventory-page .inventory-table :is(th, td).inventory-row-actions {
    position: static;
  }

  .inventory-page .inventory-filters > label {
    flex-basis: 40%;
  }

  .inventory-page .inventory-filters > .inventory-search {
    flex-basis: 100%;
  }

  .supply-dialog .supply-modal-head,
  .supply-dialog .supply-tabbar {
    margin-inline: -16px;
  }

  .supply-dialog .supply-actions {
    margin-inline: -16px;
  }
}

/* ---- purchases-marina.css ---- */
/* Compras con la identidad marina, pedida por el usuario el 21/10/2026 para el modulo completo: Ordenes de compra,
   Compras (la lista, el detalle y Recibir), Proveedores y sus ventanas. Es la misma de Inventario.

   La banda y la tarjeta son las del sistema comun (accounting-marina.css: marina-page en la tarjeta). Aqui va lo propio de
   Compras: los filtros fuera de la banda, las cifras del detalle pegadas a ella, las tablas con codigos enteros y Acciones
   fija a la derecha, y las ventanas, que tienen cabeceras propias (po-head, supplier-head) y por eso no usan
   marina-window: se marcan con purchases-window y aqui toman la banda y el pie en franja. La hoja impresa de la orden va
   en receipt-print.css. */

/* --- la pagina ------------------------------------------------------------------- */

.purchases-page .alert { margin: 0; }

.purchases-page > .module-card-head .accounting-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Los filtros de Compras, debajo de la banda en una franja tenida, como los de Inventario. Solo los de esta pagina:
   purchase-filters tambien la usan los informes de Bancos. */
/* Son ocho filtros: no caben en una fila. Van en dos filas parejas de cinco celdas, la busqueda en dos y los botones al
   final de la segunda. */
.purchases-page > .purchase-filters {
  align-items: end;
  background: #eef3f6;
  border-color: #d6e0e6;
  gap: 8px 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: none;
  padding: 10px 12px;
}

.purchases-page > .purchase-filters > .purchase-filter-field {
  color: #3d4f64;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
}

.purchases-page > .purchase-filters :is(input, select) {
  border-color: #cfd8df;
}


/* Las cifras del detalle, pegadas a la banda: la tira es la de Contabilidad (accounting-metrics); sus piezas aqui son
   article y no panel-metric. Las cinco caben en una fila. */
.purchases-page > .accounting-metrics {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.purchases-page > .accounting-metrics > article {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-right: 1px solid #23405f;
  box-shadow: none;
  min-height: 0;
  padding: 12px var(--marina-pad);
}

.purchases-page > .accounting-metrics > article:last-child { border-right: 0; }
.purchases-page > .accounting-metrics > article span { color: #a9bccd; }
.purchases-page > .accounting-metrics > article strong { color: #fff; }

/* --- los paneles y las tablas ------------------------------------------------------ */

.purchases-page .purchase-panel {
  border-color: #d6e0e6;
}

.purchases-page .purchase-panel > header {
  padding: 10px 16px;
}

.purchases-page .purchase-panel > header h2 {
  color: #0d2136;
  font-size: 16px;
}

.purchases-page .purchase-table table { min-width: 860px; }

.purchases-page .purchase-table :is(th, td) {
  padding: 9px 10px;
}

.purchases-page .purchase-table td { font-size: 14px; }

.purchases-page .purchase-table th {
  font-size: 12px;
  white-space: nowrap;
}

.purchases-page .purchase-table td small {
  color: #6b7a8a;
  font-size: 12px;
  margin-top: 2px;
}

/* OC-000039, CP-000038, SUP-000006 y el RNC no se parten. */
.purchases-page .purchases-code { white-space: nowrap; }

/* El proveedor se parte a lo sumo en dos lineas: con 150 px caben los nombres largos del Bar. */
.purchases-page .purchases-party { min-width: 150px; }
.purchases-page .purchases-party > strong { color: #0d2136; }
.purchases-page .purchases-party .pill { margin-left: 6px; }

.purchases-page .purchases-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* El primer producto de la orden, con su cantidad apagada; los demas se cuentan debajo. */
.purchases-page .purchases-products { max-width: 280px; }
.purchases-page .purchases-qty { color: #6b7a8a; white-space: nowrap; }

/* Acciones queda fija a la derecha, como en Inventario. */
.purchases-page .purchase-table :is(th, td).purchases-row-actions {
  background: #fff;
  box-shadow: inset 1px 0 0 #e3ecf1;
  position: sticky;
  right: 0;
  white-space: nowrap;
  width: 1%;
  z-index: 1;
}

.purchases-page .purchase-table th.purchases-row-actions,
.purchases-page .purchase-table th.purchases-row-actions:last-child {
  background: #e3ecf1;
  box-shadow: inset 1px 0 0 #cfd8df;
  width: 1%;
}

.purchases-page .purchases-row-actions :is(.button-link, button) {
  font-size: 13px;
  min-height: 32px;
  min-width: 0;
  padding: 6px 10px;
}

.purchases-page .purchases-row-actions .pill { font-size: 12px; }

.purchases-row-inactive td:not(.purchases-row-actions) { color: #6b7a8a; }
.purchases-row-inactive .purchases-party > strong { color: #3d4f64; }

/* --- las ventanas ----------------------------------------------------------------- */

/* La cabecera, en banda marina de borde a borde. El panel de las ventanas de orden y compra tiene 16 px arriba y 28 a los
   lados (purchase-order-reference.css); el de proveedor, 24 y 28. */
.purchases-window :is(.po-head, .modal-head.modal-header) {
  align-items: center;
  background: #0d2136;
  margin: -16px -28px 0;
  min-height: 42px;
  padding: 10px 28px;
}

.purchases-window .po-head { grid-template-columns: minmax(0, 1fr) 34px; }
.purchases-window .po-head-icon { display: none; }

.purchases-window .supplier-head {
  background: #0d2136;
  gap: 3px;
  margin: -24px -28px 0;
  padding: 12px 28px;
}

.purchases-window .purchase-product-head {
  background: #0d2136;
  padding: 12px 18px;
}

.purchases-window :is(.po-head, .modal-header, .supplier-head, .purchase-product-head) .kicker {
  color: #7fd3d9;
  margin: 0;
}

.purchases-window :is(.po-head, .modal-header, .supplier-head, .purchase-product-head) h2 {
  color: #fff;
  font-size: 20px;
}

.purchases-window :is(.po-head, .modal-header, .supplier-head, .purchase-product-head) p:not(.kicker),
.purchases-window .purchase-product-head span {
  color: #c9d6e2;
}

.purchases-window :is(.po-close, .purchase-product-head .modal-close, .purchase-product-head .icon-button) {
  background: transparent;
  border: 1px solid #3d5a78;
  box-shadow: none;
  color: #fff;
}

.purchases-window :is(.po-close, .purchase-product-head .modal-close, .purchase-product-head .icon-button):is(:hover, :focus-visible) {
  background: #23405f;
  color: #fff;
}

/* Nuevo insumo, en la banda del selector de productos: delineado, como lo secundario de las bandas de pagina. */
.purchases-window .purchase-product-head .ghost-button {
  background: transparent;
  border-color: #3d5a78;
  color: #fff;
}

.purchases-window .supplier-mini-icon { display: none; }

/* El pie, en franja tenida. */
.purchases-window :is(.po-actions, .supplier-actions, .purchase-product-actions) {
  background: #e3ecf1;
  border-top: 1px solid #cfd8df;
}

@media (max-width: 880px) {
  .purchases-window .supplier-head { margin-inline: -20px; padding-inline: 20px; }
}

@media (max-width: 760px) {
  .purchases-page > .module-card-head { align-items: stretch; }

  .purchases-page > .purchase-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .purchases-page .purchase-table :is(th, td).purchases-row-actions { position: static; }
}

/* ---- pending-reminders.css ---- */
/* Pendientes: su seccion en la campana y su pantalla de Administracion. Usan los componentes de siempre
   (el panel de la campana, module-card, purchase-panel, table-shell, modal); aqui solo lo que ninguno trae. */

/* En la campana: arriba de las notificaciones, en el mismo panel. Cada seccion lleva su titulo; la segunda, su raya. */
.notification-panel h2:not(:first-child) {
  border-top: 1px solid #d9e1e7;
  padding-top: 12px;
}

.pending-item {
  border: 1px solid #d9e1e7;
  border-left: 4px solid #006f78;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.pending-item > div {
  display: grid;
  gap: 2px;
}

.pending-item strong {
  color: #0d2136;
  font-size: 14px;
  font-weight: 800;
}

.pending-item span {
  color: var(--muted);
  font-size: 12px;
}

.pending-all-link {
  color: #006f78;
  font-size: 13px;
  font-weight: 800;
  justify-self: start;
  text-decoration: none;
}

.pending-all-link:hover {
  text-decoration: underline;
}

/* La pantalla. */
.pending-card .pending-review-form {
  margin: 0;
}

.pending-card .pending-review-form button {
  font-size: 14px;
  line-height: 16px;
  white-space: nowrap;
}

.pending-table table { min-width: 880px; }

/* El detalle y la nota llevan los saltos de linea que se escribieron. */
.pending-detail {
  white-space: pre-line;
}

.pending-reopened {
  color: #8a5a00;
  font-weight: 700;
}

/* ---- notifications.css ---- */
.notification-menu {
  position: relative;
}

.notification-button {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd6de;
  border-radius: 999px;
  box-shadow:
    0 9px 18px rgb(15 35 54 / 7%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
  color: #006f78;
  cursor: pointer;
  display: grid;
  height: 48px;
  list-style: none;
  place-items: center;
  position: relative;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
  width: 48px;
}

.notification-button::-webkit-details-marker {
  display: none;
}

.notification-button:hover,
.notification-menu[open] .notification-button {
  background: #f7fbfc;
  border-color: #94cdd4;
  box-shadow:
    0 12px 26px rgb(15 35 54 / 11%),
    inset 0 1px 0 rgb(255 255 255 / 82%);
  color: #005e65;
}

.notification-button:focus-visible {
  outline: 3px solid rgb(0 111 120 / 22%);
  outline-offset: 2px;
}

.notification-button:active {
  transform: translateY(1px);
}

.notification-button b {
  background: #ef2b2d;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  min-width: 21px;
  padding: 3px 5px;
  position: absolute;
  right: -4px;
  text-align: center;
  top: -7px;
}

.bell-icon {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 22px;
}

.bell-icon .bell-fill {
  fill: transparent;
}

.notification-panel {
  background: #fff;
  border: 1px solid #cbd6de;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgb(15 35 54 / 18%);
  display: grid;
  gap: 10px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 14px;
  position: absolute;
  right: 0;
  top: 56px;
  width: 330px;
  z-index: 20;
}

.notification-panel h2 {
  color: #0d2136;
  font-size: 16px;
  margin: 0;
}

.notification-item {
  border: 1px solid #d9e1e7;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.notification-item.is-read {
  background: #f8fafb;
  border-left-color: #94a3b8;
}

.notification-link,
.notification-item strong {
  color: #0d2136;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.notification-link:hover {
  color: #006f78;
  text-decoration: underline;
}

.notification-item span,
.notification-empty {
  color: var(--muted);
  font-size: 13px;
}

.notification-item button {
  min-height: 30px;
  padding: 6px 10px;
}

.notification-state {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

/* ---- bottles.css ---- */
.bottles-card {
  display: grid;
  gap: 22px;
}
.drinks-card-head {
  display: grid;
  grid-template-columns: minmax(240px, auto) minmax(320px, 520px) auto;
}
.drink-title-block {
  min-width: 0;
}
.drink-filter {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(220px, 1fr) 150px;
  justify-self: center;
  max-width: 520px;
  width: 100%;
}
.drink-filter input,
.drink-filter select {
  background: #fff;
  border: 1px solid #cfd8d4;
  border-radius: 8px;
  color: #18211f;
  font-size: 13px;
  font-weight: 650;
  min-height: 38px;
  padding: 8px 10px;
  width: 100%;
}
.drink-filter input:focus,
.drink-filter select:focus {
  border-color: #0f8f86;
  box-shadow: 0 0 0 3px rgb(15 143 134 / 12%);
  outline: 0;
}
.bottle-actions {
  display: flex;
  gap: 10px;
  justify-self: end;
}
.bottle-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 255px));
  justify-content: start;
}
.bottle-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 136px;
  padding: 12px 14px;
}
.bottle-card.empty {
  border-left-color: #c83232;
  opacity: .78;
}
.bottle-card h2 {
  font-size: 15px;
  line-height: 1.25;
  margin: 2px 0;
}
.bottle-card small,
.bottle-card span {
  color: var(--muted);
  font-size: 12px;
}
.bottle-card strong {
  font-size: 23px;
  line-height: 1.05;
}
.bottle-meter {
  background: #edf2f0;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.bottle-meter span {
  background: linear-gradient(90deg, #16a36b, #16c8d4);
  display: block;
  height: 100%;
}
.bottle-card footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.recipe-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recipe-box {
  border: 1px dashed #cbd7d2;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}
.recipe-box header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.recipe-box header > div {
  display: grid;
  gap: 2px;
}
.recipe-rows {
  display: grid;
  gap: 8px;
}
.recipe-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 110px 38px;
}
.bottle-table button {
  min-height: 34px;
  padding: 7px 12px;
}

.bottle-table table {
  table-layout: fixed;
}

.bottle-table th,
.bottle-table td {
  text-align: center;
  vertical-align: middle;
}

.bottle-table thead th {
  background: #d9dedb;
  color: #000;
}

.bottle-table th:last-child {
  text-align: center;
}

.bottle-table th:nth-child(1),
.bottle-table td:nth-child(1) {
  width: 130px;
}

.bottle-table th:nth-child(2),
.bottle-table td:nth-child(2) {
  width: 18%;
}

.bottle-table th:nth-child(3),
.bottle-table td:nth-child(3) {
  width: 130px;
}

.bottle-table th:nth-child(4),
.bottle-table td:nth-child(4) {
  width: 26%;
}

.bottle-table th:nth-child(5),
.bottle-table td:nth-child(5) {
  width: 25%;
}

.bottle-table th:nth-child(6),
.bottle-table td:nth-child(6) {
  width: 135px;
}

.bottle-table th:nth-child(7),
.bottle-table td:nth-child(7) {
  width: 170px;
}

.bottle-table .muted-code {
  display: table-cell;
  line-height: 1.35;
}

.bottle-table .muted-code small {
  display: block;
  margin-top: 4px;
}

.drink-name-cell {
  font-size: 15px;
  line-height: 1.35;
}

.drink-price-cell {
  white-space: nowrap;
}

.drink-recipe-cell {
  padding-inline: 14px;
}

.drink-status-cell .status-badge {
  white-space: nowrap;
}

.drink-actions-cell {
  padding-inline: 12px;
}

.ingredient-availability-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ingredient-stock-line {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.ingredient-stock-line.ok {
  color: #0a6b3e;
}

.ingredient-stock-line.missing {
  color: #b42318;
}

#new-drink,
.drink-edit-modal {
  max-width: min(540px, calc(100vw - 32px));
  overflow-x: hidden;
  width: min(540px, calc(100vw - 32px));
}

#new-drink .drink-form,
.drink-edit-modal .drink-form {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(248 251 250 / 96%)),
    var(--panel);
  gap: 10px;
  min-width: 0;
  overflow-x: hidden;
  padding: 18px 20px;
  width: 100%;
}

#new-drink .modal-head,
.drink-edit-modal .modal-head {
  margin-bottom: 2px;
}

#new-drink .modal-head h2,
.drink-edit-modal .modal-head h2 {
  font-size: 23px;
}

.drink-tabbar {
  background: #edf5f2;
  border: 1px solid #d2e1dc;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 5px;
}

.drink-tab {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #435450;
  font-size: 13px;
  font-weight: 800;
  min-height: 36px;
  padding: 7px 10px;
}

.drink-tab.active {
  background: #0f766e;
  box-shadow: 0 5px 14px rgb(15 118 110 / 18%);
  color: #fff;
}

.drink-tab-panel {
  display: grid;
  gap: 10px;
}

.drink-tab-panel[hidden] {
  display: none;
}

.drink-price-grid {
  background: linear-gradient(180deg, #fbfdfc, #f4f8f6);
  border: 1px solid #d5ded9;
  border-radius: 10px;
  padding: 12px;
}

#new-drink label,
.drink-edit-modal label {
  gap: 5px;
}

#new-drink input,
#new-drink select,
.drink-edit-modal input,
.drink-edit-modal select {
  border-color: #cfd7d4;
  border-radius: 8px;
  font-weight: 400;
  min-height: 40px;
  min-width: 0;
  padding: 8px 10px;
  width: 100%;
}

#new-drink input:focus,
#new-drink select:focus,
.drink-edit-modal input:focus,
.drink-edit-modal select:focus {
  border-color: #0f8f86;
  box-shadow: 0 0 0 3px rgb(15 143 134 / 12%);
  outline: 0;
}

#new-drink .recipe-box,
.drink-edit-modal .recipe-box {
  background: linear-gradient(180deg, #fbfdfc, #f4f8f6);
  border: 1px solid #d5ded9;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
  gap: 8px;
  margin-top: 2px;
  padding: 11px;
}

#new-drink .recipe-box header h3,
.drink-edit-modal .recipe-box header h3 {
  font-size: 16px;
  margin: 0;
}

#new-drink .recipe-box header span,
.drink-edit-modal .recipe-box header span {
  color: var(--muted);
  font-size: 13px;
}

.recipe-limit-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #9a3412;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  padding: 9px 10px;
}

#new-drink .recipe-row,
.drink-edit-modal .recipe-row {
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 92px 36px;
}

#new-drink .recipe-add-button,
#new-drink .recipe-remove-button,
.drink-edit-modal .recipe-add-button,
.drink-edit-modal .recipe-remove-button {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: 18px;
  font-weight: 800;
  justify-content: center;
  min-height: 36px;
  min-width: 36px;
  padding: 0;
}

#new-drink .recipe-add-button,
.drink-edit-modal .recipe-add-button {
  background: #e9f5f2;
  color: #0b6f68;
}

#new-drink .recipe-remove-button,
.drink-edit-modal .recipe-remove-button {
  background: #fff1f1;
  color: #a23131;
}

#new-drink .recipe-remove-button:disabled,
.drink-edit-modal .recipe-add-button:disabled,
#new-drink .recipe-add-button:disabled,
.drink-edit-modal .recipe-remove-button:disabled,
.drink-edit-modal button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: .45;
}

#new-drink .modal-actions,
.drink-edit-modal .modal-actions {
  margin-top: 2px;
}

#new-drink .modal-actions button,
.drink-edit-modal .modal-actions button {
  min-height: 38px;
  padding: 9px 14px;
}

.drink-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.drinks-catalog-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 24px;
  padding: 0;
}

.drinks-catalog-card .drinks-card-head {
  align-items: end;
  display: grid;
  gap: 16px;
  /* Sin minimos que sumen mas que la pantalla: en 1408 px la cabecera se salia. */
  grid-template-columns: minmax(200px, 1fr) minmax(0, 720px) auto;
}

.drinks-catalog-card .drink-title-block h1 {
  font-size: clamp(30px, 2.1vw, 42px);
  letter-spacing: 0;
  line-height: 1.05;
}

.drinks-catalog-card .drink-filter {
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 170px;
  justify-self: stretch;
  max-width: none;
}

.drink-search-field {
  align-items: center;
  background: #fff;
  border: 1px solid #cfd6dd;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 6%);
  display: flex;
  min-height: 52px;
  position: relative;
  width: 100%;
}

.drinks-catalog-card .drink-filter .drink-search-field input {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #111827;
  font-size: 16px;
  font-weight: 500;
  min-height: 50px;
  padding: 10px 44px 10px 48px;
}

.drinks-catalog-card .drink-filter .drink-search-field input:focus {
  box-shadow: none;
}

.drink-search-field:focus-within,
.drinks-catalog-card .drink-filter select:focus {
  border-color: #0f8f86;
  box-shadow: 0 0 0 3px rgb(15 143 134 / 13%), 0 1px 3px rgb(15 23 42 / 6%);
}

.drink-search-icon,
.drink-filter-icon {
  color: #697386;
  display: inline-flex;
  height: 22px;
  pointer-events: none;
  position: absolute;
  width: 22px;
}

.drink-search-icon {
  left: 16px;
}

.drink-filter-icon {
  right: 14px;
}

.drink-search-icon svg,
.drink-filter-icon svg {
  fill: none;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 100%;
}

.drinks-catalog-card .drink-filter select {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 6%);
  color: #111827;
  font-size: 16px;
  font-weight: 650;
  min-height: 52px;
  padding: 10px 16px;
}

.drinks-catalog-card .bottle-actions {
  align-items: center;
  gap: 12px;
}

.drinks-catalog-card .drink-open-bottles,
.drinks-catalog-card .drink-new-button {
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgb(15 23 42 / 8%);
  font-size: 16px;
  font-weight: 800;
  min-height: 52px;
  padding: 0 20px;
  text-decoration: none;
  white-space: nowrap;
}

.drinks-catalog-card .drink-open-bottles {
  background: #f1f5f4;
  border: 1px solid #cfd6dd;
  color: #202733;
}

.drinks-catalog-card .drink-new-button {
  background: linear-gradient(180deg, #177d75, #0d665f);
  border: 1px solid #0d665f;
  color: #fff;
  gap: 10px;
}

.drinks-catalog-card .drink-new-button span {
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  margin-top: -2px;
}

.drinks-table-shell {
  background: #fff;
  border: 1px solid #d9dee4;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 9%);
  overflow: auto;
}

.drinks-table-shell table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1280px;
  table-layout: fixed;
}

.drinks-table-shell th,
.drinks-table-shell td {
  border-bottom: 1px solid #e3e7ea;
  text-align: center;
  vertical-align: middle;
}

.drinks-table-shell thead th {
  background: #dfe5e2;
  color: #000;
  font-size: 15px;
  font-weight: 850;
  padding: 22px 22px;
}

.drinks-table-shell tbody td {
  color: #202733;
  font-size: 14px;
  height: auto;
  padding: 14px 16px;
}

.drinks-table-shell tbody tr:last-child td {
  border-bottom: 0;
}

.drinks-table-shell th:nth-child(1),
.drinks-table-shell td:nth-child(1) {
  width: 8%;
}

.drinks-table-shell th:nth-child(2),
.drinks-table-shell td:nth-child(2) {
  width: 14%;
}

.drinks-table-shell th:nth-child(3),
.drinks-table-shell td:nth-child(3) {
  width: 8%;
}

.drinks-table-shell th:nth-child(4),
.drinks-table-shell td:nth-child(4) {
  width: 18%;
}

.drinks-table-shell th:nth-child(5),
.drinks-table-shell td:nth-child(5) {
  width: 18%;
}

.drinks-table-shell th:nth-child(6),
.drinks-table-shell td:nth-child(6) {
  width: 10%;
}

.drinks-table-shell th:nth-child(7),
.drinks-table-shell td:nth-child(7) {
  width: 24%;
}

.drinks-table-shell .muted-code {
  color: #2f3b47;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.drinks-table-shell .muted-code small {
  color: #5e6a75;
  font-size: 12px;
}

.drinks-table-shell .drink-name-cell,
.drinks-table-shell .drink-price-cell {
  font-size: 15px;
  font-weight: 500;
}

.drinks-table-shell td:nth-child(1),
.drinks-table-shell td:nth-child(2) {
  padding-inline: 12px;
}

.drinks-table-shell .drink-recipe-cell {
  padding-inline: 22px;
}

.drinks-table-shell .drink-bullet-list {
  display: grid;
  gap: 4px;
  justify-content: center;
  list-style: disc;
  margin: 0;
  padding-left: 1.2rem;
  text-align: left;
}

.drinks-table-shell .drink-bullet-list li {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.drinks-table-shell .recipe-list,
.drinks-table-shell .ingredient-availability-list {
  align-items: start;
  flex-direction: initial;
}

.drinks-table-shell .ingredient-stock-line {
  display: list-item;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
}

.drinks-table-shell .ingredient-stock-line.ok,
.drinks-table-shell .ingredient-stock-line.ok::marker {
  color: #006b45;
}

.drinks-table-shell .ingredient-stock-line.missing,
.drinks-table-shell .ingredient-stock-line.missing::marker {
  color: #b42318;
}

.drinks-table-shell .drink-status-cell .status-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 750;
  justify-content: center;
  min-width: 98px;
  padding: 6px 12px;
}

.drinks-table-shell .status-paid {
  background: #ddf7e9;
  border: 1px solid #9bd8b4;
  color: #3f7d55;
}

.drinks-table-shell .status-cancelled {
  background: #fee2e2;
  border: 1px solid #f2a6a6;
  color: #991b1b;
}

.drinks-table-shell .drink-actions-cell {
  padding-inline: 12px;
}

.drinks-table-shell .drink-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: center;
}

.drinks-table-shell .drink-actions form {
  display: block;
  margin: 0;
  width: auto;
}

.drinks-table-shell .drink-actions > .button-link,
.drinks-table-shell .drink-actions > button,
.drinks-table-shell .drink-actions > form {
  margin-right: 0;
}

.drinks-table-shell .drink-action-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #cfd6dd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgb(15 23 42 / 8%);
  color: #2b313a;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  height: 32px;
  justify-content: center;
  min-width: 78px;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;
  width: auto;
}

.drinks-table-shell .action-toggle {
  min-width: 108px;
}

.drinks-table-shell .drink-action-btn:hover {
  background: #f8faf9;
}

.drinks-table-shell .drink-action-btn svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 18px;
}

.drinks-table-shell .drink-action-switch {
  align-items: center;
  background: #c73a48;
  border-radius: 999px;
  display: inline-flex;
  height: 18px;
  padding: 2px;
  width: 34px;
}

.drinks-table-shell .drink-action-switch span {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgb(15 23 42 / 25%);
  display: block;
  height: 14px;
  margin-left: auto;
  width: 14px;
}

.drinks-table-shell .action-toggle-off .drink-action-switch {
  background: #15956d;
}

.drinks-table-shell .action-toggle-off .drink-action-switch span {
  margin-left: 0;
}

@media (max-width: 1200px) {
  .drinks-catalog-card .drinks-card-head {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .drinks-catalog-card .drink-filter,
  .drinks-catalog-card .bottle-actions {
    justify-self: stretch;
  }

  .drinks-catalog-card .bottle-actions {
    justify-content: flex-start;
  }
}

#open-bottle {
  max-width: min(520px, calc(100vw - 32px));
  overflow-x: hidden;
  width: min(520px, calc(100vw - 32px));
}

#open-bottle .modal-panel {
  gap: 14px;
  min-width: 0;
  overflow-x: hidden;
  padding: 20px 22px;
  width: 100%;
}

#open-bottle .modal-head h2 {
  font-size: 22px;
}

#open-bottle select {
  max-width: 100%;
  min-height: 44px;
  min-width: 0;
  padding: 10px 12px;
  width: 100%;
}

#open-bottle .modal-actions {
  margin-top: 2px;
  min-width: 0;
}

#open-bottle .modal-actions button {
  min-height: 38px;
  padding: 9px 14px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .drinks-card-head,
  .drink-filter {
    grid-template-columns: 1fr;
  }

  .drink-filter,
  .bottle-actions {
    justify-self: stretch;
  }

  #new-drink .recipe-row,
  .drink-edit-modal .recipe-row {
    grid-template-columns: 1fr;
  }
}