/* views/excel.css · layout propio de la vista "Pasar al Excel"; todos los selectores bajo .v-excel (SPEC 3)
   Solo tokens de styles.css (claro, oscuro y alto contraste). Los componentes (cabecera, tag, iconbtn, btn, chip,
   aviso, vacío) son los del núcleo: acá solo se ordenan. El ancho lo decide el contenedor #main (container: main). */

.v-excel { padding-bottom: var(--sp-8); }

/* Aviso de "Exportar no está disponible" (ui_sistema_exportar_no_disponible) */
.v-excel .v-excel__nota { display: flex; align-items: flex-start; gap: var(--sp-2); max-width: var(--read-max); margin: 0 0 var(--sp-5);
  padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-small); color: var(--text-2); }
.v-excel .v-excel__nota > .ico { flex: none; margin-top: 1px; color: var(--info); }
.v-excel .v-excel__nota b { font-weight: 600; color: var(--text-strong); }

.v-excel .v-excel__avisos { margin: 0 0 var(--sp-5); }

/* Filas del Excel */
.v-excel .v-excel__filas { display: grid; gap: var(--sp-7); max-width: 1080px; }
.v-excel .v-excel__fila { min-width: 0; }
.v-excel .v-excel__fhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); }
.v-excel .v-excel__ftit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3); min-width: 0; margin: 0; font: inherit; }
.v-excel .v-excel__fnum { color: var(--text-strong); }
.v-excel .v-excel__trab { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-ui); color: var(--text-strong); overflow-wrap: anywhere; }
.v-excel .v-excel__nro { color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
.v-excel .v-excel__nro:hover { text-decoration: underline; text-underline-offset: 3px; }
.v-excel .v-excel__cli { color: var(--text-2); font-weight: 500; }

/* Un cambio (renglón) */
.v-excel .v-excel__cambios { list-style: none; margin: 0; padding: 0; }
.v-excel .v-excel__cambio { display: grid; gap: var(--sp-3); padding: var(--sp-4) 0 var(--sp-5); border-bottom: 1px solid var(--line); }
.v-excel .v-excel__ctop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-4); min-width: 0; }
.v-excel .v-excel__que { margin: 0; font: 600 var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--text-strong); }
.v-excel .v-excel__quien { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; }
.v-excel .v-excel__quien b { font-weight: 600; color: var(--text-strong); }
.v-excel .v-excel__quien .emb { flex: none; }

/* Columnas de VENTAS: letra · nombre · antes → ahora · copiar */
.v-excel .v-excel__cols { list-style: none; margin: 0; padding: 2px var(--sp-1) 2px var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.v-excel .v-excel__col { display: grid; grid-template-columns: 44px minmax(120px, 210px) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 4px 0; }
.v-excel .v-excel__col + .v-excel__col { border-top: 1px solid var(--line); }
.v-excel .v-excel__letra { display: inline-flex; }
.v-excel .v-excel__letra .tag { min-width: 28px; justify-content: center; color: var(--text-strong); font-weight: 600; }
.v-excel .v-excel__cnom { min-width: 0; font-size: var(--fs-small); color: var(--text-2); overflow-wrap: anywhere; }
.v-excel .v-excel__val { min-width: 0; font: 400 var(--fs-table)/var(--lh-table) var(--font-ui); overflow-wrap: anywhere; }
.v-excel .v-excel__val del { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--rule); }
.v-excel .v-excel__val ins { color: var(--text-strong); font-weight: 600; text-decoration: none; }
.v-excel .v-excel__flecha { margin: 0 6px; color: var(--text-3); }
.v-excel .v-excel__copiar { flex: none; }

.v-excel .v-excel__junto { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.v-excel .v-excel__junto > .ico { flex: none; margin-top: 1px; }
.v-excel .v-excel__acc { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }

/* Contenedor angosto (celular, o ficha acoplada al lado): la columna se apila en dos líneas */
@container main (max-width: 640px) {
  .v-excel .v-excel__cols { padding-inline: var(--sp-3) var(--sp-1); }
  .v-excel .v-excel__col { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "letra nombre copiar" "valor valor copiar"; gap: 2px var(--sp-2); padding: 8px 0; }
  .v-excel .v-excel__letra { grid-area: letra; }
  .v-excel .v-excel__cnom { grid-area: nombre; }
  .v-excel .v-excel__val { grid-area: valor; }
  .v-excel .v-excel__copiar { grid-area: copiar; align-self: center; }
  .v-excel .v-excel__acc { justify-content: stretch; }
  .v-excel .v-excel__acc > .btn { flex: 1 1 auto; }
  .v-excel .v-excel__quien { white-space: normal; }
}

/* Auditoría UX 20/10/26 (H12, H43): dos tarjetas, "Traer el Excel nuevo" y "Llevar los cambios al Excel" */
.v-excel .v-excel__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-4); max-width: 1080px; margin: 0 0 var(--sp-7); }
.v-excel .v-excel__opcion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; padding: var(--sp-5); }
.v-excel .v-excel__oico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--sp-1); border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.v-excel .v-excel__otit { margin: 0; }
.v-excel .v-excel__olin { margin: 0; max-width: 52ch; }
.v-excel .v-excel__oext { margin: 0; }
.v-excel .v-excel__oacc { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); width: 100%; }
.v-excel .v-excel__opcion .v-excel__nota { margin: var(--sp-2) 0 0; }
.v-excel .v-excel__cambiosec { max-width: 1080px; }
.v-excel .v-excel__ctit { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4); }
.v-excel .v-excel__ctit .t-small { font-family: var(--font-ui); letter-spacing: 0; }

/* v17 §2.2: los cambios agrupados por hoja (VENTAS · Base de datos), con la nota de AL y la ayuda de la fila nueva */
.v-excel .v-excel__hoja { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-8); }
.v-excel .v-excel__htit { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); margin: 0; }
.v-excel .v-excel__htit .t-small { font-family: var(--font-ui); letter-spacing: 0; text-transform: none; }
.v-excel .v-excel__hlin { margin: 0; max-width: 72ch; }
.v-excel .v-excel__notaal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.v-excel .v-excel__notatxt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-3); margin: 0; min-width: 0; }
.v-excel .v-excel__notaval { font: 600 var(--fs-table)/var(--lh-table) var(--font-ui); color: var(--text-strong); overflow-wrap: anywhere; }
.v-excel .v-excel__alt { margin: 0; }
.v-excel .v-excel__alt > summary { cursor: pointer; color: var(--text-2); min-height: 44px; display: flex; align-items: center; }
.v-excel .v-excel__alt > p { margin: 0 0 var(--sp-2); max-width: 72ch; }
.v-excel .v-excel__acc--alt { justify-content: flex-start; }