/* Convertidor · paleta "terracota" (terracota para el valor de origen, azul pizarra para el de destino).
   Contrastes verificados (AA) en claro y oscuro; el origen y el destino nunca dependen solo del color: cada campo lleva su rótulo. */
:root {
  --bg: #FCF7F2;
  --surface: #FFFFFF;
  --text: #2B1A12;
  --muted: #6A5242;
  --border: #E9D8CA;
  --accent: #C2561C;        /* detalles y bordes de foco */
  --accent-fill: #AD470F;   /* relleno de botones y pestañas: con texto blanco da 5,7:1 */
  --accent-ink: #FFFFFF;
  --accent-text: #9C3F0C;   /* acento como texto */
  --azul: #3F78AE;          /* borde del campo de destino */
  --azul-text: #265482;
  --warm: #E8A33D;
  --warm-ink: #3A2504;
  --error: #C8453B;
  --ok: #1F7A4D;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1F140D;
    --surface: #2B1D14;
    --text: #FBEDE2;
    --muted: #D4BBA9;
    --border: #4B3527;
    --accent: #FF9A5C;
    --accent-fill: #FF9A5C;
    --accent-ink: #1F140D;
    --accent-text: #FFAE7A;
    --azul: #8FBCE6;
    --azul-text: #A9CDEE;
    --warm: #F2B960;
    --warm-ink: #2A1B04;
    --error: #F07A6F;
    --ok: #6FD6A0;
    color-scheme: dark;
  }
}

.muted { color: var(--muted); font-size: 0.9rem; }
.top { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; }
.logo { border-radius: 10px; }
h1 { font-size: 1.5rem; line-height: 1.2; color: var(--accent-text); }
.tagline { color: var(--muted); font-size: 0.95rem; }
.intro { color: var(--muted); margin-bottom: 14px; }
h2 { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.note { color: var(--muted); font-size: 0.9rem; }
[hidden] { display: none !important; }

/* Modos */
.modos { display: flex; gap: 6px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; }
.modos button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: transparent; font-weight: 600; color: var(--muted); }
.modos button[aria-selected="true"] { background: var(--accent-fill); color: var(--accent-ink); }

/* Campos */
.campos, .reto { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { font-size: 0.875rem; font-weight: 700; color: var(--muted); } /* sin mayúsculas: "mL" y "ML" no son lo mismo */
.campo select, .campo input {
  width: 100%; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 1rem;
}
.campo input { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.campo.de select { border-color: var(--accent); }
.campo.a select { border-color: var(--azul); }
.campo.de label { color: var(--accent-text); }
.campo.a label { color: var(--azul-text); }

/* De / A con el botón de intercambio al costado */
.par { display: grid; grid-template-columns: 1fr 48px; grid-template-rows: auto auto; gap: 12px 10px; align-items: center; }
.par .de { grid-column: 1; grid-row: 1; }
.par .a { grid-column: 1; grid-row: 2; }
.swap {
  grid-column: 2; grid-row: 1 / 3; align-self: center; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface); color: var(--accent-text); font-size: 1.375rem; line-height: 1;
}
.swap:hover { border-color: var(--accent); }

.estado { min-height: 1.5rem; }
.estado.ok { color: var(--ok); font-weight: 600; }
.estado.mal { color: var(--error); font-weight: 600; }
.vacio { margin: 4px 0 14px; }

/* Resultado */
.result { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.res-grande { font-size: 2rem; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; color: var(--azul-text); font-variant-numeric: tabular-nums; }
.res-grande .uni { font-size: 1.25rem; font-weight: 600; color: var(--text); }
.res-grande .aprox { color: var(--muted); font-weight: 400; margin-right: 6px; }

/* Paso a paso */
.pasos { display: flex; flex-direction: column; gap: 12px; }
.cadena { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.cadena .ini { color: var(--accent-text); font-weight: 700; }
.cadena .fin { color: var(--azul-text); font-weight: 700; }
.cadena .op { color: var(--muted); }
.frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
.frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 6px 1px; }
.frac > span:last-child { padding: 1px 6px 0; }
.grupo { display: inline-flex; align-items: center; }
.grupo .par-l { font-size: 2.2rem; font-weight: 200; line-height: 1; color: var(--muted); }
.grupo sup { font-size: 0.8rem; align-self: flex-start; margin-top: 2px; }
.temp-linea { font-size: 1.0625rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.temp-linea b { color: var(--azul-text); }

/* Práctica */
.reto-prompt { font-size: 1.25rem; font-weight: 700; color: var(--accent-text); overflow-wrap: anywhere; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.btn[disabled] { opacity: 0.45; cursor: default; filter: none; }

.foot { margin: 32px 0 16px; display: flex; flex-direction: column; gap: 6px; }