/* Consumo: forma del estándar de gráficos (~/.claude/estilo-graficos.md) sobre el kit
 * de la consola. Rampa monocromática violeta, gris = ausencia o sin atribuir, un solo
 * rojo por pantalla (error del tema). Los colores que cambian con el tema van por
 * variable, definidos sobre el nodo del tema de Vuetify. */
.v-theme--light { --cs-v1: #2E1A63; --cs-v2: #6D3FD8; --cs-v3: #9F7AEA; --cs-v4: #CDBDF6; --cs-gris: #C3C9D6;
  --cs-pista: rgba(28, 30, 36, .06); --cs-regla: rgba(28, 30, 36, .10); --cs-tinta: #1C1E24; --cs-tinta-2: #5B6479;
  --cs-marca: #7C3AED; --cs-hover: rgba(124, 58, 237, .08); }
.v-theme--dark { --cs-v1: #DDD6FE; --cs-v2: #A78BFA; --cs-v3: #7C5CE0; --cs-v4: #4C3A9A; --cs-gris: #4A4F61;
  --cs-pista: rgba(255, 255, 255, .07); --cs-regla: rgba(255, 255, 255, .12); --cs-tinta: #E6E8EC; --cs-tinta-2: #9AA3B5;
  --cs-marca: #A78BFA; --cs-hover: rgba(167, 139, 250, .10); }
.cs { display: grid; gap: 20px; min-width: 0; --cs-rojo: rgb(var(--v-theme-error)); }
.cs .ui-banda { margin-bottom: 0 !important; }
.num { font-variant-numeric: tabular-nums; }

/* Pestañas y filtros */
.cs-pestanas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--cs-regla); }
.cs-pestana { border: 0; background: transparent; padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--cs-tinta-2);
  cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; text-decoration: none; }
.cs-pestana:hover { color: var(--cs-tinta); }
.cs-pestana[aria-selected="true"] { color: var(--cs-marca); border-bottom-color: var(--cs-marca); }
.cs-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cs-filtros .esp { flex: 1; }
.cs-sep { width: 1px; height: 22px; background: var(--cs-regla); margin-inline: 4px; }
.cs-filtros-et { font-size: 13px; color: var(--cs-tinta-2); font-weight: 600; }
.cs-chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cs-regla); background: rgb(var(--v-theme-surface));
  color: var(--cs-tinta); font-size: 14px; font-weight: 600; cursor: pointer; }
.cs-chip[aria-pressed="true"] { background: var(--cs-marca); border-color: var(--cs-marca); color: rgb(var(--v-theme-surface)); }
.cs-chip--activo { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--cs-marca) 14%, transparent);
  color: var(--cs-marca); border-color: transparent; }
.cs-chip:focus-visible, .cs-pestana:focus-visible, .cs-fila:focus-visible, .cs-item:focus-visible, .cs-volver:focus-visible { outline: 2px solid var(--cs-marca); outline-offset: 2px; }

/* Grilla: dos por fila */
.cs-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1099px) { .cs-grilla { grid-template-columns: minmax(0, 1fr); } }
.cs-bloque { display: grid; gap: 8px; min-width: 0; align-content: start; }
.cs-bloque-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cs-bloque-t { margin: 0; font-size: 22px; font-weight: 800; text-wrap: balance; }
.cs-bloque-s { font-size: 13px; color: var(--cs-tinta-2); }

/* Tarjeta */
.cs-card { background: rgb(var(--v-theme-surface)); border-radius: 10px; }
.cs-card .ui-banda--head { justify-content: space-between; }
.cs-card .ui-banda--head .nota { font-weight: 500; opacity: .82; font-size: 14px; }
.cs-cuerpo { padding: 8px 0; }
.cs-pie { padding: 10px 16px 8px; font-size: 13px; color: var(--cs-tinta-2); border-top: 1px solid var(--cs-regla); }

/* Fila / partes */
.cs-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 6px; align-items: center;
  padding: 12px 16px; width: 100%; border: 0; background: transparent; text-align: left; color: inherit; font: inherit; text-decoration: none; }
.cs-fila + .cs-fila { border-top: 1px solid var(--cs-regla); }
.cs-fila--ir { cursor: pointer; }
.cs-fila--ir:hover { background: var(--cs-hover); }
.cs-fila--ir:hover .cs-flecha, .cs-item:hover .cs-flecha { opacity: 1; }
.cs-fila-cifra { font-size: 24px; font-weight: 800; min-width: 92px; }
.cs-fila-cifra small { font-size: 13px; font-weight: 600; color: var(--cs-tinta-2); margin-left: 3px; }
.cs-fila-et { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.cs-fila-sub { font-size: 13px; color: var(--cs-tinta-2); }
.cs-fila-der { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.cs-flecha { opacity: 0; color: var(--cs-marca); transition: opacity .15s; }
.cs-pista { grid-column: 1 / -1; position: relative; height: 9px; border-radius: 5px; background: var(--cs-pista); }
.cs-tramo { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.cs-tramo--proy { background: repeating-linear-gradient(135deg, var(--cs-v4) 0 4px, transparent 4px 7px); border: 1px solid var(--cs-v3); }
.cs-marca-tope { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--cs-tinta); }
.cs-ref { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 16px 8px; font-size: 13px; color: var(--cs-tinta-2); }
.cs-ref i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Pastillas */
.cs-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cs-pill--v { background: color-mix(in srgb, var(--cs-marca) 14%, transparent); color: var(--cs-marca); }
.cs-pill--g { background: var(--cs-pista); color: var(--cs-tinta-2); }
.cs-pill--solida { background: var(--cs-rojo); color: rgb(var(--v-theme-surface)); }

/* Lista */
.cs-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; width: 100%; border: 0;
  background: transparent; text-align: left; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.cs-item + .cs-item { border-top: 1px solid var(--cs-regla); }
.cs-item:hover { background: var(--cs-hover); }
.cs-item--quieto { cursor: default; }
.cs-item--quieto:hover { background: transparent; }
.cs-item-id { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.cs-item-desc { font-size: 13.5px; color: var(--cs-tinta-2); grid-column: 1; }
.cs-item-der { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: var(--cs-tinta-2); }
.cs-item-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.cs-item-total { font-size: 20px; font-weight: 800; color: var(--cs-tinta); }
.cs-item .cs-pista { grid-column: 1 / -1; margin-top: 4px; }

/* Dona y columnas */
.cs-dona { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 8px 8px 16px; }
@media (max-width: 520px) { .cs-dona { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.cs-dona svg { width: 190px; height: 190px; }
.cs-dona .cs-cuerpo { padding: 0; width: 100%; }
.cs-columnas { overflow-x: auto; padding: 12px 8px 4px; }
.cs-columnas svg { display: block; width: 100%; height: auto; }
.cs-columnas text { fill: var(--cs-tinta); font-family: var(--cg-fuente); }
.cs-columnas .sub { fill: var(--cs-tinta-2); }
.cs-columnas g.col { cursor: pointer; }
.cs-columnas g.col:hover rect.barra-col { opacity: .75; }
.cs-columnas g.col.sel rect.barra-col { fill: var(--cs-marca); }
.cs-columnas g.col:focus-visible { outline: none; }
.cs-columnas g.col:focus-visible rect.barra-col { stroke: var(--cs-marca); stroke-width: 2; }
.cs-vacio { padding: 18px 16px; font-size: 14px; color: var(--cs-tinta-2); }

/* Vistas completas */
.cs-volver { justify-self: start; border: 0; background: transparent; color: var(--cs-marca); font: inherit; font-weight: 700;
  cursor: pointer; padding: 4px 0; text-decoration: none; }
.cs-form { display: grid; gap: 16px; padding: 16px; }
.cs-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .cs-campos { grid-template-columns: minmax(0, 1fr); } }
.cs-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .cs * { transition: none !important; } }

/* Módulos de servicio de un comercio (ficha y configuración) */
.cs-pill--ok { background: color-mix(in srgb, rgb(var(--v-theme-success)) 16%, transparent); color: rgb(var(--v-theme-success)); }
.cs-pill--r { background: var(--cs-rojo, rgb(var(--v-theme-error))); color: rgb(var(--v-theme-surface)); }
.seccion-t { margin: 0; font-size: 22px; font-weight: 800; }
.mod-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; --cs-rojo: rgb(var(--v-theme-error)); }
@media (max-width: 1199px) { .mod-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .mod-grilla { grid-template-columns: minmax(0, 1fr); } }
.cs-mod { display: grid; align-content: start; background: rgb(var(--v-theme-surface)); border-radius: 10px; }
.cs-mod-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
.cs-mod-ico { width: 40px; height: 40px; border-radius: 10px; flex: none; background: color-mix(in srgb, var(--cs-marca) 14%, transparent); color: var(--cs-marca); }
.cs-mod--off .cs-mod-ico { background: var(--cs-pista); color: var(--cs-tinta-2); }
.cs-mod-nom { flex: 1; min-width: 0; }
.cs-mod-t { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.cs-mod-de { font-size: 13px; color: var(--cs-tinta-2); }
.cs-mod-cuerpo { padding: 4px 16px 12px; display: grid; gap: 10px; }
.cs-mod-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.cs-mod-fila > span:first-child { color: var(--cs-tinta-2); }
.cs-mod-fila--chica { font-size: 13px; }
.cs-mod-pista { grid-column: auto; }
.cs-mod-pie { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--cs-regla); }
.cs-mod-aviso { font-size: 13px; color: var(--cs-tinta-2); }
.cs-mod-confirma { display: grid; gap: 8px; margin: 0 16px 4px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px;
  background: color-mix(in srgb, rgb(var(--v-theme-error)) 10%, transparent); }
.cs-mod-confirma--libre { margin: 0; font-size: 14.5px; }
.cs-mod-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.mods { display: flex; gap: 6px; flex-wrap: wrap; }
.mod-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--cs-regla); white-space: nowrap; }
.mod-chip i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--v-theme-success)); }
.mod-chip--off { color: var(--cs-tinta-2); border-style: dashed; }
.mod-chip--off i { background: var(--cs-gris); }
.cs-fila--dato { grid-template-columns: minmax(0, 1fr) auto; padding-block: 9px; }
.cs-fila--dato .cs-fila-et { font-weight: 600; font-size: 14.5px; }

/* En pesos (2026-10-25): selector de dólar y subtítulos dentro de la tarjeta */
.cs-casas { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; }
.cs-casa { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  border: 1px solid var(--cs-regla); background: transparent; color: var(--cs-tinta); }
.cs-casa small { font-size: 12.5px; font-weight: 600; color: var(--cs-tinta-2); }
.cs-casa.si { border-color: var(--cs-v2); box-shadow: inset 0 0 0 1px var(--cs-v2); }
.cs-casa:disabled { opacity: .45; cursor: default; }
.cs-casa:focus-visible { outline: 2px solid var(--cs-v2); outline-offset: 2px; }
.cs-sub-t { margin: 14px 0 2px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-tinta-2); }
.cs-sub-t span { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; }