/* =========================================================
   ORFEBRE GOLD EVOLUTION — DESIGN SYSTEM
   Django + HTMX, sin Bootstrap
   Archivo: static/css/og-design-system.css
   ========================================================= */

/* Montserrat: la tipografía del logo. Local, el ERP funciona sin internet. */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../vendor/fonts/montserrat/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../vendor/fonts/montserrat/montserrat-latin-600-normal.woff2') format('woff2');
}

/* Las variables (:root) viven en og-tokens.css — cargalo antes que este archivo. */

/* =========================================================
   2. BASE
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 14px;
  background: var(--og-body-bg);
  color: var(--og-text);
  line-height: 1.5;
}

a { color: var(--og-link); }

code {
  background: #eef0f2;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--og-primary);
}


/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */

.og-page-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--og-primary);
  margin: 0 0 4px;
  line-height: 1.2;
}

.og-page-subtitle {
  font-size: 14px;
  color: var(--og-text-muted);
  margin: 0 0 14px;   /* era 24: entre la bajada y los datos sobraba aire */
}

.og-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--og-primary);
  margin: 0 0 14px;
}

.og-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--og-primary);
  margin-bottom: 6px;
  display: block;
}

.og-muted { color: var(--og-text-muted); }
.og-small { font-size: 12px; }


/* =========================================================
   4. CARDS
   ========================================================= */

.og-card {
  background: var(--og-surface);
  border: 1px solid var(--og-border-soft);
  border-radius: var(--og-radius-lg);
  box-shadow: var(--og-shadow-sm);
  padding: 22px;
  margin-bottom: 20px;
}

.og-card.compact { padding: 16px; }

.og-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--og-border-soft);
}

.og-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--og-primary);
  margin: 0;
}

.og-card-subtitle {
  font-size: 13px;
  color: var(--og-text-muted);
  margin-top: 3px;
}

.og-card-footer {
  margin: 18px -22px -22px;
  padding: 16px 22px;
  border-top: 1px solid var(--og-border-soft);
  background: #fafbfc;
  border-radius: 0 0 var(--og-radius-lg) var(--og-radius-lg);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}


/* =========================================================
   5. BUTTONS
   ========================================================= */

.btn-og {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--og-radius-md);
  font-weight: 600;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all var(--og-transition);
  white-space: nowrap;
  font-family: inherit;
  min-height: 40px;
}

.btn-og i { font-size: 15px; }

/* Primary — dorado */
.btn-og-primary { background: var(--og-accent); color: var(--og-on-accent); border-color: var(--og-accent); }
.btn-og-primary:hover { background: var(--og-accent-hover); border-color: var(--og-accent-hover); transform: translateY(-1px); }

/* Secondary — gris azulado */
.btn-og-secondary { background: var(--og-secondary); color: #fff; border-color: var(--og-secondary); }
.btn-og-secondary:hover { background: var(--og-secondary-hover); border-color: var(--og-secondary-hover); transform: translateY(-1px); }

/* Success — esmeralda sólido */
.btn-og-success { background: var(--og-success); color: #fff; border-color: var(--og-success); }
.btn-og-success:hover { background: var(--og-success-hover); border-color: var(--og-success-hover); }

/* Danger — rojo sólido */
.btn-og-danger { background: var(--og-danger); color: #fff; border-color: var(--og-danger); }
.btn-og-danger:hover { background: var(--og-danger-hover); border-color: var(--og-danger-hover); }

/* Info — azul acero sólido */
.btn-og-info { background: var(--og-info); color: #fff; border-color: var(--og-info); }
.btn-og-info:hover { background: var(--og-info-hover); border-color: var(--og-info-hover); }

/* Print — teal SIEMPRE outline */
.btn-og-print { background: transparent; color: var(--og-print); border-color: var(--og-print); }
.btn-og-print:hover { background: rgba(13, 148, 136, 0.06); }

/* Print ghost — para tablas */
.btn-og-print-ghost { background: transparent; color: var(--og-print); border-color: transparent; padding: 7px 8px; }
.btn-og-print-ghost:hover { background: rgba(13, 148, 136, 0.07); }

/* Outline — borde gris */
.btn-og-outline { background: transparent; color: var(--og-primary); border-color: var(--og-primary); }
.btn-og-outline:hover { background: rgba(38, 53, 68, 0.07); }

/* Outline danger */
.btn-og-outline-danger { background: transparent; color: var(--og-danger); border-color: var(--og-danger); }
.btn-og-outline-danger:hover { background: rgba(192, 57, 43, 0.06); }

/* Light — gris claro */
.btn-og-light { background: var(--og-light); color: #3a4a5c; border-color: #d0d5db; }
.btn-og-light:hover { background: var(--og-light-hover); }

/* Ghost — sin fondo ni borde */
.btn-og-ghost { background: transparent; color: var(--og-primary); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn-og-ghost:hover { background: rgba(38, 53, 68, 0.07); }

/* Ghost variants para tablas */
.btn-og-info-ghost { background: transparent; color: var(--og-info); border-color: transparent; padding: 7px 8px; }
.btn-og-info-ghost:hover { background: rgba(58, 124, 195, 0.07); }

.btn-og-danger-ghost { background: transparent; color: var(--og-danger); border-color: transparent; padding: 7px 8px; }
.btn-og-danger-ghost:hover { background: rgba(192, 57, 43, 0.07); }

/* Tamaños */
.btn-og-sm { padding: 7px 12px; font-size: 12px; border-radius: 8px; gap: 5px; min-height: 32px; }
.btn-og-sm i { font-size: 13px; }
.btn-og-md { padding: 10px 18px; font-size: 14px; min-height: 40px; }
.btn-og-lg { padding: 13px 24px; font-size: 15px; min-height: 48px; border-radius: 12px; }

/* Disabled */
.btn-og:disabled,
.btn-og.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; }

.og-button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }


/* =========================================================
   6. FORMS
   ========================================================= */

/* Sin margen: el espacio entre campos lo pone el gap de la grilla.
   Cuando los dos existían, entre filas quedaban 29px en vez de 13. */
.og-form-group { margin-bottom: 0; }
/* Para campos apilados fuera de una grilla */
.og-form-stack { display: flex; flex-direction: column; gap: var(--og-field-gap); }

/* densidad: la etiqueta pega al campo */
.og-form-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--og-primary);
  margin-bottom: 4px;
}

.og-required { color: var(--og-danger); font-weight: 600; }

.og-form-control,
.og-form-select,
.og-form-textarea {
  width: 100%;
  min-height: var(--og-field-h);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-md);
  /* line-height explícito: sin esto el alto lo decide el navegador
     y queda aire de sobra arriba y abajo del valor. */
  padding: 2px 8px;
  line-height: 1.35;
  font-size: 14px;
  color: var(--og-text);
  background: #fff;
  transition: all 0.18s ease;
  font-family: inherit;
}

/* El textarea es multilínea: necesita respirar más que un entry. */
.og-form-textarea { padding: 6px 8px; line-height: 1.5; min-height: 62px; }

.og-form-textarea { padding: 6px 8px; min-height: 92px; resize: vertical; }

.og-form-control:focus,
.og-form-select:focus,
.og-form-textarea:focus {
  outline: none;
  border-color: var(--og-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-accent) 18%, transparent);
}

.og-form-control::placeholder,
.og-form-textarea::placeholder { color: #9aa6b2; }

/* Formulario que guarda en mayúscula (los ABM): se ve en mayúscula mientras se tipea,
   así lo que queda en pantalla es lo que se guarda. La conversión real la hace el servidor. */
.og-mayusculas .og-form-control,
.og-mayusculas .og-form-textarea { text-transform: uppercase; }
.og-mayusculas .og-form-control::placeholder { text-transform: none; }

.og-form-help { font-size: 12px; color: var(--og-text-muted); margin-top: 4px; }
/* Modificador: la ayuda no ocupa lugar hasta que el campo tiene el foco. */
.og-form-help.al-enfocar { display: none; }
.og-form-group:focus-within .og-form-help.al-enfocar { display: block; }
.og-form-error { font-size: 12px; color: var(--og-danger); margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.og-form-valid { font-size: 12px; color: var(--og-success); margin-top: 5px; display: flex; align-items: center; gap: 4px; }

/* Validation states */
.og-form-control.is-valid,
.og-form-select.is-valid { border-color: var(--og-success); }
.og-form-control.is-valid:focus,
.og-form-select.is-valid:focus { box-shadow: 0 0 0 3px rgba(26, 143, 92, 0.15); }

.og-form-control.is-invalid,
.og-form-select.is-invalid { border-color: var(--og-danger); }
.og-form-control.is-invalid:focus,
.og-form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }

/* Readonly */
.og-form-control.readonly { background: #f3f5f7; color: #6c7a8a; cursor: default; border-style: dashed; }

/* Disabled */
.og-form-control:disabled,
.og-form-select:disabled,
.og-form-textarea:disabled { background: #f1f3f5; color: #a0a8b2; cursor: not-allowed; }

/* Input group */
.og-input-group { display: flex; width: 100%; }
.og-input-group .og-form-control { border-radius: var(--og-radius-md) 0 0 var(--og-radius-md); }
.og-input-addon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 0 12px;
  background: var(--og-surface-soft); border: 1px solid var(--og-border); border-left: 0;
  border-radius: 0 var(--og-radius-md) var(--og-radius-md) 0;
  color: var(--og-text-muted); font-weight: 600; font-size: 13px;
}

/* Search box */
.og-search-box { position: relative; min-width: 260px; }
.og-search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--og-text-muted); pointer-events: none; }
.og-search-box input { padding-left: 36px; }

/* Icon inside input */
.og-icon-input { position: relative; }
.og-icon-input i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #9aa6b2; font-size: 15px; pointer-events: none; }
.og-icon-input .og-form-control { padding-left: 34px; }

/* Grid */
.og-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--og-field-gap); }
.og-col-12 { grid-column: span 12; }
.og-col-8  { grid-column: span 8; }
.og-col-6  { grid-column: span 6; }
.og-col-4  { grid-column: span 4; }
.og-col-3  { grid-column: span 3; }
.og-col-2  { grid-column: span 2; }

@media (max-width: 768px) {
  .og-col-8, .og-col-6, .og-col-4, .og-col-3, .og-col-2 { grid-column: span 12; }
}

/* Checkbox */
.og-checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid #b0b8c2; border-radius: 4px;
  background: #fff; appearance: none; cursor: pointer;
  position: relative; transition: all 0.15s; flex-shrink: 0;
}
.og-checkbox:checked { background: var(--og-accent); border-color: var(--og-accent); }
.og-checkbox:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; color: var(--og-on-accent); }
.og-checkbox:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-accent) 20%, transparent); outline: none; }
.og-checkbox:disabled { opacity: 0.5; cursor: not-allowed; }

/* Radio */
.og-radio {
  width: 18px; height: 18px;
  border: 1.5px solid #b0b8c2; border-radius: 50%;
  background: #fff; appearance: none; cursor: pointer;
  position: relative; transition: all 0.15s; flex-shrink: 0;
}
.og-radio:checked { border-color: var(--og-info); border-width: 5px; }
.og-radio:focus { box-shadow: 0 0 0 3px rgba(58, 124, 195, 0.2); outline: none; }

/* Toggle */
.og-toggle {
  width: 42px; height: 22px; border-radius: 12px;
  background: #c8cdd3; appearance: none; cursor: pointer;
  position: relative; transition: background 0.2s; flex-shrink: 0; border: none;
}
.og-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
}
.og-toggle:checked { background: var(--og-success); }
.og-toggle:checked::after { transform: translateX(20px); }
.og-toggle:focus { box-shadow: 0 0 0 3px rgba(26, 143, 92, 0.2); outline: none; }

/* Check/radio label */
.og-check-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }


/* =========================================================
   7. TABLES
   ========================================================= */

.og-table-wrapper {
  background: var(--og-surface);
  border: 1px solid var(--og-border-soft);
  border-radius: var(--og-radius-lg);
  box-shadow: var(--og-shadow-sm);
  overflow: hidden;
}

.og-table-responsive { overflow-x: auto; }

/* Tabla de catálogo (IVA, monedas, metales…): pocas columnas cortas. El browse
   pide 780px; con 520 entra entera en una tablet de 10" parada (800px), y la
   descripción no se aplasta hasta desaparecer. Va siempre con og-table-responsive. */
.og-table.og-table-catalogo { min-width: 520px; }

/* ── Lista densa (artículos, clientes…) ─────────────────────
   El Clarion muestra 25 renglones a 1366×768: con mouse la fila mide ~24px,
   sin botones (clic en el renglón abre; ↑↓ y Enter con el teclado). En táctil
   la fila crece para el dedo. */
/* Anchos fijos por columna: con og-td-desc en varias, la descripción se comía todo y el resto
   salía cortado («Ani…»). Toda celda corta con «…»; la descripción toma lo que sobra. */
.og-table.og-table-densa { font-size: 13px; min-width: 900px; table-layout: fixed; }
.og-table.og-table-densa td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-table.og-table-densa th { padding: 5px 10px; }
.og-table.og-table-densa td { padding: 3px 10px; line-height: 17px; height: 24px; }
.og-table.og-table-densa tbody tr { cursor: pointer; }
.og-table.og-table-densa tbody tr:focus,
.og-table.og-table-densa tbody tr.selected {
  outline: 0; background: var(--og-brand-lighter);
  box-shadow: inset 3px 0 0 var(--og-accent);
}
.og-table.og-table-densa .og-td-mono a { color: inherit; text-decoration: none; }
.og-table.og-table-densa tr.og-fila-inactiva td { color: var(--og-text-muted); }
@media (pointer: coarse) {
  .og-table.og-table-densa td { padding: 10px; }
}

/* Cabecera de una lista densa: título, búsqueda, filtros y Nuevo en un renglón. */
.og-lista-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.og-lista-head .og-page-title { margin: 0; }
.og-lista-filtros { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.og-lista-filtros .og-search-box { flex: 1 1 220px; min-width: 200px; max-width: 360px; }
.og-lista-filtros .og-form-select { width: auto; max-width: 160px; }
/* Total y paginación en la línea del título: abajo o en su propia barra se comían renglones. */
.og-lista-paginacion { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Detalle dentro de un modal (un valor por fila: % por lista de precios).
   Angosta y con el campo dentro de la celda: la fila la mide el campo. */
.og-table.og-table-detalle { min-width: 0; }
.og-table.og-table-detalle td { padding: 4px 12px; }
/* La descripción (og-td-desc) pide width:100%: sin un ancho fijo, el campo queda aplastado. */
.og-table.og-table-detalle td:last-child { width: 120px; min-width: 120px; }
.og-table.og-table-detalle .og-form-control { width: 100%; font-variant-numeric: tabular-nums; }
/* El nombre de la fila (la lista de precios) en una línea: una fila que crece rompe la grilla. */
.og-table.og-table-detalle td.og-td-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.og-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 780px;
}

.og-table thead { background: #f6f8fa; }

.og-table th {
  padding: var(--og-row-pad);
  text-align: left;
  font-weight: 600;
  color: var(--og-secondary);
  border-bottom: 1px solid var(--og-border);
  white-space: nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.og-table th.sortable { cursor: pointer; user-select: none; }
.og-table th.sortable:hover { color: var(--og-primary); }
.og-table th.sorted { color: var(--og-primary); }

.og-table td {
  padding: var(--og-row-pad);
  border-bottom: 1px solid var(--og-border-soft);
  color: var(--og-text);
  vertical-align: middle;
}

.og-table tbody tr:hover { background: #fafbfc; }
.og-table tbody tr:last-child td { border-bottom: none; }
.og-table tbody tr.selected { background: color-mix(in srgb, var(--og-accent) 6%, transparent); }

.og-td-name { font-weight: 500; }
.og-td-sub { font-size: 11.5px; color: #6c7a8a; margin-top: 1px; }
/* Códigos: mismo tamaño y fuente que el resto de la fila. Una monoespaciada a 12px
   se leía como un dato de segunda, y el código es lo que el usuario tipea. */
.og-td-mono { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.og-td-number { font-weight: 500; font-variant-numeric: tabular-nums; }
.og-td-stock-ok { color: var(--og-success); font-weight: 500; }
.og-td-stock-low { color: var(--og-danger); font-weight: 500; }
.og-td-stock-zero { color: var(--og-danger); font-weight: 500; opacity: 0.6; }
/* Los botones de fila no fijan el alto de la fila: lo fija el texto. Con los 32px
   de btn-og-sm cada fila medía 51px en vez de ~38, y la grilla mostraba un tercio
   menos de renglones. Con mouse un blanco de 26px alcanza; en táctil pasan a 40px. */
.og-td-actions { display: flex; gap: 2px; justify-content: flex-end; margin: -4px 0; }
.og-td-actions .btn-og-sm { min-height: 26px; padding: 3px 8px; }

.text-end { text-align: right !important; }
.text-center { text-align: center !important; }

/* Toolbar */
.og-toolbar {
  background: var(--og-surface); border: 1px solid var(--og-border-soft);
  border-radius: var(--og-radius-lg); box-shadow: var(--og-shadow-sm);
  padding: 14px; margin-bottom: 18px;
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.og-toolbar-left, .og-toolbar-right { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Bulk actions bar */
.og-bulk-bar {
  padding: 10px 16px;
  background: var(--og-accent-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--og-accent) 20%, transparent);
  display: flex; align-items: center; gap: 12px; font-size: 13px;
}
.og-bulk-count { font-weight: 600; color: var(--og-primary); }
.og-bulk-actions { display: flex; gap: 6px; margin-left: auto; }

/* Pagination */
.og-pagination { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

/* ── Panel de catálogo ──────────────────────────────────────
   Barra, tabla y pie dentro de un solo borde, con el ancho limitado. Un ABM de
   tres o cuatro columnas a todo el ancho deja los datos perdidos entre huecos;
   el borde marca qué abarca la búsqueda y la paginación.
   Anchos: sm 640px (2–4 columnas angostas: IVA, monedas, piedras) ·
           md 880px (4–5 columnas, alguna larga) · sin clase, todo el ancho. */
.og-panel {
  max-width: var(--og-panel-w, 100%);
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  box-shadow: var(--og-shadow-sm);
  overflow: hidden;
}
.og-panel-sm { --og-panel-w: 640px; }
.og-panel-md { --og-panel-w: 880px; }
/* Adentro, las piezas pierden su propia tarjeta: el borde es uno solo. */
.og-panel .og-toolbar {
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--og-border-soft);
  padding: 7px 12px;   /* suelta lleva 14px: adentro del panel el borde ya separa */
}
.og-panel .og-table-wrapper { border: 0; border-radius: 0; box-shadow: none; }
.og-panel .og-pagination {
  margin: 0; padding: 10px 14px;
  border-top: 1px solid var(--og-border-soft);
  background: var(--og-surface-soft);
}

/* ── Árbol en columnas ──────────────────────────────────────
   Tablas de solo clave con padre: marca → línea → sublínea, tipo → modelos.
   Una columna por nivel; elegir un renglón carga sus hijos en la de al lado.
   El campo de arriba filtra mientras se tipea y agrega con Enter.
   Lo arma core/arbol.py. */
.og-columnas {
  display: grid;
  grid-template-columns: repeat(var(--og-columnas, 3), minmax(0, 300px));
  gap: 14px;
  align-items: start;
}
.og-columna {
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--og-topbar-h) - 140px);
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg);
  box-shadow: var(--og-shadow-sm);
  overflow: hidden;
}
.og-columna-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--og-border-soft);
  background: var(--og-surface-soft);
}
.og-columna-title { font-size: 14px; font-weight: 700; color: var(--og-primary); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-columna-padre { font-weight: 500; color: var(--og-text-muted); }
.og-columna-count { font-size: 12px; color: var(--og-text-muted); font-variant-numeric: tabular-nums; }
.og-columna-add {
  display: flex; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--og-border-soft);
}
.og-columna-add .og-form-control { flex: 1; min-width: 0; text-transform: uppercase; }
.og-columna-add .og-form-control::placeholder { text-transform: none; }
.og-columna-error { padding: 0 12px 8px; }
.og-columna-nota { padding: 8px 12px; font-size: 12px; color: var(--og-text-muted);
  border-bottom: 1px solid var(--og-border-soft); }
.og-columna-lista { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; }
.og-columna-item {
  display: flex; align-items: center; gap: 2px;
  padding-right: 6px; min-height: 34px;
  border-left: 3px solid transparent;
}
.og-columna-item:hover { background: var(--og-surface-hover); }
.og-columna-item.active { background: var(--og-brand-lighter); border-left-color: var(--og-accent); }
.og-columna-elegir {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 6px 7px 9px;
  background: none; border: 0; font: inherit; text-align: left;
  color: var(--og-text); font-weight: 500;
}
button.og-columna-elegir { cursor: pointer; }
.og-columna-elegir i { font-size: 11px; color: var(--og-text-muted); }
.og-columna-item.active .og-columna-elegir { color: var(--og-brand-dark); font-weight: 700; }
.og-columna-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Con mouse los botones del renglón se apagan hasta que se pasa por encima. */
@media (pointer: fine) {
  .og-columna-item .og-td-actions { opacity: .45; transition: opacity .15s; }
  .og-columna-item:hover .og-td-actions,
  .og-columna-item.active .og-td-actions,
  .og-columna-item:focus-within .og-td-actions { opacity: 1; }
}
.og-columna-item.editando { flex-wrap: wrap; padding: 4px 6px 4px 6px; }
.og-columna-item.editando form { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.og-columna-item.editando .og-form-control { flex: 1; min-width: 0; text-transform: uppercase; }
.og-columna-item.editando .og-form-error { flex-basis: 100%; padding: 2px 0 2px 4px; }
.og-columna-sin { padding: 14px 12px; font-size: 12px; color: var(--og-text-muted); }
.og-columna-vacia { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--og-text-muted); }
.og-columna-vacia i { display: block; font-size: 18px; margin-bottom: 6px; }
.og-page-btn {
  min-width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--og-border); background: #fff;
  color: var(--og-primary); font-weight: 600; cursor: pointer;
  transition: all 0.18s; font-family: inherit; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.og-page-btn:hover { background: var(--og-surface-hover); }
.og-page-btn.active { background: var(--og-brand); color: #fff; border-color: var(--og-brand); }
.og-page-btn.disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* Pantalla táctil (tablet): los botones chicos de las filas y la paginación
   pasan a 40px, lo mínimo para acertar con el dedo. Con mouse no cambia nada,
   así que la densidad del mostrador queda igual. Va después
   de .og-page-btn para que no lo pise. */
@media (pointer: coarse) {
  .og-td-actions .btn-og-sm { min-width: 40px; min-height: 40px; }
  .og-page-btn { min-width: 40px; height: 40px; }
}

.og-table-info { font-size: 12px; color: #6c7a8a; }
.og-table-info strong { color: var(--og-text); font-weight: 500; }

/* Empty state */
.og-empty-state { padding: 48px 20px; text-align: center; }
.og-empty-icon { font-size: 32px; color: #c8cdd3; margin-bottom: 8px; }
.og-empty-text { font-size: 14px; color: #6c7a8a; margin-bottom: 4px; }
.og-empty-sub { font-size: 12px; color: #9aa6b2; }


/* =========================================================
   8. BADGES
   ========================================================= */

.og-badge {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
}

.og-badge-success { color: #15724a; background: var(--og-success-soft); }
.og-badge-danger  { color: var(--og-danger); background: var(--og-danger-soft); }
.og-badge-warning { color: #8a5d00; background: var(--og-warning-soft); }
.og-badge-info    { color: #2d6aa8; background: var(--og-info-soft); }
.og-badge-neutral { color: #5a6a7a; background: var(--og-neutral-soft); }
.og-badge-dark    { color: #fff; background: var(--og-brand); }
.og-badge-print   { color: var(--og-print); background: var(--og-print-soft); }
.og-badge-gold    { color: #8a6d00; background: color-mix(in srgb, var(--og-accent) 15%, transparent); }


/* =========================================================
   9. ALERTS
   ========================================================= */

.og-alert {
  display: flex; gap: 12px; padding: 14px 16px;
  border-radius: var(--og-radius-md); border: 1px solid transparent;
  font-size: 14px; line-height: 1.5; margin-bottom: 16px;
}
.og-alert i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.og-alert-success { background: rgba(26, 143, 92, 0.07); border-color: rgba(26, 143, 92, 0.2); color: #15724a; }
.og-alert-danger  { background: rgba(192, 57, 43, 0.06); border-color: rgba(192, 57, 43, 0.18); color: #a5311f; }
.og-alert-warning { background: rgba(245, 159, 0, 0.07); border-color: rgba(245, 159, 0, 0.2); color: #7a5100; }
.og-alert-info    { background: rgba(58, 124, 195, 0.06); border-color: rgba(58, 124, 195, 0.18); color: #2d6aa8; }


/* =========================================================
   10. TABS
   ========================================================= */

.og-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--og-border);
  margin-bottom: 20px; overflow-x: auto;
}

.og-tab {
  padding: 11px 16px; border: none; background: transparent;
  color: var(--og-text-muted); font-size: 14px; font-weight: 600;
  cursor: pointer; border-bottom: 3px solid transparent;
  transition: all 0.18s; font-family: inherit; white-space: nowrap;
}
.og-tab:hover { color: var(--og-primary); background: #fafbfc; }
.og-tab.active { color: var(--og-primary); border-bottom-color: var(--og-accent); }

.og-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 10px;
  font-size: 10px; font-weight: 600; padding: 0 5px; margin-left: 6px;
}


/* =========================================================
   11. KPIs
   ========================================================= */

.og-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }

.og-kpi-card {
  background: var(--og-surface); border: 1px solid var(--og-border-soft);
  border-radius: var(--og-radius-lg); box-shadow: var(--og-shadow-sm);
  padding: 18px; position: relative; overflow: hidden;
}

.og-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }

.og-kpi-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.og-kpi-icon-gold  { background: var(--og-accent-soft); color: #c99a00; }
.og-kpi-icon-green { background: var(--og-success-soft); color: var(--og-success); }
.og-kpi-icon-red   { background: var(--og-danger-soft); color: var(--og-danger); }
.og-kpi-icon-blue  { background: var(--og-info-soft); color: var(--og-info); }

.og-kpi-label { font-size: 12px; font-weight: 600; color: var(--og-text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.og-kpi-value { font-size: 24px; font-weight: 800; color: var(--og-primary); margin-bottom: 4px; }
.og-kpi-note  { font-size: 12px; color: var(--og-text-muted); display: flex; align-items: center; gap: 4px; }
.og-kpi-trend-up   { color: var(--og-success); font-weight: 500; }
.og-kpi-trend-down { color: var(--og-danger); font-weight: 500; }
.og-kpi-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }

@media (max-width: 992px) { .og-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .og-kpi-grid { grid-template-columns: 1fr; } }


/* =========================================================
   12. MODALS
   ========================================================= */

/* Modal de error o aviso (ogAviso en base.html): reemplaza al toast que quedaba en pantalla. */
.og-aviso { max-width: 460px; }
.og-aviso-danger .og-modal-header-icon { background: var(--og-danger-soft); color: var(--og-danger); }
.og-aviso-warning .og-modal-header-icon { background: var(--og-warning-soft); color: var(--og-warning); }
.og-aviso-lista { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.og-aviso-lista:has(> li:only-child) { list-style: none; padding-left: 0; }
#ogAviso { z-index: 2000; }

.og-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(38, 53, 68, 0.6);
  z-index: 1060;
  display: flex; justify-content: center; align-items: center;
}

.og-modal {
  width: 100%; max-width: 520px;
  background: var(--og-surface);
  border-radius: var(--og-radius-lg);
  box-shadow: var(--og-shadow-lg);
  overflow: hidden;
  /* En 768px de alto un modal largo se corta y el botón de confirmar
     queda fuera de pantalla. El cuerpo scrollea; header y footer no. */
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}
.og-modal-header, .og-modal-footer { flex-shrink: 0; }

.og-modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--og-border-soft);
  display: flex; align-items: center; gap: 12px;
}
.og-modal-header-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.og-modal-title { font-size: 18px; font-weight: 700; color: var(--og-primary); margin: 0; }
.og-modal-subtitle { font-size: 12px; color: var(--og-text-muted); margin-top: 2px; }

.og-modal-body { padding: 22px; overflow-y: auto; flex: 1; }

.og-modal-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--og-border-soft);
  display: flex; justify-content: flex-end; gap: 10px;
  background: #fafbfc;
}

.og-modal-item {
  background: var(--og-surface-soft); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px;
}


/* =========================================================
   13. TOASTS
   ========================================================= */

.og-toast-container {
  position: fixed; top: calc(var(--og-topbar-h) + 12px); right: 16px;
  z-index: 1070; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}

.og-toast {
  width: 360px;
  background: var(--og-surface);
  border-radius: var(--og-radius-md);
  box-shadow: var(--og-shadow-lg);
  border-left: 4px solid transparent;
  padding: 14px 16px;
  display: flex; gap: 10px; align-items: flex-start;
  pointer-events: all;
  animation: og-toast-in 0.3s ease;
}
.og-toast-success { border-left-color: var(--og-success); }
.og-toast-danger  { border-left-color: var(--og-danger); }
.og-toast-info    { border-left-color: var(--og-info); }

.og-toast-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.og-toast-body { flex: 1; min-width: 0; }
.og-toast-title { font-size: 13px; font-weight: 600; color: var(--og-text); margin-bottom: 2px; }
.og-toast-text  { font-size: 12px; color: var(--og-text-muted); line-height: 1.4; }
.og-toast-close { color: var(--og-text-soft); cursor: pointer; font-size: 14px; flex-shrink: 0; }

@keyframes og-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* =========================================================
   14. LOADING
   ========================================================= */

.og-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--og-light);
  border-top-color: var(--og-accent);
  border-radius: 50%;
  animation: og-spin 0.7s linear infinite;
}
.og-spinner-sm { width: 18px; height: 18px; border-width: 2px; }
.og-spinner-lg { width: 36px; height: 36px; }

@keyframes og-spin { to { transform: rotate(360deg); } }

.og-skeleton {
  height: 14px;
  background: linear-gradient(90deg, #e8ebee 25%, #f3f5f7 50%, #e8ebee 75%);
  background-size: 200% 100%;
  animation: og-shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes og-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* HTMX progress bar */
.og-htmx-indicator {
  position: fixed;
  top: var(--og-topbar-h);
  left: 0; right: 0; height: 3px;
  background: var(--og-accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 1049;
}
.htmx-request .og-htmx-indicator {
  animation: og-htmx-loading 1.5s ease infinite;
}
@keyframes og-htmx-loading {
  0%  { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  51% { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}


/* =========================================================
   15. BREADCRUMB
   ========================================================= */

.og-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px; font-size: 13px; color: var(--og-text-muted);  /* era 18 */
  flex-wrap: wrap;
}
.og-breadcrumb a { color: var(--og-link); text-decoration: none; font-weight: 500; }
.og-breadcrumb a:hover { text-decoration: underline; }
.og-breadcrumb i { font-size: 10px; color: var(--og-text-muted); }


/* =========================================================
   16. UTILITIES
   ========================================================= */

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.w-100 { width: 100% !important; }

.og-usage {
  background: #f8f9fa;
  border-left: 4px solid var(--og-accent);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--og-text);
  margin-top: 14px;
}
.og-usage strong { color: var(--og-primary); }


/* =========================================================
   17. DOMINIO — JOYERÍA
   Componentes que existen porque el negocio los necesita:
   metal, gramos, stock comprometido y listas de precio.
   ========================================================= */

/* Miniatura del artículo en la fila */
.og-thumb {
  width: 32px; height: 32px; border-radius: var(--og-radius-sm);
  background: var(--og-surface-soft); border: 1px solid var(--og-border-soft);
  display: flex; align-items: center; justify-content: center;
  color: #b9c2cb; font-size: 14px; overflow: hidden;
}
.og-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Metal — la sigla del sistema viejo (OA/OR/OBL/P/PT) hecha color.
   Círculo plano con un aro fino del mismo tono: sin él, el oro blanco
   y la plata se pierden sobre el fondo blanco de la fila. */
.og-metal { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.og-metal::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--og-metal, var(--og-neutral));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--og-metal, var(--og-neutral)), #000 20%);
}
.og-metal-oa  { --og-metal: var(--og-metal-oro-amarillo); }
.og-metal-or  { --og-metal: var(--og-metal-oro-rojo); }
.og-metal-obl { --og-metal: var(--og-metal-oro-blanco); }
.og-metal-p   { --og-metal: var(--og-metal-plata); }
.og-metal-pt  { --og-metal: var(--og-metal-platino); }

/* Stock — lo que se puede vender, no lo que hay en el depósito.
   DISPONIBLE = físico − comprometido. Mostrar solo el físico hace sobrevender. */
.og-stock { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.og-stock small { font-size: 11px; font-weight: 500; opacity: 0.65; }
.og-stock + .og-td-sub { white-space: nowrap; }
.og-stock-ok   { color: var(--og-success); }
.og-stock-low  { color: var(--og-warning); }
.og-stock-zero { color: var(--og-danger); }

.og-stock-panel { display: flex; align-items: center; gap: 14px; padding: 4px 0 14px; }
.og-stock-big { font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.og-stock-legend { font-size: 13px; color: var(--og-text); }

/* Composición en gramos */
.og-comp { border-top: 1px solid var(--og-border-soft); padding-top: 10px; }
.og-comp-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.og-comp-row strong { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Las 8 listas de precio */
.og-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.og-price {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--og-border-soft); font-size: 13px;
}
.og-price-n { color: var(--og-text-muted); display: flex; align-items: center; gap: 7px; }
.og-price-v { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--og-text); }
.og-price-lead .og-price-v { font-size: 16px; font-weight: 700; color: var(--og-primary); }

/* Detalle bajo la tabla */
.og-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; margin-top: 18px; }

/* Una fila = una línea. Las descripciones largas se cortan, no envuelven. */
.og-td-desc { max-width: 0; width: 100%; }
.og-td-desc .og-td-name,
.og-td-desc .og-td-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1100px) { .og-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px)  { .og-prices { grid-template-columns: 1fr; } }


/* =========================================================
   18. PUNTO DE VENTA
   Pantalla de mostrador: teclado primero, densidad alta,
   el total siempre visible y el cobro a un F9 de distancia.
   ========================================================= */

.og-pos {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 14px;
  align-items: start;
  /* deja lugar a la barra de atajos fija */
  padding-bottom: 52px;
}
@media (max-width: 1200px) { .og-pos { grid-template-columns: 1fr; } }
/* Un hijo de grid trae min-width:auto y no se encoge por debajo de su
   contenido. Sin esto, la tabla de 780px estira la página entera. */
.og-pos > * { min-width: 0; }

/* ── Encabezado de la venta: cliente, lista, comprobante ── */
.og-pos-head {
  background: var(--og-surface); border: 1px solid var(--og-border-soft);
  border-radius: var(--og-radius-lg); box-shadow: var(--og-shadow-sm);
  padding: 10px 14px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}
.og-pos-head > .og-pos-field:first-child { min-width: 0; flex: 0 1 auto; }
/* En tablet vertical no entra en una línea: ahí sí envuelve. */
@media (max-width: 1100px) { .og-pos-head { flex-wrap: wrap; } }
.og-pos-client-name, .og-pos-client-sub { overflow: hidden; text-overflow: ellipsis; }
.og-pos-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.og-pos-field-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--og-text-soft); white-space: nowrap;
}
.og-pos-client { display: flex; flex-direction: column; min-width: 0; }
.og-pos-client-name { font-size: 13.5px; font-weight: 600; color: var(--og-primary); white-space: nowrap; }
.og-pos-client-sub { font-size: 11.5px; color: var(--og-text-muted); white-space: nowrap; }
.og-pos-sep { width: 1px; align-self: stretch; background: var(--og-border); margin: 0 2px; }

/* ── Búsqueda: el control más usado de la pantalla ── */
.og-pos-search { position: relative; margin-bottom: 12px; }
.og-pos-search input {
  width: 100%; height: 52px;
  padding: 0 16px 0 48px;
  font-family: inherit; font-size: 16px; color: var(--og-text);
  background: var(--og-surface);
  border: 2px solid var(--og-border); border-radius: var(--og-radius-lg);
  box-shadow: var(--og-shadow-sm);
  transition: all var(--og-transition);
}
.og-pos-search input::placeholder { color: var(--og-text-soft); }
.og-pos-search input:focus {
  outline: none; border-color: var(--og-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--og-accent) 18%, transparent);
}
.og-pos-search > i {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--og-text-soft); pointer-events: none;
}
.og-pos-search kbd {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: monospace; font-size: 11px; padding: 3px 7px;
  border-radius: var(--og-radius-sm);
  background: var(--og-neutral-soft); color: var(--og-text-muted);
}

/* ── Renglones de la venta ── */
/* overflow-x auto, no hidden: la tabla tiene min-width 780 y con hidden
   quedaba recortada pero seguía empujando el ancho de la página. */
.og-pos-cart { background: var(--og-surface); border: 1px solid var(--og-border-soft);
               border-radius: var(--og-radius-lg); box-shadow: var(--og-shadow-sm); overflow-x: auto; }
.og-pos-cart .og-table td { padding: 10px 12px; }
.og-spin {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--og-border); border-radius: var(--og-radius-md);
  padding: 2px 4px;
}
.og-spin button {
  width: 22px; height: 22px; border: 0; border-radius: var(--og-radius-sm);
  background: var(--og-surface-soft); color: var(--og-primary);
  font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit;
}
.og-spin button:hover { background: var(--og-light); }
.og-spin span { min-width: 20px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Renglón de compostura: no es un artículo de stock */
.og-pos-service td { background: rgba(13, 148, 136, 0.04); }

/* ── Panel de cobro ── */
.og-pos-side {
  background: var(--og-surface); border: 1px solid var(--og-border-soft);
  border-radius: var(--og-radius-lg); box-shadow: var(--og-shadow-sm);
  padding: 16px; position: sticky; top: calc(var(--og-topbar-h) + 20px);
}
.og-pos-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; font-size: 13.5px; color: var(--og-text-muted);
}
.og-pos-line b { color: var(--og-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.og-pos-line.discount b { color: var(--og-success); }

.og-pos-total {
  margin: 12px 0 4px; padding: 14px 16px;
  /* Blanco con la línea dorada arriba, no un bloque azul oscuro */
  background: var(--og-surface); border: 1px solid var(--og-border);
  border-top: 3px solid var(--og-accent); border-radius: var(--og-radius-lg);
  display: flex; justify-content: space-between; align-items: baseline;
}
.og-pos-total-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--og-text-muted);
}
.og-pos-total-value {
  font-size: 28px; font-weight: 800; color: var(--og-brand);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.og-pos-note { font-size: 11.5px; color: var(--og-text-soft); text-align: right; margin-bottom: 14px; }

/* Medios de pago */
.og-pos-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.og-pos-pay-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 11px 6px; border-radius: var(--og-radius-md);
  border: 1px solid var(--og-border); background: var(--og-surface);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--og-text);
  cursor: pointer; transition: all var(--og-transition);
}
.og-pos-pay-btn i { font-size: 17px; color: var(--og-brand); }
.og-pos-pay-btn:hover { border-color: var(--og-brand); background: var(--og-brand-lighter); }
.og-pos-pay-btn.active {
  border-color: var(--og-brand); background: var(--og-brand);
  color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-brand) 18%, transparent);
}
.og-pos-pay-btn.active i { color: #fff; }

/* ── Barra de atajos: los dedos vienen de Clarion ── */
.og-keys {
  position: fixed; left: var(--og-sidebar-w); right: 0; bottom: 0;
  height: 38px; z-index: 1040;
  background: var(--og-surface); border-top: 3px solid var(--og-accent);
  box-shadow: 0 -2px 8px rgba(26, 26, 46, 0.05);
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed .og-keys { left: var(--og-sidebar-collapsed-w); }
/* En tablet no hay teclado físico: la barra de atajos no aplica. */
@media (max-width: 992px) { .og-keys { display: none; } }
.og-key { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--og-text-muted); }
.og-key kbd {
  font-family: monospace; font-size: 10.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  background: var(--og-brand); color: #fff;
}
.og-key.primary kbd { background: var(--og-accent); color: var(--og-on-accent); }
.og-key.primary { color: var(--og-text); font-weight: 600; }


/* =========================================================
   19. COBRO
   Pago mixto. La regla: el restante es el número más visible
   y no se puede confirmar hasta que sea cero.
   ========================================================= */

.og-modal-lg { max-width: 760px; }

/* Banda de estado del cobro */
.og-cobro-band {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 20px; align-items: center;
  padding: 16px 18px; margin-bottom: 18px;
  background: var(--og-surface-soft);
  border: 1px solid var(--og-border-soft);
  border-radius: var(--og-radius-lg);
}
.og-cobro-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--og-text-soft); margin-bottom: 3px;
}
.og-cobro-total { font-size: 19px; font-weight: 700; color: var(--og-primary); font-variant-numeric: tabular-nums; }

.og-cobro-bar { height: 8px; border-radius: 999px; background: var(--og-neutral-soft); overflow: hidden; }
.og-cobro-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--og-accent); transition: width var(--og-transition);
}
.og-cobro-bar.settled span { background: var(--og-success); }
.og-cobro-bar-note { font-size: 11.5px; color: var(--og-text-muted); margin-top: 6px; text-align: center; }

.og-cobro-rest { text-align: right; }
.og-cobro-rest-value {
  font-size: 26px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--og-warning);
}
.og-cobro-rest.settled .og-cobro-rest-value { color: var(--og-success); }

/* Medios de pago disponibles */
.og-pay-add { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.og-pay-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px dashed var(--og-border); background: var(--og-surface);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--og-text-muted);
  cursor: pointer; transition: all var(--og-transition);
}
.og-pay-chip:hover { border-style: solid; border-color: var(--og-accent); color: var(--og-primary); background: var(--og-accent-soft); }
.og-pay-chip i { font-size: 14px; }

/* Un pago agregado */
.og-pay-row {
  border: 1px solid var(--og-border); border-radius: var(--og-radius-md);
  margin-bottom: 10px; overflow: hidden;
}
.og-pay-row-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--og-surface-soft);
  border-bottom: 1px solid var(--og-border-soft);
}
.og-pay-row-icon {
  width: 30px; height: 30px; border-radius: var(--og-radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--og-surface); border: 1px solid var(--og-border);
  color: var(--og-text-muted); font-size: 15px; flex-shrink: 0;
}
.og-pay-row-name { font-size: 13.5px; font-weight: 600; color: var(--og-primary); }
.og-pay-row-amount {
  margin-left: auto; font-size: 15px; font-weight: 700;
  color: var(--og-primary); font-variant-numeric: tabular-nums;
}
.og-pay-row-fields {
  padding: 12px 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
}
.og-pay-hint {
  grid-column: 1 / -1; font-size: 12px; color: var(--og-text-muted);
  padding-top: 2px; display: flex; align-items: center; gap: 6px;
}
.og-pay-hint b { color: var(--og-text); font-variant-numeric: tabular-nums; }

/* Comprobante que se va a emitir */
.og-cobro-doc {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; margin-top: 4px;
  border-radius: var(--og-radius-md);
  background: var(--og-info-soft); color: #2d6aa8; font-size: 12.5px;
}
.og-cobro-doc i { font-size: 15px; }
.og-cobro-doc b { font-variant-numeric: tabular-nums; }


/* =========================================================
   20. FICHA DE ARTÍCULO
   Formulario denso. La regla: agrupar en secciones con título,
   y que la foto y el stock por depósito estén siempre a la vista.
   ========================================================= */

/* 280px para la foto y el stock: con 330 la ficha no llegaba a tres combos por renglón. */
.og-ficha { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; padding-bottom: 60px; }
/* Sin esto la columna toma el ancho de su tabla más ancha y empuja la foto fuera de pantalla. */
.og-ficha > * { min-width: 0; }
/* La foto y el stock son de la pestaña General. En las demás el formulario
   se queda con todo el ancho, que es donde la etiqueta izquierda rinde. */
.og-ficha.solo-formulario { grid-template-columns: 1fr; }
.og-ficha.solo-formulario > aside { display: none; }
@media (max-width: 1200px) { .og-ficha { grid-template-columns: 1fr; } }

/* Datos que se leen y no se cargan (auditoría de la ficha): etiqueta a la izquierda. */
.og-datos { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.og-datos dt { color: var(--og-text-muted); font-weight: 600; font-size: 13px; }
.og-datos dd { margin: 0; font-variant-numeric: tabular-nums; }

/* La foto de la ficha se elige con un clic en el recuadro. */
.og-ficha-foto { margin-bottom: 14px; }
.og-ficha-foto .og-photo { cursor: pointer; }
.og-ficha-foto .og-photo:hover { border-color: var(--og-accent); }
.og-ficha-foto .og-form-help { margin-top: 8px; text-align: center; }

/* Encabezado con la identidad del artículo */
.og-ficha-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.og-ficha-title { display: flex; flex-direction: column; min-width: 0; }
.og-ficha-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Bloque de campos con título */
.og-fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.og-fieldset:last-child { margin-bottom: 0; }
.og-fieldset-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--og-text-soft); padding-bottom: 7px; margin-bottom: 14px;
  border-bottom: 1px solid var(--og-border-soft);
}

/* Campo con botón de búsqueda al lado (los "..." de Clarion) */
.og-field-lookup { display: flex; gap: 6px; }
.og-field-lookup .og-form-control,
.og-field-lookup .og-form-select { flex: 1; min-width: 0; }
.og-field-lookup button {
  flex-shrink: 0; width: 38px;
  border: 1px solid var(--og-border); border-radius: var(--og-radius-md);
  background: var(--og-surface-soft); color: var(--og-text-muted);
  cursor: pointer; font-family: inherit; font-size: 14px;
}
.og-field-lookup button:hover { background: var(--og-light); color: var(--og-primary); }
.og-field-resolved { font-size: 12px; color: var(--og-success); margin-top: 5px; display: flex; align-items: center; gap: 5px; }

/* Foto */
.og-photo {
  aspect-ratio: 1; border-radius: var(--og-radius-lg);
  background: var(--og-surface-soft); border: 1px solid var(--og-border-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 10px; position: relative;
}
.og-photo img { width: 100%; height: 100%; object-fit: cover; }
.og-photo-empty { text-align: center; color: var(--og-text-soft); font-size: 12.5px; padding: 20px; }
.og-photo-empty i { font-size: 30px; display: block; margin-bottom: 8px; opacity: .5; }

/* Stock por depósito */
.og-dep-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.og-dep-table th {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--og-text-soft); text-align: right; padding: 0 6px 7px;
  border-bottom: 1px solid var(--og-border-soft);
}
.og-dep-table th:first-child { text-align: left; }
.og-dep-table td { padding: 7px 6px; border-bottom: 1px solid var(--og-border-soft); text-align: right; font-variant-numeric: tabular-nums; }
.og-dep-table td:first-child { text-align: left; color: var(--og-text-muted); }
.og-dep-table tbody tr:last-child td { border-bottom: 0; }
.og-dep-neg { color: var(--og-danger); font-weight: 700; }
.og-dep-total { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0 4px; }
.og-dep-total b { font-size: 26px; font-weight: 800; color: var(--og-primary); font-variant-numeric: tabular-nums; }

/* Precios por lista */
/* Acotada: a todo el ancho, la columna Lista empujaba los importes
   contra el borde derecho y quedaba un vacío en el medio. */
.og-precio-table { width: 100%; max-width: 820px; border-collapse: collapse; font-size: 13px; }
.og-precio-table td:first-child, .og-precio-table th:first-child { width: 190px; }
.og-precio-table th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--og-text-soft); padding: 0 10px 8px; text-align: right; white-space: nowrap;
}
.og-precio-table th:first-child { text-align: left; }
.og-precio-table td { padding: 3px 10px; border-top: 1px solid var(--og-border-soft); }
.og-precio-table td:first-child { color: var(--og-text-muted); }
.og-precio-table input { text-align: right; }
.og-precio-margen { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.og-precio-margen.ok { color: var(--og-success); }
.og-precio-margen.low { color: var(--og-warning); }

/* Barra de acciones fija */
.og-formbar {
  position: fixed; left: var(--og-sidebar-w); right: 0; bottom: 0; z-index: 1040;
  background: var(--og-surface); border-top: 1px solid var(--og-border);
  box-shadow: 0 -2px 12px rgba(38, 53, 68, 0.07);
  display: flex; align-items: center; gap: 10px; padding: 10px 24px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed .og-formbar { left: var(--og-sidebar-collapsed-w); }
@media (max-width: 992px) { .og-formbar { left: 0; } }
.og-formbar-info { font-size: 12px; color: var(--og-text-soft); margin-right: auto; }


/* =========================================================
   21. CAMPOS — componentes que faltaban
   Nomenclatura puente con Clarion: entry, drop, lookup, spin,
   calendar. Ver design/prototypes/componentes.html
   ========================================================= */

/* ── Segmented: elegir entre pocas opciones excluyentes ── */
.og-segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--og-surface-soft);
  border: 1px solid var(--og-border); border-radius: var(--og-radius-md);
}
.og-segmented button {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  padding: 5px 12px; border-radius: var(--og-radius-sm);
  font-size: 12.5px; font-weight: 600; color: var(--og-text-muted);
  transition: all var(--og-transition);
}
.og-segmented button:hover { color: var(--og-primary); }
.og-segmented button.active {
  background: var(--og-surface); color: var(--og-primary);
  box-shadow: var(--og-shadow-xs);
}

/* ── Chip de filtro: un filtro aplicado, se puede quitar ── */
.og-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--og-neutral-soft); color: var(--og-text);
  font-size: 12.5px; font-weight: 500; border: 1px solid transparent;
}
.og-chip button {
  border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--og-text-soft); font-size: 11px; line-height: 1; display: flex;
}
.og-chip button:hover { color: var(--og-danger); }
.og-chip-accent { background: var(--og-accent-soft); border-color: color-mix(in srgb, var(--og-accent) 35%, transparent); }
.og-chip-warning { background: var(--og-warning-soft); color: #8a5d00; }

/* ── Autocomplete: entry con resultados de HTMX ── */
.og-autocomplete { position: relative; }
.og-ac-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1030;
  background: var(--og-surface); border: 1px solid var(--og-border);
  border-radius: var(--og-radius-md); box-shadow: var(--og-shadow-md);
  overflow: hidden; max-height: 280px; overflow-y: auto;
}
.og-ac-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--og-border-soft);
}
.og-ac-item:last-child { border-bottom: 0; }
.og-ac-item:hover, .og-ac-item.active { background: var(--og-accent-soft); }
.og-ac-item mark { background: color-mix(in srgb, var(--og-accent) 40%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.og-ac-main { min-width: 0; flex: 1; }
.og-ac-name { font-weight: 500; color: var(--og-text); }
.og-ac-sub { font-size: 11.5px; color: var(--og-text-muted); }
.og-ac-side { font-size: 12px; color: var(--og-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-ac-empty { padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--og-text-soft); }

/* ── Calendar ── */
.og-calendar {
  width: 268px; padding: 12px;
  background: var(--og-surface); border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg); box-shadow: var(--og-shadow-md);
}
.og-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.og-cal-month { font-size: 13.5px; font-weight: 700; color: var(--og-primary); }
.og-cal-nav {
  width: 26px; height: 26px; border-radius: var(--og-radius-sm);
  border: 1px solid var(--og-border); background: var(--og-surface);
  color: var(--og-text-muted); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.og-cal-nav:hover { background: var(--og-surface-hover); color: var(--og-primary); }
.og-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.og-cal-dow {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--og-text-soft); text-align: center; padding-bottom: 6px;
}
.og-cal-day {
  aspect-ratio: 1; border: 0; background: none; cursor: pointer;
  border-radius: var(--og-radius-sm); font-family: inherit;
  font-size: 12.5px; color: var(--og-text); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.og-cal-day:hover { background: var(--og-surface-hover); }
.og-cal-day.muted { color: var(--og-text-soft); opacity: .5; }
.og-cal-day.today { box-shadow: inset 0 0 0 1.5px var(--og-border); font-weight: 700; }
.og-cal-day.selected { background: var(--og-accent); color: var(--og-on-accent); font-weight: 700; }
.og-cal-day.in-range { background: var(--og-accent-soft); border-radius: 0; }
.og-cal-foot {
  display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--og-border-soft);
}

/* ── Entry de importe: la moneda no compite con el número ── */
.og-money { position: relative; }
.og-money .og-form-control { text-align: right; padding-left: 30px; font-variant-numeric: tabular-nums; }
.og-money-sign {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--og-text-soft); font-size: 13px; pointer-events: none;
}


/* =========================================================
   22. LOGIN
   Pantalla completa, sin topbar ni sidebar.
   La sucursal se elige acá: define el schema de la sesión.
   ========================================================= */

/* Una tarjeta centrada y del tamaño de lo que hace (tres campos
   y un botón), en vez de dos mitades de pantalla. El panel de marca se
   angosta a una columna; la línea dorada arriba es la misma del POS. */
.og-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--og-body-bg);
}
.og-login-card {
  width: 100%; max-width: 680px;
  display: grid; grid-template-columns: 240px 1fr;
  background: var(--og-surface); border: 1px solid var(--og-border);
  border-top: 3px solid var(--og-accent);
  border-radius: var(--og-radius-lg); box-shadow: var(--og-shadow-md);
  overflow: hidden;
}
@media (max-width: 720px) { .og-login-card { grid-template-columns: 1fr; max-width: 400px; } }

/* ── Panel de marca ── */
.og-login-brand {
  background: linear-gradient(160deg, var(--og-brand) 0%, var(--og-brand-dark) 100%);
  padding: 28px 24px 22px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
@media (max-width: 720px) { .og-login-brand { display: none; } }
/* Destello dorado, apenas perceptible */
.og-login-brand::after {
  content: ''; position: absolute; right: -110px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--og-accent) 14%, transparent), transparent 68%);
}
/* El logo apilado (og-logo en-azul apilado), centrado arriba del panel */
.og-login-logo {
  font-size: 19px; display: flex; justify-content: center;
  margin: 4px 0 18px; position: relative; z-index: 1;
}
.og-login-claim {
  font-size: 12.5px; color: rgba(255, 255, 255, .65); text-align: center;
  line-height: 1.55; margin: 0; position: relative; z-index: 1;
}
.og-login-suc { margin-top: auto; padding-top: 24px; position: relative; z-index: 1; }
.og-login-suc-t {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: rgba(255, 255, 255, .45); margin-bottom: 6px;
}
.og-login-suc-i {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: rgba(255, 255, 255, .8); padding: 2px 0;
}
.og-login-suc-i i { color: var(--og-accent); font-size: 13px; }
.og-login-foot {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px; color: rgba(255, 255, 255, .5);
  position: relative; z-index: 1; line-height: 1.6;
}

/* ── Panel del formulario ── */
.og-login-form { padding: 28px 32px 26px; }
.og-login-box { width: 100%; }
.og-login-h { font-size: 20px; font-weight: 800; color: var(--og-primary); margin: 0 0 3px; }
.og-login-sub { font-size: 13px; color: var(--og-text-muted); margin: 0 0 18px; }
.og-login-box .og-form-group { margin-bottom: 12px; }
.og-login-box .og-form-control,
.og-login-box .og-form-select { min-height: 36px; }
.og-login-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 2px 0 16px; font-size: 13px;
}
.og-login-link { font-size: 12.5px; color: var(--og-link); text-decoration: none; font-weight: 500; }
.og-login-link:hover { text-decoration: underline; }
.og-login-caps {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--og-warning);
  margin-top: 4px;
}
/* Solo cuando Bloq Mayús está activado: el JS saca el atributo hidden */
.og-login-caps[hidden] { display: none; }
/* El botón de ingresar: alto de formulario, no de POS */
.og-login-box .btn-og-lg { min-height: 40px; font-size: 14px; }


/* =========================================================
   23. GRÁFICOS
   SVG inline, sin librería. Los colores salen de los tokens
   --og-chart-*, que están validados contra daltonismo.
   ========================================================= */

.og-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.og-chart-title { font-size: 15px; font-weight: 700; color: var(--og-primary); margin: 0; }
.og-chart-sub { font-size: 12px; color: var(--og-text-muted); margin-top: 2px; }

/* Leyenda: obligatoria desde 2 series */
.og-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.og-legend-i { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--og-text-muted); }
.og-legend-sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Ejes y grilla: recesivos, nunca compiten con los datos */
.og-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.og-chart-gridline { stroke: var(--og-chart-grid); stroke-width: 1; }
.og-chart-tick { fill: var(--og-chart-axis); font-size: 10px; font-family: inherit; }
.og-chart-label { fill: var(--og-text-muted); font-size: 11px; font-family: inherit; }
.og-chart-value { fill: var(--og-text); font-size: 11px; font-weight: 600; font-family: inherit; }
.og-chart-bar { transition: opacity .15s; }
.og-chart-hit { fill: transparent; cursor: pointer; }
.og-chart-hit:hover ~ .og-chart-bar, .og-chart-col:hover .og-chart-bar { opacity: .78; }

/* Tooltip */
.og-chart { position: relative; }
.og-tooltip {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--og-brand-dark); color: #fff;
  border-radius: var(--og-radius-md); padding: 8px 11px;
  font-size: 12px; box-shadow: var(--og-shadow-md);
  opacity: 0; transition: opacity .12s; white-space: nowrap;
}
.og-tooltip.show { opacity: 1; }
.og-tooltip-t { font-weight: 700; margin-bottom: 4px; }
.og-tooltip-r { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.75); }
.og-tooltip-r b { color: #fff; margin-left: auto; font-variant-numeric: tabular-nums; }
.og-tooltip-sw { width: 8px; height: 8px; border-radius: 2px; }

/* Grilla del dashboard */
.og-dash { display: grid; gap: 16px; }
/* align-items:start — una card no se estira para igualar a su vecina;
   estirarla deja un vacío enorme debajo de un gráfico. */
.og-dash-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.og-dash-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1200px) { .og-dash-2, .og-dash-3 { grid-template-columns: 1fr; } }

/* Lista compacta: pedidos web, composturas */
.og-list-i {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--og-border-soft);
}
.og-list-i:last-child { border-bottom: 0; }
.og-list-ico {
  width: 32px; height: 32px; border-radius: var(--og-radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.og-list-main { min-width: 0; flex: 1; }
.og-list-t { font-size: 13px; font-weight: 500; color: var(--og-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-list-s { font-size: 11.5px; color: var(--og-text-muted); }
.og-list-side { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cotización del día */
.og-cotiz { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--og-border-soft); }
.og-cotiz:last-child { border-bottom: 0; }
.og-cotiz-n { font-size: 13px; color: var(--og-text-muted); display: flex; align-items: center; gap: 7px; }
.og-cotiz-v { font-size: 15px; font-weight: 700; color: var(--og-primary); font-variant-numeric: tabular-nums; }
.og-cotiz-d { font-size: 11.5px; font-weight: 600; margin-left: 7px; font-variant-numeric: tabular-nums; }
.og-cotiz-up { color: var(--og-success); }
.og-cotiz-down { color: var(--og-danger); }


/* =========================================================
   24. ETIQUETA A LA IZQUIERDA
   Variante de og-form-grid. Mismo HTML, cambia solo el
   contenedor. Es el equivalente al "Beside" de Scriptcase.
   ========================================================= */

.og-labels-left .og-form-group {
  display: grid;
  grid-template-columns: var(--og-label-w) 1fr;
  align-items: center;
  column-gap: 10px;
}
/* Alineada a la izquierda, todas desde el mismo margen, como los prompts del Clarion.
   A la derecha (2026-10-04) cada etiqueta corta quedaba con un hueco distinto a su
   izquierda; el usuario lo pidió parejo (2026-10-07). Los campos siguen alineados. */
.og-labels-left .og-form-label {
  justify-content: flex-start;
  text-align: left;
  margin-bottom: 0;
  line-height: 1.25;
}
.og-labels-left .og-form-help,
.og-labels-left .og-form-error,
.og-labels-left .og-check-label { grid-column: 2; }
.og-labels-left .og-field-resolved { grid-column: 2; }
/* Grupo sin etiqueta: el control usa todo el ancho en vez de dejar
   112px vacíos a la izquierda. */
.og-labels-left .og-form-group.og-sin-etiqueta { grid-template-columns: 1fr; }
.og-labels-left .og-form-group.og-sin-etiqueta > .og-form-label { display: none; }


/* =========================================================
   25. ANCHO DE CAMPO POR DATO
   El ancho lo dicta el valor que guarda, no una grilla de
   columnas. Es lo que hacía Clarion con el picture.
   Los campos fluyen de izquierda a derecha y envuelven solos.
   ========================================================= */

.og-form-flow {
  display: flex; flex-wrap: wrap;
  gap: var(--og-field-gap) 16px;
  align-items: flex-start;
}
.og-form-flow > .og-form-group { flex: 0 0 auto; }

/* La escala. Es el ancho del CONTROL, no del grupo. */
.og-w-xs   { --og-w: 64px;  }   /* 21%  ·  0  ·  18            */
.og-w-sm   { --og-w: 128px; }   /* códigos · gramos · fechas   */
.og-w-md   { --og-w: 220px; }   /* nombres cortos · modelo     */
.og-w-lg   { --og-w: 360px; }   /* descripción                 */
.og-w-full { --og-w: 100%;  }   /* ocupa el renglón            */

.og-form-flow > .og-form-group > .og-form-control,
.og-form-flow > .og-form-group > .og-form-select,
.og-form-flow > .og-form-group > .og-form-textarea,
.og-form-flow > .og-form-group > .og-field-lookup { width: var(--og-w, 220px); }
.og-form-flow > .og-form-group.og-w-full { flex: 1 1 100%; }
.og-form-flow > .og-form-group.og-w-full > * { width: 100%; }

/* Un checkbox no tiene etiqueta arriba: se alinea con los controles del renglón,
   no con sus etiquetas. */
.og-form-flow:not(.og-labels-left) > .og-form-group:has(> .og-check-label) {
  align-self: flex-end;
  display: flex; align-items: center;
  min-height: var(--og-field-h);
}

/* Con la etiqueta al costado el grupo mide etiqueta + control */
.og-form-flow.og-labels-left > .og-form-group {
  display: grid;
  grid-template-columns: var(--og-label-w) auto;
  align-items: center;
  column-gap: 10px;
}
.og-form-flow.og-labels-left > .og-form-group > .og-form-label {
  justify-content: flex-start; text-align: left; margin-bottom: 0; line-height: 1.25;
}
.og-form-flow.og-labels-left > .og-form-group.og-w-full { grid-template-columns: var(--og-label-w) 1fr; }
/* Etiqueta al ancho de su texto: el campo se acerca a ella en vez de alinearse con los de
   arriba. Para una etiqueta cortada en dos renglones para ganar ancho («Código de barra /
   del fabricante»): con la columna fija de 112px el corte dejaba el mismo hueco, vacío. */
.og-form-flow.og-labels-left > .og-form-group.og-label-ajustada { grid-template-columns: max-content auto; }
.og-form-flow.og-labels-left > .og-form-group.og-label-ajustada.og-w-full { grid-template-columns: max-content 1fr; }
/* Un tilde no tiene etiqueta al costado: fluye sin la columna de etiquetas, varios por renglón. */
.og-form-flow.og-labels-left > .og-form-group:has(> .og-check-label) { grid-template-columns: auto; }
.og-form-flow.og-labels-left > .og-form-group > .og-check-label { grid-column: auto; }


/* =========================================================
   26. BLOQUES LADO A LADO
   Los fieldsets fluyen como los campos: cada uno declara su
   ancho y envuelven solos.
   ========================================================= */

.og-form-blocks { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: flex-start; }
.og-form-blocks > .og-fieldset { flex: 1 1 100%; min-width: 0; }
.og-fieldset.og-fs-threequarter { flex: 0 1 calc(75% - 15px); }
.og-fieldset.og-fs-twothird     { flex: 0 1 calc(66.666% - 14px); }
.og-fieldset.og-fs-half    { flex: 0 1 calc(50% - 10px); }
.og-fieldset.og-fs-third   { flex: 0 1 calc(33.333% - 14px); }
.og-fieldset.og-fs-quarter { flex: 0 1 calc(25% - 15px); }
/* Quintos: k/5 − 16px. Cinco de 1/5 con sus cuatro huecos de 20px suman justo el 100%. */
.og-fieldset.og-fs-fourfifths  { flex: 0 1 calc(80% - 16px); }
.og-fieldset.og-fs-threefifths { flex: 0 1 calc(60% - 16px); }
.og-fieldset.og-fs-twofifths   { flex: 0 1 calc(40% - 16px); }
.og-fieldset.og-fs-fifth       { flex: 0 1 calc(20% - 16px); }
@media (max-width: 900px) {
  .og-fieldset.og-fs-threequarter, .og-fieldset.og-fs-twothird,
  .og-fieldset.og-fs-half, .og-fieldset.og-fs-third,
  .og-fieldset.og-fs-quarter, .og-fieldset.og-fs-fourfifths,
  .og-fieldset.og-fs-threefifths, .og-fieldset.og-fs-twofifths,
  .og-fieldset.og-fs-fifth { flex-basis: 100%; }
}

/* Columna al costado, a lo alto: la foto de la ficha. La izquierda fluye como
   og-form-blocks y la derecha apila; sin esto, una foto de 1/5 al lado de un
   bloque de 4/5 hace alto el renglón y lo que sigue arranca debajo de la foto.
   El ancho de la columna derecha lo da og-lado-<ancho>. */
.og-form-con-lado { display: grid; grid-template-columns: 1fr calc(25% - 15px); gap: 0 20px; align-items: start; }
.og-form-con-lado > * { min-width: 0; }
.og-form-con-lado.og-lado-fifth     { grid-template-columns: 1fr calc(20% - 16px); }
.og-form-con-lado.og-lado-third     { grid-template-columns: 1fr calc(33.333% - 14px); }
.og-form-con-lado.og-lado-twofifths { grid-template-columns: 1fr calc(40% - 16px); }
.og-form-con-lado.og-lado-half      { grid-template-columns: 1fr calc(50% - 10px); }
@media (max-width: 900px) {
  .og-form-con-lado, .og-form-con-lado[class*="og-lado-"] { grid-template-columns: 1fr; }
}


/* Salto de renglón dentro de un bloque: un elemento de alto cero que ocupa
   toda la fila, así el siguiente campo arranca abajo. Es la forma de decidir
   dónde corta, en vez de dejarlo librado al ancho de las etiquetas. */
.og-form-flow > .og-salto { flex: 0 0 100%; height: 0; margin: 0; }
/* El salto que genera el diseñador: un flujo por renglón forzado, separados por el mismo
   gap. Con og-salto adentro del flujo el gap iba dos veces (arriba y abajo del salto). */
.og-form-flow + .og-form-flow { margin-top: var(--og-field-gap); }
/* Tildes en un bloque de media columna: de a dos, alineados, no en zigzag. */
.og-fs-half .og-form-flow > .og-form-group:has(> .og-check-label) { flex: 0 0 calc(50% - 8px); }


/* Color del texto. Son los mismos roles del sistema, no colores sueltos. */
.og-c-primary { color: var(--og-primary); }
.og-c-muted   { color: var(--og-text-muted); }
.og-c-success { color: var(--og-success); }
.og-c-danger  { color: var(--og-danger); }
.og-c-warning { color: var(--og-warning); }
.og-c-info    { color: var(--og-info); }
.og-c-accent  { color: var(--og-accent-text); }

/* ═══════════════════════════════════════════════════════════
   FECHA Y FECHA-HORA
   .og-date                     → solo fecha     dd/mm/aaaa
   .og-date.og-datetime         → fecha y hora   dd/mm/aaaa hh:mm (24 h, nunca AM/PM)
   No se usa <input type="date|datetime-local">: el navegador decide
   el formato según el idioma de Windows y en muchas PCs sale AM/PM
   o mm/dd. Acá el formato es siempre el nuestro.
   Comportamiento: static/js/og-fecha.js
   ═══════════════════════════════════════════════════════════ */
.og-date { position: relative; }
.og-date .og-form-control {
  padding-right: 34px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.og-date-btn {
  position: absolute; right: 3px; top: 3px;
  width: 28px; height: calc(var(--og-field-h) - 6px);   /* el alto del campo, no del bloque: abierto incluye el desplegable */
  border: 0; background: none; cursor: pointer;
  border-radius: var(--og-radius-sm);
  color: var(--og-text-soft); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--og-transition);
}
.og-date-btn:hover,
.og-date.open .og-date-btn { color: var(--og-brand); background: var(--og-brand-lighter); }

/* El desplegable: calendario y, en fecha-hora, la columna de la hora */
.og-date-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 1200;
  display: none; flex-direction: column;
  background: var(--og-surface); border: 1px solid var(--og-border);
  border-radius: var(--og-radius-lg); box-shadow: var(--og-shadow-md);
  padding: 12px;
}
.og-date.open .og-date-pop { display: flex; }
.og-date-pop-body { display: flex; gap: 12px; }
.og-date-pop .og-calendar {
  width: 236px; padding: 0; border: 0; box-shadow: none; border-radius: 0;
}
.og-date-pop .og-cal-foot {
  display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--og-border-soft);
}
/* Arriba del campo cuando no entra abajo (lo decide el JS) */
.og-date.arriba .og-date-pop { top: auto; bottom: calc(100% + 4px); }
/* Variante para mostrar el desplegable fijo, en la referencia de componentes */
.og-date.inline .og-date-pop { position: static; display: inline-flex; margin-top: 6px; box-shadow: var(--og-shadow-sm); }

/* Hora: dos columnas, horas 00–23 y minutos de 5 en 5 */
.og-time {
  width: 116px; display: flex; flex-direction: column;
  border-left: 1px solid var(--og-border-soft); padding-left: 12px;
}
.og-time-head {
  display: flex; align-items: baseline; justify-content: space-between;
  height: 26px; margin-bottom: 10px;
}
.og-time-value {
  font-size: 17px; font-weight: 700; color: var(--og-primary);
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
.og-time-24 {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: var(--og-brand); background: var(--og-brand-lighter);
  border-radius: 4px; padding: 2px 5px;
}
.og-time-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  height: 214px;
}
.og-time-col {
  overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 1px;
  padding-right: 2px;
}
.og-time-col-h {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--og-text-soft); text-align: center; padding-bottom: 4px;
  position: sticky; top: 0; background: var(--og-surface);
}
.og-time-opt {
  flex-shrink: 0; height: 26px; border: 0; background: none; cursor: pointer;
  border-radius: var(--og-radius-sm); font-family: inherit;
  font-size: 12.5px; color: var(--og-text); font-variant-numeric: tabular-nums;
}
.og-time-opt:hover { background: var(--og-surface-hover); }
.og-time-opt.selected { background: var(--og-accent); color: var(--og-on-accent); font-weight: 700; }

/* Lo que se entendió de lo tecleado, debajo del campo */
.og-date-hint {
  font-size: 11.5px; color: var(--og-text-muted); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.og-date-hint b { color: var(--og-primary); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════
   LOGO — Orfebre Gold Evolution (versión 4A)
   <span class="og-logo en-azul">  símbolo + «Orfebre Gold» + —Evolution—
   .en-azul  → sobre el azul del ERP: blanco, «Gold» en --og-accent
   .apilado  → símbolo arriba, nombre abajo (login, pantallas de carga)
   El markup está en templates/includes/logo.html.
   ═══════════════════════════════════════════════════════════ */
.og-logo {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--og-font-logo); line-height: 1; color: var(--og-logo-texto);
  text-decoration: none;
}
.og-logo.en-azul {
  --og-logo-diamante: #ffffff;
  --og-logo-etiqueta: #ffffff;
  --og-logo-texto: #ffffff;
  --og-logo-oro: var(--og-accent);
  --og-logo-sub: rgba(255, 255, 255, .78);
}
.og-logo-mark { width: 2.95em; height: auto; flex-shrink: 0; display: block; }
.og-logo-mark .d { fill: none; stroke: var(--og-logo-diamante); stroke-width: 24; stroke-linejoin: round; stroke-linecap: round; }
.og-logo-mark .e { fill: none; stroke: var(--og-logo-etiqueta); stroke-width: 16; stroke-linejoin: round; stroke-linecap: round; }
.og-logo-mark-min { display: none; width: 1.9em; height: auto; flex-shrink: 0; }
.og-logo-mark-min .d { fill: none; stroke: var(--og-logo-diamante); stroke-width: 30; stroke-linejoin: round; stroke-linecap: round; }
.og-logo-name { display: flex; flex-direction: column; align-items: center; }
.og-logo-t1 { font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.og-logo-t1 b { font-weight: 600; color: var(--og-logo-oro); }
.og-logo-evo {
  font-weight: 400; font-size: .8em; color: var(--og-logo-sub); white-space: nowrap;
  display: flex; align-items: center; gap: .32em; margin-top: .12em;
}
.og-logo-evo::before, .og-logo-evo::after {
  content: ''; width: .62em; height: max(2px, .07em); border-radius: 2px; background: var(--og-logo-oro);
}
.og-logo.apilado { flex-direction: column; gap: .5em; }
.og-logo.apilado .og-logo-mark { width: 4.2em; }

/* ═══════════════════════════════════════════════════════════
   DISEÑADOR DE ETIQUETAS (apps/etiquetas, og-etiquetas.js)
   La imagen es la etiqueta tal cual sale de la impresora (1 bit):
   se escala sin suavizar, para que se vean los puntos de verdad.
   ═══════════════════════════════════════════════════════════ */
.og-etq { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; padding-bottom: 72px; }
@media (max-width: 1100px) { .og-etq { grid-template-columns: 1fr; } }
.og-etq-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.og-etq-panel { display: flex; flex-direction: column; gap: 16px; }
.og-etq-titulo { margin-bottom: 10px; }
.og-etq-ayuda { font-size: 12px; color: var(--og-text-muted); margin: 0 0 10px; }
.og-etq-prop .og-form-grid { gap: 10px; }
.og-etq-prop .og-form-grid + .og-form-grid { margin-top: 10px; }
.og-etq-aux + .og-etq-aux { margin-top: 10px; }

.og-etq-barra { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.og-etq-barra .og-form-group { width: 150px; }
.og-etq-medida { margin-left: auto; font-size: 12px; color: var(--og-text-muted); font-variant-numeric: tabular-nums; }
.og-etq-pie { margin-top: 8px; font-size: 12px; color: var(--og-text-muted); }

/* El escenario es gris para que el blanco de la etiqueta se vea como papel */
.og-etq-escenario { background: var(--og-neutral-soft); border-radius: var(--og-radius-sm); padding: 18px; overflow-x: auto; }
.og-etq-lienzo {
  position: relative; width: 100%; flex-shrink: 0;
  background: #fff; box-shadow: var(--og-shadow-xs); outline: 1px solid var(--og-border);
}
.og-etq-lienzo:focus-visible { outline: 2px solid var(--og-accent); }
.og-etq-lienzo img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.og-etq-capa { position: absolute; inset: 0; }
.og-etq-cola {
  position: absolute; top: 0; bottom: 0; background: var(--og-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--og-text-muted); pointer-events: none;
}
.og-etq-corte { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--og-danger); pointer-events: none; }
.og-etq-caja { position: absolute; outline: 1px dashed color-mix(in srgb, var(--og-brand) 55%, transparent); cursor: move; touch-action: none; }
.og-etq-caja:hover { background: color-mix(in srgb, var(--og-brand) 8%, transparent); }
.og-etq-caja.sel { outline: 2px solid var(--og-accent); background: var(--og-accent-soft); }

.og-etq-elementos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.og-etq-agregar { display: flex; gap: 6px; flex-wrap: wrap; }
.og-etq-tabla tbody tr { cursor: pointer; }
.og-etq-tabla tr.og-etq-sel td { background: var(--og-brand-lighter); }
.og-etq-impresora { width: auto; max-width: 200px; }

/* Campos del archivo: se arrastran a la etiqueta */
.og-etq-campos { display: flex; flex-wrap: wrap; gap: 5px; }
.og-etq-campo {
  font: inherit; font-size: 12px; line-height: 1; padding: 6px 9px; cursor: grab; touch-action: none;
  border: 1px solid var(--og-border); border-radius: var(--og-radius-sm);
  background: var(--og-surface); color: var(--og-text);
}
.og-etq-campo:hover { border-color: var(--og-brand); background: var(--og-brand-lighter); }
.og-etq-campo.usado { border-color: color-mix(in srgb, var(--og-brand) 45%, transparent); color: var(--og-brand); }
.og-etq-fantasma { position: fixed; z-index: 2000; pointer-events: none; box-shadow: var(--og-shadow-xs); border-color: var(--og-accent); }
@media (pointer: coarse) { .og-etq-campo { padding: 10px 12px; font-size: 13px; } }

/* Bloque de texto para copiar (la clave del impresor) */
.og-codigo {
  margin: 0; padding: 10px 12px; border-radius: var(--og-radius-sm);
  background: var(--og-surface-soft); border: 1px solid var(--og-border);
  font-family: var(--og-font-mono, ui-monospace, monospace); font-size: 13px; white-space: pre-wrap;
}