/* =====================================================================
   UX_MEDIA.CSS — estilos de las correcciones de uso de la auditoría
   2026-10 (prioridad media). Archivo propio para no mezclarse con los
   estilos generales (estilo.css, interior.css, dashboard.css): solo
   agrega clases nuevas (ux-*) y unas pocas reglas puntuales que se
   explican donde están.
   ===================================================================== */

/* ---- UX-16: periodo de trabajo en la barra superior ---- */
.ux-periodo-pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 0.65rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .ux-periodo-pill { font-size: 0.72rem; padding: 0 0.45rem; }
}

/* ---- UX-15: migas de pan ---- */
.ux-migas { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--iv-ink-soft, #5F6368); }
.ux-migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.ux-migas li { display: inline-flex; align-items: center; gap: 0.35rem; }
.ux-migas li + li::before { content: "/"; color: var(--iv-line, #C9CDD2); }
.ux-migas a { color: var(--iv-blue, #0067B8); text-decoration: none; }
.ux-migas a:hover { text-decoration: underline; }
.ux-migas [aria-current="page"] { color: var(--iv-ink, #1B1B1B); font-weight: 600; }

/* ---- UX-07: avisos flotantes (no tapan la pantalla) ---- */
.ux-avisos {
  position: fixed;
  top: calc(var(--iv-topbar-h, 56px) + 0.75rem);
  right: 1rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;         /* lo que no es un aviso no bloquea nada */
}
.ux-aviso {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.6rem 0.8rem 0.9rem;
  background: #fff;
  border: 1px solid var(--iv-line, #E1E3E6);
  border-left: 4px solid var(--iv-blue, #0067B8);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15, 27, 51, 0.16);
  color: var(--iv-ink, #1B1B1B);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ux-aviso-saliendo { opacity: 0; transform: translateY(-6px); }
.ux-aviso-exito { border-left-color: var(--mc-exito); }
.ux-aviso-exito .ux-aviso-icono { color: var(--mc-exito); }
.ux-aviso-error { border-left-color: #B42318; }
.ux-aviso-error .ux-aviso-icono { color: #B42318; }
.ux-aviso-advertencia { border-left-color: #B54708; }
.ux-aviso-advertencia .ux-aviso-icono { color: #B54708; }
.ux-aviso-info .ux-aviso-icono { color: var(--iv-blue, #0067B8); }
.ux-aviso-icono { flex-shrink: 0; line-height: 0; padding-top: 1px; }
.ux-aviso-cuerpo { flex: 1 1 auto; min-width: 0; }
.ux-aviso-titulo { display: block; font-size: 0.9rem; margin-bottom: 0.15rem; }
.ux-aviso-texto { margin: 0; font-size: 0.88rem; line-height: 1.4; overflow-wrap: anywhere; }
.ux-aviso-cerrar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -0.55rem -0.25rem -0.55rem 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--iv-ink-soft, #5F6368);
  cursor: pointer;
}
.ux-aviso-cerrar:hover { background: var(--iv-surface, #F3F4F6); color: var(--iv-ink, #1B1B1B); }
@media (max-width: 480px) {
  .ux-avisos { right: 0.5rem; left: 0.5rem; width: auto; }
}

/* ---- UX-05: panel cerrado = fuera del alcance del teclado ----
   (el atributo inert lo pone ux_media.js; esto es por si un navegador
   viejo no lo soporta: al menos no recibe clics). */
.dash-drawer[inert] { pointer-events: none; }
.dash-drawer:focus { outline: none; }

/* ---- UX-08: Menti no tapa paneles, menús ni confirmaciones ---- */
body.ux-panel-abierto .mc-menti,
body.menu-movil-bloqueado .mc-menti,
body.mc-confirmar-bloqueado .mc-menti { display: none !important; }

/* ---- UX-06/UX-17: tablas largas de libros y registros ----
   .ux-tabla-fija: el encabezado queda fijo al desplazarse dentro de la
   tabla (alto máximo), y la fila de totales (tfoot) queda fija abajo. */
.ux-tabla-fija {
  max-height: 70vh;
  overflow: auto;
}
.ux-tabla-fija > table > thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ux-th-fondo, #EEF2F7);
}
.ux-tabla-fija > table > thead tr:nth-child(2) th { top: var(--ux-th-alto, 2.1rem); }
.ux-tabla-fija > table > tfoot td,
.ux-tabla-fija > table > tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #F6F8FC;
  font-weight: 700;
  border-top: 2px solid var(--iv-line, #E1E3E6);
}
.ux-fila-totales td, .ux-fila-totales th { font-weight: 700; white-space: nowrap; }
@media (max-width: 768px) {
  /* En celular se mantiene el desplazamiento normal de la página. */
  .ux-tabla-fija { max-height: none; }
}

/* ---- UX-06: buscador del servidor y paginación ---- */
.ux-busqueda-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.ux-busqueda-form .dash-input { flex: 1 1 260px; max-width: 420px; }
.ux-resumen-busqueda { margin: -0.4rem 0 1rem; }

/* =====================================================================
   UX-19: impresión desde el navegador. Solo se imprime el contenido:
   sin barra superior, menú lateral, Menti, avisos, botones ni paneles.
   ===================================================================== */
@media print {
  .topbar-v2, .sidebar, .menu-movil-overlay, .menu-movil-btn,
  .mc-menti, .ux-avisos, .ux-migas, .dash-drawer, .dash-drawer-overlay,
  .mc-confirmar-overlay, .dash-overlay, .paginacion, .dash-tabs,
  .ux-busqueda-form, .mv-desliza-aviso, .no-imprimir,
  button, .dash-btn, .dash-btn-outline, .dash-chips-grupo, .dash-selector-periodo {
    display: none !important;
  }
  html, body { background: #fff !important; }
  .layout-app { display: block !important; }
  main.contenido { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
  .dash-wrap, .dash-wrap-ancho { max-width: none !important; padding: 0 !important; }
  .dash-tarjeta { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  .dash-tabla-scroll, .ux-tabla-fija { overflow: visible !important; max-height: none !important; border: 0 !important; }
  thead { display: table-header-group; }   /* el encabezado se repite en cada hoja */
  tfoot { display: table-footer-group; }
  tr, .dash-diario-fila { break-inside: avoid; page-break-inside: avoid; }
  .ux-tabla-fija > table > thead th, .ux-tabla-fija > table > tfoot td { position: static !important; }
  .dash-diario-fila .dash-diario-detalle { display: block !important; }  /* asientos completos */
  a[href] { color: inherit !important; text-decoration: none !important; }
}
a.dash-chip { text-decoration: none; color: inherit; }
a.dash-chip.activo { color: var(--iv-blue-deep, #005499); }

/* En celulares muy angostos el periodo de trabajo cede su lugar al nombre
   de la empresa (se sigue viendo en el título y los selectores de cada
   libro o registro). */
@media (max-width: 480px) {
  .ux-periodo-pill { display: none; }
}

/* ---- Auditoría 2026-10, UX-22: enlace "Saltar al contenido" ----
   Primer elemento enfocable de la página: oculto hasta que se llega con Tab. */
.ux-saltar {
  position: absolute; left: 0.75rem; top: -100px; z-index: 2000;
  background: var(--mc-blanco, #fff); color: var(--iv-blue, #0B5CAD);
  padding: 0.55rem 0.9rem; border-radius: var(--mc-radio-sm, 6px);
  box-shadow: 0 4px 16px rgba(15, 27, 61, 0.25); font-weight: 600; text-decoration: none;
}
.ux-saltar:focus, .ux-saltar:focus-visible { top: 0.6rem; outline: 2px solid var(--iv-blue, #0B5CAD); outline-offset: 2px; }
/* El destino del salto recibe el foco por programa: sin recuadro. */
#contenido-principal:focus { outline: none; }

/* ---- Auditoría 2026-10, UX-23: pista del atajo de teclado en el propio botón ----
   El texto lo pone ux_media.js en data-atajo-pista (Ctrl+Enter / ⌘+Enter, Alt+N).
   Va como ::after para no tocar el texto del botón (operacion_guardado.js lo
   cambia a "Guardando…"). Solo con mouse/teclado (no en celulares). */
@media (hover: hover) and (pointer: fine) {
  [data-atajo-pista]::after {
    content: attr(data-atajo-pista);
    margin-left: 0.45rem; padding: 0 0.3rem;
    font-size: 0.7em; font-weight: 500; line-height: 1.5;
    border: 1px solid currentColor; border-radius: 3px; opacity: 0.6;
    white-space: nowrap;
  }
  [data-atajo-pista][aria-busy="true"]::after, [data-atajo-pista]:disabled::after { display: none; }
}

/* ---- Auditoría 2026-10, U2-17: enlaces sin clase con el azul de la marca ----
   Bootstrap pinta los <a> con su azul #0D6EFD (4,03:1 sobre el aviso ámbar
   #FDF1DF y 4,09:1 sobre gris). El azul de la marca #0067B8 da 5,18:1 y
   5,25:1. Va aquí porque esta hoja se carga después de Bootstrap. */
:root {
  --bs-link-color: #0067B8;
  --bs-link-color-rgb: 0, 103, 184;
  --bs-link-hover-color: #005499;
  --bs-link-hover-color-rgb: 0, 84, 153;
}