/* Componentes: caja de RUC, botones, formularios, tablas, diálogos, avisos y estados.
 * Sin sombras ni degradados: bordes de 1 px, rellenos planos y espacio.
 */

/* ---------- Caja de RUC: el recuadro de los comprobantes peruanos ---------- */
.caja-ruc {
  flex: none;
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 16px 10px;
  border: 1.5px solid var(--tinta); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); text-align: center; line-height: 1.15;
  font-stretch: 78%;
  transition: border-color .12s;
}
.caja-ruc__ruc { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.caja-ruc__tipo { font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sello-texto); }
.caja-ruc__numero { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.caja-ruc--chica { padding: 8px 10px 7px; border-radius: 7px; gap: 2px; }
.caja-ruc--chica .caja-ruc__ruc { font-size: 12.5px; }
.caja-ruc--chica .caja-ruc__tipo { font-size: 12px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alto-control); padding: 8px 16px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
  font-size: 14.5px; font-weight: 550; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: background-color .12s, border-color .12s, color .12s;
}
.boton .icono { margin-left: -2px; }
.boton:hover { background: var(--fondo); border-color: var(--borde-hover); }
.boton:active { background: var(--fondo-2); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.boton:disabled:hover { background: var(--papel); border-color: var(--linea-fuerte); }
.boton--primario { background: var(--sello); border-color: var(--sello); color: #fff; }
.boton--primario:hover { background: var(--sello-fuerte); border-color: var(--sello-fuerte); }
.boton--primario:active { background: var(--sello-fuerte); }
.boton--primario:disabled:hover { background: var(--sello); border-color: var(--sello); }
.boton--peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.boton--peligro:hover { background: var(--error-fuerte); border-color: var(--error-fuerte); }
.boton--peligro:disabled:hover { background: var(--peligro); border-color: var(--peligro); }
.boton--ancho { width: 100%; min-height: 44px; font-size: 15px; }

.boton-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radio); background: none; color: var(--tinta-2);
  transition: background-color .12s, color .12s;
}
.boton-icono:hover { background: var(--fondo-2); color: var(--tinta); }
.boton-icono--peligro:hover { background: var(--error-suave); color: var(--error); }

.acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Formularios ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; min-height: var(--alto-control); padding: 8px 12px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background-color: var(--papel); color: var(--tinta);
  transition: border-color .12s;
}
textarea { resize: vertical; min-height: 84px; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: var(--borde-hover); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--sello-anillo); outline-offset: 0; border-color: var(--sello); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--fondo); color: var(--tinta-3); cursor: not-allowed; }
input.es-numero { text-align: right; font-variant-numeric: tabular-nums; }
input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--sello); flex: none; cursor: pointer; }

.formulario__rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 16px; }
.campo { grid-column: span 6; min-width: 0; }
.campo--mitad { grid-column: span 3; }
.campo--tercio { grid-column: span 2; }
.campo--dos-tercios { grid-column: span 4; }
.campo--casilla { align-self: center; }
.campo__etiqueta { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.campo__ayuda { margin-top: 5px; font-size: 12.5px; color: var(--tinta-3); line-height: 1.4; }
.campo__error { font-size: 12.5px; line-height: 1.4; color: var(--error); font-weight: 500; }
.campo__error:empty { display: none; }
.campo__error:not(:empty) { margin-top: 5px; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--error); }
.campo--error input:focus, .campo--error select:focus, .campo--error textarea:focus { outline-color: var(--error-anillo); }
.campo--aviso .campo__error { color: var(--espera); }
.campo--aviso input { border-color: var(--espera); }
.casilla { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.formulario__intro { margin-bottom: 16px; color: var(--tinta-2); }
.formulario--angosto { max-width: 380px; display: flex; flex-direction: column; gap: 16px; }

/* Contraseña con botón para mostrarla */
.campo__clave { position: relative; }
.campo__clave input { padding-right: 46px; }
.campo__ojo {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 32px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--tinta-3);
}
.campo__ojo:hover { color: var(--tinta); background: var(--fondo-2); }
.campo__mayus { margin-top: 5px; font-size: 12.5px; font-weight: 550; color: var(--espera); }

.alerta { padding: 11px 14px; border: 1px solid transparent; border-radius: var(--radio); font-size: 14px; line-height: 1.45; margin-bottom: 16px; }
.alerta--error { background: var(--error-suave); border-color: var(--error-borde); color: var(--error-tinta); }
.alerta--info { background: var(--sello-suave); border-color: var(--sello-anillo); color: var(--sello-texto-fuerte); }

@media (max-width: 639px) {
  .campo--mitad, .campo--tercio, .campo--dos-tercios { grid-column: span 6; }
  /* 16 px evita que iOS acerque la página al tocar un campo. */
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], input[type="month"], input[type="number"], select, textarea { font-size: 16px; }
}

/* ---------- Diálogos ---------- */
.dialogo {
  width: calc(100% - 32px); max-height: calc(100% - 32px);
  padding: 0; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-grande);
  background: var(--papel); color: var(--tinta);
  overflow: hidden;
}
.dialogo[open] { display: flex; flex-direction: column; }
.dialogo::backdrop { background: var(--velo); }
.dialogo--chico { max-width: 440px; }
.dialogo--medio { max-width: 580px; }
.dialogo--grande { max-width: 800px; }
.dialogo--visor { max-width: 960px; height: calc(100% - 32px); }
.dialogo--visor .dialogo__cuerpo { flex: 1; display: flex; min-height: 0; }
.visor { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.visor__marco { flex: 1; width: 100%; min-height: calc(55vh / var(--zoom, 1)); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.dialogo__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 14px 24px; border-bottom: 1px solid var(--linea); }
.dialogo__titulo { font-size: 19px; min-width: 0; overflow-wrap: anywhere; }
.dialogo__cuerpo { padding: 20px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
.dialogo__texto { color: var(--tinta-2); }
.dialogo__pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; background: var(--fondo); border-top: 1px solid var(--linea); }

@media (max-width: 639px) {
  /* En el teléfono el diálogo ocupa el ancho y se apoya abajo, al alcance del pulgar. */
  .dialogo { width: 100%; max-width: none !important; max-height: calc(100% - 24px); margin: auto 0 0; border-radius: var(--radio-grande) var(--radio-grande) 0 0; border-bottom: 0; }
  .dialogo--visor { height: calc(100% - 24px); }
  .dialogo__cabecera { padding: 14px 10px 12px 18px; }
  .dialogo__cuerpo { padding: 16px 18px 20px; }
  .dialogo__pie { flex-direction: column-reverse; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .dialogo__pie .boton { width: 100%; min-height: 44px; }
}

/* ---------- Avisos ---------- */
.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; display: flex; flex-direction: column; gap: 10px; width: min(400px, calc(100vw - 32px)); }
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 8px 12px 14px; border-radius: var(--radio-grande);
  background: var(--globo); color: #fff; border: 1px solid var(--globo-borde);
  animation: aviso-entra .18s ease-out;
}
@keyframes aviso-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Movimiento suave: la pantalla entra (solo opacidad, para no mover lo fijo), los diálogos aparecen y el velo se oscurece. */
@keyframes entra-suave { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.contenido > * { animation: entra-suave .2s ease-out both; }
.dialogo[open] { animation: dialogo-entra .18s ease-out; }
.dialogo[open]::backdrop { animation: entra-suave .18s ease-out; }
/* Botón ocupado (aria-busy): la ruedita antes del texto. */
.boton[aria-busy="true"] { cursor: progress; }
.boton[aria-busy="true"]::before { content: ''; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: giro .7s linear infinite; }
.aviso__icono { padding-top: 1px; }
.aviso--ok .aviso__icono { color: #74d7a6; }
.aviso--error .aviso__icono { color: #ff9d90; }
.aviso--info .aviso__icono { color: #a9b8ff; }
.aviso__cuerpo { flex: 1; min-width: 0; }
.aviso__titulo { font-weight: 600; line-height: 1.3; }
.aviso__mensaje { margin-top: 2px; font-size: 14px; color: #d1d5db; line-height: 1.4; overflow-wrap: anywhere; }
.aviso .enlace { margin-top: 6px; color: #c3ceff; font-size: 14px; text-decoration-color: rgba(195, 206, 255, 0.5); }
.aviso .boton-icono { color: #9ca3af; width: 28px; height: 28px; }
.aviso .boton-icono:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.aviso__detalle { margin-top: 8px; font-size: 13px; color: #c5ccdc; }
.aviso__detalle summary { cursor: pointer; }
.aviso__detalle pre { margin: 6px 0 0; padding: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; }

@media (max-width: 639px) { .avisos { right: 16px; left: 16px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Etiquetas de estado: texto y color ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 8px; border: 1px solid transparent; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.etiqueta--ok { background: var(--ok-suave); border-color: var(--ok-borde); color: var(--ok); }
.etiqueta--espera { background: var(--espera-suave); border-color: var(--espera-borde); color: var(--espera); }
.etiqueta--error { background: var(--error-suave); border-color: var(--error-borde); color: var(--error); }
.etiqueta--neutro { background: var(--neutro-suave); border-color: var(--linea); color: var(--neutro); }

/* ---------- Bloques de contenido ---------- */
.bloque + .bloque { margin-top: 40px; }
.dos-columnas > .bloque { margin-top: 0; }
.bloque__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bloque__titulo { font-size: 18px; margin-bottom: 14px; }
.bloque__cabecera .bloque__titulo { margin-bottom: 0; }
.bloque__subtitulo { font-size: 15.5px; margin: 28px 0 12px; }
.bloque__texto { color: var(--tinta-2); max-width: 70ch; margin-bottom: 14px; }
.nota { margin-top: 12px; font-size: 13.5px; color: var(--tinta-3); max-width: 72ch; }
.conexion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }

.ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; }
.ficha dt { color: var(--tinta-3); }
.ficha dd { font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.cifras { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-bottom: 18px; }
.cifra { display: flex; flex-direction: column; }
.cifra__valor { font-size: 40px; font-stretch: 80%; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra__texto { margin-top: 5px; color: var(--tinta-2); font-size: 14px; }
.cifra--alerta .cifra__valor { color: var(--error); }

@media (max-width: 479px) {
  .ficha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ficha dd { margin-bottom: 10px; }
}

/* ---------- Estados de carga, vacío y error ---------- */
.estado { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px 0; color: var(--tinta-2); }
.estado > .icono { color: var(--tinta-3); margin-bottom: 4px; }
.estado--error > .icono { color: var(--error); }
.estado__titulo { font-weight: 600; color: var(--tinta); }
.estado__mensaje { max-width: 60ch; }
.estado .boton { margin-top: 8px; }
.estado__detalle { font-size: 13px; }
.estado__detalle summary { cursor: pointer; color: var(--tinta-3); }
.estado__detalle pre { margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }

.giro { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--linea); border-top-color: var(--sello); animation: giro 0.8s linear infinite; margin-bottom: 4px; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- Filtros y búsqueda sobre la tabla ---------- */
.filtros { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.filtros--sueltos { margin-bottom: 14px; }
.filtros select { width: auto; min-width: 200px; }
.buscador { flex: 1; max-width: 380px; min-width: 220px; }
input.caja-busqueda {
  padding-left: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 4px; margin: -8px 0 28px; border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { padding: 10px 14px 11px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--tinta-2); font-weight: 550; white-space: nowrap; transition: color .12s, border-color .12s; }
.pestana:hover { color: var(--tinta); border-bottom-color: var(--linea-fuerte); }
.pestana.es-actual { color: var(--sello-texto); border-bottom-color: var(--sello); }
/* Si la página ya tiene línea bajo el título, las pestañas la reemplazan. */
.pagina__cabecera + .pestanas { margin-top: -29px; }
.pagina__cabecera:has(+ .pestanas) { border-bottom-color: transparent; }

@media (max-width: 639px) {
  .pagina__cabecera + .pestanas { margin-top: -21px; margin-left: -16px; margin-right: -16px; padding: 0 12px; }
}
@media (max-width: 359px) {
  .pagina__cabecera + .pestanas { margin-left: -12px; margin-right: -12px; padding: 0 8px; }
}

/* ---------- Tabla simple (listas cortas) ---------- */
.desplaza { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-simple { width: 100%; }
.tabla-simple th { padding: 9px 14px 9px 0; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
.tabla-simple td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-simple tbody tr:last-child td { border-bottom: 0; }
.tabla-simple th.num, .tabla-simple td.num { text-align: right; }
.tabla-simple th:last-child, .tabla-simple td:last-child { padding-right: 0; }
.tabla-simple .col-n { width: 40px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.tabla-simple--pruebas { min-width: 640px; }
.prueba__nombre { display: block; font-weight: 550; }
.prueba__peticion { display: block; font-size: 12.5px; color: var(--tinta-3); overflow-wrap: anywhere; }
.prueba__detalle { font-size: 13.5px; color: var(--tinta-2); overflow-wrap: anywhere; min-width: 200px; }

/* ---------- Lista editable (categorías) ---------- */
.fila-agregar { display: flex; gap: 8px; }
.fila-agregar input { flex: 1; min-width: 0; }
.lista-editable { margin-top: 14px; border-top: 1px solid var(--linea); }
.lista-editable li { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--linea); }
.lista-editable__nombre { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.lista-editable__dato { font-size: 13px; color: var(--tinta-3); white-space: nowrap; margin-right: 4px; }
.lista-editable__vacio { color: var(--tinta-3); }

/* ==========================================================================
   DataTables: se conserva su estructura y se reemplaza su apariencia.
   La tabla va dentro de un marco de 1 px con cabecera en gris muy claro.
   ========================================================================== */
.dt-container { font-size: 14.5px; color: var(--tinta); }
.dt-container .dt-layout-row { margin: 0 0 14px; }
.dt-container .dt-layout-row:last-child { margin: 14px 0 0; }
.dt-container .dt-layout-row.dt-layout-table { margin: 0; }
.dt-container .dt-layout-cell { padding: 0; }
.dt-container .dt-layout-row.dt-layout-table > .dt-layout-cell {
  border: 1px solid var(--linea); border-radius: var(--radio-grande); overflow: hidden; overflow: clip; background: var(--papel);
}

.dt-container .dt-search { position: relative; max-width: 380px; width: 100%; }
.dt-container .dt-search input {
  width: 100%; margin: 0 !important; min-height: var(--alto-control); padding: 8px 12px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background-color: var(--papel);
}
.dt-container .dt-layout-row:first-child { align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.dt-container .dt-layout-row:first-child .dt-layout-start { flex: 1 1 260px; max-width: 380px; margin: 0; }
.dt-container .dt-layout-row:first-child .dt-layout-end { flex: 0 1 auto; margin: 0 auto 0 0; }

table.dataTable { width: 100% !important; margin: 0 !important; border-collapse: collapse; }
table.dataTable > thead > tr > th {
  padding: 11px 16px 11px 0; text-align: left; background: var(--fondo);
  font-size: 12.5px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--linea) !important; white-space: nowrap;
}
table.dataTable > tbody > tr > td { padding: 13px 16px 13px 0; border-top: 0 !important; border-bottom: 1px solid var(--linea); vertical-align: middle; }
/* Los títulos de columna quedan a la vista al bajar por una lista larga. */
table.dataTable > thead > tr > th { position: sticky; top: 0; z-index: 2; }
/* La fila bajo el cursor se marca con el color de la empresa. */
table.dataTable.display > tbody > tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--sello) !important; }
table.dataTable > tbody > tr > td.num, .tabla-simple td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-simple tbody tr:hover > td { background: var(--fila-hover); }
table.dataTable > tbody > tr:last-child > td { border-bottom: 0; }
table.dataTable > thead > tr > th:first-child, table.dataTable > tbody > tr > td:first-child { padding-left: 16px; }
table.dataTable.display > tbody > tr, table.dataTable.display > tbody > tr > * { background: none !important; box-shadow: none !important; }
table.dataTable.display > tbody > tr:hover > * { background: var(--fila-hover) !important; }
table.dataTable > thead > tr > th.num, table.dataTable > tbody > tr > td.num { text-align: right; }
table.dataTable > thead > tr > th.num .dt-column-header { flex-direction: row-reverse; }
table.dataTable > thead > tr > th:last-child, table.dataTable > tbody > tr > td:last-child { padding-right: 16px; }
table.dataTable > tbody > tr > td.dt-empty { padding: 32px 16px; text-align: left; color: var(--tinta-3); }
table.dataTable > tbody > tr > td.col-ancha { white-space: normal; min-width: 180px; }
table.dataTable > tbody > tr > td.col-acciones { text-align: right; white-space: nowrap; padding-top: 4px; padding-bottom: 4px; padding-right: 10px; }
table.dataTable > thead > tr > th.col-acciones { text-align: right; }
table.dataTable > thead > tr > th.col-acciones .dt-column-header { justify-content: flex-end; }
table.dataTable > tbody > tr > td.col-n, table.dataTable > thead > tr > th.col-n { width: 46px; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dataTable thead > tr > th .dt-column-order::before, table.dataTable thead > tr > th .dt-column-order::after { font-size: 0.7em; }
/* Las flechas de orden aparecen al pasar el cursor o cuando la columna está ordenada. */
table.dataTable thead > tr > th .dt-column-order { opacity: 0; transition: opacity 0.12s; }
table.dataTable thead > tr > th:hover .dt-column-order, table.dataTable thead > tr > th:focus-visible .dt-column-order,
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order { opacity: 1; }
table.dataTable > thead > tr > th.codigo { font-stretch: 100%; font-weight: 600; letter-spacing: 0.04em; }
table.dataTable > thead > tr > th:hover, table.dataTable > thead > tr > th:active { outline: none !important; }
table.dataTable > thead > tr > th.dt-orderable-asc:hover, table.dataTable > thead > tr > th.dt-orderable-desc:hover { color: var(--tinta); }
/* DataTables alinea a la derecha lo que parece número; aquí solo lo hace la clase .num. */
table.dataTable > thead > tr > th.dt-type-numeric:not(.num), table.dataTable > tbody > tr > td.dt-type-numeric:not(.num) { text-align: left; }
table.dataTable > thead > tr > th.dt-type-numeric:not(.num) .dt-column-header { flex-direction: row; }

/* Botón + / − para ver las columnas ocultas en pantallas angostas (íconos SVG, sin degradados). */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control { cursor: pointer; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
  content: ''; display: inline-block; vertical-align: -6px;
  width: 22px; height: 22px; margin-right: 8px; box-sizing: border-box;
  border: 1px solid var(--linea-fuerte); border-radius: 6px; transform: none;
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232342b5' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before {
  border-color: var(--sello);
  background: var(--sello) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

table.dataTable > tbody > tr.child > td { padding: 4px 16px 14px 46px !important; background: var(--fondo) !important; }
table.dataTable > tbody > tr.child ul.dtr-details { display: block; width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0; }
table.dataTable > tbody > tr.child span.dtr-title { flex: none; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); white-space: nowrap; }
/* La tabla no parte líneas; la fila expandida sí, para que un texto largo no ensanche la página. */
table.dataTable > tbody > tr.child span.dtr-data { min-width: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }

.dt-container .dt-info { padding: 0; font-size: 13.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.dt-container .dt-paging { display: flex; justify-content: flex-end; }
.dt-container .dt-paging nav { display: flex; gap: 4px; flex-wrap: wrap; }
.dt-container .dt-paging .dt-paging-button {
  min-width: 36px; height: 36px; margin: 0; padding: 0 10px;
  border: 1px solid var(--linea) !important; border-radius: var(--radio);
  background: var(--papel) !important; color: var(--tinta-2) !important; font-variant-numeric: tabular-nums; box-shadow: none !important;
}
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) { background: var(--fondo) !important; border-color: var(--linea-fuerte) !important; color: var(--tinta) !important; }
.dt-container .dt-paging .dt-paging-button.current { border-color: var(--sello) !important; background: var(--sello-suave) !important; color: var(--sello-texto) !important; font-weight: 650; }
.dt-container .dt-paging .dt-paging-button.disabled { color: var(--linea-fuerte) !important; cursor: default; }
.dt-container .dt-paging .ellipsis { padding: 0 4px; color: var(--tinta-3); }

@media (max-width: 639px) {
  .dt-container .dt-search { max-width: none; }
  .dt-container .dt-layout-row:first-child .dt-layout-start { max-width: none; }
  .dt-container .dt-layout-row:last-child { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .dt-container .dt-paging { justify-content: flex-start; }
  table.dataTable > thead > tr > th:first-child, table.dataTable > tbody > tr > td:first-child { padding-left: 12px; }
  table.dataTable > thead > tr > th:last-child, table.dataTable > tbody > tr > td:last-child { padding-right: 12px; }
  table.dataTable > thead > tr > th, table.dataTable > tbody > tr > td { padding-right: 12px; }
  table.dataTable > tbody > tr.child > td { padding: 4px 12px 12px 12px !important; }
}

/* ==========================================================================
   Nueva venta
   ========================================================================== */
.venta { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.venta__principal { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.venta__seccion { min-width: 0; }
.venta__titulo { display: block; margin-bottom: 10px; font-size: 16px; font-stretch: 86%; font-weight: 650; line-height: 1.2; }

/* Selector de tipo de documento */
.segmento {
  align-self: flex-start; display: inline-flex; gap: 2px; max-width: 100%; padding: 3px;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo);
  overflow-x: auto; scrollbar-width: none;
}
.segmento::-webkit-scrollbar { display: none; }
.segmento__opcion { padding: 7px 16px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--tinta-2); font-weight: 550; white-space: nowrap; transition: color .12s, background-color .12s; }
.segmento__opcion:hover { color: var(--tinta); }
.segmento__opcion.es-actual { background: var(--papel); border-color: var(--linea-fuerte); color: var(--sello-texto); }

/* Buscadores con lista de sugerencias */
.buscar-con-lista { position: relative; }
.sugerencias {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 330px; overflow: auto; padding: 4px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--papel);
}
.sugerencia { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: none; text-align: left; }
.sugerencia:hover, .sugerencia.es-marcada { background: var(--sello-suave); }
.sugerencia__texto { min-width: 0; overflow-wrap: anywhere; }
.sugerencia__dato { flex: none; font-size: 13.5px; color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sugerencia--accion { align-items: center; justify-content: flex-start; gap: 8px; color: var(--sello-texto); font-weight: 550; }
.sugerencias__nota { padding: 8px 10px; font-size: 14px; color: var(--tinta-3); }
.sugerencias__nota--error { color: var(--error); }
.acciones-fila--chicas { margin-top: 10px; }

.elegido { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.elegido__datos { display: flex; flex-direction: column; min-width: 0; }
.elegido__nombre { font-weight: 600; overflow-wrap: anywhere; }
.elegido__dato { font-size: 13.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.elegido + .aviso-ruc { margin: 10px 0 0; }

/* Ítems de la venta */
.items { margin-top: 14px; }
.items__vacio { padding: 18px 16px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); color: var(--tinta-3); text-align: center; }
.item { display: grid; grid-template-columns: 22px minmax(0, 1fr) 72px 88px 64px 100px 36px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.item--cabeza { padding: 6px 0 8px; border-bottom-color: var(--linea-fuerte); font-size: 12.5px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.04em; }
.item__n { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.item__producto { display: flex; flex-direction: column; min-width: 0; }
.item__descripcion { font-weight: 500; overflow-wrap: anywhere; }
.item__dato { font-size: 12.5px; color: var(--tinta-3); }
.item__rotulo { display: none; }
.item__campo input { min-height: 36px; padding: 6px 8px; }
.item__importe { font-weight: 600; }

/* Panel del comprobante */
.venta__panel {
  position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel);
}
.panel__caja .caja-ruc { display: flex; width: 100%; }
.panel__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel__campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.panel__rotulo { font-size: 13px; font-weight: 600; color: var(--tinta); }
.nota--panel { margin-top: 0; }
.cuotas { display: flex; flex-direction: column; gap: 6px; }
.cuota { display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1.35fr) 32px; gap: 6px; align-items: center; }
.cuota__n { font-size: 13px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.cuota input { min-height: 36px; padding: 6px 8px; }
.cuota .boton-icono { width: 32px; height: 32px; }
.cuotas .enlace { font-size: 13.5px; }
.corte--panel { margin: 4px -20px; }
.totales { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; }
.totales dt { color: var(--tinta-2); }
.totales dd { font-variant-numeric: tabular-nums; }
.totales .totales__total { padding-top: 8px; font-size: 24px; font-stretch: 86%; font-weight: 700; line-height: 1.15; color: var(--tinta); }
.problemas { margin: 0; padding: 10px 14px 10px 30px; list-style: disc; border: 1px solid var(--error-borde); border-radius: var(--radio); background: var(--error-suave); color: var(--error-tinta); font-size: 14px; line-height: 1.45; }
.problemas li + li { margin-top: 4px; }
.boton--emitir { min-height: 56px; font-size: 18px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 8px 18px -10px var(--sello); }
.boton--emitir:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px var(--sello); }
.venta__barra-movil { display: none; }

/* Resultado de la emisión */
.resultado { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.resultado__cabeza { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; }
.resultado__cabeza .caja-ruc { padding: 14px 22px; }
.resultado__cabeza .caja-ruc__numero { font-size: 16px; }
.resultado__total { font-size: 24px; font-stretch: 86%; font-weight: 700; }
.resultado__estado .conexion { margin-bottom: 0; }
.resultado__estado .alerta { margin: 12px 0 0; }
.resultado__bruto pre { max-height: 320px; overflow: auto; }

@media (max-width: 1099px) {
  .venta { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .venta__panel { position: static; }
}

@media (max-width: 639px) {
  .item { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding: 14px 0; }
  .item.item--cabeza { display: none; }
  .item__n { order: 1; align-self: flex-start; padding-top: 2px; }
  .item__producto { order: 2; flex: 1 1 60%; }
  .item > .boton-icono { order: 3; align-self: flex-start; margin-top: -6px; }
  .item__campo { order: 4; flex: 1 1 26%; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .item__rotulo { display: block; font-size: 12px; color: var(--tinta-3); }
  .item__importe { order: 5; flex: 1 1 100%; text-align: right; }
  .venta__panel { padding: 16px; }
  .corte--panel { margin: 4px -16px; }
  .panel__campos { grid-template-columns: minmax(0, 1fr); }
  .contenido:has(.venta) { padding-bottom: 176px; }
  .venta__barra-movil {
    position: fixed; left: 0; right: 0; bottom: calc(57px + env(safe-area-inset-bottom, 0px)); z-index: 19;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; background: var(--papel); border-top: 1px solid var(--linea);
  }
  .venta__barra-movil > div { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .venta__barra-rotulo { font-size: 12px; color: var(--tinta-3); }
  .venta__barra-total { font-size: 20px; font-stretch: 86%; font-weight: 700; font-variant-numeric: tabular-nums; }
  .venta__barra-movil > .venta__barra-botones { flex-direction: row; align-items: center; gap: 6px; flex: none; }
  /* En el punto de venta los avisos suben por encima de la barra de cobro. */
  body:has(.venta__barra-movil) .avisos { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); }
  .boton--cobrar-movil { min-width: 132px; min-height: 46px; font-size: 16px; }
  .resultado__cabeza { flex-direction: column; align-items: flex-start; }
  /* En el teléfono las opciones van en dos columnas: todas visibles, sin desplazar. */
  .segmento { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .segmento__opcion { padding: 8px 10px; white-space: normal; line-height: 1.25; text-align: center; }
}

/* ==========================================================================
   Inicio (tablero)
   ========================================================================== */
.indicadores {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; margin-bottom: 36px;
  border: 1px solid var(--linea); border-radius: var(--radio-grande); overflow: hidden;
}
.indicador { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; border-left: 1px solid var(--linea); }
.indicador:first-child { border-left: 0; }
.indicador__rotulo { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.05em; }
.indicador__valor { margin-top: 8px; font-size: 28px; font-stretch: 84%; font-weight: 700; line-height: 1.1; color: var(--tinta); text-decoration: none; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.indicador--principal { background: var(--fondo); }
.indicador--principal .indicador__valor { font-size: 44px; letter-spacing: -0.01em; }
.indicador__valor--alerta { color: var(--error); }
a.indicador__valor--enlace:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.indicador__detalle { margin-top: 8px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.4; }
.variacion__valor { font-weight: 600; white-space: nowrap; }
.variacion--sube .variacion__valor { color: var(--ok); }
.variacion--baja .variacion__valor { color: var(--error); }
/* Inicio: cada indicador es una tarjeta; la cifra se achica con su tarjeta en vez de partirse. */
.indicadores--tablero { gap: 14px; border: 0; border-radius: 0; overflow: visible; }
.indicadores--tablero .indicador, .indicadores--tablero .indicador:first-child {
  padding: 18px 20px; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel); container-type: inline-size;
}
.indicadores--tablero .indicador--principal { background: var(--sello-suave); border-color: var(--sello-anillo); }
.indicadores--tablero .indicador__valor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(20px, 13cqi, 30px); }
.indicadores--tablero .indicador--principal .indicador__valor { font-size: clamp(24px, 15cqi, 44px); }
.indicadores--tablero .variacion__valor { padding: 1px 7px; border-radius: 99px; background: var(--neutro-suave); }
.indicadores--tablero .variacion--sube .variacion__valor { background: var(--ok-suave); }
.indicadores--tablero .variacion--baja .variacion__valor { background: var(--error-suave); }
.indicador__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.indicador__cabeza .chispa { width: 72px; height: 24px; margin-top: -2px; }
.monto { white-space: nowrap; }
.monto__moneda { margin-right: .18em; font-size: .56em; font-weight: 650; color: var(--tinta-2); }

/* Los bloques del tablero van en paneles con borde fino. */
.dos-columnas--tablero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.dos-columnas--tablero > .bloque { min-width: 0; padding: 20px 22px; border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.dos-columnas--tablero .bloque__titulo { font-size: 16px; }
.bloque__texto--corto { margin-bottom: 8px; font-size: 14px; }

.lista-estado li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista-estado li:last-child { border-bottom: 0; }
.lista-estado__nombre { flex: 1; }
.lista-estado__valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--neutro); }
.punto--ok { background: var(--ok); }
.punto--espera { background: #c98a12; }
.punto--error { background: var(--error); }

.sub { display: block; font-size: 12.5px; color: var(--tinta-3); font-weight: 400; }

/* Gráfico de columnas */
.grafico { position: relative; }
.grafico__lienzo svg { display: block; max-width: 100%; }
.grafico__rejilla { stroke: var(--linea); stroke-width: 1; }
.grafico__base { stroke: var(--linea-fuerte); stroke-width: 1; }
.grafico__eje { fill: var(--tinta-3); font-size: 11.5px; font-family: var(--fuente); }
.grafico__valor { fill: var(--tinta); font-size: 12px; font-weight: 600; font-family: var(--fuente); }
.grafico__barra { fill: var(--sello); }
.grafico__columna.es-activa .grafico__barra { fill: var(--sello-fuerte); }
.grafico__barra--negativa { fill: var(--error); }
.grafico__columna.es-activa .grafico__barra--negativa { fill: var(--error); opacity: .85; }
.grafico__zona { fill: transparent; cursor: default; outline: none; }
.grafico__zona:focus-visible { stroke: var(--sello); stroke-width: 1.5; }
.grafico__globo {
  position: absolute; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; padding: 6px 10px; border-radius: 6px;
  background: var(--globo); color: #fff; font-size: 13px; line-height: 1.3; white-space: nowrap;
}
.grafico__globo-titulo { color: #c5ccdc; font-size: 12px; }
.grafico__globo-valor { font-weight: 600; }
.grafico__tabla { margin-top: 8px; font-size: 13.5px; }
.grafico__tabla summary { cursor: pointer; color: var(--tinta-3); }
.grafico__tabla table { margin-top: 8px; max-width: 360px; }

/* ==========================================================================
   Comprobantes: listado y ficha
   ========================================================================== */
.filtros--comprobantes { margin: 16px 0 14px; gap: 10px 12px; }
.filtros--comprobantes .buscador { flex: 1 1 180px; max-width: 220px; min-width: 160px; }
.filtros--comprobantes select { min-width: 0; width: 180px; }
.filtros--comprobantes input[type="date"] { width: 148px; padding-left: 10px; padding-right: 8px; }
.filtros--comprobantes input[type="text"] { width: 148px; }
.tabla-simple--recientes .sub { white-space: nowrap; }
.filtro-fecha { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tinta-2); }
.dt-container .dt-processing { position: static; margin: 0; padding: 14px 16px; width: auto; text-align: left; color: var(--tinta-3); background: none; }
.dt-container .dt-processing > div:last-child { display: none; }

.volver { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--tinta-2); }
.volver:hover { color: var(--sello-texto); text-decoration: underline; text-underline-offset: 3px; }
.ficha-doc { max-width: 960px; }
.ficha-doc__lateral > .bloque:first-child { margin-top: 40px; }
/* Pantalla ancha: datos y detalle a la izquierda; pagos y correcciones a la derecha, a la vista y a todo el ancho. */
@media (min-width: 1360px) {
  .ficha-doc:has(.ficha-doc__lateral > *) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 30%); gap: 0 48px; align-items: start; max-width: none; }
  .ficha-doc__principal, .ficha-doc__lateral { min-width: 0; }
  .ficha-doc__lateral > .bloque:first-child { margin-top: 0; }
}
.ficha-doc__cabeza {
  display: flex; align-items: flex-start; gap: 22px 32px; flex-wrap: wrap;
  margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--linea);
}
.ficha-doc__cabeza .caja-ruc { padding: 14px 22px; }
.ficha-doc__cabeza .caja-ruc__numero { font-size: 16px; }
.ficha-doc__lado { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ficha-doc__estado .conexion { margin-bottom: 0; }
.ficha-doc__estado .alerta { margin: 10px 0 0; }
.problemas--aviso { margin-top: 10px; background: var(--espera-suave); border-color: var(--espera-borde); color: var(--espera-tinta); }
.tabla-simple--items { min-width: 520px; }
.ficha-doc__pie { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 32px; flex-wrap: wrap; margin-top: 18px; }
.ficha-doc__leyenda { flex: 1 1 240px; font-size: 13.5px; color: var(--tinta-2); }
.totales--ficha { min-width: 280px; margin-left: auto; padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }

@media (max-width: 1023px) {
  .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .indicador { border-left: 0; border-top: 1px solid var(--linea); }
  .indicador--principal { grid-column: 1 / -1; border-top: 0; }
  .indicador:nth-child(2), .indicador:nth-child(3) { border-right: 1px solid var(--linea); }
  .dos-columnas--tablero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .indicadores { grid-template-columns: minmax(0, 1fr); }
  .indicador { padding: 16px 18px; }
  .indicador:nth-child(2), .indicador:nth-child(3) { border-right: 0; }
  .indicador--principal .indicador__valor { font-size: 38px; }
  .indicador__valor { font-size: 24px; }
  .dos-columnas--tablero > .bloque { padding: 16px; }
  .col-opcional { display: none; }
  .tabla-simple--items { min-width: 0; }
  .filtros--comprobantes > * { flex: 1 1 100%; max-width: none !important; width: auto !important; }
  .filtro-fecha { flex: 1 1 45% !important; }
  .filtro-fecha input { flex: 1; width: auto !important; min-width: 0; }
  .ficha-doc__cabeza { padding-bottom: 22px; margin-bottom: 24px; }
  .totales--ficha { min-width: 0; width: 100%; }
  .filtros select { min-width: 0; flex: 1 1 auto; }
  .buscador { min-width: 0; max-width: none; flex: 1 1 100%; }
}

/* ==========================================================================
   Notas de crédito y débito, anulaciones
   ========================================================================== */
.boton--peligro-suave { border-color: var(--error-borde); color: var(--error); }
.boton--peligro-suave:hover { background: var(--error-suave); border-color: var(--error); }

/* Opciones de corrección en la ficha: una fila por opción, dentro de un marco. */
.opciones { max-width: 760px; border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.opcion { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.opcion:last-child { border-bottom: 0; }
.opcion__texto { display: flex; flex-direction: column; min-width: 0; }
.opcion__titulo { font-weight: 600; }
.opcion__detalle { font-size: 13.5px; color: var(--tinta-2); }
.opcion .boton { min-width: 108px; }
.nota--arriba { margin-top: 0; }
.bloque > div > .alerta:last-child { margin-bottom: 0; }
.bloque > div > .alerta + .opciones, .bloque > div > .alerta + .nota { margin-top: 14px; }
.alerta .acciones-fila--chicas .boton { background: var(--papel); }
.alerta .acciones-fila--chicas .boton--primario { background: var(--sello); color: #fff; }
.caja-cerrada .acciones-fila { margin-top: 8px; align-items: center; }

/* Formulario de la nota: reutiliza la rejilla de Nueva venta con una columna menos. */
.nota-motivo { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px; }
.items--nota { margin-top: 0; }
.item--nota { grid-template-columns: 22px minmax(0, 1fr) 104px 104px 104px 36px; }
.item--nota .item__producto { gap: 2px; }
.item--nota .item__producto input[type="text"] { min-height: 36px; padding: 6px 8px; }
.item__campo--fijo { display: block; }
.item__afectacion { align-self: flex-start; width: auto; min-height: 32px; margin-top: 4px; padding: 4px 30px 4px 8px; font-size: 13px; background-position: right 6px center; }
.casilla--panel { font-size: 14px; }
.dialogo__tabla { margin-top: 16px; }
.dialogo__cuerpo > div > .ficha { margin-top: 4px; }

@media (max-width: 639px) {
  .nota-motivo { grid-template-columns: minmax(0, 1fr); }
  .opcion { flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .opcion .boton { min-width: 0; width: 100%; }
  .item--nota .item__campo { flex: 1 1 40%; }
  .item__campo--fijo { display: flex; text-align: left; }
}

/* ---------- Visor de PDF ---------- */
.visor__acciones { flex-wrap: wrap; }
@media (max-width: 639px) {
  .visor__acciones .boton { flex: 1 1 auto; }
}

/* ---------- Impresión: solo el contenido ---------- */
@media print {
  .lateral, .barra-movil, .menu-inferior, .venta__barra-movil, .avisos, .pagina__acciones { display: none !important; }
  .contenido { padding: 0; max-width: none; }
  .marco { display: block; }
}

/* ==========================================================================
   Empresa y credenciales
   ========================================================================== */
.formulario__pie { margin-top: 20px; }
.ficha--suelta { margin-bottom: 18px; }
.credenciales-form { margin-top: 20px; padding: 20px; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--fondo); max-width: 720px; }
.credenciales-form input:not([type=checkbox]) { background-color: var(--papel); }
.credencial + .credencial { margin-top: 14px; }
.credencial:first-of-type { margin-top: 16px; }
.credencial__valor { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px !important; }

/* Resumen del emisor arriba de los datos */
.empresa-resumen { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.empresa-resumen__texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.empresa-resumen__nombre { font-size: 19px; font-stretch: 86%; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.empresa-resumen__dato { color: var(--tinta-2); font-size: 14px; overflow-wrap: anywhere; }
.bloque .formulario { max-width: 860px; }

/* Selector de archivo propio: el input queda accesible pero oculto. */
.archivo { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; }
.archivo__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.archivo__input:focus-visible + .archivo__boton { outline: 2px solid var(--sello); outline-offset: 2px; }
.archivo:hover .archivo__boton { background: var(--fondo); border-color: var(--borde-hover); }
.archivo__nombre { min-width: 0; font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }

/* Logo */
.logo-editor { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; max-width: 860px; }
.logo-editor__lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.logo-editor__lado .alerta { margin: 0; }
.logo-vista { display: flex; align-items: center; justify-content: center; height: 150px; padding: 16px; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel); }
.logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-vista__vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--tinta-3); font-size: 13.5px; }

/* Uso del plan */
.medidores { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; max-width: 900px; }
.medidor { padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); }
.medidor__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.medidor__nombre { font-size: 13.5px; color: var(--tinta-2); }
.medidor__valor { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.medidor__barra { margin-top: 10px; height: 6px; border-radius: 99px; background: var(--fondo-2); overflow: hidden; }
.medidor__relleno { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--sello); }
.medidor--espera .medidor__relleno { background: #c98a12; }
.medidor--error .medidor__relleno { background: var(--error); }

@media (max-width: 639px) {
  .logo-editor { grid-template-columns: minmax(0, 1fr); }
  .credenciales-form { padding: 16px; }
  .empresa-resumen { padding: 16px; }
  .formulario__pie .boton { flex: 1 1 auto; }
}

/* ==========================================================================
   Roles y permisos (Configuración)
   ========================================================================== */
.rol { padding: 14px 0; border-top: 1px solid var(--linea); }
.rol:last-child { border-bottom: 1px solid var(--linea); }
.rol__cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rol__nombre { font-size: 15.5px; font-weight: 600; }
.rol__dato { font-size: 13px; color: var(--tinta-3); }
.rol__acciones { margin-left: auto; display: flex; gap: 4px; }
.rol__permisos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rol__permisos li { font-size: 13px; padding: 2px 9px; border: 1px solid var(--linea-fuerte); border-radius: 999px; color: var(--tinta-2); }

.permisos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 6px; }
.permisos__grupo { margin: 0; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); min-width: 0; }
.permisos__titulo { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .04em; }
.permiso { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; cursor: pointer; }
.permiso input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--sello); }
.permiso__texto { display: flex; flex-direction: column; min-width: 0; }
.permiso__nombre { font-weight: 500; }
.permiso__ayuda { font-size: 13px; color: var(--tinta-3); }

/* Pasos numerados (instalación) */
.pasos { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; color: var(--tinta-2); }

/* ==========================================================================
   Editor de producto (Fase 2): secciones, filas de códigos y presentaciones
   ========================================================================== */
.seccion-form { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.seccion-form__titulo { display: block; width: 100%; padding: 0 0 8px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); font-size: 14px; font-weight: 650; color: var(--tinta); }
.seccion-form__ayuda { margin: -6px 0 12px; font-size: 13px; color: var(--tinta-3); }
.con-boton { display: flex; gap: 6px; align-items: center; }
.con-boton select { flex: 1; min-width: 0; }
.campo--margen .margen { margin-top: 10px; font-size: 13.5px; color: var(--tinta-2); }

.filas-editables { display: grid; gap: 10px; margin-bottom: 10px; }
.fila-editable__controles { display: flex; gap: 8px; align-items: center; }
.fila-editable--codigo select { width: 128px; flex: none; }
.fila-editable--codigo input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.fila-presentacion { padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.fila-presentacion__campos { display: grid; gap: 10px 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.8fr) auto; align-items: start; }
.fila-presentacion__quitar { margin-top: 26px; }
.fila-presentacion .campo__ayuda { margin-top: 8px; }
.fila-editable__celda { grid-column: auto; }
.fila-editable__celda .campo__etiqueta { font-size: 12.5px; }
@media (max-width: 760px) {
  .fila-presentacion__campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fila-editable__celda--ancha { grid-column: span 2; }
  .fila-presentacion__quitar { margin-top: 0; justify-self: start; }
}

/* Árbol de categorías (Catálogo) */
.arbol { margin-top: 14px; border-top: 1px solid var(--linea); }
.arbol__rama { border-bottom: 1px solid var(--linea); }
.arbol__fila { display: flex; align-items: center; gap: 6px; padding: 7px 0; }
.arbol__nombre { flex: 1; min-width: 0; font-weight: 550; overflow-wrap: anywhere; }
.arbol__hijos { margin: 0 0 6px 18px; padding-left: 12px; border-left: 2px solid var(--linea); }
.arbol__fila--hija .arbol__nombre { font-weight: 400; }

/* Venta: lista de precios y presentaciones en las sugerencias */
.venta__cabeza-seccion { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.venta__cabeza-seccion .venta__titulo { margin-bottom: 0; }
.venta__cabeza-seccion + .buscar-con-lista { margin-top: 10px; }
.lista-precios { display: inline-flex; align-items: center; gap: 8px; }
.lista-precios select { width: auto; min-width: 170px; height: 34px; }
.etiqueta-pres { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--sello-suave); color: var(--sello-texto-fuerte); font-size: 12.5px; font-weight: 600; }
.sugerencia__marca { color: var(--tinta-3); }

/* ==========================================================================
   Inventario (Fase 3)
   ========================================================================== */
.separado { margin-top: 14px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.indicadores--chicos { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.indicadores--chicos .indicador { padding: 14px 18px; }
.indicadores--chicos .indicador__valor { font-size: 22px; }
.indicadores--chicos .indicador:first-child { border-left: 0; }

/* Líneas de una transferencia (o de una compra) */
.lineas { display: grid; gap: 8px; margin-top: 12px; }
.linea { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio); }
.linea--error { border-color: var(--error); background: var(--error-suave); }
.linea__nombre { display: block; font-weight: 550; overflow-wrap: anywhere; }
.linea__cantidad input { text-align: right; }
.linea__aviso { font-size: 12.5px; color: var(--error); white-space: nowrap; }
.linea__aviso:empty { display: none; }
@media (max-width: 560px) { .linea { grid-template-columns: minmax(0, 1fr) 90px auto; } .linea__aviso { grid-column: 1 / -1; } }

/* Conteo físico */
.tabla-simple--conteo .celda-entrada input { width: 96px; height: 34px; }
.fila--resaltada td { background: var(--sello-suave); transition: background 1.5s; }
.tabla-simple--kardex td, .tabla-simple--kardex th { white-space: nowrap; }
.kardex__lote { white-space: normal !important; min-width: 160px; font-size: 13px; color: var(--tinta-2); }

/* ==========================================================================
   Punto de venta y caja (Fase 4)
   ========================================================================== */
.boton--chico { height: 32px; padding: 0 10px; font-size: 13.5px; }
.boton--grande { height: 52px; font-size: 17px; }
.pos { display: flex; flex-direction: column; gap: 14px; }
.pos__barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.pos__caja { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pos__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 27%, 460px); gap: 20px 28px; align-items: start; }
.pos__venta .caja-busqueda { height: 52px; font-size: 17px; }
.pos__items { display: grid; gap: 6px; margin-top: 12px; }
.pos__item { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); }
.pos__item--sin-stock { border-color: var(--espera-borde); background: var(--espera-suave); }
.pos__descripcion { display: block; font-weight: 600; overflow-wrap: anywhere; }
.pos__control { display: flex; align-items: center; gap: 4px; }
.pos__cantidad { width: 64px; height: 36px; text-align: center !important; font-weight: 600; }
.pos__importe { font-weight: 650; font-variant-numeric: tabular-nums; }
.pos__panel { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.pos__cliente-boton { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; text-align: left; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); cursor: pointer; }
.pos__cliente-boton:hover { border-color: var(--linea-fuerte); background: var(--fondo); }
.pos__cliente-nombre { font-weight: 600; overflow-wrap: anywhere; }
.pos__cobrar { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 18px; }
.pos__cobrar strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.pos__pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.pos__atajos { font-size: 12.5px; text-align: center; }
.caja-abrir { max-width: 560px; }
@media (max-width: 900px) {
  .pos__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pos__panel { position: static; }
}
@media (max-width: 560px) {
  .pos__item { grid-template-columns: minmax(0, 1fr) auto; }
  .pos__control { grid-column: 1; }
  .pos__importe { grid-row: 1; grid-column: 2; }
}

/* Cobro */
.cobro { display: flex; flex-direction: column; gap: 12px; }
.cobro__total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: var(--radio); background: var(--fondo); }
.cobro__total strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.cobro__medios { display: flex; flex-wrap: wrap; gap: 6px; }
.cobro__lineas { display: grid; gap: 10px; }
.cobro__linea { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cobro__linea .cobro__rapidos { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.cobro__metodo { font-weight: 600; }
.cobro__monto { font-size: 20px; height: 46px; }
.cobro__falta { color: var(--error); font-weight: 600; font-size: 16px; }
.cobro__listo { color: var(--ok); font-weight: 600; font-size: 16px; }
.cobro__vuelto { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-radius: var(--radio); background: var(--ok-suave); color: var(--ok); }
.cobro__vuelto strong { font-size: 24px; }
.cobro__vuelto--grande strong { font-size: 34px; }
@media (max-width: 560px) { .cobro__linea { grid-template-columns: 1fr 1fr auto; } .cobro__metodo { grid-column: 1 / -1; } }
.sugerencias--en-dialogo { position: static; margin-top: 8px; max-height: 320px; box-shadow: none; }

/* Arqueo */
.arqueo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin-bottom: 12px; }
.arqueo__fila { display: grid; grid-template-columns: minmax(0, 1fr) 72px 90px; gap: 8px; align-items: center; }
.arqueo__fila input { height: 34px; }
.arqueo__den { font-size: 13.5px; }
.arqueo__total { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--linea); font-size: 16px; }
.cuadra { color: var(--ok); }
@media (max-width: 560px) { .arqueo { grid-template-columns: minmax(0, 1fr); } }
.fila--anulada td { color: var(--tinta-3); text-decoration: line-through; }

/* ==========================================================================
   Compras
   ========================================================================== */
.dialogo--compra { max-width: 940px; }
.campo--boton { display: flex; align-items: flex-end; }
.linea-compra { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 100px auto; gap: 6px 10px; align-items: end; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio); }
.linea-compra label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linea-compra input { text-align: right; }
.linea-compra__producto { align-self: center; min-width: 0; }
.linea-compra__importe { align-self: center; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linea-compra > .boton-icono { align-self: center; }
.linea-compra__lote { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 180px); gap: 10px; }
.linea-compra__lote input { text-align: left; }
.compra__pie { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin-top: 14px; }
.compra__pie .nota { flex: 1 1 260px; margin: 0; }
.compra__total { margin-top: 12px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.subtitulo { margin-bottom: 6px; font-size: 15px; font-weight: 650; }
.totales--angosto { width: min(100%, 360px); }
@media (max-width: 640px) {
  .linea-compra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .linea-compra__producto { grid-column: 1 / 3; }
  .linea-compra > .boton-icono { grid-row: 1; grid-column: 3; }
  .linea-compra__lote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .campo--boton { grid-column: 1 / -1; }
}

/* ==========================================================================
   Reportes
   ========================================================================== */
.reporte__fechas { margin: 16px 0 4px; }
.reporte__fechas select { min-width: 170px; }
.indicadores.indicadores--reporte { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin: 16px 0 24px; background: var(--linea); }
.indicadores--reporte .indicador { padding: 16px 18px; border: 0; background: var(--papel); }
.indicadores--reporte .indicador__valor { font-size: 26px; }
.reporte__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px 32px; margin-bottom: 32px; }
.reporte__bloque { min-width: 0; }
.tabla-simple--compacta td, .tabla-simple--compacta th { padding: 7px 12px 7px 0; }
.tabla-simple--compacta tfoot td { font-weight: 650; border-bottom: 0; }
.barras { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.barras__fila { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.barras__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); }
.barras__pista { height: 10px; border-radius: 5px; background: var(--neutro-suave); overflow: hidden; }
.barras__barra { display: block; height: 100%; border-radius: 5px; background: var(--sello); }
.barras__valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tachado { color: var(--tinta-3); text-decoration: line-through; }
.num--ok { color: var(--ok); font-weight: 600; }
.alerta--aviso { background: var(--espera-suave); border-color: var(--espera-borde); color: var(--espera); }
.kardex__buscador { flex: 1 1 260px; min-width: 220px; max-width: 420px; position: relative; }
.kardex__producto { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--sello-anillo); border-radius: 999px; background: var(--sello-suave); color: var(--sello-texto-fuerte); font-size: 13.5px; }
@media (max-width: 639px) {
  .indicadores.indicadores--reporte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicadores--reporte .indicador__valor { font-size: 20px; }
  .reporte__rejilla { grid-template-columns: minmax(0, 1fr); }
  .barras__fila { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; }
  .reporte__fechas select { min-width: 0; flex: 1 1 100%; }
}

/* ==========================================================================
   App instalable y celular
   ========================================================================== */
.sin-conexion {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translateX(-50%);
  width: min(560px, calc(100% - 24px)); padding: 10px 14px; border-radius: var(--radio);
  background: var(--globo); color: #fff; font-size: 13.5px; line-height: 1.4; box-shadow: 0 6px 24px rgba(17, 24, 39, 0.25);
}
@media (min-width: 640px) { .sin-conexion { bottom: 20px; } }
.buscar-con-lista--camara .caja-busqueda { padding-right: 50px !important; }
/* Un campo de código de barras con la cámara adentro (App.ui.conEscaner). */
.con-camara { position: relative; }
.con-camara input { width: 100%; padding-right: 42px !important; }
.con-camara .boton-camara { width: 34px; height: 34px; right: 3px; }
.paleta__cabeza .boton-icono { flex: none; color: var(--sello-texto); }
.boton-camara { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 42px; height: 42px; color: var(--sello-texto); }
.instalar-app {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; padding: 9px 12px;
  border: 1px dashed var(--sello-anillo); border-radius: var(--radio); background: var(--sello-suave);
  color: var(--sello-texto-fuerte); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left;
}
.instalar-app:hover { border-style: solid; }
.dialogo--escaner { max-width: 520px; }
.escaner__marco { position: relative; overflow: hidden; border-radius: var(--radio); background: #000; aspect-ratio: 4 / 3; }
.escaner__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.escaner__guia { position: absolute; left: 12%; right: 12%; top: 32%; bottom: 32%; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28); }
.escaner__estado { margin: 12px 0 0; font-size: 14px; color: var(--tinta-2); }
.escaner__estado--error { color: var(--error); }
.escaner__leidos { margin: 6px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.escaner__leidos:empty { display: none; }
.hoja-mas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hoja-mas__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta-2); font: inherit; font-size: 13px; font-weight: 550; text-align: center; text-decoration: none; cursor: pointer;
}
.hoja-mas__item.es-actual { border-color: var(--sello-anillo); background: var(--sello-suave); color: var(--sello-texto-fuerte); }
.menu-inferior button.menu-inferior__item { border: 0; background: none; font-family: inherit; cursor: pointer; }
@media (max-width: 639px) {
  .dialogo--hoja { margin: auto 0 0; width: 100%; max-width: none; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* ==========================================================================
   Integraciones: compartir, consulta RUC/DNI e importar
   ========================================================================== */
.boton--whatsapp { background: #1a8f4c; border-color: #1a8f4c; color: #fff; }
.boton--whatsapp:hover { background: #157a40; border-color: #157a40; }
.compartir { display: grid; gap: 18px; }
.compartir__seccion + .compartir__seccion { padding-top: 16px; border-top: 1px solid var(--linea); }
.compartir__seccion .acciones-fila { margin-top: 12px; }
.compartir textarea { width: 100%; }
.campo__accion { margin-top: 6px; }
.campo__consulta { margin-top: 4px; }
.campo__consulta--ok { color: var(--ok); }
.campo__consulta--error { color: var(--error); }
.campo--angosto { max-width: 380px; margin-top: 14px; }
.importar__zona {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; padding: 28px 16px;
  border: 2px dashed var(--linea-fuerte); border-radius: var(--radio-grande); background: var(--fondo);
  color: var(--tinta-2); text-align: center; cursor: pointer;
}
.importar__zona:hover, .importar__zona.es-encima { border-color: var(--sello); background: var(--sello-suave); color: var(--sello-texto-fuerte); }
.importar__columnas { margin-top: 14px; font-size: 13.5px; color: var(--tinta-2); }
.importar__columnas ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.importar__tabla { max-height: 340px; overflow: auto; margin-top: 12px; }
.fila--error td { background: var(--error-suave); }

/* ==========================================================================
   Guías de remisión y corrección de comprobantes
   ========================================================================== */
.opciones-linea { display: flex; flex-wrap: wrap; gap: 10px 24px; }

/* Guía de remisión (guias.js, armar): las partes en tarjetas numeradas y, a la derecha, el resumen con "Emitir guía". */
.guia { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.guia__principal { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.guia__principal > .alerta { margin-bottom: 0; }
.guia__tarjeta { padding: 20px 22px 22px; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel); }
.guia__tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.guia__tarjeta-titulo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650; }
.guia__paso {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: var(--sello-suave); color: var(--sello-texto); font-size: 13.5px; font-weight: 700;
}
.rejilla-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rejilla-12 > .campo { grid-column: span 12; }
.rejilla-12 > .campo--s2 { grid-column: span 2; }
.rejilla-12 > .campo--s3 { grid-column: span 3; }
.rejilla-12 > .campo--s4 { grid-column: span 4; }
.rejilla-12 > .campo--s5 { grid-column: span 5; }
.rejilla-12 > .campo--s6 { grid-column: span 6; }
.rejilla-12 > .campo--s8 { grid-column: span 8; }
/* El número con su botón "Buscar en SUNAT / RENIEC" al lado, a la misma altura. */
.guia .campo:has(> .campo__accion:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-content: start; }
.guia .campo:has(> .campo__accion:not([hidden])) > * { grid-column: 1 / -1; }
.guia .campo:has(> .campo__accion:not([hidden])) > input { grid-column: 1; }
.guia .campo:has(> .campo__accion:not([hidden])) > .campo__accion { grid-column: 2; grid-row: 2; margin-top: 0; align-self: stretch; }
.guia__modalidad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guia__opcion { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer; transition: border-color .12s, background-color .12s; }
.guia__opcion:hover { border-color: var(--linea-fuerte); }
.guia__opcion:has(input:checked) { border-color: var(--sello); background: var(--sello-suave); }
.guia__opcion input { margin-top: 3px; accent-color: var(--sello); }
.guia__opcion-textos { display: flex; flex-direction: column; gap: 2px; }
.guia__opcion-textos span { font-size: 13.5px; color: var(--tinta-2); }
.guia__m1l { margin: 14px 0 16px; }
.guia__m1l[hidden] + .formulario__rejilla, .guia__modalidad + .formulario__rejilla { margin-top: 16px; }
.guia__ruta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guia__punto { min-width: 0; padding: 14px 16px 16px; border-radius: var(--radio); background: var(--fondo); }
.guia__subtitulo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14.5px; font-weight: 650; color: var(--tinta-2); }
.guia__panel {
  position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel);
}
.guia__caja .caja-ruc { display: flex; width: 100%; }
.guia__resumen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 14px; margin: 0; font-size: 14px; }
.guia__resumen dt { color: var(--tinta-3); }
.guia__resumen dd { margin: 0; font-weight: 550; text-align: right; overflow-wrap: anywhere; }
.guia__resumen .guia__falta { color: var(--espera); font-weight: 500; }
/* Con menos de 1440 px las dos columnas quedan apretadas: el resumen baja al final. */
@media (max-width: 1439px) {
  .guia { grid-template-columns: minmax(0, 1fr); }
  .guia__panel { position: static; }
}
@media (max-width: 899px) {
  .guia__ruta, .guia__modalidad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .rejilla-12 > .campo[class*="campo--s"] { grid-column: span 12; }
  .guia__tarjeta { padding: 16px; }
  .guia__punto { padding: 12px; }
}
.acciones-fila--derecha { justify-content: flex-end; flex-wrap: nowrap; }
.linea--guia { grid-template-columns: 90px minmax(0, 1fr) 90px 90px auto; }
.linea--guia input.es-numero { text-align: right; }
.tabla-correccion input, .tabla-correccion select { min-width: 0; width: 100%; }
.tabla-correccion td:nth-child(2) { min-width: 220px; }
@media (max-width: 640px) {
  .linea--guia { grid-template-columns: minmax(0, 1fr) 80px auto; }
  .linea--guia .codigo { grid-column: 1 / -1; }
  .linea--guia input:not(.es-numero) { grid-column: 1 / -1; }
}

/* Editor de producto: ancho y en dos columnas en pantallas grandes (casi sin bajar). */
.dialogo.dialogo--producto { max-width: min(1440px, calc(100% - 32px)); }
@media (min-width: 1100px) {
  .editor-producto__columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .editor-producto__columna:first-child { padding-right: 32px; }
  .editor-producto .seccion-form { margin-bottom: 14px; }
  .editor-producto .seccion-form:last-child { margin-bottom: 0; }
  .editor-producto__columna + .editor-producto__columna { padding-left: 32px; border-left: 1px solid var(--linea); }
  .editor-producto .fila-presentacion__campos { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, .9fr) auto; }
  .editor-producto .fila-presentacion__campos > :nth-child(5) { grid-column: 1 / 5; }
  .editor-producto .fila-presentacion__campos > :nth-child(6) { grid-column: 5; grid-row: 1; }
}

/* ==========================================================================
   Cuentas por cobrar y finanzas
   ========================================================================== */
.indicador__valor--bien { color: var(--ok); }
/* Antigüedad de la deuda: un tramo por columna con su barra. */
.tramos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.tramo { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.tramo__nombre { font-size: 12px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.tramo__valor { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tramo__barra { display: block; height: 6px; border-radius: 3px; background: var(--neutro-suave); overflow: hidden; }
.tramo__barra > span { display: block; height: 100%; border-radius: 3px; background: var(--espera); }
.tramo--alDia .tramo__barra > span { background: var(--sello); }
.tramo--d61a90 .tramo__barra > span, .tramo--masDe90 .tramo__barra > span { background: var(--error); }
.tramo--masDe90:not(.tramo--vacio) .tramo__valor, .tramo--d61a90:not(.tramo--vacio) .tramo__valor { color: var(--error); }
.tramo--vacio .tramo__valor { color: var(--tinta-3); font-weight: 600; }
/* Estado de resultados: renglones con sangría y totales marcados. */
.estado-resultados { width: 100%; max-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.estado-resultados th { padding: 8px 12px 8px 0; font-size: 12px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; text-align: left; border-bottom: 1px solid var(--linea-fuerte); }
.estado-resultados th.num { text-align: right; }
.estado-resultados td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.estado-resultados__sub td { color: var(--tinta-2); font-size: 13.5px; }
.estado-resultados__sangria { padding-left: 18px !important; }
.estado-resultados__fuerte td { font-weight: 650; }
.estado-resultados__total td { font-weight: 750; font-size: 16px; border-top: 2px solid var(--tinta); border-bottom: 0; }
/* Lista corta con acciones (categorías de gastos). */
.lista-simple { margin: 0; padding: 0; list-style: none; }
.lista-simple__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.lista-simple__fila .sub { display: inline; margin-left: 8px; }
@media (max-width: 899px) {
  .tramos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sugerencia de compra: un pedido por proveedor. */
.sugerencia-proveedores { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0 0 18px; }
.sugerencia-proveedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.sugerencia-proveedor strong { display: block; font-weight: 650; }
/* Avisos en Inicio: una fila por tipo, con enlace a donde se resuelve. */
.avisos-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aviso-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-left-width: 4px; border-radius: var(--radio); color: var(--tinta); text-decoration: none; background: var(--papel); }
.aviso-fila:hover { background: var(--fondo); }
.aviso-fila--error { border-left-color: var(--error); }
.aviso-fila--error > svg:first-child { color: var(--error); }
.aviso-fila--espera { border-left-color: var(--espera); }
.aviso-fila--espera > svg:first-child { color: var(--espera); }
.aviso-fila__texto { flex: 1; min-width: 0; }
.aviso-fila__texto strong { display: block; font-weight: 650; }
.avisos-inicio { margin-bottom: 24px; }
.codigo-largo { display: block; flex: 1 1 320px; min-width: 0; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); font-size: 12.5px; overflow-wrap: anywhere; }

/* ==========================================================================
   Promociones, puntos y comisiones
   ========================================================================== */
.item__promo { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--ok-suave); color: var(--ok); font-size: 12px; font-weight: 600; }
.item__promo[hidden] { display: none; }
.item__escala { margin-left: 4px; background: var(--sello-suave); color: var(--sello-texto-fuerte); }
.escalas__resumen { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.puntos-cliente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--espera-suave); border-radius: var(--radio); background: var(--espera-suave); font-size: 14px; }
.puntos-cliente__saldo { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: var(--espera); }
.totales dt.totales__sub, .totales dd.totales__sub { font-size: 12.5px; color: var(--tinta-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--sello-anillo); border-radius: 999px; background: var(--sello-suave); color: var(--sello-texto-fuerte); font-size: 13px; }
.chip__quitar { border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 6px; }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; max-height: 220px; overflow: auto; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio); }
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; }
.dia-semana { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer; font-size: 14px; }
.objetivos .buscar-con-lista { max-width: 520px; }

/* ==========================================================================
   Etiquetas y ayuda
   ========================================================================== */
.etiquetas__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; margin-top: 8px; }
.etiquetas__lineas { display: grid; gap: 8px; margin-top: 10px; max-height: 340px; overflow: auto; }
.etiqueta-linea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 190px) 84px auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio); }
.etiqueta-linea__producto { display: flex; flex-direction: column; min-width: 0; }
.etiqueta-linea__producto > span:first-child { font-weight: 600; overflow-wrap: anywhere; }
.etiqueta-linea__copias { display: flex; flex-direction: column; }
.etiquetas__vista { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 200px; padding: 14px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); background: var(--fondo); }
.etiquetas__muestra { box-sizing: border-box; background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); overflow: hidden; }
.etiquetas__muestra .et { box-sizing: border-box; width: 100%; height: 100%; padding: 1.2mm 2mm; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .6mm; font-family: Arial, Helvetica, sans-serif; }
.etiquetas__muestra .n { font-size: 8pt; line-height: 1.1; max-height: 2.25em; overflow: hidden; width: 100%; }
.etiquetas__muestra .p { font-size: 11pt; font-weight: bold; line-height: 1; }
.etiquetas__muestra .b { width: 100%; }
.etiquetas__muestra .b svg { display: block; width: 100%; height: 100%; }
.etiquetas__muestra .c { font-size: 7.5pt; line-height: 1; letter-spacing: .04em; }
@media (max-width: 799px) {
  .etiquetas__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .etiqueta-linea { grid-template-columns: minmax(0, 1fr) 84px auto; }
  .etiqueta-linea select { grid-column: 1 / -1; grid-row: 2; }
}

.pagina__titulo-fila { display: flex; align-items: center; gap: 8px; }
.boton-ayuda { color: var(--tinta-3); }
.boton-ayuda:hover { color: var(--sello-texto); }
.ayuda__marco { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.ayuda__indice { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.ayuda__enlace { padding: 6px 10px; border-radius: var(--radio); color: var(--tinta-2); text-decoration: none; font-size: 14px; }
.ayuda__enlace:hover { background: var(--fondo-2); color: var(--tinta); }
.ayuda__enlace[hidden] { display: none; }
.ayuda { max-width: 820px; }
.ayuda__seccion { padding: 4px 0 26px; margin-bottom: 22px; border-bottom: 1px solid var(--linea); scroll-margin-top: 16px; }
.ayuda__titulo { margin: 0 0 4px; font-size: 21px; }
.ayuda__resumen { margin: 0 0 12px; color: var(--tinta-2); }
.ayuda__subtitulo { margin: 14px 0 6px; font-size: 15px; font-weight: 650; }
.ayuda__contenido p { margin: 0 0 8px; line-height: 1.55; }
.ayuda__pasos, .ayuda__lista { margin: 0 0 8px; padding-left: 22px; line-height: 1.55; }
.ayuda__pasos li, .ayuda__lista li { margin-bottom: 4px; }
.ayuda--dialogo .ayuda__subtitulo:first-child { margin-top: 0; }
@media (max-width: 899px) {
  .ayuda__marco { grid-template-columns: minmax(0, 1fr); }
  .ayuda__indice { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ==========================================================================
   Buscador global (Ctrl+K) y accesos rápidos
   ========================================================================== */
.dialogo.paleta { width: min(680px, calc(100% - 24px)); max-width: none; margin: 10vh auto auto; padding: 0; overflow: hidden; }
.paleta__cabeza { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linea); color: var(--tinta-3); }
.paleta__caja { flex: 1; min-width: 0; height: 40px; border: 0; outline: none; background: none; color: var(--tinta); font: inherit; font-size: 17px; }
.paleta__caja::-webkit-search-cancel-button { display: none; }
.paleta__lista { max-height: min(60vh, 520px); overflow-y: auto; padding: 6px 8px 10px; }
.paleta__grupo { padding: 10px 10px 4px; color: var(--tinta-3); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.paleta__item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radio);
  background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer;
}
.paleta__item .icono { flex: none; color: var(--tinta-3); }
.paleta__item.es-marcado { background: var(--sello-suave); }
.paleta__item.es-marcado .icono { color: var(--sello-texto); }
.paleta__texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.paleta__titulo { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta__sub { font-size: 12.5px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta__dato { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
.paleta__vacio { padding: 22px 12px; color: var(--tinta-3); text-align: center; }
.paleta__pie { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--linea); background: var(--fondo); color: var(--tinta-3); font-size: 12px; }
.paleta__pie kbd { margin-right: 3px; }
@media (max-width: 639px) {
  .dialogo.paleta { margin-top: 12px; }
  .paleta__pie { display: none; }
}

.accesos-rapidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 0 0 24px; }
.acceso-rapido {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 92px; padding: 14px;
  border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel);
  color: var(--tinta); text-decoration: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.acceso-rapido:hover { border-color: var(--sello-anillo); box-shadow: 0 2px 8px rgba(17, 24, 39, .06); transform: translateY(-1px); }
.acceso-rapido__icono { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--sello-suave); color: var(--sello-texto); }
.acceso-rapido__nombre { font-size: 14px; line-height: 1.25; }
.acceso-rapido--destacado { background: var(--sello); border-color: var(--sello); color: #fff; }
.acceso-rapido--destacado .acceso-rapido__icono { background: rgba(255, 255, 255, .18); color: #fff; }
.acceso-rapido--destacado:hover { border-color: var(--sello-fuerte); background: var(--sello-fuerte); }
.acceso-rapido--elegir { border-style: dashed; background: none; color: var(--tinta-3); font-weight: 500; }
.acceso-rapido--elegir .acceso-rapido__icono { background: var(--fondo-2); color: var(--tinta-3); }
@media (max-width: 639px) {
  .accesos-rapidos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .acceso-rapido { min-height: 84px; padding: 10px; gap: 8px; align-items: center; text-align: center; }
  .acceso-rapido__nombre { font-size: 12.5px; }
}

/* ==========================================================================
   Punto de venta rápido: fotos, cuadrícula, atajos, cobro y pantalla del cliente
   ========================================================================== */
.foto-producto { display: block; flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--fondo-2); }
.ficha-con-foto { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: start; }
.ficha-con-foto__foto { width: 140px; height: 140px; border-radius: 14px; }
@media (max-width: 560px) {
  .ficha-con-foto { grid-template-columns: minmax(0, 1fr); }
  .ficha-con-foto__foto { width: 100%; height: auto; aspect-ratio: 1; max-width: 220px; margin: 0 auto; }
}
.foto-producto--vacia {
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--tono, 220) 60% 94%); color: hsl(var(--tono, 220) 45% 35%); font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.foto-editor { display: flex; align-items: center; gap: 14px; }
.foto-editor__vista { width: 84px; height: 84px; border-radius: 12px; font-size: 22px; }
.foto-editor__acciones { display: flex; flex-direction: column; gap: 6px; }
.foto-editor > .acciones-fila { margin-top: 0; }
.qr-yape { width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--linea); border-radius: 12px; background: #fff; }
.qr-yape--vacio { display: grid; place-items: center; border-style: dashed; background: var(--fondo); color: var(--tinta-3); font-size: 13.5px; }

.atajos-pos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; color: var(--tinta-3); font-size: 12px; }
.atajos-pos kbd, .cobro kbd {
  margin-right: 3px; padding: 0 5px; border: 1px solid var(--linea-fuerte); border-bottom-width: 2px; border-radius: 4px;
  background: var(--papel); font: inherit; font-size: 11px; font-weight: 600;
}
.nota--panel .icono { vertical-align: -2px; }

.cuadricula-pos { margin-top: 12px; }
.cuadricula-pos__categorias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.chip-categoria {
  flex: none; padding: 7px 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel);
  color: var(--tinta-2); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; white-space: nowrap;
}
.chip-categoria:hover { border-color: var(--linea-fuerte); }
.chip-categoria.es-actual { background: var(--sello); border-color: var(--sello); color: #fff; }
.cuadricula-pos__productos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px;
  max-height: calc(58vh / var(--zoom, 1)); overflow-y: auto; padding: 2px;
}
.tile-producto {
  display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 8px; border: 1px solid var(--linea); border-radius: var(--radio-grande);
  background: var(--papel); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .08s;
}
.tile-producto:hover { border-color: var(--sello-anillo); box-shadow: 0 2px 8px rgba(17, 24, 39, .07); }
.tile-producto:active { transform: scale(.97); }
.tile-producto__foto { width: 100%; height: 112px; border-radius: calc(var(--radio-grande) - 4px); font-size: 26px; object-fit: cover; }
.tile-producto__nombre { font-size: 13.5px; font-weight: 550; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile-producto__pie { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: auto; font-size: 13px; }
.tile-producto__pie strong { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--sello-texto); }
.tile-producto__stock { color: var(--tinta-3); font-size: 12px; }
.tile-producto--agotado { opacity: .55; }
.tile-producto--agotado .tile-producto__stock { color: var(--error); font-weight: 600; }
/* Cuántas lleva la venta de ese producto (venta.js, pintarInsignias). */
.tile-producto { position: relative; }
.tile-producto.tiene-cantidad { border-color: var(--sello); box-shadow: 0 0 0 1px var(--sello); }
.tile-producto__cantidad {
  position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; background: var(--sello); color: #fff; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--papel);
}
.tile-producto__cantidad[hidden] { display: none; }
.tile-producto.es-agregado .tile-producto__cantidad { animation: tile-agregado .3s ease-out; }
@keyframes tile-agregado { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }

/* Punto de venta en el celular (venta.js, acomodar): productos en cuadrícula y la venta en una hoja. */
.venta__cliente-corto, .item__paso, .venta-hoja__pie { display: none; }
@media (max-width: 639px) {
  .venta--celular .venta__principal { gap: 12px; }
  /* Cabecera de una línea: el espacio es para los productos. */
  .pagina__cabecera--pos { flex-wrap: nowrap; align-items: center; margin-bottom: 14px; padding-bottom: 12px; }
  .pagina__cabecera--pos .pagina__titulo { font-size: 20px; white-space: nowrap; }
  .pagina__cabecera--pos .pagina__acciones { width: auto; flex-wrap: nowrap; }
  .pagina__cabecera--pos .pagina__acciones .boton { min-height: 38px; padding: 0 12px; font-size: 14px; }
  .venta--celular .venta__vista, .venta--celular .venta__cabeza-seccion .venta__titulo { display: none; }
  .venta--celular .venta__cabeza-seccion { justify-content: flex-start; }
  .venta--celular .venta__cabeza-seccion:not(:has(.lista-precios)) { display: none; }
  .venta--celular .venta__cabeza-seccion .acciones-fila--chicas { margin-top: 0; }
  .venta-hoja .segmento { display: flex; grid-template-columns: none; flex: none; }
  .venta-hoja .segmento__opcion { flex: 1 1 0; min-width: 0; padding: 7px 4px; font-size: 13.5px; }
  .venta__cliente-corto {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--papel); color: var(--tinta-2); font: inherit; text-align: left; cursor: pointer;
  }
  .venta__cliente-datos { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
  .venta__cliente-nombre { color: var(--tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .venta__cliente-doc { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .venta__cliente-doc strong { color: var(--sello-texto); font-weight: 650; }
  .venta__cliente-cambiar { flex: none; color: var(--sello-texto); font-weight: 600; font-size: 14px; }
  .venta--celular .cuadricula-pos { margin-top: 10px; }
  .venta--celular .cuadricula-pos__categorias { margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .venta--celular .cuadricula-pos__categorias::-webkit-scrollbar { display: none; }
  .venta--celular .cuadricula-pos__productos { gap: 8px; overflow: visible; }
  .venta--celular .tile-producto { min-height: 0; padding: 6px; gap: 4px; }
  .venta--celular .tile-producto__foto { height: 104px; }

  /* La barra de abajo: lo que lleva la venta (abre la hoja) y Cobrar. */
  .venta__barra-ver { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
  .venta__barra-carrito { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--sello-suave); color: var(--sello-texto); }
  .venta__barra-n {
    position: absolute; top: -6px; right: -6px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 999px; background: var(--sello); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px var(--papel);
  }
  .venta__barra-n[hidden] { display: none; }
  .venta__barra-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .venta__barra-textos .venta__barra-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* La hoja con la venta: alta, con el total y Cobrar fijos abajo. */
  .dialogo.venta-hoja { height: calc(100% - 40px); }
  .venta-hoja__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 22px; }
  .venta-hoja .venta__panel { padding: 14px; }
  .venta-hoja .boton--emitir { display: none; }
  .venta-hoja__pie {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--linea); background: var(--papel);
  }
  .venta-hoja__pie > .boton:first-child { flex: none; min-height: 46px; padding: 0 10px; }
  .venta-hoja__total { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.15; }
  .venta-hoja__total .venta__barra-total { font-size: 19px; white-space: nowrap; }
  .venta-hoja__pie .boton--cobrar-movil { flex: none; min-width: 0; padding: 0 16px; }
  .item__paso {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; min-height: 40px; padding: 0;
    border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta); font: inherit; font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer;
  }
  .item__paso:first-child { border-radius: var(--radio) 0 0 var(--radio); }
  .item__paso:last-child { border-radius: 0 var(--radio) var(--radio) 0; }
  .item__paso:active { background: var(--sello-suave); }
  .item__pasos { display: flex; align-items: stretch; }
  .item__pasos input { min-width: 0; width: 100%; min-height: 40px; border-radius: 0; border-left: 0; border-right: 0; text-align: center; }
  /* Cantidad (con − y +), precio y descuento en una sola fila. */
  .venta-hoja .item__campo { flex: 1 1 22%; }
  .venta-hoja .item__campo--cantidad { flex: 1 1 42%; }
  .venta-hoja .item { padding: 12px 0; }
}

.dialogo--cobro .dialogo__titulo { font-size: 18px; }
.cobro { display: flex; flex-direction: column; gap: 14px; }
.cobro__total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-radius: var(--radio-grande); background: var(--sello-suave); }
.cobro__total span { color: var(--sello-texto-fuerte); font-weight: 600; }
.cobro__total strong { font-size: 32px; font-weight: 750; color: var(--sello-texto-fuerte); font-variant-numeric: tabular-nums; }
.cobro__linea { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--linea-fuerte); }
.cobro__metodos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cobro__metodo {
  min-height: 42px; padding: 8px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel);
  color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer;
}
.cobro__metodo:hover:not(:disabled) { border-color: var(--linea-fuerte); }
.cobro__metodo.es-actual { background: var(--sello); border-color: var(--sello); color: #fff; }
.cobro__metodo:disabled { opacity: .4; cursor: not-allowed; }
.cobro__campos { display: flex; align-items: flex-end; gap: 10px; }
.cobro__campo { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; font-size: 13px; color: var(--tinta-2); font-weight: 550; }
.cobro__efectivo { display: flex; flex-direction: column; gap: 8px; }
.cobro__recibido { font-size: 22px !important; font-weight: 650; height: 52px; }
.cobro__billetes { display: flex; flex-wrap: wrap; gap: 6px; }
.cobro__otro { align-self: flex-start; }
.cobro__resumen { display: flex; flex-direction: column; gap: 8px; }
.cobro__aviso { padding: 8px 12px; border-radius: var(--radio); background: var(--espera-suave); color: var(--espera); font-weight: 600; }
.cobro__vuelto { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px; border-radius: var(--radio-grande); background: var(--ok-suave); color: var(--ok); }
.cobro__vuelto strong { font-size: 28px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cobro__vuelto--falta { background: var(--error-suave); color: var(--error); }

/* Pantalla para el cliente: letras grandes, fondo oscuro, sin menú. */
.modo-pantalla-cliente, .modo-pantalla-cliente body { background: #0f172a; }
.pc { min-height: 100vh; display: flex; flex-direction: column; background: #0f172a; color: #f8fafc; font-size: 20px; }
.pc__cabecera { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pc__empresa { font-size: 24px; font-weight: 700; }
.pc__completa { border: 0; background: none; color: rgba(255, 255, 255, .5); cursor: pointer; }
.pc__principal { flex: 1; display: flex; min-height: 0; }
.pc__espera { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; }
.pc__saludo { font-size: clamp(36px, 7vw, 72px); font-weight: 750; }
.pc__sub { font-size: clamp(18px, 3vw, 28px); color: #cbd5e1; }
.pc__venta { flex: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); min-height: 0; }
.pc__lista { margin: 0; padding: 16px 28px; list-style: none; overflow-y: auto; max-height: calc(100vh - 72px); }
.pc__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pc__cant { color: #94a3b8; font-variant-numeric: tabular-nums; }
.pc__promo { display: block; margin-top: 2px; color: #4ade80; font-size: 15px; font-weight: 600; }
.pc__imp { font-weight: 650; font-variant-numeric: tabular-nums; }
.pc__lado { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 28px; background: #1e293b; }
.pc__fila { display: flex; justify-content: space-between; font-size: 22px; color: #cbd5e1; }
.pc__fila--vuelto strong { color: #4ade80; font-size: 34px; }
.pc__total { display: flex; flex-direction: column; gap: 4px; }
.pc__total span { color: #94a3b8; font-size: 22px; }
.pc__total strong { font-size: clamp(44px, 6vw, 72px); font-weight: 800; font-variant-numeric: tabular-nums; }
.pc__yape { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px 28px; text-align: center; min-height: 0; }
.pc__yape-titulo { font-size: clamp(26px, 3.5vw, 40px); font-weight: 750; }
.pc__yape-qr { display: block; max-width: 100%; max-height: calc(100vh - 260px); width: auto; height: auto; padding: 12px; border-radius: 16px; background: #fff; }
.pc__yape-monto { font-size: clamp(30px, 4.5vw, 52px); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .pc__venta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .atajos-pos { display: none; }
  .cuadricula-pos__productos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .cobro__metodos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.panel__campos .nota--panel { grid-column: 1 / -1; }
.cobro__linea, .cobro__efectivo { align-items: stretch; }
.cobro__metodos { width: 100%; }

/* ==========================================================================
   Tema oscuro, color y logo de la empresa, tablero del mes
   ========================================================================== */

/* Logo de la empresa en el ingreso: siempre sobre blanco. */
.acceso__logo { display: block; max-width: 180px; max-height: 64px; margin-bottom: 12px; object-fit: contain; }
:root[data-tema="oscuro"] .acceso__logo { padding: 6px 10px; border-radius: var(--radio); background: #fff; }
:root[data-tema="oscuro"] .logo-vista { background: #fff; }

/* Botón de tema junto al usuario */
.quien .boton-tema { margin-left: auto; }

/* Opciones segmentadas (tema) */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--linea); border-radius: 999px; background: var(--fondo); }
.segmentado__opcion { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px; border: 0; border-radius: 999px; background: none; color: var(--tinta-2); font-weight: 550; }
.segmentado__opcion:hover { background: var(--fondo-2); color: var(--tinta); }
.segmentado__opcion.es-actual { background: var(--papel); color: var(--sello-texto); box-shadow: 0 0 0 1px var(--linea-fuerte); }

/* Elegir el color de la empresa */
.colores { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.colores__muestra {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 3px solid var(--papel); border-radius: 50%; background: var(--muestra, var(--fondo-2)); color: #fff;
  box-shadow: 0 0 0 1px var(--linea-fuerte); cursor: pointer;
}
.colores__muestra:hover { box-shadow: 0 0 0 1px var(--tinta-3); }
.colores__muestra.es-actual { box-shadow: 0 0 0 2px var(--tinta); }
.colores__muestra--otro { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); }
.colores__muestra--otro.es-actual { background: var(--muestra); }
.colores__otro { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.muestra-tema { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; padding: 16px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-grande); }
.muestra-tema > * { pointer-events: none; }

/* Esqueleto de carga */
.esqueleto { position: relative; overflow: hidden; min-height: 132px; background: var(--fondo); }
.esqueleto::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--fondo-2), transparent); animation: esqueleto 1.3s ease-in-out infinite;
}
@keyframes esqueleto { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .esqueleto::after { animation: none; } }

/* Tablero del mes */
.tablero { margin-bottom: 12px; }
.tablero > .bloque { margin: 0 0 24px; padding: 20px 22px; border: 1px solid var(--linea); border-radius: var(--radio-grande); }
.tablero .bloque__titulo { font-size: 16px; }
.tarjeta-kpi__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; }
.tarjeta-kpi__fila .tarjeta-kpi__valor { flex: none; white-space: nowrap; overflow-wrap: normal; }
.tarjeta-kpi__fila .chispa { flex: 0 1 96px; min-width: 36px; height: 28px; }
.tablero__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.tablero__titulo { font-size: 20px; }
.tarjetas-kpi { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
.tarjeta-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel); }
.tarjeta-kpi--meta { background: var(--fondo); }
.tarjeta-kpi__cabeza { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tarjeta-kpi__icono { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--sello-suave); color: var(--sello-texto); }
.tarjeta-kpi__rotulo { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.tarjeta-kpi__valor { font-size: 30px; font-stretch: 84%; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tarjeta-kpi__detalle { font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); }
.tarjeta-kpi__extra { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tarjeta-kpi__nota { font-size: 13px; color: var(--tinta-3); }
.tarjeta-kpi__editar { align-self: flex-start; font-size: 13px; }
.meta-barra { position: relative; height: 10px; border-radius: 999px; background: var(--fondo-2); }
.meta-barra__relleno { display: block; height: 100%; border-radius: inherit; background: var(--sello); transition: width .4s ease; }
.meta-barra__relleno--lista { background: var(--ok); }
.meta-barra__proyeccion { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tinta-2); }
.chispa { flex: none; }
.chispa__linea { fill: none; stroke: var(--sello-texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Gráfico de líneas */
.grafico--lineas .grafico__linea { fill: none; stroke: var(--sello-texto); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.grafico__area-inicio { stop-color: var(--sello-texto); stop-opacity: .22; }
.grafico__area-fin { stop-color: var(--sello-texto); stop-opacity: 0; }
.grafico__punto { fill: var(--papel); stroke: var(--sello-texto); stroke-width: 2.5; }
.grafico__punto--fijo { fill: var(--sello-texto); stroke: var(--papel); stroke-width: 2; }
.grafico__guia { stroke: var(--linea-fuerte); stroke-width: 1; stroke-dasharray: 3 3; }

/* Anillo */
.dona { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.dona__svg { flex: none; }
.dona__fondo, .dona__tramo { fill: none; }
.dona__fondo { stroke: var(--fondo-2); }
.dona__rotulo { fill: var(--tinta-3); font-size: 12px; font-family: var(--fuente); }
.dona__valor { fill: var(--tinta); font-size: 17px; font-weight: 700; font-family: var(--fuente); }
.dona__leyenda { flex: 1 1 180px; display: grid; gap: 8px; min-width: 0; }
.dona__leyenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; align-items: center; gap: 8px; font-size: 14px; }
.dona__muestra { width: 10px; height: 10px; border-radius: 3px; }
.dona__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dona__monto { font-weight: 600; font-variant-numeric: tabular-nums; }
.dona__pct { color: var(--tinta-3); text-align: right; font-variant-numeric: tabular-nums; }
.dona__tramo--0 { stroke: var(--serie-0); } .dona__muestra--0 { background: var(--serie-0); }
.dona__tramo--1 { stroke: var(--serie-1); } .dona__muestra--1 { background: var(--serie-1); }
.dona__tramo--2 { stroke: var(--serie-2); } .dona__muestra--2 { background: var(--serie-2); }
.dona__tramo--3 { stroke: var(--serie-3); } .dona__muestra--3 { background: var(--serie-3); }
.dona__tramo--4 { stroke: var(--serie-4); } .dona__muestra--4 { background: var(--serie-4); }
.dona__tramo--5 { stroke: var(--serie-5); } .dona__muestra--5 { background: var(--serie-5); }

/* Ranking (productos y vendedores) */
.ranking { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ranking__fila { display: grid; grid-template-columns: 16px 40px minmax(0, 1fr); align-items: center; gap: 10px; }
.ranking__puesto { color: var(--tinta-3); font-size: 13px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.foto-producto--ranking { width: 40px; height: 40px; border-radius: 8px; font-size: 13px; }
.ranking__avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sello-suave); color: var(--sello-texto); font-size: 14px; font-weight: 700; }
.ranking__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.ranking__linea { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ranking__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.ranking__valor { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ranking__barra { height: 6px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; }
.ranking__barra > span { display: block; height: 100%; border-radius: inherit; background: var(--sello); }

/* Mapa de calor */
.calor { display: grid; grid-template-columns: 34px repeat(var(--horas), minmax(14px, 1fr)); gap: 3px; overflow-x: auto; }
.calor__hora { font-size: 11px; color: var(--tinta-3); text-align: center; font-variant-numeric: tabular-nums; }
.calor__dia { align-self: center; font-size: 12px; color: var(--tinta-2); }
.calor__celda { min-height: 18px; border-radius: 4px; background: var(--sello); opacity: calc(.15 + var(--nivel) * .85); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .calor__celda { opacity: 1; background: color-mix(in srgb, var(--sello) calc(var(--nivel) * 100%), var(--fondo-2)); }
}
.calor__celda--vacia { opacity: 1; background: var(--fondo); }
.calor__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 10px; }
.calor__escala { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-3); }
.calor__degradado { width: 90px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--fondo-2), var(--sello)); }

@media (max-width: 1023px) {
  .tarjetas-kpi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tarjeta-kpi--meta { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .tarjetas-kpi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tarjeta-kpi { padding: 16px; }
  .tarjeta-kpi__valor { font-size: 26px; }
  .tablero > .bloque { padding: 16px; }
  .calor { grid-template-columns: 28px repeat(var(--horas), minmax(12px, 1fr)); gap: 2px; }
}

/* Modo oscuro: lo que no sale solo de las variables */
:root[data-tema="oscuro"] div.dt-container .dt-paging .dt-paging-button { color: var(--tinta) !important; }
:root[data-tema="oscuro"] div.dt-container .dt-paging .dt-paging-button.current,
:root[data-tema="oscuro"] div.dt-container .dt-paging .dt-paging-button:hover { background: var(--fondo-2) !important; border-color: var(--linea-fuerte) !important; color: var(--tinta) !important; }
:root[data-tema="oscuro"] div.dt-container .dt-paging .dt-paging-button.disabled { color: var(--tinta-3) !important; }
:root[data-tema="oscuro"] div.dt-container .dt-input { background-color: var(--papel); color: var(--tinta); border-color: var(--linea-fuerte); }
:root[data-tema="oscuro"] .foto-producto--vacia { background: hsl(var(--tono, 220) 28% 22%); color: hsl(var(--tono, 220) 70% 82%); }

/* ==========================================================================
   Esqueletos de carga, pantallas vacías, tablas como tarjetas y recorrido guiado
   ========================================================================== */
.estado-carga { display: grid; gap: 12px; padding: 4px 0 16px; }
.estado-carga__texto { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tinta-3); }
.giro--chico { width: 14px; height: 14px; border-width: 2px; }
.esqueleto-tabla { display: grid; gap: 2px; padding: 0 0 4px; border: 1px solid var(--linea); border-radius: var(--radio-grande); overflow: hidden; }
.esqueleto--cabeza { min-height: 40px; border-radius: 0; }
.esqueleto-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 16px; }
.esqueleto--linea, .esqueleto--corta { min-height: 12px; border-radius: 6px; }
.esqueleto--corta { flex: none; width: 64px; }
.esqueleto-tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.esqueleto--tarjeta { min-height: 112px; border-radius: var(--radio-grande); }
@media (max-width: 1023px) { .esqueleto-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .esqueleto-tarjetas { grid-template-columns: minmax(0, 1fr); } .esqueleto--tarjeta { min-height: 88px; } }

/* Pantalla vacía con lo que se puede hacer */
.estado--vacio { align-items: center; padding: 40px 20px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-grande); text-align: center; }
.estado--vacio > .icono { width: 34px; height: 34px; color: var(--sello-texto); }
.estado--vacio .estado__titulo { font-size: 17px; }
.estado--vacio .estado__mensaje { max-width: 460px; }
.estado__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.estado__acciones .boton { margin-top: 0; }
.estado--vacio .estado__acciones { justify-content: center; }

/* Tablas como tarjetas en el celular */
@media (max-width: 639px) {
  table.tabla--tarjetas, table.tabla--tarjetas > tbody, table.tabla--tarjetas > tbody > tr { display: block; width: 100% !important; }
  table.tabla--tarjetas > thead { display: none; }
  table.tabla--tarjetas > tbody > tr { display: flex; flex-direction: column; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel); }
  table.tabla--tarjetas > tbody > tr > td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 3px 0 !important; border: 0 !important; white-space: normal; text-align: right; overflow-wrap: anywhere;
  }
  table.tabla--tarjetas > tbody > tr > td > .sub { flex-basis: 100%; text-align: right; }
  table.tabla--tarjetas > tbody > tr > td::before { content: attr(data-etiqueta); flex: none; max-width: 45%; color: var(--tinta-3); font-size: 12.5px; text-align: left; }
  table.tabla--tarjetas > tbody > tr > td.col-n { display: none; }
  table.tabla--tarjetas > tbody > tr > td.col-principal { display: block; order: -1; padding-bottom: 6px !important; font-weight: 600; text-align: left; }
  table.tabla--tarjetas > tbody > tr > td.col-principal > .sub { text-align: left; }
  table.tabla--tarjetas > tbody > tr > td.col-principal::before, table.tabla--tarjetas > tbody > tr > td.col-acciones::before { content: none; }
  table.tabla--tarjetas > tbody > tr > td.col-principal .sub { font-weight: 400; }
  table.tabla--tarjetas > tbody > tr > td.col-acciones { justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; padding-top: 8px !important; border-top: 1px solid var(--linea) !important; }
  table.tabla--tarjetas > tbody > tr > td.dt-empty { display: block; text-align: center; }
  table.tabla--tarjetas > tbody > tr > td.dt-empty::before { content: none; }
  table.tabla--tarjetas > tbody > tr:hover > * { background: none !important; }
  div.dt-container:has(table.tabla--tarjetas) .dt-layout-table { border: 0; }
}

/* Recorrido guiado */
.recorrido { position: fixed; inset: 0; z-index: 2147482000; }
.recorrido__luz {
  position: fixed; border-radius: 12px; outline: 2px solid var(--sello-texto); outline-offset: 0;
  box-shadow: 0 0 0 9999px var(--velo); pointer-events: none; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.recorrido__tarjeta {
  position: fixed; width: min(340px, calc(100vw - 24px)); padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--radio-grande);
  background: var(--papel); color: var(--tinta); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); transition: top .25s ease, left .25s ease; outline: none;
}
.recorrido__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.recorrido__cuenta { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); }
.recorrido__titulo { margin-bottom: 6px; font-size: 17px; }
.recorrido__texto { font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.recorrido__pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .recorrido__luz, .recorrido__tarjeta { transition: none; } }

/* ==========================================================================
   Devolución o cambio y nota de crédito como medio de pago
   ========================================================================== */
.devolucion { display: flex; flex-direction: column; gap: 14px; }
.devolucion .elegido { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.devolucion__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.devolucion__tabla td { vertical-align: middle; }
.devolucion__pasos { display: inline-flex; align-items: center; gap: 4px; }
.devolucion__pasos > input.devolucion__cant { width: 64px; min-width: 0; text-align: center; }
.devolucion__modo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.devolucion__modo .cobro__metodos { grid-column: 1 / -1; }
.devolucion__opcion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--papel); color: var(--tinta); text-align: left;
}
.devolucion__opcion span { font-size: 13px; color: var(--tinta-3); }
.devolucion__opcion.es-actual { border-color: var(--sello); background: var(--sello-suave); box-shadow: 0 0 0 1px var(--sello); }
.devolucion__opcion:disabled { opacity: .55; cursor: not-allowed; }
.devolucion__total { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px; border-radius: var(--radio); background: var(--fondo); }
.devolucion__total strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.cobro__nota {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--sello-anillo);
  border-radius: var(--radio); background: var(--sello-suave); color: var(--sello-texto-fuerte); font-weight: 600;
}
.cobro__vale { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cobro__vale input { width: 160px; }
@media (max-width: 639px) { .devolucion__modo { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Ventas sin internet
   ========================================================================== */
.pendientes { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.pendientes__fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); }
.pendientes__fila > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pendientes__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; flex: none; }
@media (max-width: 639px) { .pendientes__fila { flex-direction: column; } .pendientes__acciones { justify-content: flex-start; } }
.cobro__total:has(.cobro__cambio) { flex-wrap: wrap; }
.cobro__cambio { flex-basis: 100%; margin-top: 2px; font-size: 13px; color: var(--tinta-2); text-align: right; }

/* Líneas de venta en formato compacto cuando la columna de productos es angosta (laptops con el menú abierto). */
.venta__principal { container-type: inline-size; }
@container (max-width: 600px) {
  .item { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding: 14px 0; }
  .item.item--cabeza { display: none; }
  .item__n { order: 1; align-self: flex-start; padding-top: 2px; }
  .item__producto { order: 2; flex: 1 1 60%; }
  .item > .boton-icono { order: 3; align-self: flex-start; margin-top: -6px; }
  .item__campo { order: 4; flex: 1 1 26%; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .item__rotulo { display: block; font-size: 12px; color: var(--tinta-3); }
  .item__importe { order: 5; flex: 1 1 100%; text-align: right; }
}

/* ---------- CRM ---------- */
.crm-grupos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.crm-grupos .chip-categoria { display: inline-flex; align-items: center; gap: 8px; }
.crm-grupos__n { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 500; }
.crm-barra { align-items: center; margin-bottom: 14px; }
.crm-barra .nota { margin: 0; }
.crm-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crm-control__rotulo { font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.crm-control select, .crm-control input { min-height: var(--alto-control); }
.enlace-fila { display: block; padding: 0; border: 0; background: none; color: var(--sello-texto); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.enlace-fila:hover { color: var(--sello-texto-fuerte); text-decoration: underline; text-underline-offset: 3px; }

.embudo { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.embudo__columna { display: flex; flex-direction: column; gap: 8px; min-height: 180px; padding: 10px; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--fondo-2); transition: border-color .15s, box-shadow .15s; }
.embudo__columna.es-destino { border-color: var(--sello); box-shadow: 0 0 0 3px var(--sello-anillo); }
.embudo__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding: 2px 2px 6px; }
.embudo__nombre { display: inline-flex; align-items: center; gap: 6px; }
.embudo__n { font-weight: 650; font-variant-numeric: tabular-nums; }
.embudo__total { font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.embudo__vacio { margin: 6px 2px; font-size: 13px; color: var(--tinta-3); }
.op-tarjeta { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sombra); }
.op-tarjeta:hover { border-color: var(--linea-fuerte); }
.op-tarjeta:focus-visible { outline: 2px solid var(--sello); outline-offset: 2px; }
.op-tarjeta[draggable="true"]:active { cursor: grabbing; }
.op-tarjeta__titulo { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.op-tarjeta__cliente { font-size: 13px; color: var(--tinta-2); overflow-wrap: anywhere; }
.op-tarjeta__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.op-tarjeta__cierre { color: var(--tinta-3); }
.op-tarjeta--vencida .op-tarjeta__cierre { color: var(--error-tinta); font-weight: 600; }
.op-tarjeta__ia { display: flex; gap: 4px; align-items: flex-start; font-size: 12px; line-height: 1.35; color: var(--sello-texto-fuerte); }
.op-tarjeta__ia svg { flex: none; margin-top: 2px; }
.op-lista { display: flex; flex-direction: column; gap: 8px; }
.op-lista__item { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.ia-caja { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--sello-anillo); border-radius: var(--radio-grande); background: var(--sello-suave); }
.ia-caja__titulo { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--sello-texto-fuerte); }
.ia-caja__texto { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.ia-caja__resumen:empty, .ia-caja__salida:empty { display: none; }
.ia-caja__resumen { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radio); background: var(--papel); }
.ia-caja__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.ia-caja__salida textarea { width: 100%; min-height: 130px; }
.ia-caja__salida .campo { margin: 0; }
.ia-caja__nota { margin: 0; font-size: 12px; color: var(--tinta-2); }
.ia-caja__lista { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.ia-caja__lista .sub { display: block; }
.ia-caja .nota { margin: 0; }

.crm-ficha { display: flex; flex-direction: column; gap: 4px; }
.crm-ficha__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.crm-ficha__columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.crm-ficha__columnas > .bloque { margin-top: 0; min-width: 0; }
.crm-ficha .indicadores.indicadores--reporte { margin: 8px 0 16px; }
.crm-anotar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.crm-anotar__fila { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-anotar select, .crm-anotar input { min-height: var(--alto-control); }
.crm-anotar textarea { width: 100%; }

.linea-tiempo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.linea-tiempo__item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.linea-tiempo__item--vencida { border-color: var(--error-borde); background: var(--error-suave); }
.linea-tiempo__item--hecha .linea-tiempo__texto { color: var(--tinta-3); text-decoration: line-through; }
.linea-tiempo__icono { display: flex; justify-content: center; padding-top: 2px; color: var(--tinta-3); }
.linea-tiempo__icono input { width: 18px; height: 18px; margin: 0; }
.linea-tiempo__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.linea-tiempo__meta { margin-top: 2px; font-size: 12px; color: var(--tinta-3); }
.linea-tiempo__meta .enlace { font-size: 12px; }
.linea-tiempo__item .boton-icono { margin: -6px -6px 0 0; }

.crm-ficha__contacto { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
/* Lo que acaba de aparecer (resultado de la IA, nota u oportunidad nueva) se marca un instante (crm.js, aLaVista). */
.crm-resaltado { animation: crm-resaltado 1.6s ease-out; scroll-margin: 16px; }
@keyframes crm-resaltado { from { box-shadow: 0 0 0 3px var(--sello-anillo); background-color: var(--sello-suave); } to { box-shadow: 0 0 0 3px transparent; } }

/* CRM en el celular: clientes en tarjetas y el embudo de a una etapa (crm.js, esCelular). */
.crm-buscar { margin-bottom: 12px; }
.crm-lista { display: flex; flex-direction: column; gap: 8px; }
.crm-lista__mas { align-self: center; margin-top: 6px; }
.crm-cliente { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--papel); box-shadow: var(--sombra); }
.crm-cliente__abrir {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 12px 14px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.crm-cliente__abrir:active { background: var(--fondo); }
.crm-cliente__abrir:focus-visible { outline: 2px solid var(--sello); outline-offset: -2px; }
.crm-cliente__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  background: hsl(var(--tono, 220) 70% 92%); color: hsl(var(--tono, 220) 55% 30%); }
:root[data-tema="oscuro"] .crm-cliente__avatar { background: hsl(var(--tono, 220) 28% 22%); color: hsl(var(--tono, 220) 70% 82%); }
.crm-cliente__cuerpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crm-cliente__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.crm-cliente__nombre { display: -webkit-box; overflow: hidden; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.crm-cliente__dato { font-size: 13px; line-height: 1.35; color: var(--tinta-2); }
.crm-cliente__grupos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px; }
.crm-cliente__grupos .etiqueta { font-size: 11.5px; }
.crm-cliente__pendiente { font-size: 12px; font-weight: 600; color: var(--espera); }
.crm-cliente__total { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-cliente__wa { flex: none; margin-right: 6px; color: #16a34a; }
.embudo-movil { display: flex; flex-direction: column; gap: 10px; }
.embudo-movil__total { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 13.5px; color: var(--tinta-2); }
.embudo-movil__total strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.embudo-movil__lista { display: flex; flex-direction: column; gap: 8px; }
.embudo-movil .op-tarjeta { padding: 12px 14px; }

@media (max-width: 900px) {
  .crm-ficha__columnas { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 639px) {
  .embudo { grid-template-columns: repeat(5, 84%); scroll-snap-type: x mandatory; }
  .embudo__columna { scroll-snap-align: start; }
  .ia-caja__opciones { grid-template-columns: minmax(0, 1fr); }
  /* Cabecera de una línea (título y botón) y pestañas que entran en el ancho. */
  .crm .pagina__cabecera { flex-wrap: nowrap; align-items: center; }
  .crm .pagina__descripcion { display: none; }
  .crm .pagina__acciones { width: auto; flex: none; }
  .crm .pagina__acciones .boton { flex: none; }
  .crm .pestanas { gap: 0; }
  .crm .pestanas .pestana { padding: 10px 7px 11px; font-size: 13.5px; }
  /* Grupos y etapas en una fila que se desliza, de borde a borde. */
  .crm-grupos { flex-wrap: nowrap; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .crm-grupos::-webkit-scrollbar { display: none; }
  .crm-grupos .chip-categoria { flex: none; }
  .crm-barra .nota { flex-basis: 100%; }
  .crm-ficha__contacto { margin-left: 0; }
}
@media (max-width: 359px) {
  .crm-grupos { margin-left: -12px; margin-right: -12px; padding: 0 12px 2px; }
}

/* ---------- Asistente con IA ---------- */
.charla__marco { display: flex; flex-direction: column; gap: 12px; }
.charla { display: flex; flex-direction: column; gap: 10px; max-height: min(52vh, 460px); overflow-y: auto; }
.charla:empty { display: none; }
.charla__burbuja { max-width: 92%; padding: 10px 14px; border-radius: var(--radio-grande); line-height: 1.5; }
.charla__burbuja--yo { align-self: flex-end; background: var(--sello); color: #fff; border-bottom-right-radius: 4px; }
.charla__burbuja--ia { align-self: flex-start; background: var(--fondo-2); border: 1px solid var(--linea); border-bottom-left-radius: 4px; }
.charla__burbuja--error { border-color: var(--error-borde); background: var(--error-suave); }
.charla__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.charla__pensando { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); }
.charla__enlaces { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; }
.charla__form { display: flex; gap: 8px; }
.charla__form input { flex: 1; min-width: 0; min-height: var(--alto-control); }
.charla__ejemplos .chips { margin-top: 4px; }
.charla__ejemplos .nota { margin: 0; }

.compra-ia { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; padding: 10px 12px; border: 1px dashed var(--sello-anillo); border-radius: var(--radio-grande); background: var(--sello-suave); }
.compra-ia .nota { margin: 0; }
.compra-ia__resumen { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.compra-ia__pendientes:empty { display: none; }
.compra-ia__pendientes { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--espera-borde); border-radius: var(--radio-grande); background: var(--espera-suave); }
.compra-ia__titulo { margin: 0; font-weight: 600; }
.compra-ia__linea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; }
.compra-ia__linea .sub { display: block; }

.ia-inicio { margin-bottom: 20px; }
.ia-inicio__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.ia-inicio__cabeza .ia-caja__titulo { margin: 0; font-size: 16px; }
.ia-inicio__cabeza .sub { font-weight: 400; color: var(--tinta-2); }
.ia-inicio__lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.ia-inicio__lista .nota { list-style: none; margin-left: -20px; }

@media (max-width: 639px) {
  .compra-ia__linea { grid-template-columns: minmax(0, 1fr); }
  .charla__burbuja { max-width: 100%; }
}

/* Productos repetidos y sugerencia ajustada con IA */
.repetidos { display: flex; flex-direction: column; gap: 8px; }
.repetido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(160px, 0.8fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.repetido--distinto { opacity: .65; }
.repetido__lado { min-width: 0; }
.repetido__lado .sub { display: block; }
.repetido__veredicto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sugerencia__ia { color: var(--sello-texto-fuerte); max-width: 260px; margin-left: auto; white-space: normal; }
@media (max-width: 639px) { .repetido { grid-template-columns: minmax(0, 1fr); } }

/* Punto de venta en pantalla completa: sin menú ni barras. */
.modo-caja .lateral, .modo-caja .barra-movil, .modo-caja .menu-inferior { display: none !important; }
.modo-caja .contenido { padding-top: 20px; }

/* Apariencia de este equipo (Configuración > Aplicación) */
.ajustes-equipo { display: flex; flex-direction: column; gap: 18px; }
.ajustes-equipo .campo { margin: 0; }
.colores__empresa { min-height: 36px; padding: 6px 14px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--papel); color: var(--tinta-2); font: inherit; font-weight: 550; cursor: pointer; }
.colores__empresa.es-actual { border-color: var(--sello); color: var(--sello-texto); box-shadow: 0 0 0 1px var(--sello); }

/* ---------- Cambiar de usuario con PIN (js/ui/cambio-usuario.js) ---------- */
.cambio-usuario__personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.cambio-usuario__persona { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio-grande);
  background: var(--papel); color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.cambio-usuario__persona:hover { border-color: var(--sello); }
.cambio-usuario__persona:focus-visible { outline: 2px solid var(--sello); outline-offset: 2px; }
.pin { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pin__avatar { width: 52px; height: 52px; font-size: 18px; }
.pin__nombre { margin: 0; font-weight: 650; }
.pin__puntos { display: flex; gap: 12px; min-height: 16px; }
.pin__punto { width: 14px; height: 14px; border: 2px solid var(--linea-fuerte); border-radius: 50%; }
.pin__punto.es-lleno { border-color: var(--sello); background: var(--sello); }
/* El campo de verdad queda invisible: recibe el teclado del equipo; en pantalla se usan las teclas grandes. */
.pin__campo { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pin__error { min-height: 1.4em; margin: 0; }
.pin__teclado { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; }
.pin__tecla { height: 58px; padding: 0; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pin__tecla--borrar, .pin__tecla--entrar { font-size: 15px; }

/* ==========================================================================
   Productos con variantes (variantes.js), elegir la variante en el punto de venta y la API
   ========================================================================== */
.atributos { display: grid; gap: 8px; margin-bottom: 10px; }
.atributo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) auto; gap: 10px; align-items: end; }
.atributo > .campo, .variante > .campo { grid-column: auto; margin: 0; }
.atributo__quitar { margin-bottom: 4px; }
.variantes__acciones { margin: 0 0 12px; flex-wrap: wrap; }
.variantes__acciones .con-boton input { width: 110px; }
.variantes { display: grid; gap: 6px; }
.variantes__cabeza, .variante { display: grid; grid-template-columns: 28px minmax(130px, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 92px 72px 112px; gap: 8px; align-items: center; }
.variante__acciones { display: flex; justify-content: flex-end; gap: 2px; }
/* Variantes dentro del editor de producto (productos.js + variantes.js). */
.casilla--destacada { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); }
.casilla--destacada input { margin-top: 3px; }
.casilla--destacada .sub { display: inline; color: var(--tinta-2); }
.casilla--destacada:has(input:checked) { border-color: var(--sello-anillo); background: var(--sello-suave); }
.matriz-variantes { margin-top: 16px; }
.matriz-variantes__titulo { margin: 18px 0 6px; font-size: 14px; font-weight: 650; }
.variantes__suelto-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; color: var(--tinta-2); }
.variantes__suelto-campo select { width: auto; min-width: 140px; }
.variantes__cabeza { padding: 0 0 4px; border-bottom: 1px solid var(--linea-fuerte); font-size: 12px; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .04em; }
.variante { padding: 6px 0; border-bottom: 1px solid var(--linea); }
.variante input { min-height: 38px; padding: 6px 8px; }
.variante__activa { display: flex; justify-content: center; }
.variante__nombre { display: flex; flex-direction: column; min-width: 0; }
.variante__nombre strong { font-weight: 600; overflow-wrap: anywhere; }
.variante.es-apagada .variante__nombre, .variante.es-apagada input:not([type=checkbox]) { opacity: .45; }
.variantes__stock { padding-right: 8px; }
.editor-modelo__separar { margin-right: auto; }
.chip--variante { padding: 1px 8px; margin-right: 4px; font-size: 12px; }
.chip--chico { padding: 1px 8px; font-size: 12px; }
.tabla-simple tr.es-apagada td { opacity: .55; }
.secreto { width: 100%; margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
@media (max-width: 760px) {
  .atributo { grid-template-columns: minmax(0, 1fr) auto; }
  .atributo > .campo:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .variantes__cabeza { display: none; }
  .variante { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
  .variante__nombre { grid-column: 2 / -1; }
  .variante > :nth-child(3), .variante > :nth-child(5) { grid-column: 2; }
  .variante > :nth-child(4), .variante > :nth-child(6) { grid-column: 3; }
  .variante > :nth-child(7) { grid-column: 2 / -1; justify-content: flex-start; }
  .variante > [data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--tinta-3); }
  .variante > .variantes__stock { padding: 0; text-align: left; }
}

/* Cuadro de un producto con variantes en la cuadrícula, y la hoja para elegirla. */
.tile-producto__variantes { font-size: 12px; color: var(--tinta-3); }
.tile-producto--modelo .tile-producto__foto { box-shadow: 4px 4px 0 -1px var(--papel), 4px 4px 0 0 var(--linea-fuerte); }
.variantes-pos { display: flex; flex-direction: column; gap: 14px; }
.variantes-pos__filtros { display: flex; flex-direction: column; gap: 10px; }
.variantes-pos__atributo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.variantes-pos__rotulo { flex: 0 0 100%; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.variantes-pos__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.variante-pos {
  display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); font: inherit; text-align: left; cursor: pointer;
}
.variante-pos:hover { border-color: var(--sello-anillo); }
.variante-pos:active { transform: scale(.98); }
.variante-pos__nombre { font-weight: 650; }
.variante-pos__precio { color: var(--sello-texto); font-weight: 650; font-variant-numeric: tabular-nums; }
.variante-pos__stock { font-size: 12.5px; color: var(--tinta-3); }
.variante-pos--agotada { opacity: .55; }
.variante-pos--agotada .variante-pos__stock { color: var(--error); font-weight: 600; }
.pedido-detalle { display: flex; flex-direction: column; gap: 14px; }
.pedido-detalle .conexion { margin: 0; }

/* ==========================================================================
   Asistente con IA (asistente.js): botón flotante y chat al costado (en el celular, a pantalla completa)
   ========================================================================== */
.asistente-boton {
  position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px;
  border: 0; border-radius: 999px; background: var(--sello); color: #fff; font: inherit; font-weight: 650; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(17, 24, 39, .45);
}
.asistente-boton[hidden] { display: none; }
.asistente-boton:hover { filter: brightness(1.08); }
.con-asistente .asistente-boton { display: none; }
.dialogo.asistente-panel {
  position: fixed; inset: 16px 16px 16px auto; z-index: 45; margin: 0; width: min(440px, calc(100% - 32px)); height: calc(100% - 32px); max-height: none;
  box-shadow: 0 20px 48px -16px rgba(17, 24, 39, .45);
}
.dialogo.asistente-panel[open] { display: flex; flex-direction: column; }
.asistente-panel__titulo { display: flex; align-items: center; gap: 8px; color: var(--sello-texto); }
.asistente-panel__botones { display: flex; gap: 2px; }
.asistente-panel__cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.asistente-panel__cuerpo .charla { max-height: none; overflow: visible; }
.asistente-panel__pie { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); background: var(--papel); }
.asistente-panel .charla__form textarea { flex: 1; min-width: 0; min-height: var(--alto-control); max-height: 120px; resize: none; line-height: 1.4; }
.asistente-panel .charla__form .boton { align-self: flex-end; min-width: 46px; padding: 0 12px; }
.charla__hola { margin: 0 0 6px; color: var(--tinta-2); }
.charla__nota { margin: 8px 0 0; font-size: 13px; color: var(--espera); }
.charla__acceso { margin: 8px 0 0; font-size: 12px; color: var(--tinta-3); }
.propuestas { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.propuesta { padding: 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--papel); }
.propuesta__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.propuesta__campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.propuesta__campo--ancho { grid-column: 1 / -1; }
.propuesta__campo input, .propuesta__campo select { min-height: 36px; padding: 6px 8px; font-size: 14px; font-weight: 400; color: var(--tinta); }
.propuesta__aviso { margin: 0 0 8px; font-size: 13px; color: var(--espera); }
.propuesta__estado { margin: 0 0 6px; font-size: 13px; color: var(--tinta-2); }
.propuesta__estado:empty { display: none; }
.propuesta__estado--error { color: var(--error); }
.propuesta--hecha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-color: var(--ok-borde, var(--linea)); }
.propuesta__hecho { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ok); font-weight: 600; }
@media (max-width: 639px) {
  .asistente-boton { display: none; }
  .dialogo.asistente-panel { inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
}
.acceso-ia__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; margin: 6px 0 12px; }