/* Base de la consola: tema, reset, tipografia y foco. Todo sale de tokens.css
   (generado); aca no hay ningun color ni medida suelta que no venga de un token,
   salvo donde se indica por que.

   Orden de las hojas (index.html): tokens, fonts, base, components, shell y
   despues una por flujo (views/). Cada una puede apoyarse en las anteriores. */

/* Tema. Los controles nativos (barras de scroll, autocompletado, selector de
   fecha) siguen al tema elegido, no al del sistema. */
:root {
  color-scheme: light dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Estilos compuestos de tipografia. Penpot los aplica como tokens
   (typography.label.md, typography.title.lg, ...) pero tokens.json no los trae:
   se arman aca con los tokens de cada papel que trae tokens.css (familia, tamano,
   grosor, interlineado, espaciado). Asi el perfil de plataforma (data-platform en
   <html>) ajusta tambien los compuestos, sin medidas literales aca. Si algun dia
   llegan en tokens.json, se borran de este bloque. */
:root {
  --typography-display-md: var(--typography-display-md-font-weight) var(--typography-display-md-font-size) / var(--typography-display-md-line-height) var(--typography-display-md-font-family);
  --typography-display-md-tracking: var(--typography-display-md-letter-spacing);
  --typography-title-lg: var(--typography-title-lg-font-weight) var(--typography-title-lg-font-size) / var(--typography-title-lg-line-height) var(--typography-title-lg-font-family);
  --typography-title-lg-tracking: var(--typography-title-lg-letter-spacing);
  --typography-title-md: var(--typography-title-md-font-weight) var(--typography-title-md-font-size) / var(--typography-title-md-line-height) var(--typography-title-md-font-family);
  --typography-title-md-tracking: var(--typography-title-md-letter-spacing);
  --typography-title-sm: var(--typography-title-sm-font-weight) var(--typography-title-sm-font-size) / var(--typography-title-sm-line-height) var(--typography-title-sm-font-family);
  --typography-body-md: var(--typography-body-md-font-weight) var(--typography-body-md-font-size) / var(--typography-body-md-line-height) var(--typography-body-md-font-family);
  --typography-body-sm: var(--typography-body-sm-font-weight) var(--typography-body-sm-font-size) / var(--typography-body-sm-line-height) var(--typography-body-sm-font-family);
  --typography-label-md: var(--typography-label-md-font-weight) var(--typography-label-md-font-size) / var(--typography-label-md-line-height) var(--typography-label-md-font-family);
  --typography-label-sm: var(--typography-label-sm-font-weight) var(--typography-label-sm-font-size) / var(--typography-label-sm-line-height) var(--typography-label-sm-font-family);
  --typography-label-xs: var(--typography-label-xs-font-weight) var(--typography-label-xs-font-size) / var(--typography-label-xs-line-height) var(--typography-label-xs-font-family);
  --typography-label-xs-tracking: var(--typography-label-xs-letter-spacing);
  --typography-code-lg: var(--typography-code-lg-font-weight) var(--typography-code-lg-font-size) / var(--typography-code-lg-line-height) var(--typography-code-lg-font-family);
  --typography-code-md: var(--typography-code-md-font-weight) var(--typography-code-md-font-size) / var(--typography-code-md-line-height) var(--typography-code-md-font-family);

  /* Sombras compuestas: los tokens de elevacion llegan en piezas (desplazamiento,
     desenfoque, extension, color). No son decorativas: separan del contenido lo
     que flota encima (toast y menu: sheet; modal y drawer: overlay). */
  --shadow-elevation-sheet: 0 var(--elevation-sheet-offset-y) var(--elevation-sheet-blur) var(--elevation-sheet-spread) var(--elevation-sheet-color);
  --shadow-elevation-overlay: 0 var(--elevation-overlay-offset-y) var(--elevation-overlay-blur) var(--elevation-overlay-spread) var(--elevation-overlay-color);

  /* Anillo de foco: 3 px de color.focus-ring separado 2 px del borde del control
     (la capa "Foco" de los componentes de Penpot, border.width.focus). */
  --focus-ring-offset: 2px;

  /* Curva de las transiciones. No hay token de easing en el design system: es la
     curva de desaceleracion estandar, la misma para todo. */
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font: var(--typography-body-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

/* La flecha la dibuja el icono galon-abajo de la caja del campo (kit form.js);
   la del navegador se quita, para que el select muestre una sola. */
select.nb-text-field__valor {
  appearance: none;
  cursor: pointer;
}

img,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  flex: none;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--color-text-link);
}

hr {
  margin: 0;
  border: 0;
}

/* <dialog> trae su marco, relleno, fondo y tope de tamano. Nebula dibuja el suyo
   (.nb-overlay, .nb-modal, .nb-drawer), asi que aca solo se anula lo del navegador.
   El ::backdrop tambien: el fondo lo pinta el .nb-scrim. `dialog:not([open])` deja
   oculto un dialog cerrado, porque .nb-overlay trae display: flex y lo pisaria. */
dialog {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: inherit;
}

dialog:not([open]) {
  display: none;
}

dialog::backdrop {
  background: transparent;
}

/* Foco visible en toda la consola: nunca se le saca el anillo a un control. Los
   componentes que tienen un foco propio en el design system (campos: borde de
   color.focus-ring) lo declaran en components.css. */
:focus-visible {
  outline: var(--border-width-focus) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Texto solo para lectores de pantalla (rotulos de iconos, captions de tabla). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Utilidades de tipografia, con el nombre del estilo de Penpot. Para textos de
   las vistas que no son un componente (un subtitulo de seccion, un parrafo). */
.typography-display-md {
  font: var(--typography-display-md);
  letter-spacing: var(--typography-display-md-tracking);
}

.typography-title-lg {
  font: var(--typography-title-lg);
  letter-spacing: var(--typography-title-lg-tracking);
}

.typography-title-md {
  font: var(--typography-title-md);
  letter-spacing: var(--typography-title-md-tracking);
}

.typography-title-sm {
  font: var(--typography-title-sm);
}

.typography-body-md {
  font: var(--typography-body-md);
}

.typography-body-sm {
  font: var(--typography-body-sm);
}

.typography-label-md {
  font: var(--typography-label-md);
}

.typography-label-sm {
  font: var(--typography-label-sm);
}

.typography-label-xs {
  font: var(--typography-label-xs);
  letter-spacing: var(--typography-label-xs-tracking);
  text-transform: uppercase;
}

/* Codigo (secretos, claves, codigos de recuperacion, digitos de un OTP): en Jost,
   porque la marca no tiene monoespaciada, con cifras tabulares para que los
   digitos queden alineados. Va despues de `font`, que la resetea. */
.typography-code-lg {
  font: var(--typography-code-lg);
  font-variant-numeric: tabular-nums;
}

.typography-code-md {
  font: var(--typography-code-md);
  font-variant-numeric: tabular-nums;
}

/* Enlace que es el nombre de una fila de tabla (data.js). Las dos reglas vienen
   tal cual del aegis.css del diseno. */
.enlace-fila{color:inherit;text-decoration:none;font:inherit;border-radius:var(--radius-sm)}
.nb-table__fila--enlace .enlace-fila:hover{text-decoration:none}

/* Iconos en botones: toman la tinta del boton (primary, danger, secondary) y
   miden 20 px (18 px en sm); el de components.css mide 24 px. Las dos reglas
   vienen tal cual del aegis.css del diseno. */
.nb-button>.nb-icon{width:20px;height:20px;color:inherit}
.nb-button--sm>.nb-icon{width:18px;height:18px}

/* Movimiento reducido: las transiciones se vuelven instantaneas. Las animaciones
   que comunican actividad (spinner, skeleton) deciden por su cuenta en
   components.css: un spinner quieto parece colgado. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}