/* ============================================================
   PRINT CALCULATOR - UNIFICADO Y CORREGIDO
   Objetivo: Columna izquierda dicta altura, imagen se adapta.
   ============================================================ */

:root {
  --ma-text-primary: #000;
  --ma-text-secondary: #666;
  --ma-border: #e6e6e6;
  --ma-radius: 10px;
  --ma-gap: 14px;
  --ma-control-h: 42px;
}

/* --- Contenedor Principal --- */
#ma-print-calculator-root {
  font-family: inherit;
  background: #fff;
  border: 1px solid var(--ma-border);
  border-radius: 14px;
  padding: 18px;
  margin: 0 0 28px 0;
  box-sizing: border-box;
}

#ma-print-calculator-root h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ma-text-primary);
  margin: 0 0 10px 0;
}

/* --- Layout de Columnas --- */
#ma-print-calculator-root .ma-layout-2col {
  display: flex;
  flex-direction: column;
  gap: var(--ma-gap);
}

/* Fila Crítica: Columna izquierda mandando en la altura */
#ma-print-calculator-root .ma-expand-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ma-gap);
  align-items: stretch; /* Ambas columnas igualan altura */
  min-height: 0;        /* Permite que los hijos no desborden */
}

#ma-print-calculator-root .ma-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ma-gap);
  align-items: start;
}

/* Columna derecha (Imagen) */
#ma-print-calculator-root .ma-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: 300px !important;
}

/* --- Contenedor de Imagen (Ajuste Pro) --- */
#ma-print-calculator-root .ma_pos_image_container {
  flex: 1;              /* Ocupa el alto que le dicte la columna izquierda */
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;        /* Clave para que no empuje el layout */
  max-height: 300px !important;
}

#ma-print-calculator-root .ma_pos_image_container img {
  max-width: 100%;
  max-height: 200px !important;
  width: auto;
  height: auto;
  object-fit: contain;  /* Mantiene proporciones sin recortar */
  display: block;
  border-radius: 12px;
}

/* --- Formulario e Inputs --- */
#ma-print-calculator-root label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ma-text-primary);
  margin: 0 0 6px 0;
}

#ma-print-calculator-root select,
#ma-print-calculator-root input[type="number"],
#ma-print-calculator-root input[type="text"],
#ma-print-calculator-root .ma-colors-fixed {
  width: 100%;
  padding: 0 12px;
  height: var(--ma-control-h);
  font-size: 0.92rem;
  line-height: calc(var(--ma-control-h) - 2px);
  color: var(--ma-text-primary);
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}

#ma-print-calculator-root .ma-colors-fixed {
  background: #fafafa;
  display: flex;
  align-items: center;
  font-weight: 700;
}

#ma-print-calculator-root select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.8rem center;
  background-repeat: no-repeat;
  background-size: 1em 1em;
  padding-right: 2.5rem;
  appearance: none;
}

#ma-print-calculator-root select:focus,
#ma-print-calculator-root input:focus {
  border-color: #000;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/* --- File Input Estilizado --- */
#ma-print-calculator-root input[type="file"].ma_design_file {
  border: 1px dashed #d0d0d0;
  border-radius: 12px;
  padding: 10px;
  background: #fafafa;
  width: 100%;
  color: #111;
  font-size: 0.8rem;
}

#ma-print-calculator-root input[type="file"].ma_design_file::file-selector-button {
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: 12px;
  transition: background .15s;
}

#ma-print-calculator-root input[type="file"].ma_design_file::file-selector-button:hover {
  background: #222;
}

/* --- Botón Añadir al Carrito --- */
#ma-print-calculator-root .ma_add_to_cart_btn--full {
  width: 100%;
  height: 52px;
  border-radius: 14px !important;
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: transform .12s, background .12s !important;
}

#ma-print-calculator-root .ma_add_to_cart_btn--full:hover:not(:disabled) {
  background: #222 !important;
  transform: translateY(-1px);
}

#ma-print-calculator-root .ma_add_to_cart_btn--full:disabled {
  background: #cfcfcf !important;
  cursor: not-allowed !important;
}

/* --- Resumen (Widget) --- */
.ma-print-summary-widget .ma-breakdown {
  background: #fff;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-radius);
  overflow: hidden;
}

.ma-print-summary-widget .ma-breakdown__title {
  background: #000;
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}

.ma-print-summary-widget .ma-summary {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ma-print-summary-widget .ma-summary td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  color: #000;
}

.ma-print-summary-widget .ma-summary tr:last-child td { border-bottom: none; }

.ma-print-summary-widget .ma-summary__total td {
  background-color: #f5f5f5;
  font-weight: 800;
  border-top: 2px solid #ddd;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  #ma-print-calculator-root .ma-top-row,
  #ma-print-calculator-root .ma-expand-row {
    grid-template-columns: 1fr;
  }
  
  #ma-print-calculator-root .ma_pos_image_container {
    height: 250px; /* Altura fija en móvil para que no colapse */
  }
}