/* Minimal, moderno y 100% responsivo (fondo #FAFAFA, sin sombras/gradientes) */
.cuc-calc{
  --cuc-gap:.9rem;
  --cuc-pad:1rem;
  --cuc-radius:16px;
  --cuc-ink:#0f172a;
  --cuc-soft:#64748b;
  --cuc-bg:#FAFAFA;
  --field-h:48px;            /* altura unificada */

  background:var(--cuc-bg);
  border:1px solid rgba(15,23,42,.06);
  border-radius:var(--cuc-radius);
  padding:var(--cuc-pad);
  margin:0 0 1.2rem;
  color:var(--cuc-ink);
}

/* Grid responsivo con alineación inferior uniforme */
.cuc-calc .cuc-calc-grid{
  display:grid;
  grid-template-columns: repeat(var(--cuc-cols, 4), minmax(0,1fr));
  gap: var(--cuc-gap);
  align-items:end;
}
@media (max-width:1024px){
  .cuc-calc .cuc-calc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .cuc-calc .cuc-calc-grid{ grid-template-columns: 1fr; }
}

/* Accesibilidad: texto solo para lectores */
.cuc-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Etiquetas y campos */
.cuc-field{ display:grid; gap:.45rem; min-width:0; }
.cuc-field-label{ font-size:.85rem; color:var(--cuc-soft); font-weight:600; line-height:1.2; }

/* Inputs/Selects: misma altura y padding */
.cuc-input,.cuc-select{
  width:100%;
  height:var(--field-h);
  box-sizing:border-box;
  appearance:none; -webkit-appearance:none;
  background:#fff;
  border:1px solid rgba(2,6,23,.12);
  border-radius:12px;
  padding:.8rem 1rem;
  font-size:1rem; line-height:1.2;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cuc-input:focus,.cuc-select:focus{
  outline:none; border-color:#93c5fd; box-shadow:0 0 0 4px rgba(59,130,246,.12);
}
.cuc-input:hover,.cuc-select:hover{ border-color: rgba(2,6,23,.2); }

/* Spinners coherentes */
.cuc-input::-webkit-outer-spin-button,
.cuc-input::-webkit-inner-spin-button{ margin:0; }
.cuc-input[type="number"]{ -moz-appearance:textfield; }

/* Flecha del select */
.cuc-select{
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2399A3B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:18px;
  padding-right:2.3rem; text-overflow:ellipsis;
}

/* Resultado */
.cuc-output{
  display:grid; gap:.3rem; align-content:center;
  background:#fff; border:1px dashed rgba(2,6,23,.18);
  border-radius:12px; padding:.9rem 1rem; min-height:var(--field-h);
}
.cuc-output-label{ font-size:.8rem; color:var(--cuc-soft); }
.cuc-output-value{ font-size:1.15rem; font-weight:800; letter-spacing:.2px; overflow-wrap:anywhere; }
.cuc-output-value.cuc-twinkle{ animation:cuc-pop .28s ease; }
@keyframes cuc-pop{ 0%{ transform:scale(.98); opacity:.7; } 100%{ transform:scale(1); opacity:1; } }

/* Select + botón en la misma fila */
.cuc-select-stack{
  display:grid;
  grid-template-columns: 1fr auto; /* select + botón */
  align-items:end;
  gap:.5rem;
}

/* Botón swap (rojo -> azul), icono SVG heredando currentColor */
.cuc-swap{
  height:var(--field-h);
  padding:0 .8rem;
  border-radius:12px;
  border:0;
  display:grid; place-items:center;
  cursor:pointer;
  background:#E4342D;  /* inactivo: rojo */
  color:#fff;          /* el SVG usa currentColor */
  transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease;
}
.cuc-swap svg{ width:22px; height:22px; display:block; }
.cuc-swap:hover,.cuc-swap:focus{
  background:#25377B;  /* hover/activo: azul */
  box-shadow:0 6px 18px rgba(37,55,123,.25);
  outline:none;
}
.cuc-swap:active{ transform: scale(.97); }

/* Dark mode */
@media (prefers-color-scheme: dark){
  .cuc-calc{
    --cuc-bg:#0b1220;
    --cuc-ink:#e5e7eb;
    --cuc-soft:#94a3b8;
  }
  .cuc-input, .cuc-select{ background:#0f172a; border-color:#1f2a44; color:#e5e7eb; }
  .cuc-output{ background:#0f172a; border-color:#24304b; }
}