/* =============================================================================
   Presente7 · Capa 2 — Base
   =============================================================================
   Lo que le pasa a un elemento por existir, antes de que nadie le ponga una
   clase: cómo se lee el texto, cómo se ve el foco, cómo se comporta el
   movimiento. Es la capa que más se nota y la que nadie mira.

   Se carga DESPUÉS de style.min.css, así que gana por orden de cascada.
   El `!important` solo aparece donde Horilla lo puso primero.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Documento
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--p7-fondo-gestion) !important; /* la voz por defecto del panel es gestión */
  color: var(--p7-tinta);
  font-family: var(--p7-fuente) !important;
  font-size: var(--p7-text-sm);
  line-height: var(--p7-lh-normal);
  letter-spacing: var(--p7-track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Inter trae ligaduras contextuales y formas alternativas. `calt` mantiene
     las que corrigen pares problemáticos; el resto se deja tal cual porque el
     subconjunto que se sirve puede no incluirlas y una feature ausente hace
     que el navegador dibuje algo distinto de lo que se ve aquí. */
  font-feature-settings: 'calt' 1;
}

/* Deuda del ledger v2: el wrapper vivía en `--p7-canvas` (alias de
   fondo-calido) mientras `body` ya usaba fondo-gestion — dos superficies
   distintas sin que ninguna pantalla necesitara esa costura. El wrapper es
   el mismo lienzo de la voz de gestión que `body`, no una segunda capa, así
   que se unifica. */
.oh-wrapper, .oh-wrapper-main, .oh-main {
  background: var(--p7-fondo-gestion) !important;
}

/* -----------------------------------------------------------------------------
   Escala tipográfica
   -----------------------------------------------------------------------------
   Los titulares se cierran de tracking a medida que crecen y se abren de
   interlineado a medida que menguan. Es la corrección óptica que separa una
   jerarquía diseñada de seis tamaños puestos en orden.

   Contrato de peso v2, intencional: h1/h2 en --p7-weight-bold (700), h3-h6 en
   --p7-weight-semi (600) — así se conserva la jerarquía entre niveles en vez
   de un 700 plano. Quien necesite un h3-h6 en 700 lo decide en components.css
   con este dato a la vista, no reescribiendo esta capa.
   -------------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.oh-title, .oh-titlebar__title, .oh-card__title, .oh-dashboard__title {
  font-family: var(--p7-font) !important;
  color: var(--p7-tinta);
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--p7-text-2xl);
  line-height: var(--p7-lh-tight);
  letter-spacing: var(--p7-track-display);
  font-weight: var(--p7-weight-bold);
}

h2, .h2 {
  font-size: var(--p7-text-xl);
  line-height: var(--p7-lh-tight);
  letter-spacing: var(--p7-track-title);
  font-weight: var(--p7-weight-bold);
}

h3, .h3 {
  font-size: var(--p7-text-lg);
  line-height: var(--p7-lh-snug);
  letter-spacing: var(--p7-track-title);
  font-weight: var(--p7-weight-semi);
}

h4, .h4 {
  font-size: var(--p7-text-md);
  line-height: var(--p7-lh-snug);
  letter-spacing: var(--p7-track-title);
  font-weight: var(--p7-weight-semi);
}

h5, .h5, h6, .h6 {
  font-size: var(--p7-text-sm);
  line-height: var(--p7-lh-snug);
  letter-spacing: 0;
  font-weight: var(--p7-weight-semi);
}

p {
  line-height: var(--p7-lh-relaxed);
}

/* Un párrafo de 140 caracteres por línea no se lee, se escanea mal. Solo
   aplica al texto corrido, no a celdas ni a etiquetas. */
.oh-main p:not([class]) {
  max-width: 78ch;
}

small, .small {
  font-size: var(--p7-text-2xs);
}

strong, b {
  font-weight: var(--p7-weight-semi);
}

/* Mayúsculas pequeñas de sección. Sin abrir el tracking se leen como un
   bloque macizo; con él se leen como una etiqueta. */
.p7-overline {
  font-size: var(--p7-text-2xs);
  font-weight: var(--p7-weight-semi);
  letter-spacing: var(--p7-track-over);
  text-transform: uppercase;
  color: var(--p7-texto-suave);
}

/* -----------------------------------------------------------------------------
   Números
   -----------------------------------------------------------------------------
   Este es un producto de datos: horas, importes, contadores que se refrescan.
   Con cifras proporcionales, un contador que pasa de 111 a 999 cambia de ancho
   y el bloque entero da un salto. Las tabulares tienen todas el mismo avance,
   así que la columna queda quieta y los decimales alinean solos.
   -------------------------------------------------------------------------- */
.p7-num,
.oh-card-dashboard__count,
.oh-card-dashboard__counts,
.oh-kanban-card__count,
.at-work-seconds,
.oh-payslip__amount,
td[data-type='number'],
.oh-sticky-table__td--number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'calt' 1;
}

/* Una cifra protagonista: la del panel, la de la tarjeta de métrica. Grande,
   cerrada de tracking y sin el peso 800 por defecto de antes, que a 32 px se
   veía apretado. */
.p7-figure {
  font-size: var(--p7-text-3xl);
  font-weight: var(--p7-weight-bold);
  line-height: 1.05;
  letter-spacing: var(--p7-track-display);
  color: var(--p7-tinta);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Enlaces
   -------------------------------------------------------------------------- */
a {
  color: var(--p7-primario);
  text-decoration-color: color-mix(in srgb, var(--p7-primario) 30%, transparent);
  text-underline-offset: 2px;
  transition: color var(--p7-dur-1) var(--p7-ease);
}

a:hover {
  color: var(--p7-primario-bajo);
}

/* Los enlaces que son botones no llevan color de enlace. */
a.oh-btn, a[class*='oh-btn--'] {
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Foco
   -----------------------------------------------------------------------------
   Horilla dibuja `outline: navy solid 2px; border-radius: 0` en `:focus`, así
   que aparecía un rectángulo duro al hacer clic con el ratón —no solo al
   tabular— y encima cuadrado sobre botones redondeados.

   Aquí el anillo solo sale con `:focus-visible` (teclado), sigue la forma del
   elemento y lleva dos capas: una del color de la superficie y otra de marca.
   La de superficie es la que lo mantiene nítido cuando el elemento está sobre
   una fila resaltada o dentro de un botón de color.
   -------------------------------------------------------------------------- */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible,
.oh-btn:focus-visible,
.oh-input:focus-visible,
.oh-select:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--p7-ring) !important;
  border-radius: var(--p7-radius-sm);
  /* El anillo se dibuja fuera del elemento: sin esto queda tapado por el
     hermano siguiente en barras de botones y filas de tabla. */
  position: relative;
  z-index: 1;
}

/* Horilla fuerza el contorno cuadrado en `:focus` de botones. */
.oh-btn:focus,
.oh-btn:focus-visible {
  outline: none !important;
  border-radius: var(--p7-radius-md) !important;
}

/* Sobre navy el anillo blanco desaparece: ahí la capa de separación es el
   propio fondo oscuro y el anillo de marca es el tono claro. */
.oh-sidebar :focus-visible,
.oh-navbar--dark :focus-visible,
.p7-on-dark :focus-visible {
  box-shadow: var(--p7-ring-dark) !important;
}

/* Salto al contenido: existe para el teclado, así que solo se ve al tabular. */
.p7-skip-link {
  position: absolute;
  left: var(--p7-space-4);
  top: var(--p7-space-4);
  z-index: var(--p7-z-toast);
  transform: translateY(-200%);
  padding: var(--p7-space-3) var(--p7-space-5);
  background: var(--p7-surface);
  color: var(--p7-tinta);
  font-size: var(--p7-text-sm);
  font-weight: var(--p7-weight-semi);
  border-radius: var(--p7-radius-md);
  box-shadow: var(--p7-elev-3);
  transition: transform var(--p7-dur-2) var(--p7-ease);
}

.p7-skip-link:focus-visible {
  transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   Selección de texto
   -----------------------------------------------------------------------------
   El azul del sistema operativo es el detalle que delata que nadie miró.
   -------------------------------------------------------------------------- */
::selection {
  background: var(--p7-primario-tinte);
  color: var(--p7-tinta);
}

/* -----------------------------------------------------------------------------
   Barras de desplazamiento
   -----------------------------------------------------------------------------
   Finas, del color del ambiente y con aire alrededor, para que no partan en
   dos las tablas que desbordan.
   -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--p7-n-300) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--p7-n-300);
  border-radius: var(--p7-radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--p7-n-400);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* -----------------------------------------------------------------------------
   Reglas y separadores
   -------------------------------------------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid var(--p7-line-hair);
  opacity: 1;
  margin: var(--p7-space-5) 0;
}

/* -----------------------------------------------------------------------------
   Imágenes
   -------------------------------------------------------------------------- */
img, svg, video {
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
   Movimiento
   -----------------------------------------------------------------------------
   Quien pide menos movimiento lo pide en serio: no basta con acortar, hay que
   apagar. Se deja 1ms en vez de 0 para que los eventos `transitionend` de los
   scripts de Horilla —que abren y cierran modales— sigan disparándose.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   Utilidades del sistema
   -----------------------------------------------------------------------------
   Deliberadamente pocas. Una capa de utilidades que crece sin freno acaba
   siendo otro sistema de diseño paralelo.
   -------------------------------------------------------------------------- */
.p7-muted     { color: var(--p7-texto-suave); }
.p7-ink       { color: var(--p7-tinta); }
.p7-hairline  { border-bottom: 1px solid var(--p7-line-hair); }
.p7-stack-2   { display: flex; flex-direction: column; gap: var(--p7-space-2); }
.p7-stack-4   { display: flex; flex-direction: column; gap: var(--p7-space-4); }
.p7-row-2     { display: flex; align-items: center; gap: var(--p7-space-2); }
.p7-row-3     { display: flex; align-items: center; gap: var(--p7-space-3); }

/* Visible solo para lectores de pantalla. */
.p7-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------------
   Suelo de tamaño de letra
   -----------------------------------------------------------------------------
   Nada por debajo de 12 px. El cronómetro de la barra iba a 10 px y los
   subtítulos y contadores a 11,2 px, que en un móvil de 375 px obliga a hacer
   zoom. Medido con `node e2e/responsive.mjs` en 375/768/1024/1440.
   -------------------------------------------------------------------------- */
.at-work-seconds,
.live_notify_badge,
small.text-muted,
.oh-sidebar__company small,
.oh-navbar__systray small,
.oh-profile__mail,
.oh-employee-card__mail,
.oh-card__subtitle,
.oh-kanban-card__subtitle,
.oh-kanban-card__count,
.oh-badge--small {
  font-size: var(--p7-text-2xs) !important;
}