/* CacaoERP · estilos base del ERP */
  :root {
    --nib: #2B1B14;          /* semilla de cacao: barra lateral y texto */
    --nib-2: #3A261C;
    --fondo: #F2F1ED;
    --panel: #FFFFFF;
    --borde: #E1DDD4;
    --texto-2: #6A5B51;
    --mazorca: #D9A21B;      /* acento: mazorca madura */
    --hoja: #1F3A2E;         /* verde de la tabla de precios */
    --sube: #2E7D4F;
    --baja: #B3261E;
    --num: "Barlow Condensed", "Arial Narrow", sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body { background: var(--fondo); color: var(--nib); font: 15px/1.5 "Archivo", system-ui, sans-serif; }
  .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

  /* ---------- Barra lateral ---------- */
  .lateral { background: var(--nib); color: #EDE6DF; display: flex; flex-direction: column; padding: 20px 14px; }
  .marca { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .marca svg { flex: none; }
  .marca b { font-size: 1.15rem; letter-spacing: -.01em; }
  .marca span { display: block; font-size: .75rem; color: #B9ABA0; }
  nav { margin-top: 16px; display: grid; gap: 2px; }
  nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: #D8CEC6; text-decoration: none; padding: 9px 10px; border-radius: 6px; font-size: .92rem;
  }
  nav a:hover { background: var(--nib-2); }
  nav a[aria-current="page"] { background: var(--nib-2); color: #fff; box-shadow: inset 3px 0 0 var(--mazorca); }
  nav a.pronto { color: #8F8077; pointer-events: none; }
  nav a.pronto small { font-size: .7rem; border: 1px solid #5A4739; border-radius: 10px; padding: 0 7px; }
  .grupo { font-size: .75rem; color: #8F8077; padding: 14px 10px 4px; }
  .lateral .pie { margin-top: auto; font-size: .78rem; color: #8F8077; padding: 0 8px; }

  /* ---------- Barra superior ---------- */
  .principal { display: flex; flex-direction: column; min-width: 0; }
  .superior {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--panel); border-bottom: 1px solid var(--borde); padding: 12px 24px; position: sticky; top: 0; z-index: 5;
  }
  .ruta { font-size: .85rem; color: var(--texto-2); }
  .ruta h1 { margin: 0; font-size: 1.2rem; color: var(--nib); }
  .acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
  .estado { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; padding: 5px 11px; border-radius: 20px; background: #EEF5F0; color: var(--sube); }
  .estado i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .estado.vivo i { animation: latido 2s infinite; }
  .estado.cerrado { background: #F3EFE6; color: #8A6A12; }
  .estado.error { background: #FBECEA; color: var(--baja); }
  @keyframes latido { 50% { opacity: .3; } }
  .reloj { font-family: var(--num); font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--texto-2); }
  .btn { font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; background: var(--nib); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; }
  .btn:hover { background: var(--nib-2); }
  .btn:focus-visible, input:focus-visible, nav a:focus-visible { outline: 3px solid var(--mazorca); outline-offset: 2px; }

  /* ---------- Contenido ---------- */
  .contenido { padding: 22px 24px 40px; display: grid; gap: 18px; }
  .aviso { background: #FFF6DC; border: 1px solid #F0D98F; color: #6B5210; border-radius: 6px; padding: 10px 14px; font-size: .9rem; }
  .aviso[hidden] { display: none; }

  .kpis { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; }
  .kpi { padding: 16px 20px; border-left: 1px solid var(--borde); }
  .kpi:first-child { border-left: 0; }
  .kpi .rotulo { font-size: .82rem; color: var(--texto-2); }
  .kpi .valor { font-family: var(--num); font-weight: 600; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .kpi:first-child .valor { font-size: 2.9rem; font-weight: 700; }
  .kpi .detalle { font-size: .82rem; color: var(--texto-2); }
  .var { font-weight: 600; }
  .var.sube { color: var(--sube); } .var.baja { color: var(--baja); }

  .fila { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
  .panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; min-width: 0; }
  .panel > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
  .panel h2 { margin: 0; font-size: 1rem; }
  .panel header small { color: var(--texto-2); font-size: .8rem; }
  .cuerpo { padding: 14px 18px; }

  /* Gráfico */
  #grafico { width: 100%; height: 230px; display: block; }
  .leyenda { display: flex; gap: 18px; font-size: .8rem; color: var(--texto-2); margin-top: 6px; flex-wrap: wrap; }
  .leyenda b { font-family: var(--num); font-size: 1rem; color: var(--nib); font-weight: 600; }
  .vacio { height: 230px; display: grid; place-items: center; color: var(--texto-2); font-size: .9rem; text-align: center; }

  /* Parámetros */
  .param { display: grid; grid-template-columns: 1fr 104px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--borde); }
  .param:last-of-type { border-bottom: 0; }
  .param label { font-size: .9rem; }
  .param label small { display: block; color: var(--texto-2); font-size: .76rem; }
  .param input { width: 100%; padding: 7px 9px; font: 500 1rem var(--num); text-align: right; border: 1px solid #CFC8BC; border-radius: 5px; background: #FCFBF9; }
  .nota { font-size: .78rem; color: var(--texto-2); margin: 10px 0 0; }

  /* Tabla de precios */
  .tabla-envoltura { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; }
  thead th { background: var(--hoja); color: #E9EFEA; font-weight: 500; font-size: .82rem; text-align: right; padding: 10px 18px; white-space: nowrap; }
  thead th:first-child { text-align: left; }
  tbody td { padding: 12px 18px; border-bottom: 1px solid var(--borde); text-align: right; white-space: nowrap; }
  tbody tr:last-child td { border-bottom: 0; }
  tbody td:first-child { text-align: left; white-space: normal; }
  td .prod { font-weight: 600; }
  td small { display: block; color: var(--texto-2); font-size: .78rem; }
  td.n { font-family: var(--num); font-size: 1.3rem; font-weight: 500; font-variant-numeric: tabular-nums; }
  td.n.lb { font-weight: 700; color: var(--hoja); background: #F4F7F4; }
  .flash { animation: flash 1.4s ease-out; }
  @keyframes flash { from { background: rgba(217,162,27,.4); } }
  .formula { font-size: .8rem; color: var(--texto-2); padding: 10px 18px; border-top: 1px solid var(--borde); background: #FAF9F6; border-radius: 0 0 8px 8px; }

  /* Historial */
  .historial { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; }
  .historial li { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--borde); font-size: .86rem; align-items: baseline; }
  .historial .h { font-family: var(--num); color: var(--texto-2); font-size: .95rem; }
  .historial .p { font-family: var(--num); font-size: 1.05rem; font-weight: 600; text-align: right; }
  .historial .vacio-h { display: block; padding: 18px; color: var(--texto-2); }

  @media (max-width: 1100px) {
    .kpis { grid-template-columns: 1fr 1fr; }
    .kpi:nth-child(3) { border-left: 0; }
    .kpi:nth-child(n+3) { border-top: 1px solid var(--borde); }
    .fila { grid-template-columns: 1fr; }
  }
  @media (max-width: 820px) {
    .app { grid-template-columns: 1fr; }
    .lateral { flex-direction: row; align-items: center; padding: 10px 14px; overflow-x: auto; }
    .marca { border: 0; padding: 0 12px 0 0; }
    nav { display: flex; margin: 0; }
    .grupo, .lateral .pie, nav a.pronto { display: none; }
    .superior { position: static; flex-wrap: wrap; }
  }
  @media (prefers-reduced-motion: reduce) { .flash, .estado.vivo i { animation: none; } }

  /* Formularios y mensajes */
  .exito { background: #EEF5F0; border: 1px solid #BFDCC8; color: #1F5B38; border-radius: 6px; padding: 10px 14px; font-size: .9rem; }
  .error-campo { color: var(--baja); font-size: .78rem; grid-column: 1 / -1; }
  .param input.invalido { border-color: var(--baja); }
  .btn-bloque { width: 100%; margin-top: 12px; padding: 10px; }

  /* ================= Módulos del ERP ================= */
  a { color: #7A4F12; }
  .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
  .btn-sec { background: #fff; color: var(--nib); border: 1px solid #CFC8BC; }
  .btn-sec:hover { background: #F6F4EF; }
  .btn-peligro { background: var(--baja); }
  .btn-peligro:hover { background: #8F1E17; }
  .btn-chico { padding: 5px 10px; font-size: .82rem; }
  .btn-link { background: none; border: 0; color: var(--baja); cursor: pointer; font: inherit; font-size: .82rem; padding: 0; text-decoration: underline; }

  .barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between; }
  .filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
  .filtros .campo { min-width: 140px; }

  .campo { display: grid; gap: 4px; }
  .campo > label, .campo > span { font-size: .84rem; color: var(--texto-2); font-weight: 500; }
  .campo input, .campo select, .campo textarea, .control {
    width: 100%; padding: 8px 10px; font: inherit; font-size: .95rem; color: var(--nib);
    border: 1px solid #CFC8BC; border-radius: 6px; background: #FCFBF9;
  }
  .campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible, .control:focus-visible { outline: 3px solid var(--mazorca); outline-offset: 1px; }
  .campo .error-campo { grid-column: auto; }
  .campo.invalido input, .campo.invalido select { border-color: var(--baja); }
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .form-grid .ancho { grid-column: 1 / -1; }
  .check { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
  .check input { width: 18px; height: 18px; accent-color: var(--hoja); }
  .pie-form { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--borde); background: #FAF9F6; border-radius: 0 0 8px 8px; }
  .errores { background: #FBECEA; border: 1px solid #F1C3BE; color: #7A1B15; border-radius: 6px; padding: 10px 14px; font-size: .9rem; }
  .errores ul { margin: 4px 0 0; padding-left: 18px; }

  /* Tablas de listado (encabezado claro; la verde queda para precios) */
  table.lista thead th { background: #F6F4EF; color: var(--texto-2); font-weight: 600; border-bottom: 1px solid var(--borde); }
  table.lista tbody td { padding: 10px 18px; font-size: .92rem; }
  table.lista tbody tr:hover td { background: #FBFAF7; }
  table.lista td.n { font-size: 1.1rem; }
  table.lista tfoot td { padding: 11px 18px; font-weight: 700; text-align: right; background: #FAF9F6; border-top: 2px solid var(--borde); }
  table.lista tfoot td:first-child { text-align: left; }
  .izq { text-align: left !important; }
  .vacio-tabla { padding: 28px 18px !important; text-align: center !important; color: var(--texto-2); }
  .tenue { color: var(--texto-2); font-size: .84rem; }

  .badge { display: inline-block; font-size: .76rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
  .badge.pendiente { background: #FFF1CF; color: #7A5A0B; }
  .badge.pagada { background: #E3F1E8; color: #1F5B38; }
  .badge.anulada { background: #F1E4E2; color: #8F1E17; text-decoration: line-through; }
  .badge.admin { background: #EFE7DF; color: var(--nib); }
  .badge.cajero, .badge.inactivo { background: #EEEDEA; color: var(--texto-2); }

  .paginacion { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--borde); font-size: .85rem; color: var(--texto-2); }
  .paginacion .paginas { display: flex; gap: 6px; }
  .paginacion a, .paginacion span.actual { padding: 5px 11px; border: 1px solid var(--borde); border-radius: 5px; text-decoration: none; color: var(--nib); }
  .paginacion span.deshab { padding: 5px 11px; color: #B8AEA5; }

  .fila-ancha { grid-template-columns: minmax(0, 2.5fr) minmax(300px, 1fr); }
  .fila-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .fila-igual { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .92rem; margin: 0; }
  .datos dt { color: var(--texto-2); }
  .datos dd { margin: 0; font-weight: 500; }

  /* Formulario de compra */
  .lineas input, .lineas select { width: 100%; padding: 7px 8px; font: inherit; font-size: .92rem; border: 1px solid #CFC8BC; border-radius: 5px; background: #FCFBF9; }
  .lineas td { padding: 7px 6px !important; vertical-align: middle; }
  .lineas th { padding: 10px 6px !important; }
  .lineas td:first-child, .lineas th:first-child { padding-left: 14px !important; }
  .lineas td.n { font-size: 1.05rem !important; }
  .lineas input.num { text-align: right; font-family: var(--num); font-size: 1.05rem; }
  .quitar { background: none; border: 0; color: var(--baja); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 2px 6px; }
  .totales-compra { display: grid; gap: 6px; font-size: .95rem; }
  .totales-compra div { display: flex; justify-content: space-between; gap: 12px; }
  .totales-compra b { font-family: var(--num); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
  .totales-compra .gran-total { border-top: 2px solid var(--nib); padding-top: 8px; margin-top: 4px; }
  .totales-compra .gran-total b { font-size: 2rem; }

  /* Usuario en la barra lateral */
  .usuario-lateral { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; }
  .usuario-lateral b { display: block; color: #fff; }
  .usuario-lateral span { color: #B9ABA0; font-size: .78rem; }
  .usuario-lateral button { margin-top: 8px; background: none; border: 1px solid #5A4739; color: #D8CEC6; border-radius: 5px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: .8rem; }
  .usuario-lateral button:hover { background: var(--nib-2); }

  /* Login */
  .login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
  .login .lado { background: var(--nib); color: #EDE6DF; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
  .login .lado h2 { font-family: var(--num); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; margin: 0; color: #fff; font-weight: 700; max-width: 12ch; }
  .login .lado p { color: #B9ABA0; max-width: 40ch; }
  .login form { align-self: center; justify-self: center; width: min(380px, 90%); display: grid; gap: 16px; }
  .login form h1 { margin: 0; font-size: 1.5rem; }

  @media (max-width: 1100px) { .fila-3 { grid-template-columns: 1fr 1fr; } .fila-ancha { grid-template-columns: 1fr; } }
  @media (max-width: 820px) {
    .form-grid, .fila-3, .fila-igual { grid-template-columns: 1fr; }
    .login { grid-template-columns: 1fr; }
    .login .lado { padding: 28px; }
    .usuario-lateral { display: none; }
  }

  /* ================= Calculadora (hoja BODYWEIT) ================= */
  table.hoja td, table.hoja th { padding: 9px 16px; }
  table.hoja thead th { background: #F6F4EF; color: var(--texto-2); font-weight: 600; border-bottom: 1px solid var(--borde); }
  table.hoja td { border-bottom: 1px solid var(--borde); white-space: normal; }
  table.hoja td small { display: block; color: var(--texto-2); font-size: .76rem; }
  table.hoja td.n { font-family: var(--num); font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
  table.hoja td.nota { color: var(--texto-2); font-size: .8rem; }
  table.hoja tr.entrada td.n { font-size: 1.7rem; font-weight: 700; }
  table.hoja tr.entrada td { background: #FFF8E1; }
  table.hoja tr.sub td { font-weight: 600; }
  table.hoja.precios { border-top: 2px solid var(--nib); }
  table.hoja .lb { color: var(--hoja); font-weight: 700; }
  table.hoja td.dia { text-align: center; line-height: 1.25; font-size: .92rem; padding: 8px 4px; }
  table.rend th, table.rend td { padding: 8px 4px; text-align: center; }
  table.rend { font-size: .9rem; }
  table.rend th:first-child, table.rend td:first-child { padding-left: 14px; }
  table.hoja td.dia .lb { font-size: .85rem; }
  table.hoja td.dia.defecto { background: #EEF4F0; box-shadow: inset 0 -3px 0 var(--hoja); }
  .escala { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding: 14px 18px; }
  .escala div { border: 1px solid var(--borde); border-radius: 6px; padding: 6px 10px; display: flex; justify-content: space-between; font-size: .85rem; }
  .escala b { font-family: var(--num); font-size: 1.05rem; }

  tr.impurezas td { background: #FAF9F6; padding: 10px 14px !important; white-space: normal; }
  .imp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; }
  .imp-grid label { display: grid; gap: 3px; font-size: .8rem; color: var(--texto-2); }
  .imp-total { margin-top: 8px; font-size: .88rem; }
  .l-imp-btn { min-width: 64px; justify-content: center; }
  .lineas select.l-dias { padding: 7px 4px; }
  .resumen-compra { position: sticky; top: 80px; }
  .listo-imprimir { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #EEF5F0; border: 1px solid #BFDCC8; border-radius: 8px; padding: 12px 16px; }

  .rend-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 6px 8px; align-items: center; margin-top: 12px; font-size: .85rem; }
  .rend-grid b { text-align: center; font-weight: 600; color: var(--texto-2); font-size: .78rem; }
  .rend-grid input, .rend-grid select { width: 100%; padding: 6px; font: 500 .95rem var(--num); text-align: right; border: 1px solid #CFC8BC; border-radius: 5px; background: #FCFBF9; }
  .rend-grid select { font-family: inherit; font-size: .8rem; text-align: left; }
  @media (max-width: 1100px) { .resumen-compra { position: static; } }

  /* ================= Calculadora editable e historial ================= */
  .columna { display: grid; gap: 18px; min-width: 0; align-content: start; }
  .etiqueta { display: inline-block; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
  .etiqueta.azul { background: #E6F0FF; color: #111; }
  .etiqueta.amarilla { background: #FFF6CC; color: #111; }
  .signo { font-family: var(--num); font-size: 1.2rem; margin-right: 4px; }
  input.editable {
    width: 110px; padding: 5px 8px; font: 600 1.15rem var(--num); text-align: right; color: var(--nib);
    border: 1.5px solid #CFC8BC; border-radius: 6px; background: #FFFBEA; font-variant-numeric: tabular-nums;
  }
  input.editable:hover:not(:disabled) { border-color: var(--nib); }
  input.editable:focus-visible { outline: 3px solid var(--mazorca); outline-offset: 1px; }
  input.editable:disabled { background: transparent; border-color: transparent; color: var(--nib); opacity: 1; }
  input.editable.cambiado { border-color: var(--mazorca); box-shadow: 0 0 0 3px rgba(217,162,27,.25); }
  table.rend input.editable { width: 100%; max-width: 64px; font-size: .98rem; text-align: center; padding: 4px 2px; display: block; margin: 0 auto 3px; -moz-appearance: textfield; }
  table.rend input.editable::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  table.rend td.izq { padding-right: 2px; }
  .escala label { border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: .85rem; }
  .escala .con-sufijo { display: inline-flex; align-items: center; gap: 3px; font-family: var(--num); font-weight: 600; }
  .escala input.editable { width: 46px; font-size: .98rem; padding: 3px 4px; }
  .escala label { padding: 6px 8px; min-width: 0; }
  .escala { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .escala label > span:first-child { white-space: nowrap; }
  .escala input.editable { -moz-appearance: textfield; }
  .escala input.editable::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .barra-guardar {
    position: sticky; bottom: 14px; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #FFF6CC; border: 1.5px solid var(--nib); border-radius: 10px; padding: 12px 16px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.35);
  }
  .barra-guardar[hidden] { display: none; }
  .badge.mercado { background: #E6F0FF; color: #111; }
  .badge.parametros { background: #FFF6CC; color: #111; }

  /* Botón para cambiar de diseño */
  .tema-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
    background: #fff; color: var(--nib); border: 1.5px solid #CFC8BC; border-radius: 20px; padding: 5px 12px 5px 6px; }
  .tema-btn .pista { width: 34px; height: 20px; border-radius: 20px; background: #E7E2D9; position: relative; transition: background .2s; }
  .tema-btn .pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--nib); transition: transform .2s; }
  html[data-tema="nuevo"] .tema-btn .pista { background: #DCEBFF; }
  html[data-tema="nuevo"] .tema-btn .pista::after { transform: translateX(14px); background: #111; }

  /* =====================================================================
     DISEÑO NUEVO (se activa con el botón "Diseño")
     Letra negra, etiquetas en azul claro y amarillo claro, sin franjas ni
     rellenos de color, tarjetas con sombra azul oscuro abajo y botones con marco.
     ===================================================================== */
  html[data-tema="nuevo"] {
    --nib: #111111; --nib-2: #111111; --fondo: #F6F8FB; --panel: #FFFFFF; --borde: #E3E7EE; --texto-2: #3F3F46;
    --mazorca: #111111; --hoja: #111111; --sube: #111111; --baja: #B42318;
    --num: "Archivo", system-ui, sans-serif;
    --azul: #E6F0FF; --amarillo: #FFF6CC; --rojo-suave: #FDECEC; --sombra: 0 7px 16px -8px rgba(15, 40, 85, .55);
  }
  html[data-tema="nuevo"] body { background: var(--fondo); color: #111; letter-spacing: -.005em; }

  /* Barra lateral blanca */
  html[data-tema="nuevo"] .lateral { background: #fff; color: #111; border-right: 1px solid var(--borde); }
  html[data-tema="nuevo"] .marca { border-bottom-color: var(--borde); }
  html[data-tema="nuevo"] .marca b { color: #111; }
  html[data-tema="nuevo"] .marca span, html[data-tema="nuevo"] .grupo, html[data-tema="nuevo"] .lateral .pie { color: #52525B; }
  html[data-tema="nuevo"] nav a { color: #111; border-radius: 10px; font-weight: 500; }
  html[data-tema="nuevo"] nav a:hover { background: #F3F5F9; }
  html[data-tema="nuevo"] nav a[aria-current="page"] { background: var(--azul); color: #111; box-shadow: none; font-weight: 700; }
  html[data-tema="nuevo"] .usuario-lateral { border-top-color: var(--borde); }
  html[data-tema="nuevo"] .usuario-lateral b { color: #111; }
  html[data-tema="nuevo"] .usuario-lateral span { color: #52525B; }
  html[data-tema="nuevo"] .usuario-lateral button { color: #111; border: 1.5px solid #111; border-radius: 8px; background: #fff; }
  html[data-tema="nuevo"] .usuario-lateral button:hover { background: var(--azul); }

  /* Barra superior */
  html[data-tema="nuevo"] .superior { background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom-color: var(--borde); }
  html[data-tema="nuevo"] .ruta { color: #52525B; }
  html[data-tema="nuevo"] .ruta h1 { letter-spacing: -.02em; }
  html[data-tema="nuevo"] .reloj { color: #111; font-family: var(--num); font-size: 1rem; }

  /* Tarjetas con sombra azul oscuro abajo */
  html[data-tema="nuevo"] .panel, html[data-tema="nuevo"] .kpis {
    border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); background: #fff;
  }
  html[data-tema="nuevo"] .panel > header { border-bottom-color: var(--borde); }
  html[data-tema="nuevo"] .panel h2 { letter-spacing: -.01em; }
  html[data-tema="nuevo"] .panel header small, html[data-tema="nuevo"] .tenue, html[data-tema="nuevo"] .nota,
  html[data-tema="nuevo"] .kpi .rotulo, html[data-tema="nuevo"] .kpi .detalle { color: #52525B; }
  html[data-tema="nuevo"] .formula, html[data-tema="nuevo"] .pie-form { background: #fff; border-top-color: var(--borde); border-radius: 0 0 14px 14px; }
  html[data-tema="nuevo"] .kpi { border-left-color: var(--borde); }

  /* Tablas sin franjas ni rellenos */
  html[data-tema="nuevo"] thead th, html[data-tema="nuevo"] table.lista thead th, html[data-tema="nuevo"] table.hoja thead th {
    background: #fff; color: #111; font-weight: 700; border-bottom: 1.5px solid #111;
  }
  html[data-tema="nuevo"] tbody td, html[data-tema="nuevo"] table.hoja td { border-bottom-color: var(--borde); color: #111; }
  html[data-tema="nuevo"] table.lista tbody tr:hover td { background: #FAFBFD; }
  html[data-tema="nuevo"] table.lista tfoot td { background: #fff; border-top: 1.5px solid #111; }
  html[data-tema="nuevo"] td.n.lb, html[data-tema="nuevo"] table.hoja .lb { background: transparent; color: #111; }
  html[data-tema="nuevo"] table.hoja tr.entrada td { background: transparent; }
  html[data-tema="nuevo"] table.hoja.precios { border-top: 1.5px solid #111; }
  html[data-tema="nuevo"] table.hoja td.dia.defecto { background: transparent; box-shadow: none; }
  html[data-tema="nuevo"] table.hoja td.dia.defecto input.editable { border-color: #111; }
  html[data-tema="nuevo"] tr.impurezas td { background: #fff; }

  /* Botones con marco visible */
  html[data-tema="nuevo"] .btn { background: var(--azul); color: #111; border: 1.5px solid #111; border-radius: 10px; }
  html[data-tema="nuevo"] .btn:hover { background: #D3E4FF; }
  html[data-tema="nuevo"] .btn-sec { background: #fff; }
  html[data-tema="nuevo"] .btn-sec:hover { background: #F3F5F9; }
  html[data-tema="nuevo"] .btn-peligro { background: var(--rojo-suave); color: #111; }
  html[data-tema="nuevo"] .btn-link { color: #B42318; }
  html[data-tema="nuevo"] .quitar { color: #B42318; }
  html[data-tema="nuevo"] .tema-btn { border-color: #111; }

  /* Campos */
  html[data-tema="nuevo"] .campo input, html[data-tema="nuevo"] .campo select, html[data-tema="nuevo"] .campo textarea,
  html[data-tema="nuevo"] .control, html[data-tema="nuevo"] .lineas input, html[data-tema="nuevo"] .lineas select,
  html[data-tema="nuevo"] .param input, html[data-tema="nuevo"] .rend-grid input, html[data-tema="nuevo"] .rend-grid select {
    background: #fff; border: 1px solid #A1A1AA; border-radius: 8px; color: #111;
  }
  html[data-tema="nuevo"] input.editable { background: var(--amarillo); border: 1.5px solid #A1A1AA; border-radius: 8px; color: #111; }
  html[data-tema="nuevo"] input.editable:disabled { background: transparent; border-color: transparent; }
  html[data-tema="nuevo"] input.editable.cambiado { border-color: #111; box-shadow: 0 0 0 3px var(--azul); }
  html[data-tema="nuevo"] .escala label { border-color: var(--borde); border-radius: 10px; }
  html[data-tema="nuevo"] .check input { accent-color: #111; }
  html[data-tema="nuevo"] :focus-visible { outline-color: #2563EB !important; }

  /* Números y totales */
  html[data-tema="nuevo"] .kpi .valor, html[data-tema="nuevo"] td.n, html[data-tema="nuevo"] .totales-compra b { font-weight: 700; letter-spacing: -.02em; }
  html[data-tema="nuevo"] .totales-compra .gran-total { border-top: 1.5px solid #111; }

  /* Etiquetas: solo azul claro y amarillo claro; alertas en rojo suave */
  html[data-tema="nuevo"] .badge.pagada, html[data-tema="nuevo"] .badge.admin, html[data-tema="nuevo"] .badge.mercado { background: var(--azul); color: #111; }
  html[data-tema="nuevo"] .badge.pendiente, html[data-tema="nuevo"] .badge.cajero, html[data-tema="nuevo"] .badge.parametros,
  html[data-tema="nuevo"] .badge.inactivo { background: var(--amarillo); color: #111; }
  html[data-tema="nuevo"] .badge.anulada { background: var(--rojo-suave); color: #111; }
  html[data-tema="nuevo"] .estado { color: #111; }
  html[data-tema="nuevo"] .estado.vivo { background: var(--azul); }
  html[data-tema="nuevo"] .estado.cerrado { background: var(--amarillo); }
  html[data-tema="nuevo"] .estado.error { background: var(--rojo-suave); }
  html[data-tema="nuevo"] .exito { background: var(--azul); border-color: #BFD5FA; color: #111; border-radius: 10px; }
  html[data-tema="nuevo"] .aviso { background: var(--amarillo); border-color: #EBDD9A; color: #111; border-radius: 10px; }
  html[data-tema="nuevo"] .errores { background: var(--rojo-suave); border-color: #F4C7C3; color: #111; border-radius: 10px; }
  html[data-tema="nuevo"] .error-campo { color: #B42318; }
  html[data-tema="nuevo"] .listo-imprimir { background: var(--azul); border-color: #BFD5FA; border-radius: 12px; }
  html[data-tema="nuevo"] .barra-guardar { background: var(--amarillo); border-radius: 12px; box-shadow: var(--sombra); }
  html[data-tema="nuevo"] .paginacion a, html[data-tema="nuevo"] .paginacion span.actual { border: 1.5px solid #111; border-radius: 8px; color: #111; }
  html[data-tema="nuevo"] a { color: #111; }
  html[data-tema="nuevo"] .var.sube, html[data-tema="nuevo"] .var.baja { color: #111; }

  /* Login */
  html[data-tema="nuevo"] .login { background: var(--fondo); }
  html[data-tema="nuevo"] .login .lado { background: #fff; color: #111; border-right: 1px solid var(--borde); }
  html[data-tema="nuevo"] .login .lado h2 { color: #111; }
  html[data-tema="nuevo"] .login .lado p, html[data-tema="nuevo"] .login .lado small { color: #52525B !important; }
  html[data-tema="nuevo"] .login form { background: #fff; padding: 28px; border-radius: 14px; border: 1px solid var(--borde); box-shadow: var(--sombra); }
  /* Escala: "Grado N" arriba y la casilla abajo, para que quepa en la columna */
  .escala { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .escala label { flex-direction: column; align-items: flex-start; gap: 4px; padding: 7px 8px; }
  .escala label > span:first-child { font-size: .78rem; }
  .escala input.editable { width: 44px; }

  /* =====================================================================
     MENÚ FIJO Y PANTALLA MÁS COMPACTA (ambos diseños)
     - El menú lateral se queda quieto al bajar por la página.
     - Letras y casillas más pequeñas, y más espacio entre los cuadros.
     ===================================================================== */
  body { font-size: 14px; }
  .lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; align-self: start; padding: 16px 12px; }
  .marca { padding-bottom: 14px; }
  .marca b { font-size: 1.05rem; }
  nav a { padding: 7px 10px; font-size: .88rem; }
  .grupo { padding: 12px 10px 4px; font-size: .72rem; }
  .usuario-lateral { font-size: .8rem; }

  .superior { padding: 10px 24px; }
  .ruta { font-size: .78rem; }
  .ruta h1 { font-size: 1.1rem; }
  .reloj { font-size: .95rem; }
  .estado { font-size: .78rem; padding: 4px 10px; }
  .tema-btn { font-size: .78rem; padding: 4px 10px 4px 5px; }
  .tema-btn .pista { width: 30px; height: 18px; }
  .tema-btn .pista::after { width: 14px; height: 14px; }
  html[data-tema="nuevo"] .tema-btn .pista::after { transform: translateX(12px); }
  .btn { font-size: .82rem; padding: 7px 12px; }
  .btn-chico { font-size: .76rem; padding: 4px 9px; }

  /* Más separación entre cuadros */
  .contenido { padding: 24px 28px 48px; gap: 26px; }
  .fila, .fila-igual, .fila-3, .columna { gap: 26px; }

  /* Cuadros */
  .panel > header { padding: 11px 16px; }
  .panel h2 { font-size: .95rem; }
  .panel header small { font-size: .74rem; }
  .cuerpo { padding: 12px 16px; }
  .formula { padding: 8px 16px; font-size: .74rem; }
  .pie-form { padding: 11px 16px; }

  /* Hoja de la calculadora */
  table.hoja td, table.hoja th { padding: 6px 14px; font-size: .86rem; }
  table.hoja td small { font-size: .7rem; }
  table.hoja td.n { font-size: 1rem; }
  table.hoja tr.entrada td.n { font-size: 1.3rem; }
  table.hoja td.nota { font-size: .72rem; }
  .etiqueta { font-size: .68rem; padding: 1px 8px; }
  .signo { font-size: .95rem; }
  input.editable { width: 88px; font-size: .95rem; padding: 3px 7px; }
  table.rend th, table.rend td { padding: 6px 4px; font-size: .8rem; }
  table.rend input.editable { max-width: 56px; font-size: .88rem; padding: 3px 2px; }
  table.hoja td.dia .lb { font-size: .74rem; }
  .escala { gap: 6px; padding: 10px 14px; }
  .escala label { padding: 5px 7px; }
  .escala label > span:first-child { font-size: .7rem; }
  .escala input.editable { width: 40px; font-size: .88rem; }

  /* Listados y compra */
  table.lista thead th, thead th { padding: 8px 14px; font-size: .76rem; }
  table.lista tbody td { padding: 7px 14px; font-size: .84rem; }
  table.lista td.n { font-size: .95rem; }
  .lineas td { padding: 5px 6px !important; }
  .lineas input, .lineas select { padding: 5px 6px; font-size: .84rem; }
  .lineas input.num { font-size: .92rem; }
  .lineas td.n { font-size: .92rem !important; }
  .imp-grid label { font-size: .72rem; }
  .imp-total { font-size: .8rem; }
  .totales-compra { font-size: .86rem; gap: 4px; }
  .totales-compra b { font-size: 1rem; }
  .totales-compra .gran-total b { font-size: 1.5rem; }
  .campo > label, .campo > span { font-size: .78rem; }
  .campo input, .campo select, .campo textarea, .control { padding: 6px 9px; font-size: .86rem; }
  .form-grid { gap: 10px 14px; }

  /* Indicadores */
  .kpi { padding: 12px 16px; }
  .kpi .rotulo, .kpi .detalle { font-size: .74rem; }
  .kpi .valor { font-size: 1.5rem; }
  .kpi:first-child .valor { font-size: 2rem; }

  /* Mensajes */
  .exito, .aviso, .errores { font-size: .84rem; padding: 8px 12px; }
  .barra-guardar { font-size: .84rem; padding: 9px 14px; }

  @media (max-width: 820px) {
    .lateral { position: static; height: auto; overflow: visible; }
    .contenido { padding: 16px 14px 36px; gap: 18px; }
  }

  /* =====================================================================
     CALCULADORA EN UNA SOLA VENTANA
     ===================================================================== */
  .calc-grid {
    display: grid; gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .95fr);
    grid-template-areas: "conv precios lado" "hist hist hist";
  }
  .calc-grid > .panel:nth-child(1) { grid-area: conv; }
  .calc-grid > .panel:nth-child(2) { grid-area: precios; }
  .calc-grid > .columna { grid-area: lado; gap: 18px; }
  .calc-grid > .historial-panel { grid-area: hist; }
  .calc-grid .panel { align-self: stretch; }
  .calc-grid .columna .panel:last-child { flex: 1; }

  table.hoja.compacta { width: 100%; }
  table.hoja.compacta td, table.hoja.compacta th { padding: 5px 12px; font-size: .84rem; line-height: 1.25; }
  table.hoja.compacta td small { display: block; font-size: .68rem; margin-top: 1px; }
  table.hoja.compacta td small.enlinea { display: inline; }
  table.hoja.compacta td.n { font-size: .98rem; text-align: right; }
  table.hoja.compacta td.n.grande { font-size: 1.25rem; font-weight: 700; }
  table.hoja.compacta tr.fijo td { padding-top: 4px; padding-bottom: 4px; }
  table.hoja.compacta tr.resultado td { border-top: 1.5px solid var(--nib); border-bottom: 0; }
  table.hoja.compacta input.editable { width: 80px; }
  table.rend.compacta td, table.rend.compacta th { padding: 5px 3px; text-align: center; }
  table.rend.compacta td.izq, table.rend.compacta th.izq { text-align: left; padding-left: 12px; }

  /* Valores bloqueados hasta presionar "Editar" */
  .calc-grid input.editable:disabled { background: transparent; border-color: transparent; }
  .calc-grid.editando input.editable { animation: resaltar 1s ease-out 1; }
  @keyframes resaltar { from { box-shadow: 0 0 0 4px rgba(37, 99, 235, .35); } }
  @media (prefers-reduced-motion: reduce) { .calc-grid.editando input.editable { animation: none; } }

  /* Historial con su propia barra de desplazamiento */
  .historial-caja { overflow-x: auto; }
  .historial-panel .paginacion { padding: 7px 16px; font-size: .78rem; }
  .historial-panel .paginacion a, .historial-panel .paginacion span.actual, .historial-panel .paginacion span.deshab { padding: 3px 10px; }
  .historial-caja thead th { position: sticky; top: 0; z-index: 1; background: #F6F4EF; }
  html[data-tema="nuevo"] .historial-caja thead th { background: #fff; }
  .historial-caja table.lista tbody td { padding: 5px 14px; font-size: .8rem; }
  .historial-caja table.lista td.n { font-size: .86rem; }

  /* Botones de la barra superior */
  #accionesVer, #accionesEditar { display: inline-flex; gap: 8px; }
  #accionesVer[hidden], #accionesEditar[hidden] { display: none; }
  .btn-principal { background: var(--nib); color: #fff; }
  .btn-principal[aria-disabled] { opacity: .45; cursor: not-allowed; }
  .btn-guardar { background: #1F5B38; color: #fff; }
  html[data-tema="nuevo"] .btn-principal { background: var(--azul); color: #111; }
  html[data-tema="nuevo"] .btn-guardar { background: var(--amarillo); color: #111; }

  /* En pantallas angostas los cuadros se apilan */
  @media (max-width: 1200px) {
    .calc-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "conv precios" "lado lado" "hist hist"; }
    .calc-grid > .columna { grid-template-columns: 1fr 1fr; display: grid; }
  }
  @media (max-width: 760px) {
    .calc-grid { grid-template-columns: 1fr; grid-template-areas: "conv" "precios" "lado" "hist"; }
    .calc-grid > .columna { grid-template-columns: 1fr; }
  }

  /* Ajuste fino para que la calculadora con 10 registros quepa en una ventana */
  .contenido:has(.calc-grid) { padding-top: 14px; padding-bottom: 14px; gap: 14px; }
  .calc-grid { gap: 14px; }
  .calc-grid > .columna { gap: 14px; }
  .calc-grid .panel > header { padding: 8px 14px; }
  table.hoja.compacta td, table.hoja.compacta th { padding-top: 3px; padding-bottom: 3px; }
  table.hoja.compacta td.n.grande { font-size: 1.15rem; }
  .calc-grid .escala { padding: 8px 12px; }
  .calc-grid .escala label { padding: 3px 7px; }
  .historial-caja table.lista thead th { padding-top: 5px; padding-bottom: 5px; }
  .historial-caja table.lista tbody td { padding-top: 2px; padding-bottom: 2px; }
  .historial-caja .badge { padding: 0 8px; font-size: .7rem; }

  /* Humedad y día dentro de "Precios de compra" (siempre se pueden cambiar) */
  .control-fila { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .7rem; color: var(--texto-2); flex-wrap: wrap; }
  .control-fila input.simulador, .control-fila select.simulador {
    font: 600 .8rem var(--num); color: var(--nib); background: #FFFBEA; border: 1.5px solid #CFC8BC; border-radius: 6px; padding: 1px 4px;
  }
  .control-fila input.simulador { width: 48px; text-align: right; -moz-appearance: textfield; }
  .control-fila input.simulador::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .control-fila select.simulador { font-family: inherit; font-size: .74rem; }
  .control-fila .simulador:focus-visible { outline: 2px solid var(--mazorca); outline-offset: 1px; }
  html[data-tema="nuevo"] .control-fila input.simulador, html[data-tema="nuevo"] .control-fila select.simulador { background: var(--amarillo); border-color: #A1A1AA; }

  /* Casillas bloqueadas: se nota que son editables (borde punteado) */
  .calc-grid input.editable:disabled { border: 1px dashed #CFC8BC; background: transparent; }
  html[data-tema="nuevo"] .calc-grid input.editable:disabled { border-color: #C4C4CC; }
  .calc-grid.editando .pista-editar { display: none; }
  .conceptos-escala { line-height: 1.35; font-size: .68rem !important; padding: 6px 12px !important; }
  .conceptos-escala span { font-weight: 600; color: var(--nib); }
  /* Escala: número de grado + qué significa */
  .escala { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .escala .grado-nombre { font-size: .72rem; white-space: nowrap; }
  .escala .grado-nombre b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; border-radius: 50%; font-size: .68rem; margin-right: 3px;
    background: #F1EDE6; }
  html[data-tema="nuevo"] .escala .grado-nombre b { background: var(--azul); }

  /* Impurezas: 0 Corazón, 1 Grano tierno… con su % (calculadora) */
  .impurezas-lista { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .impurezas-lista label { flex-direction: row; align-items: center; justify-content: space-between; }
  .impurezas-lista .grado-nombre { white-space: normal; line-height: 1.2; }

  /* Impurezas en la compra: casillas para marcar */
  .imp-titulo { font-size: .76rem; font-weight: 600; margin-bottom: 6px; }
  .imp-check { display: flex !important; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px;
    background: #fff; cursor: pointer; color: var(--nib) !important; font-size: .8rem !important; }
  .imp-check input { width: 16px; height: 16px; accent-color: var(--nib); }
  .imp-check b { font-size: .72rem; margin-right: 2px; }
  .imp-check em { font-style: normal; font-weight: 700; margin-left: 4px; }
  .imp-check:has(input:checked) { border-color: var(--nib); background: #FFF6CC; }
  .impurezas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; }
  .impurezas-lista label { gap: 6px; padding: 3px 7px !important; min-width: 0; }
  .impurezas-lista .grado-nombre { flex: 1; min-width: 0; font-size: .72rem; white-space: normal; line-height: 1.15; }
  .impurezas-lista .con-sufijo { flex: none; }
  .impurezas-lista input.editable { width: 38px; }

  /* Impurezas: el nombre baja de línea si no alcanza y nunca se monta sobre la casilla */
  .escala.impurezas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
  .escala.impurezas-lista label {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
    padding: 5px 8px !important; min-height: 34px;
  }
  .escala.impurezas-lista label > span.grado-nombre {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    white-space: normal; overflow: visible; line-height: 1.2; font-size: .74rem;
  }
  .escala.impurezas-lista .grado-nombre b { flex: none; margin: 0; }
  .escala.impurezas-lista .con-sufijo { justify-self: end; white-space: nowrap; }
  .escala.impurezas-lista input.editable { width: 40px; }
  /* Si la última queda sola, ocupa todo el ancho */
  .escala.impurezas-lista label:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Buscador de productor */
  .buscador { position: relative; }
  .buscador input[type="search"] { width: 100%; }
  .buscador-lista {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
    background: #fff; border: 1px solid #CFC8BC; border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); max-height: 280px; overflow-y: auto;
  }
  .buscador-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .86rem; }
  .buscador-lista li span { color: var(--texto-2); font-size: .8rem; }
  .buscador-lista li:hover, .buscador-lista li.activo { background: #FFF6CC; }
  .buscador-lista li.sin-resultados { cursor: default; color: var(--texto-2); display: block; }
  .buscador-lista li.sin-resultados:hover { background: transparent; }
  .buscador-elegido { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px;
    border: 1.5px solid var(--nib); border-radius: 8px; background: #FFFBEA; }
  .buscador-elegido[hidden] { display: none; }
  html[data-tema="nuevo"] .buscador-lista li:hover, html[data-tema="nuevo"] .buscador-lista li.activo { background: var(--azul); }
  html[data-tema="nuevo"] .buscador-elegido { background: var(--azul); border-color: #111; }

  /* Pestañas Órdenes / Trazabilidad */
  .pestanas { display: flex; gap: 4px; background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 4px; align-self: flex-end; }
  .pestanas a { padding: 6px 12px; border-radius: 7px; text-decoration: none; color: var(--nib); font-size: .82rem; font-weight: 600; }
  .pestanas a[aria-current="page"] { background: #FFF6CC; }
  html[data-tema="nuevo"] .pestanas a[aria-current="page"] { background: var(--azul); }

  /* Tabla de trazabilidad (como el Excel) */
  table.trazabilidad th, table.trazabilidad td { padding: 5px 9px !important; font-size: .78rem; white-space: nowrap; }
  table.trazabilidad td.n { font-size: .84rem !important; }
  table.trazabilidad td small { display: block; font-size: .66rem; color: var(--texto-2); white-space: normal; }
  table.trazabilidad tr.inicio-orden td { border-top: 1.5px solid #CFC8BC; }
  table.trazabilidad td.pago { vertical-align: middle; background: #FCFBF8; }
  table.trazabilidad tr.anulada td:not(.pago) { text-decoration: line-through; color: #9A8F86; }
  table.trazabilidad .saldo-pendiente { color: var(--baja); }
  table.trazabilidad tfoot td { font-size: .82rem; white-space: nowrap; }
  html[data-tema="nuevo"] table.trazabilidad td.pago { background: #fff; }