/* ══════════════════════════════════════════════════
   Calculator Modal & Description Popover Styles
   ══════════════════════════════════════════════════ */

/* ── Description cell with expand popover ── */
.desc-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.desc-cell input {
  flex: 1;
  min-width: 0;
}
.desc-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--esp-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--esp-text-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 180ms ease;
  font-size: 0.72rem;
}
.desc-expand-btn:hover {
  background: rgba(255, 213, 0, 0.1);
  border-color: rgba(255, 213, 0, 0.3);
  color: var(--esp-yellow);
}
.desc-popover-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.desc-popover-overlay.show { opacity: 1; visibility: visible; }
.desc-popover {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  width: 420px;
  max-width: 92vw;
  background: rgba(14, 14, 18, 0.98);
  border: 1px solid rgba(255, 213, 0, 0.15);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms cubic-bezier(0.22, 0.68, 0, 1.1), visibility 220ms, transform 220ms cubic-bezier(0.22, 0.68, 0, 1.1);
}
.desc-popover.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.desc-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px; border-bottom: 1px solid var(--esp-border);
}
.desc-popover-header span {
  font-size: 0.78rem; font-weight: 600; color: var(--esp-text-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.desc-popover-header .desc-popover-close {
  width: 24px; height: 24px; border: none; background: transparent; color: var(--esp-text-soft);
  cursor: pointer; border-radius: 6px; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; transition: all 150ms;
}
.desc-popover-header .desc-popover-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--esp-text-main); }
.desc-popover-body { padding: 12px 16px 16px; }
.desc-popover-body textarea {
  width: 100%; min-height: 100px; max-height: 200px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--esp-border); background: rgba(5, 5, 11, 0.7); color: var(--esp-text-main);
  font-size: 0.85rem; font-family: inherit; line-height: 1.5; resize: vertical; outline: none; transition: border-color 200ms ease;
}
.desc-popover-body textarea:focus { border-color: rgba(255, 213, 0, 0.4); }
.desc-popover-body textarea::placeholder { color: var(--esp-text-soft); font-style: italic; }
.desc-popover-body .desc-char-count { text-align: right; font-size: 0.68rem; color: var(--esp-text-soft); margin-top: 6px; }

/* ── Calculator Modal ── */
.calc-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}
.calc-backdrop.show {
  display: flex;
}
.calc-modal {
  background: var(--esp-surface);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 18px;
  padding: 0;
  max-width: 520px;
  width: 94%;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.9), 0 0 60px rgba(139, 92, 246, 0.15);
  animation: fadeInUp 300ms ease forwards;
  overflow: hidden;
}
.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}
.calc-header h3 {
  margin: 0;
  color: #c4b5fd;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.calc-close {
  background: transparent;
  border: none;
  color: var(--esp-text-soft);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 200ms;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.calc-close:hover {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.1);
}
.calc-body {
  padding: 20px 22px;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.calc-field label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--esp-text-soft);
  margin-bottom: 4px;
}
.calc-field label .calc-required {
  display: inline-block;
  background: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
  font-size: 0.6rem;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}
.calc-field .calc-input-wrap {
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  border: 1px solid var(--esp-border);
  background: rgba(5, 5, 11, 0.7);
  overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms;
}
.calc-field .calc-input-wrap:focus-within {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35);
}
.calc-field .calc-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background: rgba(139, 92, 246, 0.12);
  color: #c4b5fd;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 32px;
  border-right: 1px solid var(--esp-border);
  user-select: none;
}
.calc-field input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--esp-text-main);
  font-size: 0.85rem;
  outline: none;
}
.calc-field input:focus {
  outline: none;
}
.calc-results {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--esp-border);
}
.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.calc-result-label {
  color: var(--esp-text-soft);
  font-size: 0.8rem;
}
.calc-result-value {
  color: var(--esp-text-main);
  font-weight: 600;
  font-size: 0.95rem;
}
.calc-result-value.highlight {
  color: #c4b5fd;
  font-size: 1.1rem;
}
.calc-discount-section {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(234, 179, 8, 0.06);
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 10px;
}
.calc-discount-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.calc-discount-header label {
  font-size: 0.75rem;
  color: #eab308;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
}
.calc-discount-fields {
  display: none;
}
.calc-discount-fields.show {
  display: block;
  margin-top: 8px;
}
.calc-discount-result {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(234, 179, 8, 0.15);
}
.calc-footer {
  padding: 14px 22px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.calc-product-name {
  font-size: 0.8rem;
  color: var(--esp-text-muted);
  margin-top: 2px;
}

/* Campos bloqueados por calculadora */
input.calc-locked {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
  color: #c4b5fd !important;
  cursor: not-allowed !important;
  font-weight: 600;
}
.calc-lock-indicator {
  display: none;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  color: #a78bfa;
  white-space: nowrap;
}
.calc-lock-indicator.show {
  display: inline-flex;
}

/* ── Calculator trigger button (used in POS & Quotes forms) ── */
.btn-calc-trigger {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  color: #a78bfa;
  cursor: pointer;
  padding: 5px 8px;
  font-size: 0.75rem;
  transition: all 200ms;
  flex-shrink: 0;
}
.btn-calc-trigger:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: #8b5cf6;
  color: #c4b5fd;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* ── Override: keep number inputs visible in data tables ── */
.data-table input[type="number"] {
  min-width: 75px !important;
  max-width: 105px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}