/**
 * Modal COD — Feature 011
 * Solo tokens del design system (Constitution I).
 */

/* ── Overlay y panel ── */
#tm-cod-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  background: color-mix(in srgb, var(--color-dark) 60%, transparent);
}
#tm-cod-overlay[hidden] { display: none; }

#tm-cod-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--color-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-md);
  animation: tm-cod-enter 0.2s ease-out;
}
@keyframes tm-cod-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #tm-cod-modal { animation: none; }
}

#tm-cod-close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  background: var(--color-surface);
  border: none;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font-size: 14px;
  color: var(--color-text);
  cursor: pointer;
}
#tm-cod-close:hover { background: var(--color-border); }
#tm-cod-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── Sellos de confianza ── */
.tm-cod-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-bottom: var(--space-sm);
}
.tm-cod-badges span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px var(--space-xs);
}

/* ── Resumen producto ── */
.tm-cod-product {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--color-surface);
  border-radius: var(--radius-input);
  margin-bottom: var(--space-sm);
}
.tm-cod-product img {
  border-radius: var(--radius-input);
  object-fit: cover;
}
.tm-cod-product h2 {
  font-family: var(--font-heading);
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--color-text);
}
.tm-cod-price {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-primary);
  margin: 0;
}

/* ── Formulario ── */
.tm-cod-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.tm-cod-field { margin-bottom: var(--space-xs); }
.tm-cod-field label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.tm-cod-field input,
.tm-cod-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--space-xs);
  min-height: 42px;
}
.tm-cod-field input:focus,
.tm-cod-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.tm-cod-field input[aria-invalid="true"],
.tm-cod-field select[aria-invalid="true"] {
  border-color: var(--color-warn-text);
}
.tm-cod-field select:disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.tm-cod-phone-wrap,
.tm-cod-coupon-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.tm-cod-phone-wrap span {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-text-muted);
}
.tm-cod-phone-wrap input,
.tm-cod-coupon-wrap input { flex: 1; }
.tm-cod-coupon-wrap .btn-ghost { white-space: nowrap; }

.tm-cod-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}
@media (max-width: 480px) {
  .tm-cod-row { grid-template-columns: 1fr; }
}

.tm-cod-error {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-warn-text);
  margin: 4px 0 0;
}
.tm-cod-error:empty { display: none; }
.tm-cod-error--global {
  text-align: center;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

#tm-cod-submit {
  width: 100%;
  margin-top: var(--space-xs);
}
#tm-cod-submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}
.tm-cod-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  margin: var(--space-xs) 0 0;
}

/* ── Confirmación ── */
#tm-cod-success { text-align: center; padding: var(--space-sm) 0; }
#tm-cod-success[hidden] { display: none; }
.tm-cod-success-icon { font-size: 42px; margin: 0 0 var(--space-xs); }
#tm-cod-success h2 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}
#tm-cod-success p {
  font-family: var(--font-body);
  color: var(--color-text);
}
.tm-cod-order-num strong { color: var(--color-primary); }
#tm-cod-success-close { margin-top: var(--space-sm); }