* { box-sizing: border-box; }

body.mispedidos-login-page,
body.mispedidos-page {
  margin: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, #f4fbf7 0%, #e6f3ec 100%);
}

.impersonation-banner {
  max-width: 1160px;
  margin: 12px auto 0;
  padding: 10px 12px;
  border: 1px solid #f0c97a;
  background: linear-gradient(160deg, #fff8e8 0%, #ffefc9 100%);
  color: #6c4a00;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.impersonation-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.84rem;
}

.impersonation-banner-text strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.impersonation-banner-form button {
  border: 1px solid #c08a2a;
  border-radius: 9px;
  background: #cc962f;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 7px 10px;
  cursor: pointer;
}

.mispedidos-login-card {
  width: min(440px, calc(100% - 22px));
  margin: 48px auto;
  background: #fff;
  border: 1px solid #d7e8de;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(10, 61, 40, 0.15);
  padding: 18px;
}

.mispedidos-login-card h1 {
  margin: 0 0 6px;
  color: var(--brand-deep);
}

.mispedidos-login-card p {
  margin: 0 0 12px;
  color: var(--muted);
}

.mispedidos-login-card form {
  display: grid;
  gap: 8px;
}

.mispedidos-login-card label {
  font-size: 0.9rem;
  color: #3d6a58;
  font-weight: 600;
}

.mispedidos-login-card input {
  border: 1px solid #c1dbcb;
  border-radius: 10px;
  padding: 10px;
  outline: none;
}

.mispedidos-login-card button {
  border: 0;
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.mispedidos-error {
  min-height: 20px;
  margin-top: 8px;
  color: var(--danger);
  font-size: 0.9rem;
}

.mispedidos-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 10px auto 0;
  padding: 8px 12px;
  border: 1px solid #c8dfd1;
  border-radius: 10px;
  background: #f4fbf7;
  text-decoration: none;
  color: #0b704b;
  font-weight: 700;
}

.mispedidos-back svg {
  width: 18px;
  height: 18px;
}

.mispedidos-header {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff;
  padding: 14px 14px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}


.mispedidos-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mispedidos-header h1 {
  margin: 0;
  font-size: clamp(1.12rem, 4.6vw, 1.5rem);
  letter-spacing: 0.02em;
}

.mispedidos-header p {
  margin: 4px 0 0;
  opacity: 0.95;
  font-size: 0.92rem;
}

.mispedidos-logout {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  font-weight: 700;
}

.mispedidos-quote {
  color: #0f724c;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  padding: 8px 12px;
  background: #ffffff;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(6, 53, 35, 0.2);
}

.mispedidos-quote:hover,
.mispedidos-quote:focus-visible {
  background: #f2fbf7;
  color: #0c6644;
}

.mispedidos-acum-btn {
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  padding: 8px 12px;
  background: #f8d368;
  color: #4a3600;
  font-weight: 900;
  cursor: pointer;
}

.mispedidos-acum-btn.is-active {
  background: #efc24a;
}

.mispedidos-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.pedidos-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.pedidos-tab {
  border: 1px solid #c8ded1;
  border-radius: 12px;
  background: #f7f7f7;
  color: #2f2f2f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pedidos-tab-label {
  font-size: 0.86rem;
  white-space: nowrap;
}

.pedidos-tab-count {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
  color: #2f2f2f;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.pedidos-tab[data-tab-target="pendientes"] {
  background: #fff7da;
  border-color: #efd586;
  color: #7f5c00;
}

.pedidos-tab[data-tab-target="pendientes"] .pedidos-tab-count {
  background: #f5df99;
  color: #6a4b00;
}

.pedidos-tab[data-tab-target="pendientes"].is-active {
  background: linear-gradient(90deg, #f2c94c, #d9ad25);
  border-color: #c99d1d;
  color: #4d3500;
}

.pedidos-tab[data-tab-target="pendientes"].is-active .pedidos-tab-count {
  background: rgba(77, 53, 0, 0.15);
  color: #4d3500;
}

.pedidos-tab[data-tab-target="pagados"] {
  background: #e7f1ff;
  border-color: #b9d0f4;
  color: #1f4f9a;
}

.pedidos-tab[data-tab-target="pagados"] .pedidos-tab-count {
  background: #cfe0fb;
  color: #1f4f9a;
}

.pedidos-tab[data-tab-target="pagados"].is-active {
  background: linear-gradient(90deg, #2f6fcf, #255cb0);
  border-color: #214f98;
  color: #ffffff;
}

.pedidos-tab[data-tab-target="pagados"].is-active .pedidos-tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.pedidos-tab[data-tab-target="atendidos"] {
  background: #e7f7ee;
  border-color: #aad7be;
  color: #155b35;
}

.pedidos-tab[data-tab-target="atendidos"] .pedidos-tab-count {
  background: #bfe8cf;
  color: #155b35;
}

.pedidos-tab[data-tab-target="atendidos"].is-active {
  background: linear-gradient(90deg, #2fa968, #1f8a53);
  border-color: #1b7c4a;
  color: #ffffff;
}

.pedidos-tab[data-tab-target="atendidos"].is-active .pedidos-tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.pedidos-tab[data-tab-target="cancelados"] {
  background: #fde9e9;
  border-color: #efb3b3;
  color: #8f1f1f;
}

.pedidos-tab[data-tab-target="cancelados"] .pedidos-tab-count {
  background: #f6c5c5;
  color: #8f1f1f;
}

.pedidos-tab[data-tab-target="cancelados"].is-active {
  background: linear-gradient(90deg, #d9534f, #bb3d3a);
  border-color: #a63330;
  color: #ffffff;
}

.pedidos-tab[data-tab-target="cancelados"].is-active .pedidos-tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.pedidos-block {
  background: #fff;
  border: 1px solid #d9e9df;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(11, 59, 40, 0.08);
  padding: 10px;
}

.pedidos-block h2 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: #1e5c42;
}

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

.pedido-card {
  border: 1px solid #dbe9e1;
  border-radius: 12px;
  padding: 10px;
  background: #fbfefd;
}

.pedido-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.pedido-id {
  font-weight: 800;
  color: #1d5f45;
}

.pedido-date {
  font-size: 0.83rem;
  color: #597465;
}

.pedido-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pedido-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pedido-mode {
  font-size: 0.75rem;
  font-weight: 900;
  border-radius: 999px;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.modo-publico {
  background: #efefef;
  color: #333333;
}

.modo-afiliado {
  background: #e4ecff;
  color: #2f4f96;
}

.modo-d5,
.modo-d8,
.modo-d15 {
  background: #fff1d6;
  color: #7b4d00;
}

.estado-pendiente_pago,
.estado-pagado_parcial,
.estado-pagado_total {
  background: #eaf6ef;
  color: #1a6f4a;
}

.estado-atendido {
  background: #e3efff;
  color: #245390;
}

.estado-cancelado {
  background: #fdeaea;
  color: #9a2424;
}

.pedido-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.pedido-liquidacion-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.pedido-liquidacion-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pedido-liquidacion-badge,
.pedido-item-liquidacion-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.pedido-item-liquidacion-badge {
  margin-left: 6px;
}

.pedido-liquidacion-detail {
  color: #466b5a;
  font-size: 0.8rem;
}

.pedido-liquidacion-link {
  text-decoration: none;
  border: 1px solid #cfe2d7;
  border-radius: 9px;
  padding: 5px 9px;
  background: #f3fbf7;
  color: #145f41;
  font-size: 0.8rem;
  font-weight: 800;
}

.liq-total {
  background: #def5e8;
  color: #136542;
}

.liq-parcial {
  background: #fff2d9;
  color: #7c4e00;
}

.liq-pendiente {
  background: #eef3f7;
  color: #3f5f73;
}

.liq-sin-acumulado {
  background: #f2f3f5;
  color: #5a6170;
}

.pedido-meta {
  font-size: 0.85rem;
  color: #3b6250;
}

.pedido-meta strong {
  color: #1c3f31;
}

.pedido-empty {
  border: 1px dashed #cadfd3;
  border-radius: 12px;
  padding: 12px;
  color: #5c7868;
  text-align: center;
  font-size: 0.92rem;
  background: #f8fcfa;
}

.pedido-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pedido-actions-compact {
  justify-content: flex-start;
}

.pedido-actions-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pedido-action-btn,
.pedido-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #cfe2d7;
  border-radius: 9px;
  padding: 7px 10px;
  background: #f3fbf7;
  color: #145f41;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.pedido-icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #cfe2d7;
  border-radius: 9px;
  background: #f3fbf7;
  color: #145f41;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.94rem;
}

.pedido-icon-btn.is-active {
  background: linear-gradient(90deg, #0f724c, #0c5b3b);
  border-color: #0c6744;
  color: #fff;
}

.action-icon {
  font-size: 0.9rem;
  line-height: 1;
}

.pedido-action-btn.is-active {
  background: linear-gradient(90deg, #0f724c, #0c5b3b);
  border-color: #0c6744;
  color: #fff;
}

.pedido-action-btn.is-active .action-icon {
  color: #fff;
}

.pedido-cancel-icon {
  margin-left: auto;
  min-width: 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid #efc3c3;
  background: #fff5f5;
  color: #9d2a2a;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.pedido-cancel-icon i {
  font-size: 0.95rem;
}

.pedido-cancel-icon:hover,
.pedido-cancel-icon:focus-visible {
  background: #ffe9e9;
}

.pedido-actions .pedido-cancel-btn {
  border-color: #efc3c3;
  background: #fff5f5;
  color: #9d2a2a;
}

@media (max-width: 520px) {
  .pedido-actions {
    align-items: flex-start;
  }

  .pedido-actions-left {
    width: 100%;
  }

  .pedido-cancel-icon {
    margin-left: 0;
  }
}

.pedido-detail {
  margin-top: 8px;
  border: 1px dashed #cfe0d6;
  border-radius: 10px;
  padding: 8px;
  background: #f9fcfb;
}

.pedido-inline-products {
  margin-top: 8px;
  border: 1px dashed #d4e5dc;
  border-radius: 10px;
  padding: 8px;
  background: #fbfefd;
}

.pedido-detail-list.is-inline .pedido-detail-row:last-child {
  border-bottom: 0;
}

.pedido-detail-row {
  padding: 5px 0;
  border-bottom: 1px solid #e8f1ec;
}

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

.pedido-detail-name {
  font-size: 0.88rem;
  color: #224e3d;
  font-weight: 700;
}

.pedido-detail-meta {
  font-size: 0.83rem;
  color: #486757;
}

.pedido-detail-total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e2ece7;
  font-size: 0.9rem;
  color: #255845;
}

.pedido-detail-empty {
  font-size: 0.86rem;
  color: #607b6d;
}

.pedido-log-block {
  margin-top: 8px;
  border-top: 1px solid #e2ece7;
  padding-top: 8px;
}

.pedido-log-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #1f5942;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.pedido-log-list {
  display: grid;
  gap: 6px;
}

.pedido-log-row {
  border: 1px solid #deebe4;
  border-radius: 9px;
  padding: 7px;
  background: #ffffff;
}

.pedido-log-note {
  border-color: #cfe2f5;
  background: #f8fbff;
}

.pedido-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: #486757;
  margin-bottom: 3px;
}

.pedido-log-head strong {
  color: #1f563f;
}

.pedido-log-body {
  font-size: 0.84rem;
  color: #345848;
}

.pedido-note-block {
  margin-top: 8px;
  border-top: 1px dashed #d6e6dd;
  padding-top: 8px;
  display: grid;
  gap: 6px;
}

.pedido-note-block label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #22563f;
}

.pedido-note-input {
  width: 100%;
  border: 1px solid #c9ddd2;
  border-radius: 8px;
  padding: 8px;
  resize: vertical;
  min-height: 58px;
  font: inherit;
  font-size: 0.86rem;
}

.pedido-note-btn {
  width: fit-content;
  border: 1px solid #bad5c8;
  border-radius: 8px;
  padding: 6px 10px;
  background: #eef8f2;
  color: #165f41;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.pedido-note-btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

.pedido-pay-block {
  display: grid;
  gap: 8px;
}

.pedido-pay-head {
  font-size: 0.84rem;
  font-weight: 800;
  color: #1f5942;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pedido-pay-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: #335a49;
}

.pedido-pay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pedido-pay-grid label {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  color: #245a43;
  font-weight: 700;
}

.pedido-pay-input {
  width: 100%;
  border: 1px solid #c9ddd2;
  border-radius: 8px;
  padding: 8px;
  font: inherit;
  font-size: 0.86rem;
}

.pedido-pay-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pedido-pay-btn {
  width: fit-content;
  border: 1px solid #bad5c8;
  border-radius: 8px;
  padding: 7px 11px;
  background: #eef8f2;
  color: #165f41;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.pedido-pay-btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

.pedido-pay-help {
  font-size: 0.79rem;
  color: #607b6d;
}

.acum-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.acum-refresh-btn {
  border: 1px solid #cfe2d7;
  border-radius: 8px;
  padding: 6px 10px;
  background: #f3fbf7;
  color: #145f41;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.acum-list-wrap {
  margin-top: 8px;
}

.acum-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.acum-table th,
.acum-table td {
  border-bottom: 1px solid #e1ece6;
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
}

.acum-table th {
  font-size: 0.78rem;
  color: #426654;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.acum-table th:nth-child(2),
.acum-table td:nth-child(2) {
  text-align: center;
}

.acum-table th:nth-child(4),
.acum-table td:nth-child(4),
.acum-table th:nth-child(5),
.acum-table td:nth-child(5) {
  text-align: right;
}

.acum-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 800;
}

.acum-badge.pendiente {
  background: #fff3d8;
  color: #7b4d00;
}

.acum-badge.liquidado {
  background: #e6f6ec;
  color: #1f7647;
}

body.mispedidos-page.mispedidos-acum-open .pedidos-tabs,
body.mispedidos-page.mispedidos-acum-open .pedidos-block[data-tab-panel] {
  display: none;
}

@media (min-width: 900px) {
  .mispedidos-main {
    padding: 14px;
  }
}

@media (max-width: 680px) {
  .pedidos-tabs {
    grid-template-columns: 1fr;
  }

  .pedidos-tab {
    padding: 10px;
  }

  .pedido-pay-grid {
    grid-template-columns: 1fr;
  }

  .acum-table {
    font-size: 0.8rem;
  }
}