/* ===========================================================
   Snackcenter · Visualizador de Planogramas
   Tema azul. Layout: sidebar de rutas + panel principal.
   =========================================================== */

:root {
  --blue-900: #0b2545;
  --blue-800: #103466;
  --blue-700: #14467f;
  --blue-600: #1b5fb0;
  --blue-500: #2a7de1;
  --blue-300: #7fb2f0;
  --blue-100: #e7f1fd;
  --blue-50:  #f3f8ff;

  --orange: #f5821f; /* acento del logo Snackcenter */

  --ink: #1c2733;
  --muted: #5b6b7b;
  --line: #d8e3f0;
  --bg: #eef3f9;
  --white: #ffffff;

  --radius: 14px;
  --shadow: 0 6px 20px rgba(11, 37, 69, 0.08);
  --shadow-lg: 0 12px 34px rgba(11, 37, 69, 0.14);
}

* { box-sizing: border-box; }

/* El atributo hidden SIEMPRE gana, aunque la clase defina display propio. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.app {
  display: grid;
  grid-template-columns: 268px 1fr;
  height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: linear-gradient(180deg, var(--blue-900), var(--blue-800));
  color: #dce8f7;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.brand__logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  background: var(--white);
  border-radius: 10px;
  padding: 5px;
}
.brand__name {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--white);
}

/* Navegación entre vistas */
.views {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.view-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #dce8f7;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.view-btn:hover { background: rgba(255, 255, 255, 0.08); }
.view-btn.is-active {
  background: var(--blue-500);
  border-color: var(--blue-300);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(42, 125, 225, 0.4);
}
.view-btn__ico { font-size: 1rem; flex: none; }

.routes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
}
.routes__loading { color: var(--blue-300); font-size: .9rem; padding: 6px 10px; }

/* Grupos por responsable (acordeón) */
.group { display: flex; flex-direction: column; margin-bottom: 4px; }
.group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 10px;
  padding: 11px 12px;
  cursor: pointer;
  transition: background .15s;
}
.group__head:hover { background: rgba(255, 255, 255, 0.10); }
.group.is-open > .group__head { background: rgba(255, 255, 255, 0.08); }
.group__chevron {
  color: var(--blue-300);
  font-size: .7rem;
  transition: transform .18s;
  flex: none;
}
.group.is-open > .group__head .group__chevron { transform: rotate(90deg); }
.group__name {
  flex: 1;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 800;
  color: #cfe0f5;
}
.group__count {
  font-size: .68rem;
  font-weight: 700;
  color: var(--blue-100);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 1px 8px;
  flex: none;
}

/* Lista de rutas: oculta hasta abrir el grupo */
.group__routes {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0 6px 10px;
}
.group.is-open > .group__routes { display: flex; }

.route-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  color: #e7f0fb;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.route-btn:hover { background: rgba(255, 255, 255, 0.10); }
.route-btn:active { transform: translateY(1px); }
.route-btn.is-active {
  background: var(--blue-500);
  border-color: var(--blue-300);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(42, 125, 225, 0.45);
}
.route-btn .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  flex: none;
}

.sidebar__foot {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 12px;
}
.kpi { color: var(--blue-300); font-size: .78rem; line-height: 1.5; }

/* ---------- Main ---------- */
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Vistas (Planogramas / Catálogo / En Descuento) */
.view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.view.is-active { display: flex; }

.topbar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 22px 30px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.topbar__titles { margin-right: auto; }
.topbar__route {
  margin: 0;
  font-size: 1.55rem;
  color: var(--blue-800);
}
.topbar__sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .92rem;
}
.topbar__selector { display: flex; flex-direction: column; gap: 6px; min-width: 230px; }
.topbar__selector label {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  font-weight: 700;
}
#machineSelect {
  appearance: none;
  background: var(--blue-50) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314467f' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 38px 11px 14px;
  font-size: .98rem;
  font-weight: 600;
  color: var(--blue-800);
  cursor: pointer;
}
#machineSelect:disabled { opacity: .55; cursor: not-allowed; }
#machineSelect:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }

/* Botones */
.btn {
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue-500); color: var(--white); box-shadow: 0 4px 14px rgba(42,125,225,.35); }
.btn--primary:hover { background: var(--blue-600); }
.btn--primary:disabled { opacity: .6; cursor: default; }
.btn--ghost { background: var(--blue-50); color: var(--blue-700); }
.btn--ghost:hover { background: var(--blue-100); }
#addMachineBtn { align-self: flex-end; }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 37, 69, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  padding: 24px;
}
.modal__title { margin: 0 0 2px; color: var(--blue-800); font-size: 1.3rem; }
.modal__sub { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.modal__field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.modal__field > label {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 700; color: var(--muted);
}
.modal select, .modal input[type="text"] {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: .96rem;
  color: var(--ink);
  width: 100%;
}
.modal select:focus, .modal input[type="text"]:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100);
}
.am-mode { display: flex; gap: 18px; }
.am-radio { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); cursor: pointer; }
.am-hint { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.req { color: #e5484d; font-weight: 800; }

/* ---------- Pantalla de acceso ---------- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--blue-900), var(--blue-700));
  padding: 20px;
}
.login {
  background: var(--white);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 38px 34px 32px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.login__logo { width: 78px; height: 78px; object-fit: contain; margin-bottom: 10px; }
.login__title { margin: 0; font-size: 1.6rem; color: var(--blue-800); }
.login__sub { margin: 6px 0 24px; color: var(--muted); font-size: .92rem; }
.login__form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.login__label {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 700; color: var(--muted);
}
.login__input {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  width: 100%;
}
.login__input:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100);
}
.login__error {
  margin: 4px 0 0; padding: 9px 12px; border-radius: 8px;
  background: #fff1f1; color: #c0303a; font-size: .86rem; font-weight: 600;
}
.login__btn { margin-top: 10px; padding: 13px; font-size: 1rem; }

/* Salir */
.sidebar__logout {
  display: block;
  margin-top: 8px;
  color: var(--blue-300);
  font-size: .78rem;
  text-decoration: none;
  font-weight: 600;
}
.sidebar__logout:hover { color: var(--white); text-decoration: underline; }
.am-sublabel {
  margin: 4px 0 -2px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--blue-700);
}
.modal__error {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px;
  background: #fff1f1; color: #c0303a; font-size: .86rem; font-weight: 600;
}
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------- Board (planogramas lado a lado) ---------- */
.board {
  flex: 1;
  overflow: auto;
  padding: 26px 30px 40px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.empty {
  margin: auto;
  text-align: center;
  color: var(--muted);
  max-width: 360px;
}
.empty__icon { font-size: 2.6rem; margin-bottom: 10px; }

/* Tarjeta de un planograma */
.plano {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 470px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.plano__head {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  color: var(--white);
  padding: 16px 18px;
}
.plano__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
}
.plano__sede {
  margin: 4px 0 0;
  font-size: .85rem;
  color: var(--blue-100);
}
.plano__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--blue-50);
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted);
}
.plano__meta .badge {
  background: var(--blue-100);
  color: var(--blue-700);
  border-radius: 20px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: .72rem;
}

/* Tabla de selecciones (estética, no grilla de Excel) */
.rows__header,
.row {
  display: grid;
  grid-template-columns: 46px 1fr 50px 72px 22px;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
}

/* Separador entre decenas de selección (11-19 | 21-29 | 30-39 …) */
.row.row--sep { border-top: 2px solid var(--blue-300); }
.rows__header {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.rows { overflow: hidden; }
.row { border-bottom: 1px solid #eef2f7; font-size: .9rem; }
.row:nth-child(even) { background: #fafcff; }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--blue-50); }

.row .art { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0; }
.row .flag {
  color: var(--orange);
  font-size: .82rem;
  cursor: help;
  flex: none;
}
.row .price-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 1px; }
.row .cur { color: var(--blue-800); font-weight: 700; font-size: .9rem; }

/* ---------- Celdas editables ---------- */
.cell {
  font: inherit;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 7px;
  padding: 4px 6px;
  width: 100%;
  min-width: 0;
  color: inherit;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.cell:hover { background: #eef4fc; cursor: text; }
.cell:focus {
  outline: none;
  border-color: var(--blue-500);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--blue-100);
}

.cell--sel {
  width: 38px;
  text-align: center;
  background: var(--blue-600);
  color: var(--white);
  font-weight: 700;
  font-size: .82rem;
  border-radius: 7px;
  padding: 4px 2px;
}
.cell--sel:hover { background: var(--blue-700); }
.cell--sel:focus { background: var(--white); color: var(--blue-800); }

/* Artículo: editable (contenteditable) y con salto de línea para verlo completo. */
.cell--art {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  min-width: 0;
  width: 100%;
  white-space: normal;
  word-break: break-word;
}
.cell--cap { text-align: center; color: var(--muted); }
.cell--price { text-align: right; font-weight: 700; color: var(--blue-800); width: 62px; }

/* Estados de guardado */
.cell.saving { border-color: var(--blue-300); }
.cell.saved  { border-color: #2bb673; background: #ecfdf3; }
.cell.error  { border-color: #e5484d; background: #fff1f1; }

/* Toast de error */
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: #2b2f36;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: .9rem;
  max-width: 460px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Botón eliminar selección (por fila) */
.row-del {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.row:hover .row-del { opacity: 1; }
.row-del:hover { background: #fdecee; color: #d33; }

/* Botón agregar selección */
.add-sel {
  margin: 8px 18px 14px;
  padding: 9px;
  border: 1.5px dashed var(--blue-300);
  background: var(--blue-50);
  color: var(--blue-700);
  border-radius: 9px;
  font-weight: 700;
  font-size: .86rem;
  cursor: pointer;
  transition: background .12s;
}
.add-sel:hover { background: var(--blue-100); }

/* Hint de máquina nueva */
.plano__hint { margin: 0; padding: 8px 18px; color: var(--orange); font-size: .82rem; background: #fff8f0; }

/* Cabecera de planograma con botón eliminar máquina */
.plano__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plano__head-main { min-width: 0; }
.plano__del {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: .9rem;
  cursor: pointer;
  flex: none;
  transition: background .12s;
}
.plano__del:hover { background: rgba(255, 90, 90, 0.55); }

/* Sello de actualización */
.plano__foot {
  margin-top: auto;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.plano__foot .clock { color: var(--blue-500); }
.plano__foot.no-data { color: var(--orange); }
.plano__foot strong { color: var(--ink); }

/* Estado de carga */
.loading {
  margin: auto;
  color: var(--muted);
  font-weight: 600;
  padding: 40px;
}

/* ---------- Paneles con tabla (Catálogo / En Descuento) ---------- */
.panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 30px 28px;
  overflow: hidden;
}
.table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel__note { color: var(--muted); font-size: .82rem; margin: 12px 2px 0; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
table.grid thead th {
  position: sticky;
  top: 0;
  background: var(--blue-700);
  color: var(--white);
  text-align: left;
  font-weight: 700;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 12px 16px;
  white-space: nowrap;
  z-index: 1;
}
table.grid tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid #eef2f7;
  color: var(--ink);
}
table.grid tbody tr:nth-child(even) { background: #fafcff; }
table.grid tbody tr:hover { background: var(--blue-50); }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--blue-800); }
table.grid thead th.num { color: var(--white); }

/* Precio editable en el catálogo */
.cell--catalog {
  width: 84px;
  text-align: right;
  font: inherit;
  font-weight: 700;
  color: var(--blue-800);
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 7px;
  padding: 4px 6px;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.cell--catalog:hover { background: var(--blue-50); cursor: text; }
.cell--catalog:focus { outline: none; border-color: var(--blue-500); background: var(--white); box-shadow: 0 0 0 3px var(--blue-100); }
.cell--catalog.saving { border-color: var(--blue-300); }
.cell--catalog.saved  { border-color: #2bb673; background: #ecfdf3; }
.cell--catalog.error  { border-color: #e5484d; background: #fff1f1; }
table.grid .num .cur { color: var(--blue-800); font-weight: 700; margin-right: 1px; }

/* Etiquetas de diferencia en "En Descuento" */
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}
.tag--down { background: #e9f9f0; color: #1a8a55; }   /* precio bajo el oficial */
.tag--up   { background: #fdeef0; color: #c0303a; }   /* precio sobre el oficial */

/* ---------- Modo edición ---------- */
.editbar {
  padding: 0 0 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.btn--edit {
  width: 100%;
  background: rgba(255, 255, 255, 0.10);
  color: var(--white);
  border: 1px dashed rgba(255, 255, 255, 0.35);
}
.btn--edit:hover { background: rgba(255, 255, 255, 0.18); }
.editbar__active { display: flex; flex-direction: column; gap: 8px; }
.editbar__label {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  color: #ffd9a8;
  text-align: center;
}
.editbar__count { color: var(--blue-100); font-weight: 600; }
.btn--save { background: #2bb673; color: var(--white); width: 100%; }
.btn--save:hover { background: #23985f; }
.btn--discard { background: rgba(255, 255, 255, 0.10); color: #f3c1c1; width: 100%; }
.btn--discard:hover { background: rgba(229, 72, 77, 0.35); color: var(--white); }

/* Candado: fuera de modo edición no se puede modificar nada. */
body:not(.editing) .cell,
body:not(.editing) .cell--catalog {
  pointer-events: none;
}
body:not(.editing) .row-del,
body:not(.editing) .add-sel,
body:not(.editing) .plano__del,
body:not(.editing) #addMachineBtn,
body:not(.editing) .routes-actions {
  display: none;
}

/* Acción "Añadir ruta" en la barra lateral */
.routes-actions { padding-bottom: 12px; }
.routes-actions .btn { width: 100%; }

/* Indicador sutil de que el modo edición está activo */
body.editing .plano { border-color: var(--blue-300); }

.modal--confirm { max-width: 400px; }

/* ---------- Visualizar planogramas ---------- */
.viz { flex: 1; min-height: 0; display: flex; }
.viz__list {
  width: 250px;
  flex: none;
  border-right: 1px solid var(--line);
  background: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.viz__search {
  margin: 14px;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  font-size: .9rem;
}
.viz__search:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }
.viz__search:disabled { opacity: .55; }
.viz__items { flex: 1; overflow-y: auto; padding: 0 10px 14px; }
.viz__empty { color: var(--muted); font-size: .86rem; padding: 10px 6px; }
.viz__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 3px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.viz__item:hover { background: var(--blue-50); }
.viz__item.is-active { background: var(--blue-500); color: var(--white); border-color: var(--blue-300); }
.viz__item-count {
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  background: var(--blue-100);
  color: var(--blue-700);
  border-radius: 20px;
  padding: 1px 8px;
}
.viz__item.is-active .viz__item-count { background: rgba(255,255,255,.25); color: var(--white); }
.viz__card { flex: 1; overflow: auto; padding: 26px 30px; }

/* Tarjeta solo lectura (filas de texto, sin inputs) */
.plano--ro { width: 480px; }
.rows__header--ro,
.plano--ro .row {
  grid-template-columns: 46px 1fr 50px 74px;
}
.ro { font-size: .9rem; }
.ro--sel {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 3px 6px; background: var(--blue-600); color: var(--white);
  border-radius: 7px; font-weight: 700; font-size: .82rem;
}
.ro--art { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; word-break: break-word; }
.ro--cap { text-align: center; color: var(--muted); }
.ro--price { text-align: right; font-weight: 700; color: var(--blue-800); }