/* ===================================================================
   Cubicación Tool — Additional Styles
   =================================================================== */

.cub-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}

.cub-form-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section Cards */
.cub-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
  padding: 24px;
}

.cub-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.cub-step-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange-500);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}

.cub-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black);
}

.cub-section-sub {
  font-size: 0.82rem;
  color: var(--neutral-500);
}

/* Form Grid */
.cub-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cub-form-grid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.form-input, .form-select, .form-textarea {
  padding: 10px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--neutral-800);
  background: var(--white);
  transition: all var(--duration) var(--ease);
  outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--orange-400);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.1);
}

.form-input.sm, .form-select.sm {
  padding: 7px 10px;
  font-size: 0.82rem;
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
}

.form-hint {
  font-size: 0.72rem;
  color: var(--neutral-400);
}

.input-with-suffix {
  display: flex;
  align-items: center;
  gap: 0;
}

.input-with-suffix .form-input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
}

.input-suffix {
  padding: 10px 12px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.82rem;
  color: var(--neutral-500);
  font-weight: 600;
  white-space: nowrap;
}

/* Dimensions */
.cub-dimensions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.dim-card {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.dim-card .material-icons-round {
  font-size: 24px;
  color: var(--orange-400);
}

.dim-card .form-label {
  margin: 0;
}

.dim-card .input-with-suffix {
  width: 100%;
}

.dim-card .input-with-suffix .form-input {
  text-align: center;
}

.dim-result {
  background: var(--orange-50);
  border-color: var(--orange-200);
}

.dim-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--orange-600);
}

/* Items Table */
.cub-items-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cub-items-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr 0.6fr 1fr 1fr 40px;
  gap: 8px;
  padding: 10px 12px;
  background: var(--neutral-50);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid var(--neutral-200);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
}

.cub-item-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr 0.6fr 1fr 1fr 40px;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--neutral-200);
  border-top: none;
  align-items: center;
  transition: background var(--duration) var(--ease);
}

.cub-item-row:hover {
  background: var(--orange-50);
}

.cub-item-row:last-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.cub-subtotal {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--black);
  font-family: 'SF Mono', 'Consolas', monospace;
}

.cub-delete {
  color: var(--neutral-400);
}

.cub-delete:hover {
  color: var(--red-500) !important;
  background: #fef2f2 !important;
}

/* Summary Card */
.cub-summary-area {
  position: relative;
}

.sticky-summary {
  position: sticky;
  top: calc(var(--topbar-height) + 24px);
}

.cub-summary-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.cub-summary-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.cub-summary-header .material-icons-round {
  font-size: 24px;
  color: var(--orange-500);
}

.cub-summary-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--black);
}

.cub-summary-id {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--neutral-100);
}

.cub-id {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--neutral-600);
}

.cub-summary-section {
  margin-bottom: 20px;
}

.cub-summary-section h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  margin-bottom: 10px;
}

/* Category Breakdown */
.cub-cat-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cub-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.cub-cat-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--neutral-600);
}

.cub-cat-value {
  font-weight: 600;
  color: var(--black);
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.82rem;
}

/* Material Pills */
.cub-material-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.mat-pill .material-icons-round { font-size: 14px; }
.mat-pill.metal { background: #e0e7ff; color: #3730a3; }
.mat-pill.wood  { background: #fef3c7; color: #92400e; }
.mat-pill.other { background: var(--orange-100); color: var(--orange-700); }

/* Calculation */
.cub-calc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cub-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--neutral-600);
}

.cub-calc-value {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.85rem;
  color: var(--neutral-800);
}

.cub-calc-value.bold {
  font-weight: 700;
  color: var(--black);
}

.cub-calc-divider {
  height: 1px;
  background: var(--neutral-200);
  margin: 4px 0;
}

.cub-calc-total {
  font-weight: 700;
  color: var(--black);
  font-size: 0.95rem !important;
}

.cub-calc-total .cub-calc-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--orange-600);
}

.cub-calc-grand {
  font-weight: 800;
  color: var(--black);
  font-size: 1.05rem !important;
  padding-top: 4px;
}

.cub-calc-grand .cub-calc-value {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--orange-600);
}

/* Indicators */
.cub-indicators {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cub-indicator {
  background: var(--neutral-50);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}

.cub-ind-label {
  display: block;
  font-size: 0.7rem;
  color: var(--neutral-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.cub-ind-value {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--black);
}

.cub-ind-value.highlight {
  color: var(--orange-600);
}

/* Summary Actions */
.cub-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* Responsive */
@media (max-width: 1200px) {
  .cub-layout {
    grid-template-columns: 1fr;
  }
  .sticky-summary { position: static; }
  .cub-dimensions { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .cub-form-grid { grid-template-columns: 1fr; }
  .cub-form-grid.cols-3 { grid-template-columns: 1fr; }
  .cub-dimensions { grid-template-columns: 1fr 1fr; }
  .cub-items-header { display: none; }
  .cub-item-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px;
  }
}