:root { --maxw: 960px; --pad: 1rem; --radius: 12px; }
    * { box-sizing: border-box; }
    body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.5; background:#0f172a; color:#e5e7eb; }
    header, main, footer { padding: var(--pad); }
    .container { max-width: var(--maxw); margin: 0 auto; }
    header { background: linear-gradient(180deg,#111827,#0f172a); border-bottom: 1px solid #1f2937; }
    a { color: #60a5fa; text-decoration: none; }
    a:hover { text-decoration: underline; }
    h1 { font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); margin: 0.5rem 0 1rem; }
    .card { background: #111827; border:1px solid #1f2937; border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.5rem); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
    .grid { display:grid; gap: 1rem; grid-template-columns: 1fr; }
    @media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } }
    label { display:block; font-weight:600; margin-bottom:.35rem; }
    input, select { width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid #374151; background:#0b1220; color:#e5e7eb; }
    input[disabled], select[disabled] { opacity:.6; cursor:not-allowed; }
    input:focus, select:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
    .result { font-size:1.1rem; padding:.8rem 1rem; background:#0b1220; border:1px solid #374151; border-radius:10px; }
    .muted { color:#9ca3af; font-size:.95rem; }
    .btn { display:inline-flex; align-items:center; gap:.4rem; background:#374151; color:white; border:none; padding:.45rem .8rem; border-radius:10px; cursor:pointer; font-weight:600; font-size:.85rem; }
    footer { border-top:1px solid #1f2937; color:#94a3b8; }

    .row-convertir { display:grid; gap:1rem; grid-template-columns: 1fr; align-items:end; }
    @media (min-width: 720px){ .row-convertir { grid-template-columns: 1fr 1fr; } }
    .row-actions { display:flex; justify-content:flex-end; }

    .result-flex {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
    }
    .result-text { flex:1 1 auto; word-break:break-word; }

    .copy-btn {
      flex:0 0 auto;
      width:32px;
      height:32px;
      border-radius:6px;
      border:1px solid #22d3ee;
      background:#0b1220;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:border-color .2s ease;
    }
    .copy-btn svg {
      width:18px;
      height:18px;
      stroke:#22d3ee;
    }
    .copy-btn.copied { border-color:#22c55e; }

    .sr-only {
      position:absolute; width:1px; height:1px; margin:-1px; padding:0;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }

    /* Toggle estilo iOS */
    .toggle-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
    .toggle-left { display:flex; align-items:center; gap:.5rem; position:relative; }
    .toggle-title { font-weight:600; font-size:.98rem; }

    .toggle-switch { position:relative; display:inline-flex; align-items:center; cursor:pointer; user-select:none; }
    .toggle-switch input { position:absolute; opacity:0; width:0; height:0; }
    .toggle-track {
      width:44px; height:24px; border-radius:999px; background:#020617;
      border:1px solid #4b5563; display:flex; align-items:center;
      padding:2px; transition:background .2s ease, border-color .2s ease;
    }
    .toggle-thumb {
      width:18px; height:18px; border-radius:999px;
      background:#e5e7eb; transform:translateX(0);
      transition:transform .2s ease, background .2s ease;
    }
    .toggle-switch input:checked + .toggle-track { background:#22c55e33; border-color:#22c55e; }
    .toggle-switch input:checked + .toggle-track .toggle-thumb { transform:translateX(18px); background:#22c55e; }

    /* Info */
    .info-btn {
      width:22px; height:22px; border-radius:999px; border:1px solid #38bdf8;
      background:#020617; display:inline-flex; align-items:center; justify-content:center;
      font-size:.75rem; color:#e5e7eb; cursor:pointer;
    }
    .info-pop {
      position:absolute; top:130%; left:0; background:#020617; border:1px solid #334155;
      border-radius:8px; padding:.5rem .75rem; font-size:.8rem; max-width:260px;
      box-shadow:0 10px 25px rgba(0,0,0,.6); display:none; z-index:20;
    }
    .info-pop.visible { display:block; }

    /* Largo/Ancho/Alto compactos */
    #bloque-medidas-2 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .6rem; margin-top:.75rem;
    }

    /* Bultos */
    .bulto-row {
      border:1px solid #1f2937;
      border-radius:10px;
      padding:.75rem .9rem;
      background:#020617;
      margin-top:.75rem;
    }
    .bulto-row-header {
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:.5rem;
      gap:.75rem;
      flex-wrap:wrap;
    }
    .bulto-label {
      font-weight:600;
      font-size:.95rem;
    }
    .bulto-header-right {
      display:flex;
      align-items:center;
      gap:.5rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .btn-bulto-remove {
      border:none;
      background:#111827;
      color:#f97373;
      border-radius:999px;
      width:26px;
      height:26px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      font-size:1rem;
      line-height:1;
    }
    .bulto-grid {
      display:grid;
      gap:.6rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Fila Añadir / Volver / Cantidad simple */
    .bulto-actions-row {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.75rem;
      margin-top:.25rem;
      flex-wrap:wrap;
    }
    .btn-link-bulto {
      font-size:.85rem;
      color:#60a5fa;
      cursor:pointer;
      text-decoration:none;
      padding:.35rem .55rem;
      border-radius:8px;
      transition:background .2s ease;
      white-space:nowrap;
    }
    .btn-link-bulto:hover {
      background:#1e293b;
    }

    /* Cantidad (qty) */
    .qty-wrapper {
      display:inline-flex;
      align-items:center;
      gap:.15rem;
      background:#020617;
      border-radius:999px;
      border:1px solid #1f2937;
      padding:0 .25rem;
    }
    .qty-input {
      width:42px;
      text-align:center;
      border:none;
      background:transparent;
      color:#e5e7eb;
      padding:.2rem 0;
      font-size:.85rem;
    }
    .qty-input:focus {
      outline:none;
    }
    .qty-btn {
      border:none;
      background:transparent;
      color:#e5e7eb;
      width:22px;
      height:22px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      font-size:.9rem;
      line-height:1;
    }
    .qty-btn:disabled {
      opacity:.4;
      cursor:not-allowed;
    }

    .simple-qty-block {
      display:flex;
      align-items:center;
      gap:.35rem;
      font-size:.85rem;
    }

    /* Encabezado de volumen con referencia */
    .volumen-header {
      display:flex;
      justify-content:space-between;
      align-items:baseline;
      gap:.5rem;
    }
    .ref-volumen {
      font-size:.8rem;
    }

    /* Fila interna tarifa (select + input) */
    .tarifa-row-inner {
      display:grid;
      grid-template-columns: minmax(0,3fr) minmax(0,1.2fr);
      gap:.5rem;
      align-items:center;
    }

    /* El select puede contraerse en móviles; solo forzamos ancho mínimo en pantallas grandes */
    #tarifa-tipo {
      min-width: 0;
    }
    @media (min-width: 720px){
      #tarifa-tipo {
        min-width: 260px;
      }
    }

    /* --- NUEVO: radios/pills para unidades de salida --- */
    .convertir-header {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.75rem;
      flex-wrap:wrap;
    }
    .unidades-toggle {
      display:flex;
      gap:.75rem;
    }
    .unidad-pill {
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      cursor:pointer;
      font-size:.85rem;
    }
    .unidad-pill span {
      color:#e5e7eb;
    }
    .unidad-pill input {
      appearance:none;
      width:16px;
      height:16px;
      border-radius:50%;
      border:2px solid #64748b;
      background:transparent;
      position:relative;
      cursor:pointer;
    }
    .unidad-pill input:checked {
      border-color:#22c55e;
    }
    .unidad-pill input:checked::after {
      content:"";
      position:absolute;
      inset:3px;
      background:#22c55e;
      border-radius:50%;
    }
    .unidad-pill input:disabled {
      cursor:not-allowed;
      opacity:0.5;
    }

    /* MISMO LAYOUT PARA DIMENSIONES Y VOLUMEN */
    #bloque-medidas-1,
    #bloque-vol-directo {
      row-gap: 0.75rem;
      margin-top: 0.75rem;
    }