@charset "UTF-8";
/* app/assets/stylesheets/base.scss */
/* 1) Núcleo */
/* =========================================================
   TOKENS — Design tokens y fuentes
   ======================================================= */
/* 0) FUENTES — Open Sans (400 / 600 / 700)
   ------------------------------------------------------- */
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans Regular"), "/assets/OpenSans-Regular-d8e402c9a4bc5154fa7c68ea128b148a2c58d07f67f5070613e655761bfd520c.woff2" format("woff2"), "/assets/OpenSans-Regular-db45e115a4e7a5d1fe5ae0bf7ef2cf806eb298dec37f8c27023025165578d51c.woff" format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans SemiBold"), "/assets/OpenSans-SemiBold-aa6ea1618602002fc2f293a4f04e340a3679e18a33362ecfc84d6f4d14adfe2f.woff2" format("woff2"), "/assets/OpenSans-SemiBold-63370d7029f5a52c6437837e0dc46ff1748f58a1f84fb523557910dda6372244.woff" format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans Bold"), "/assets/OpenSans-Bold-14dda2280200cd7e68e9571eeed6a296b10193e16e1a19dd533ab4c281d2fa82.woff2" format("woff2"), "/assets/OpenSans-Bold-0c928cbcba96f193caa1790b7418c248fd52196eb24d59b3fac61b107928da29.woff" format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 1) TOKENS (SEMÁNTICOS)
     ------------------------------------------------------- */
/* line 37, app/assets/stylesheets/tnk/_tokens.scss */
:root {
  /* Colores base */
  --color-text:         #2c454a;
  --color-bg:           #fafafa;
  --color-component:    #eaeaea;
  --color-surface:      #ffffff;
  --color-border:       #eaeced;
  --color-border-input: #d5dadb;
  /* Aliases (compat) */
  --color-font:         var(--color-text);
  --color-card-bg:      var(--color-surface);
  --color-border-card:  var(--color-border);
  /* Tipografía (unitless line-height para evitar px/%) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  28px;
  --fs-4xl:  32px;
  --fs-5xl:  40px;
  --fs-6xl:  48px;
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  /* Motion */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  /* Spacing (px scale) */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  /* Radios */
  --radius-0:   0px;
  --radius-1:   4px;
  --radius-2:   8px;
  --radius-3:  12px;
  --radius-4:  16px;
  --radius-5:  24px;
  --radius-6:  32px;
  --radius-pill: 9999px;
  /* Borde / foco */
  --border-0: 0;
  --border-1: 1px;
  --border-2: 2px;
  --focus-ring: 2px solid rgba(41, 214, 178, 0.65);
  --focus-offset: 2px;
  /* Alturas de control */
  --control-h-sm: 40px;
  --control-h-md: 48px;
  --control-h-lg: 56px;
  /* Contenedores */
  --container-488: 488px;
  --container-640: 640px;
  --container-800: 800px;
  --container-900: 900px;
  /* Íconos */
  --icon-20: 20px;
  --icon-24: 24px;
  /* Z-index */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 1000;
  --z-modal:    1100;
  --z-toast:    1200;
  /* Pesos */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;
  /* BRAND (escala del primary sin funciones avanzadas) */
  --color-primary:     #29d6b2;
  --color-primary-400: #45ddbd;
  /* más claro */
  --color-primary-500: #29d6b2;
  /* base */
  --color-primary-600: #20b79a;
  /* -8% aprox */
  --color-primary-700: #199c84;
  /* -14% aprox */
  --color-primary-ink: #0a0f0d;
  /* texto/icono sobre fondo claro del brand */
  --color-primary-soft: rgba(41, 214, 178, 0.12);
  /* STATUS (alerts/toasts) */
  --color-danger:  #e5484d;
  --color-info:    #0ea5e9;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger-ink:  #5f191b;
  --color-info-ink:    #0b4560;
  --color-success-ink: #14532d;
  --color-warning-ink: #7c3a00;
  --color-danger-soft:   rgba(229, 72,  77,  0.12);
  --color-info-soft:     rgba(14,  165, 233, 0.12);
  --color-success-soft:  rgba(34,  197, 94,  0.12);
  --color-warning-soft:  rgba(245, 158, 11,  0.12);
  --color-danger-border-soft:   rgba(229, 72,  77,  0.35);
  --color-info-border-soft:     rgba(14,  165, 233, 0.35);
  --color-success-border-soft:  rgba(34,  197, 94,  0.35);
  --color-warning-border-soft:  rgba(245, 158, 11,  0.35);
  /* TOAST (defaults + variantes) */
  --toast-bg:     var(--color-surface);
  --toast-fg:     var(--color-text);
  --toast-border: var(--color-border);
  --toast-danger-bg:     var(--color-danger-soft);
  --toast-danger-fg:     var(--color-danger-ink);
  --toast-danger-border: var(--color-danger-border-soft);
  --toast-info-bg:       var(--color-info-soft);
  --toast-info-fg:       var(--color-info-ink);
  --toast-info-border:   var(--color-info-border-soft);
  --toast-success-bg:       var(--color-success-soft);
  --toast-success-fg:       var(--color-success-ink);
  --toast-success-border:   var(--color-success-border-soft);
  --toast-warning-bg:       var(--color-warning-soft);
  --toast-warning-fg:       var(--color-warning-ink);
  --toast-warning-border:   var(--color-warning-border-soft);
}

/* =========================================================
   2) BASE (reset + elementos)
   ======================================================= */
/* line 4, app/assets/stylesheets/tnk/_base.scss */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* line 9, app/assets/stylesheets/tnk/_base.scss */
html {
  font-size: 16px;
}

/* referencia; tokens en px */
/* line 12, app/assets/stylesheets/tnk/_base.scss */
body {
  margin: 0;
  color: var(--color-font);
  background: var(--color-bg);
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* line 24, app/assets/stylesheets/tnk/_base.scss */
p {
  margin: 0 0 var(--space-4);
}

/* line 27, app/assets/stylesheets/tnk/_base.scss */
ul,
ol {
  margin: 0 0 var(--space-4) var(--space-6);
}

/* line 31, app/assets/stylesheets/tnk/_base.scss */
small {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* Headings fluidos (usa px en extremos) */
/* line 37, app/assets/stylesheets/tnk/_base.scss */
h1,
.tnk-h1 {
  font-size: clamp(32px, calc(20px + 2.5vw), 48px);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  font-weight: 700;
  color: var(--color-font);
}

/* line 45, app/assets/stylesheets/tnk/_base.scss */
h2,
.tnk-h2 {
  font-size: clamp(24px, calc(18px + 1.5vw), 32px);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  font-weight: 600;
  color: var(--color-font);
}

/* line 53, app/assets/stylesheets/tnk/_base.scss */
h3,
.tnk-h3 {
  font-size: clamp(20px, calc(17px + 0.9vw), 28px);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
  font-weight: 600;
  color: var(--color-font);
}

/* line 61, app/assets/stylesheets/tnk/_base.scss */
h4,
.tnk-h4 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

/* line 68, app/assets/stylesheets/tnk/_base.scss */
h5,
.tnk-h5 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

/* line 75, app/assets/stylesheets/tnk/_base.scss */
h6,
.tnk-h6 {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Kill switches / compat */
/* line 85, app/assets/stylesheets/tnk/_base.scss */
.shadow,
.tnk-shadow-1 {
  box-shadow: none !important;
}

/* line 89, app/assets/stylesheets/tnk/_base.scss */
.divide-x,
.divide-y {
  border: 0 !important;
}

/* line 93, app/assets/stylesheets/tnk/_base.scss */
.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 0 !important;
}

/* line 96, app/assets/stylesheets/tnk/_base.scss */
.divide-x > :not([hidden]) ~ :not([hidden]) {
  border-left-width: 0 !important;
}

/* line 99, app/assets/stylesheets/tnk/_base.scss */
hr {
  border: 0;
  height: 0;
}

/* 2) Utilidades*/
/* =========================================================
   3) LAYOUT / CONTENEDORES / GRID & FLEX
   ======================================================= */
/* line 4, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-app {
  min-height: 100vh;
  display: block;
  background: var(--color-bg);
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* line 11, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-w-full {
  width: 100%;
}

/* line 14, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-container {
  max-width: var(--container-900);
  width: 100%;
  margin-inline: auto;
}

/* line 19, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-wrapper {
  padding: var(--space-3);
}

@media (min-width: 640px) {
  /* line 23, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-wrapper {
    padding: var(--space-4);
  }
}

@media (min-width: 768px) {
  /* line 28, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-wrapper {
    padding: var(--space-6);
  }
}

/* line 32, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-center-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* line 38, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-page-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 0;
}

@media (min-width: 640px) {
  /* line 47, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-page-center {
    padding: var(--space-4);
  }
}

/* Contenedores fijos */
/* line 53, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-contain-488 {
  max-width: var(--container-488);
  width: 100%;
  margin-inline: auto;
}

/* line 58, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-contain-640 {
  max-width: var(--container-640);
  width: 100%;
  margin-inline: auto;
}

/* line 63, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-contain-800 {
  max-width: var(--container-800);
  width: 100%;
  margin-inline: auto;
}

/* line 68, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-w-488 {
  width: var(--container-488);
}

/* Stacks */
/* line 73, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-stack-4 {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* line 78, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-stack-6 {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Grid & Flex */
/* line 85, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-grid {
  display: grid;
}

/* line 88, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-row {
  display: flex;
}

/* line 91, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-wrap {
  flex-wrap: wrap;
}

/* line 94, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-items-start {
  align-items: flex-start;
}

/* line 97, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-items-center {
  align-items: center;
}

/* line 100, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-items-end {
  align-items: flex-end;
}

/* line 103, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-justify-start {
  justify-content: flex-start;
}

/* line 106, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-justify-center {
  justify-content: center;
}

/* line 109, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-justify-between {
  justify-content: space-between;
}

/* line 112, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-justify-end {
  justify-content: flex-end;
}

/* gaps mapeados 1:1 a tokens */
/* line 117, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-gap-1 {
  gap: var(--space-1);
}

/* line 120, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-gap-2 {
  gap: var(--space-2);
}

/* line 123, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-gap-3 {
  gap: var(--space-3);
}

/* line 126, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-gap-4 {
  gap: var(--space-4);
}

/* line 129, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-gap-5 {
  gap: var(--space-5);
}

/* line 132, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-gap-6 {
  gap: var(--space-6);
}

/* line 135, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-gap-8 {
  gap: var(--space-8);
}

/* line 138, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-gap-x-4 {
  column-gap: var(--space-4);
}

/* line 141, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-gap-y-4 {
  row-gap: var(--space-4);
}

/* line 145, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* line 148, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* line 151, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* line 154, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* line 157, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* line 160, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* line 163, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

/* line 166, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* line 169, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

/* line 172, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-span-1 {
  grid-column: span 1 / span 1;
}

/* line 175, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-span-2 {
  grid-column: span 2 / span 2;
}

/* line 178, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-span-3 {
  grid-column: span 3 / span 3;
}

/* line 181, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-span-4 {
  grid-column: span 4 / span 4;
}

/* line 184, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-span-5 {
  grid-column: span 5 / span 5;
}

/* line 187, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-span-6 {
  grid-column: span 6 / span 6;
}

/* Tiles auto-fit (opcional) */
/* line 192, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-tiles {
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
}

/* Breakpoints */
@media (min-width: 640px) {
  /* line 198, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-sm-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  /* line 201, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-sm-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 204, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-sm-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* line 207, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-sm-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  /* line 212, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-md-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  /* line 215, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-md-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 218, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-md-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* line 221, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-md-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* line 224, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-md-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  /* line 227, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-md-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  /* line 232, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-lg-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 235, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-lg-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* line 238, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-lg-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* line 241, app/assets/stylesheets/tnk/utilities/_layout.scss */
  .tnk-lg-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Quita márgenes propios de los hijos para que el gap mande */
/* line 247, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-stack-4 > *,
.tnk-stack-6 > * {
  margin: 0;
}

/* Variante “forzada”: si algún hijo insiste en tener margen */
/* line 253, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-stack-gapped > * {
  margin: 0 !important;
}

/* Headings dentro de stacks: sin margen propio (consistencia) */
/* line 258, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-stack-4 h1, .tnk-stack-6 h1,
.tnk-stack-4 h2, .tnk-stack-6 h2,
.tnk-stack-4 h3, .tnk-stack-6 h3 {
  margin: 0;
}

/* Logo centrado (login) */
/* line 265, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-brand-logo {
  display: flex;
  justify-content: center;
}

/* line 269, app/assets/stylesheets/tnk/utilities/_layout.scss */
.tnk-brand-logo img {
  display: block;
}

/* =========================================================
   Spacing utilities
   ======================================================= */
/* Helpers spacing (mantén mientras migras — alias útiles) */
/* line 5, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-space-1 {
  margin: var(--space-1);
}

/* line 5, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-space-2 {
  margin: var(--space-2);
}

/* line 6, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-space-3 {
  margin: var(--space-3);
}

/* line 6, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-space-4 {
  margin: var(--space-4);
}

/* line 7, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-space-6 {
  margin: var(--space-6);
}

/* line 7, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-space-8 {
  margin: var(--space-8);
}

/* Padding */
/* line 10, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-p-1 {
  padding: var(--space-1);
}

/* line 10, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-p-2 {
  padding: var(--space-2);
}

/* line 11, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-p-3 {
  padding: var(--space-3);
}

/* line 11, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-p-4 {
  padding: var(--space-4);
}

/* line 12, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-p-6 {
  padding: var(--space-6);
}

/* line 12, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-p-8 {
  padding: var(--space-8);
}

/* line 13, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-px-6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* line 14, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* Margin explícito */
/* line 17, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-mt-4 {
  margin-top: var(--space-4);
}

/* line 18, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-mt-6 {
  margin-top: var(--space-6);
}

/* Radii utilitarios (mantén por compat) */
/* line 21, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-rounded-1x {
  border-radius: var(--radius-1);
}

/* line 22, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-rounded-2x {
  border-radius: var(--radius-2);
}

/* line 23, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-rounded-3x {
  border-radius: var(--radius-3);
}

/* line 24, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-rounded-4x {
  border-radius: var(--radius-4);
}

/* line 25, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-rounded-6x {
  border-radius: var(--radius-5);
}

/* line 26, app/assets/stylesheets/tnk/utilities/_spacing.scss */
.tnk-rounded-8x {
  border-radius: var(--radius-6);
}

/* =========================================================
   Utilidades tipográficas
   ======================================================= */
/* line 4, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-font-sans {
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* line 8, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-text {
  color: var(--color-font);
}

/* line 11, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-text-xs {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

/* line 15, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-text-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* line 19, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-text-base {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* line 23, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-text-lg {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}

/* line 27, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-text-xl {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

/* line 31, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-leading-tight {
  line-height: var(--lh-tight);
}

/* line 34, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-leading-snug {
  line-height: var(--lh-snug);
}

/* line 37, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-leading-normal {
  line-height: var(--lh-normal);
}

/* line 40, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-leading-relaxed {
  line-height: var(--lh-relaxed);
}

/* line 43, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

/* line 47, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-muted {
  opacity: 0.8;
}

/* line 50, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-heading-compact {
  font-weight: 700;
  line-height: var(--lh-snug);
  font-size: var(--fs-base);
  margin: 0 0 var(--space-3);
}

@media (min-width: 640px) {
  /* line 57, app/assets/stylesheets/tnk/utilities/_typography.scss */
  .tnk-heading-compact {
    font-size: var(--fs-lg);
  }
}

/* line 61, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-text-center {
  text-align: center;
}

/* line 64, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-text-left {
  text-align: left;
}

/* line 67, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-text-primary {
  color: var(--color-primary);
}

/* line 70, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-no-underline {
  text-decoration: none;
}

/* line 73, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-section-label {
  text-align: center;
  font-size: var(--fs-sm);
}

/* line 77, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-link-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
}

/* line 84, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-link {
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: var(--border-1) solid transparent;
  transition: color var(--transition-fast) var(--ease-soft), border-color var(--transition-fast) var(--ease-soft);
}

/* line 92, app/assets/stylesheets/tnk/utilities/_typography.scss */
.tnk-link:hover {
  border-color: currentColor;
}

/* 3) Componentes */
/* =========================================================
   6) BOTONES
   ======================================================= */
/* line 4, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding: 0 var(--space-6);
  border: var(--border-0);
  border-radius: var(--radius-2);
  font-weight: var(--fw-bold);
  font-size: 13.33px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform var(--transition-fast) var(--ease-soft), background-color var(--transition-base) var(--ease-soft), filter var(--transition-fast) var(--ease-soft);
}

/* line 14, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn:active {
  transform: translateY(1px);
}

/* line 15, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* line 16, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn-block {
  width: 100%;
}

/* line 17, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn-primary {
  background: var(--color-primary);
  color: var(--color-font);
}

/* line 18, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn-primary:hover {
  filter: brightness(1.02);
}

/* line 19, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn-secondary {
  background: var(--color-surface);
  color: var(--color-font);
  border: var(--border-1) solid var(--color-border);
}

/* line 20, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn-secondary:hover {
  background: var(--color-bg);
  filter: brightness(1.01);
}

/* line 21, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn-secondary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* line 22, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn svg, .tnk-btn img {
  width: var(--icon-20);
  height: var(--icon-20);
  display: block;
  flex: 0 0 auto;
}

/* line 23, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn svg:not(:only-child) {
  margin-inline-end: var(--space-2);
}

/* line 24, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn--start {
  justify-content: flex-start;
  gap: var(--space-3);
  padding-inline: var(--space-4);
}

/* line 25, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn--icon {
  width: var(--control-h-md);
  height: var(--control-h-md);
  padding: 0;
  justify-content: center;
}

/* line 26, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn--normalcase {
  text-transform: none;
  letter-spacing: normal;
}

/* line 27, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-btn--block-md {
  width: 100%;
}

@media (min-width: 768px) {
  /* line 27, app/assets/stylesheets/tnk/components/_button.scss */
  .tnk-btn--block-md {
    width: auto;
    min-width: 192px;
  }
}

/* Botón “Atrás” (si prefieres mantener la clase dedicada) */
/* line 30, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h-sm);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-2);
  background: var(--color-primary);
  color: var(--color-font);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--transition-fast) var(--ease-soft);
}

/* line 37, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-back-btn:hover {
  filter: brightness(1.02);
}

/* line 38, app/assets/stylesheets/tnk/components/_button.scss */
.tnk-back-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* =========================================================
   5) CARDS
   ======================================================= */
/* line 4, app/assets/stylesheets/tnk/components/_card.scss */
.tnk-card {
  width: 100%;
  min-width: 0;
  background: var(--color-card-bg);
  color: var(--color-font);
  border: var(--border-1) solid var(--color-border-card);
  border-radius: var(--radius-3);
  padding: var(--space-6);
}

/* line 11, app/assets/stylesheets/tnk/components/_card.scss */
.tnk-card--xs {
  padding: var(--space-3);
  border-radius: var(--radius-2);
}

/* line 12, app/assets/stylesheets/tnk/components/_card.scss */
.tnk-card--sm {
  padding: var(--space-4);
  border-radius: var(--radius-2);
}

/* line 13, app/assets/stylesheets/tnk/components/_card.scss */
.tnk-card--md {
  padding: var(--space-6);
}

/* base */
/* line 14, app/assets/stylesheets/tnk/components/_card.scss */
.tnk-card--lg {
  padding: var(--space-6);
}

/* line 15, app/assets/stylesheets/tnk/components/_card.scss */
.tnk-card--xl {
  padding: var(--space-12);
}

@media (min-width: 640px) {
  /* line 16, app/assets/stylesheets/tnk/components/_card.scss */
  .tnk-card--lg {
    padding: var(--space-8);
  }
}

@media (min-width: 768px) {
  /* line 17, app/assets/stylesheets/tnk/components/_card.scss */
  .tnk-card--lg {
    padding: var(--space-10);
  }
}

/* =========================================================
   7) FORM / CAMPOS
   ======================================================= */
/* line 4, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-field {
  position: relative;
  width: 100%;
}

/* line 5, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-input {
  display: block;
  width: 100%;
  height: var(--control-h-md);
  line-height: var(--control-h-md);
  padding: 0 var(--space-4);
  background: #fff;
  color: var(--color-font);
  border: var(--border-1) solid var(--color-border-input);
  border-radius: var(--radius-2);
  outline: none;
  transition: border-color var(--transition-fast) var(--ease-soft);
}

/* line 13, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-input:focus {
  border-color: var(--color-primary);
}

/* line 14, app/assets/stylesheets/tnk/components/_input.scss */
textarea.tnk-input {
  height: auto;
  min-height: calc(var(--control-h-md) * 2);
  line-height: 1.5;
  padding: var(--space-3) var(--space-4);
}

/* line 18, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-input--select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  height: var(--control-h-md);
  padding-right: calc(var(--space-4) + var(--icon-24));
  line-height: normal;
}

/* line 22, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-input--date {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  height: var(--control-h-md);
  padding-right: calc(var(--space-4) + var(--icon-24));
}

/* Quita ícono nativo del date-picker */
/* line 28, app/assets/stylesheets/tnk/components/_input.scss */
.no-calendar::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* line 29, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-input--date::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* line 30, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-input--date::-moz-focus-inner {
  border: 0;
}

/* Label flotante */
/* line 33, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-label-floating {
  position: absolute;
  left: calc(var(--space-4) - var(--space-1));
  top: 0;
  transform: translateY(-50%);
  padding: 0 var(--space-2);
  background: var(--color-card-bg);
  color: var(--color-font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  pointer-events: none;
  white-space: nowrap;
}

/* === INPUT DATE CUSTOM === */
/* Usa helpers del pipeline para el ícono */
/* line 41, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-input--date {
  width: 100%;
  height: var(--control-h-md);
  line-height: var(--control-h-md);
  padding: 0 var(--space-4);
  border: var(--border-1) solid var(--color-border-input);
  border-radius: var(--radius-2);
  background: #fff url(/assets/icons/date-picker-select-4cc74cca8b8cd790f3f34a59c39cebf693348b72ae1b6757d8ab3caaf21d13c1.svg) no-repeat right var(--space-3) center;
  background-size: var(--icon-20);
  color: var(--color-font);
  outline: none;
  transition: border-color var(--transition-fast) var(--ease-soft);
  box-shadow: none;
}

/* line 56, app/assets/stylesheets/tnk/components/_input.scss */
.tnk-input--date:focus {
  border-color: var(--color-primary);
}

/* =========================================================
   9) PASOS / STEPBAR (base)
   ======================================================= */
/* line 4, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-step-section {
  max-width: 960px;
  width: 100%;
}

/* line 5, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-step-footer {
  display: flex;
  justify-content: flex-end;
}

/* line 6, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-step-footer--block {
  justify-content: stretch;
}

/* line 8, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-stepbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

/* line 9, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-stepbar__item {
  background: var(--color-card-bg);
  color: var(--color-font);
  border: var(--border-1) solid var(--color-border-card);
  border-radius: var(--radius-3);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* line 14, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-stepbar__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border-input);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* line 15, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-stepbar__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* line 16, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-stepbar__label {
  font-size: 13px;
  text-align: center;
  font-weight: var(--fw-bold);
}

/* line 17, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-stepbar__item.is-done .tnk-stepbar__icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* line 18, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-stepbar__item.is-current {
  border-color: var(--color-primary);
}

@media (max-width: 639px) {
  /* line 19, app/assets/stylesheets/tnk/components/_stepbar.scss */
  .tnk-stepbar {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* line 20, app/assets/stylesheets/tnk/components/_stepbar.scss */
  .tnk-stepbar {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Step header (estructura simple) */
/* line 23, app/assets/stylesheets/tnk/components/_stepbar.scss */
.tnk-step-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  /* line 25, app/assets/stylesheets/tnk/components/_stepbar.scss */
  .md\:tnk-step-header-row {
    flex-direction: row;
    align-items: center;
  }
  /* line 26, app/assets/stylesheets/tnk/components/_stepbar.scss */
  .tnk-step-header h2 {
    margin-left: var(--space-4);
  }
}

/* ===== TOPBAR (full-bleed con borde inferior) ===== */
/* line 2, app/assets/stylesheets/tnk/components/_topbar.scss */
.tnk-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

/* line 10, app/assets/stylesheets/tnk/components/_topbar.scss */
.tnk-topbar__inner {
  height: 90px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* line 16, app/assets/stylesheets/tnk/components/_topbar.scss */
.tnk-topbar__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* line 17, app/assets/stylesheets/tnk/components/_topbar.scss */
.tnk-topbar__logo {
  height: 48px;
  width: auto;
  display: block;
}

/* line 18, app/assets/stylesheets/tnk/components/_topbar.scss */
.tnk-topbar__spacer {
  flex: 1;
}

/* =========================================================
   TOASTS — Compacto, estándar, bottom-right por defecto
   ======================================================= */
/* ---------- Tokens del componente (ajustables) ---------- */
/* line 6, app/assets/stylesheets/tnk/components/_toast.scss */
:root {
  --toast-max-w: 340px;
  /* ancho compacto */
  --toast-pad-y: var(--space-2);
  /* 8px */
  --toast-pad-x: var(--space-3);
  /* 12px */
  --toast-gap:   var(--space-2);
  /* 8px */
  --toast-radius: var(--radius-2);
  /* 8px */
  --toast-shadow: 0 6px 16px rgba(18,24,30,.08);
}

/* ---------- Contenedor (stack) — bottom-right por defecto ---------- */
/* line 16, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toaster {
  position: fixed;
  z-index: var(--z-toast);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  right: calc(var(--space-6) + env(safe-area-inset-right));
  display: grid;
  justify-items: end;
  gap: var(--space-2);
  /* stack denso */
  padding-inline: var(--space-3);
  pointer-events: none;
  /* los toasts gestionan el click */
}

/* Modificadores opcionales si algún día los necesitas */
/* line 28, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toaster--center {
  left: 0;
  right: 0;
  justify-items: center;
}

/* line 29, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toaster--bl {
  left: calc(var(--space-6) + env(safe-area-inset-left));
  right: auto;
  justify-items: start;
}

/* ---------- Pieza (toast) ---------- */
/* line 32, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--toast-gap);
  width: 100%;
  /* ✅ sin min() para evitar error de SassC */
  max-width: var(--toast-max-w);
  /* ancho máximo */
  background: var(--toast-bg, #fff);
  color: var(--toast-fg, var(--color-text));
  border: 1px solid var(--toast-border, var(--color-border));
  border-radius: var(--toast-radius);
  padding: var(--toast-pad-y) var(--toast-pad-x);
  box-shadow: var(--toast-shadow);
  transform-origin: center bottom;
  animation: tnk-toast-in var(--transition-fast) var(--ease-soft);
}

/* Estado de salida (lo añade JS) */
/* line 51, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast.is-leaving {
  animation: tnk-toast-out 140ms var(--ease-soft) forwards;
}

/* ---------- Elementos ---------- */
/* line 56, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast__icon {
  inline-size: var(--icon-20);
  block-size: var(--icon-20);
  display: inline-grid;
  place-items: center;
  /* Si viene vacío, mantenemos el hueco pero escondido para no romper el grid */
}

/* line 63, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast__icon:empty {
  visibility: hidden;
}

/* line 65, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast__content {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

/* line 70, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast__title {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}

/* line 76, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast__desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  opacity: 1;
  /* ✅ sin “bajada” de opacidad */
}

/* line 83, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast__close {
  appearance: none;
  border: 0;
  background: transparent;
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-1);
  cursor: pointer;
  font-size: 18px;
  /* para que la “×” se vea nítida */
  line-height: 1;
}

/* line 96, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast__close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- Variantes (sin transparencia, fondos sólidos) ---------- */
/* Usamos colores sólidos “soft” compatibles con el DS */
/* line 103, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast--danger {
  background: #FDEBEC;
  color: var(--color-danger-ink);
  border-color: #ECA5A8;
}

/* line 104, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast--info {
  background: #E6F4FE;
  color: var(--color-info-ink);
  border-color: #A7D6F8;
}

/* line 105, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast--success {
  background: #E9F9EF;
  color: var(--color-success-ink);
  border-color: #A6E6BF;
}

/* line 106, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast--warning {
  background: #FFF7E6;
  color: var(--color-warning-ink);
  border-color: #F7D7A6;
}

/* Versión “filled” (opcional) — sólidos 100% */
/* line 109, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast--filled.tnk-toast--danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

/* line 110, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast--filled.tnk-toast--info {
  background: var(--color-info);
  color: #fff;
  border-color: var(--color-info);
}

/* line 111, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast--filled.tnk-toast--success {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}

/* line 112, app/assets/stylesheets/tnk/components/_toast.scss */
.tnk-toast--filled.tnk-toast--warning {
  background: var(--color-warning);
  color: #fff;
  border-color: var(--color-warning);
}

/* ---------- Animaciones ---------- */
@keyframes tnk-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tnk-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

/* ---------- Responsive fino ---------- */
@media (min-width: 640px) {
  /* line 126, app/assets/stylesheets/tnk/components/_toast.scss */
  :root {
    --toast-max-w: 360px;
  }
}

/* 4) Vistas */