.footer__wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1rem 0.5rem;
  z-index: 50;
  background-color: rgb(245, 245, 245);
}

.footer__footer {
  position: relative;
  display: flex;
  flex-direction: row;
  background-color: white;
  border-radius: 1rem;
  height: 58px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.1),
    0 1.5px 6px rgba(0, 0, 0, 0.06);
}

.footer__indicator {
  position: absolute;
  top: 0;
  left: calc(100% / 3 * 0.25);
  width: calc(100% / 3 * 0.5);
  height: 2px;
  background-color: #d7192d;
  border-radius: 0 0 3px 3px;
  transform: translateX(calc(var(--tab-index, 0) * (100% / 0.5)));
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer__icon {
  height: 1.25rem;
  width: 1.25rem;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer__user_icon {
  height: 1.25rem;
  width: 1.25rem;
  fill: #6b7280;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.25s ease;
}

.footer__item {
  display: flex;
  flex-direction: column;
  width: 33.333333%;
  justify-content: center;
  align-items: center;
  text-align: center;
  fill: #6b7280;
  color: #6b7280;
  text-decoration: none;
  transition:
    color 0.25s ease,
    fill 0.25s ease;
}

.footer__item:not(:last-child) {
  position: relative;
}

.footer__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: #e5e7eb;
}

.footer__item:first-child {
  border-radius: 1rem 0 0 1rem;
}

.footer__item:last-child {
  border-radius: 0 1rem 1rem 0;
}

.footer__item_selected {
  fill: #d7192d;
  color: #d7192d;
}

.footer__item_selected .footer__icon {
  transform: scale(1.1);
}

.footer__item_selected .footer__user_icon {
  fill: #d7192d;
  transform: scale(1.1);
}

.footer__text {
  font-size: 0.75rem;
  margin-top: 0.125rem;
  transition: font-weight 0.1s ease;
}

.footer__item_selected .footer__text {
  font-weight: bold;
}
.impersonation-banner {
  background-color: #d68726;
  color: #ffffff;
  font-family: 'Iberia Text', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.impersonation-banner__inner {
  padding: 0.5rem 1rem;
}

.impersonation-banner__inner--dense {
  padding: 0.5rem;
}

.impersonation-banner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  gap: 1rem;
}

.impersonation-banner__col-left {
  min-width: 0;
  text-align: left;
}

.impersonation-banner__fleet-list {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  line-height: 1.25;
}

.impersonation-banner__fleet-item {
  white-space: nowrap;
}

.impersonation-banner__date-label {
  opacity: 0.8;
  margin-left: 0.25rem;
  font-size: 10px;
}

.impersonation-banner__fleet-inline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.impersonation-banner__col-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.impersonation-banner__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.impersonation-banner__input--readonly {
  border-radius: 0.25rem;
  text-align: center;
  color: #000000;
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
  width: 6rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: 'Iberia Text', sans-serif;
  font-weight: inherit;
  border: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #ffffff;
}

.impersonation-banner__input {
  border-radius: 0.25rem;
  text-align: center;
  color: #000000;
  padding: 0.25rem 0.5rem;
  width: 6rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: 'Iberia Text', sans-serif;
  font-weight: inherit;
  border: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #ffffff;
}

.impersonation-banner__input--invalid {
  border: 2px solid #d7192d;
}

.impersonation-banner__btn-cancel {
  position: absolute;
  right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d7192d;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  border: none;
  outline: none;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  font-family: 'Iberia Text', sans-serif;
}

.impersonation-banner__btn-submit-wrapper {
  position: absolute;
  left: 100%;
  margin-left: 0.25rem;
  display: flex;
  align-items: center;
}

.impersonation-banner__btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  border: none;
  outline: none;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  font-family: 'Iberia Text', sans-serif;
}

.impersonation-banner__col-right {
  min-width: 0;
  text-align: right;
}

.impersonation-banner__role-single {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.impersonation-banner__role-grid {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.25;
  width: fit-content;
  margin-left: auto;
}

.impersonation-banner__role-name {
  white-space: nowrap;
  text-align: right;
}

.impersonation-banner__role-date {
  opacity: 0.8;
  font-size: 10px;
  white-space: nowrap;
}
.spinner__overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner__circle {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #d7192d;
  border-radius: 50%;
  animation: spinner-spin 0.8s linear infinite;
}

@keyframes spinner-spin {
  to {
    transform: rotate(360deg);
  }
}
.profile__page {
  padding: 1.25rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.profile__page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.profile__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: white;
  border-radius: 1rem;
  padding: 1.25rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

.profile__section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.profile__basic-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile__identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile__avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #d7192d;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  overflow: hidden;
}

.profile__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile__full-name {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.profile__full-name-label {
  font-size: 0.6875rem;
  color: #6b7280;
  margin: 0;
}

.profile__full-name-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

.profile__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

.profile__field--full {
  grid-column: 1 / -1;
}

.profile__field-label {
  font-size: 0.6875rem;
  color: #6b7280;
  margin: 0 0 0.125rem;
}

.profile__field-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
}

.profile__pro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

.profile__pro-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.profile__pro-icon {
  color: #6b7280;
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: 0.9375rem;
}

.profile__pro-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.profile__pro-label {
  font-size: 0.6875rem;
  color: #6b7280;
  margin: 0;
}

.profile__pro-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
}

.profile__pro-subvalue {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0;
}
.auth-error__wrapper {
  height: calc(100dvh - var(--core-header-height, 0px));
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  box-sizing: border-box;
}

.auth-error__card {
  width: 100%;
  max-width: 384px;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  box-sizing: border-box;
}

.auth-error__icon-wrapper {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #fde8ea;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-error__icon {
  width: 2rem;
  height: 2rem;
  color: #d7192d;
}

.auth-error__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem;
}

.auth-error__description {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

.auth-error__cta {
  width: 100%;
  padding: 0.75rem;
  background-color: #d7192d;
  color: white;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  display: block;
  box-sizing: border-box;
}

.session-help__wrapper {
  height: calc(100dvh - var(--core-header-height, 0px));
  width: 100%;
  background-color: #D68726;
  display: flex;
  flex-direction: column;
}

.session-help__content {
  flex: 1;
  max-width: 1280px;
  margin: 0;
  padding: 0.75rem 1rem;
  width: 100%;
  box-sizing: border-box;
}

.session-help__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.session-help__title {
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}

.session-help__body-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: white;
  font-size: 0.875rem;
}

.session-help__body-text {
  margin: 0;
  font-weight: 500;
}

.session-help__list {
  list-style-type: decimal;
  list-style-position: inside;
  padding: 0;
  margin: 0 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.session-help__sublist {
  list-style-type: disc;
  list-style-position: inside;
  padding: 0;
  margin: 0.25rem 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.session-help__key-box {
  margin: 0.5rem 0;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.session-help__key-code {
  font-size: 0.75rem;
  font-family: monospace;
  word-break: break-all;
}

.session-help__copy-btn {
  flex-shrink: 0;
  padding: 0.25rem 0.75rem;
  background: white;
  color: #D68726;
  border: none;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.session-help__copy-btn:hover {
  background-color: #FCD100;
  color: white;
}

.session-help__footer {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: white;
}

.session-help__footer p {
  margin: 0;
}

.session-help__link {
  color: white;
  text-decoration: underline;
}

.session-help__link:hover {
  color: #FCD100;
}
/**
 * =============================================================================
 * IBERIA DESIGN SYSTEM - GLOBAL STYLES (BUNDLED)
 * =============================================================================
 *
 * Archivo CSS bundled que contiene todos los tokens del sistema de diseño.
 * Este archivo se genera para distribución y no debe editarse directamente.
 * Para modificar tokens, edita los archivos individuales en src/tokens/
 *
 * CONTENIDO:
 * 0. Fonts: Declaraciones @font-face para fuentes corporativas
 * 1. Colors: Tokens de color primitivos y semánticos
 * 2. Typography: Familias y pesos (tamaños via PatternFly tokens)
 * 3. Styles: Border radius y border width
 * 4. Grid: Breakpoints, columnas y spacing
 * 5. PatternFly Overrides: Tokens globales de PatternFly sobrescritos
 * 6. Semantic: Tokens legacy/PatternFly (para compatibilidad)
 */

/* ============================================
   IBERIA FONTS - @font-face declarations
   ============================================ */

/* Iberia Headline - Light (300) */
@font-face {
  font-family: 'Iberia Headline';
  src: url('../fonts/headline/IberiaHeadline-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Iberia Headline';
  src: url('../fonts/headline/IberiaHeadline-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Iberia Headline - Regular (400) */
@font-face {
  font-family: 'Iberia Headline';
  src: url('../fonts/headline/IberiaHeadline.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Iberia Headline';
  src: url('../fonts/headline/IberiaHeadline-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Iberia Headline - Bold (700) */
@font-face {
  font-family: 'Iberia Headline';
  src: url('../fonts/headline/IberiaHeadline-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Iberia Headline';
  src: url('../fonts/headline/IberiaHeadline-BoldIt.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Iberia Text - Regular (400) */
@font-face {
  font-family: 'Iberia Text';
  src: url('../fonts/text/IberiaText.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Iberia Text';
  src: url('../fonts/text/IberiaText-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Iberia Text - Bold (700) */
@font-face {
  font-family: 'Iberia Text';
  src: url('../fonts/text/IberiaText-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Iberia Text';
  src: url('../fonts/text/IberiaText-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/**
 * =============================================================================
 * IBERIA DESIGN SYSTEM - COLOR TOKENS
 * =============================================================================
 *
 * Este archivo contiene todos los tokens de color del sistema de diseño de Iberia.
 * Los tokens están organizados en dos categorías principales:
 *
 * 1. COLORES PRIMITIVOS: Valores de color puros organizados por familia y escala.
 *    - Primary: Red, Yellow, Orange, Green, Blue
 *    - Secondary: Fucsia, Pink, Teal, Brown, Purple
 *    - Operations: Sky Blue, Tangelo, Indigo
 *    - Neutral: Escala de grises
 *
 * 2. TOKENS SEMÁNTICOS: Referencias a colores primitivos con significado contextual.
 *    - Background: Fondos de componentes y estados
 *    - Border: Bordes y separadores
 *    - Text: Colores de texto
 *    - Interactive: Estados interactivos (hover, active, disabled)
 *    - Icon: Colores de iconos
 *
 * CONVENCIÓN DE NOMBRES:
 * - Los colores con sufijo "-iberia" (ej: red-500-iberia) son los colores
 *   corporativos principales de la marca.
 * - La escala va de 50 (más claro) a 900 (más oscuro).
 *
 * USO:
 * - Usar tokens semánticos siempre que sea posible para mantener consistencia.
 * - Los colores primitivos solo deben usarse directamente en casos excepcionales.
 *
 * @example
 * .button-primary {
 *   background-color: var(--semantic-interactive-primary-red-default);
 *   color: var(--semantic-text-primary-inverse);
 * }
 *
 * .alert-error {
 *   background-color: var(--semantic-background-error-subtle-02);
 *   border-color: var(--semantic-border-error);
 *   color: var(--semantic-text-error);
 * }
 */

:root {
  /* ============================================
     PRIMARY COLORS
     ============================================ */

  /**
   * Primary Red - Color corporativo principal de Iberia
   * Uso: Acciones principales, CTAs, elementos de marca
   */
  --primary-red-red-50: #fffafa;
  --primary-red-red-100: #ffebed;
  --primary-red-red-200: #fccfd3;
  --primary-red-red-300: #fa9ea8;
  --primary-red-red-400: #f4384b;
  --primary-red-red-500-iberia: #d7192d;
  --primary-red-red-600: #b9191a;
  --primary-red-red-700: #a8191a;
  --primary-red-red-800: #9b1718;
  --primary-red-red-900: #8e1516;

  /**
   * Primary Yellow - Color de advertencia y atención
   * Uso: Warnings, destacados, badges de atención
   */
  --primary-yellow-yellow-50: #fffae0;
  --primary-yellow-yellow-100: #fff1ad;
  --primary-yellow-yellow-200: #ffe87a;
  --primary-yellow-yellow-300: #ffe047;
  --primary-yellow-yellow-400: #ffd714;
  --primary-yellow-yellow-500-iberia: #fcd100;
  --primary-yellow-yellow-600: #e0ba00;
  --primary-yellow-yellow-700: #c7a400;
  --primary-yellow-yellow-800: #ad8f00;
  --primary-yellow-yellow-900: #947a00;

  /**
   * Primary Orange - Color de alerta
   * Uso: Alertas, notificaciones importantes, estados de precaución
   */
  --primary-orange-orange-50: #fffbf5;
  --primary-orange-orange-100: #ffeccc;
  --primary-orange-orange-200: #ffd999;
  --primary-orange-orange-300: #ffcc75;
  --primary-orange-orange-400: #ffc766;
  --primary-orange-orange-500-iberia: #ffa100;
  --primary-orange-orange-600: #e59100;
  --primary-orange-orange-700: #cc8100;
  --primary-orange-orange-800: #b27100;
  --primary-orange-orange-900: #805100;

  /**
   * Primary Green - Color de éxito
   * Uso: Estados de éxito, confirmaciones, validaciones positivas
   */
  --primary-green-green-50: #f0faf5;
  --primary-green-green-100: #e1f4ea;
  --primary-green-green-200: #d2efe0;
  --primary-green-green-300: #ade1c7;
  --primary-green-green-400: #7acfa4;
  --primary-green-green-500-iberia: #019e4f;
  --primary-green-green-600: #017f3f;
  --primary-green-green-700: #016f37;
  --primary-green-green-800: #015b2d;
  --primary-green-green-900: #014723;

  /**
   * Primary Blue - Color informativo
   * Uso: Enlaces, información, estados informativos
   */
  --primary-blue-blue-50: #f5faff;
  --primary-blue-blue-100: #d6ebff;
  --primary-blue-blue-200: #b2d9ff;
  --primary-blue-blue-300: #80bfff;
  --primary-blue-blue-400: #4da6ff;
  --primary-blue-blue-500-iberia: #0080ff;
  --primary-blue-blue-600: #0066cc;
  --primary-blue-blue-700: #004d99;
  --primary-blue-blue-800: #004080;
  --primary-blue-blue-900: #00264d;

  /* ============================================
     SECONDARY COLORS
     ============================================ */

  /**
   * Secondary Fucsia
   * Uso: Acentos, elementos decorativos, categorías especiales
   */
  --secondary-fucsia-fucsia-50: #ffcaeb;
  --secondary-fucsia-fucsia-100: #ffa2dd;
  --secondary-fucsia-fucsia-200: #ff6fcb;
  --secondary-fucsia-fucsia-300: #ff3cb8;
  --secondary-fucsia-fucsia-400: #ff09a5;
  --secondary-fucsia-fucsia-500: #d50087;
  --secondary-fucsia-fucsia-600-iberia: #a20067;
  --secondary-fucsia-fucsia-700: #7e0251;
  --secondary-fucsia-fucsia-800: #3c0026;
  --secondary-fucsia-fucsia-900: #2a011c;

  /**
   * Secondary Pink
   * Uso: Acentos suaves, elementos femeninos, categorías especiales
   */
  --secondary-pink-pink-50: #fef5f9;
  --secondary-pink-pink-100: #ffe7f2;
  --secondary-pink-pink-200: #f7c9dc;
  --secondary-pink-pink-300: #f09dbf;
  --secondary-pink-pink-400: #e971a2;
  --secondary-pink-pink-500-iberia: #e24585;
  --secondary-pink-pink-600: #d3216a;
  --secondary-pink-pink-700: #a71a53;
  --secondary-pink-pink-800: #7b133d;
  --secondary-pink-pink-900: #4f0c27;

  /**
   * Secondary Teal
   * Uso: Elementos diferenciadores, acentos complementarios
   */
  --secondary-teal-teal-50: #eefffd;
  --secondary-teal-teal-100: #b5fff4;
  --secondary-teal-teal-200: #90f8e9;
  --secondary-teal-teal-300: #61eeda;
  --secondary-teal-teal-400: #2bccb5;
  --secondary-teal-teal-500: #1ba894;
  --secondary-teal-teal-600-iberia: #008673;
  --secondary-teal-teal-700: #005347;
  --secondary-teal-teal-800: #07463d;
  --secondary-teal-teal-900: #0c342e;

  /**
   * Secondary Brown
   * Uso: Elementos premium, tonos tierra, acentos cálidos
   */
  --secondary-brown-brown-50: #fbf9f7;
  --secondary-brown-brown-100: #efece8;
  --secondary-brown-brown-200: #dad2ca;
  --secondary-brown-brown-300-iberia: #c5b9ac;
  --secondary-brown-brown-400: #b0a08e;
  --secondary-brown-brown-500: #9b8670;
  --secondary-brown-brown-600: #7f6d59;
  --secondary-brown-brown-700: #615344;
  --secondary-brown-brown-800: #43392f;
  --secondary-brown-brown-900: #392b1e;

  /**
   * Secondary Purple
   * Uso: Elementos premium, categorías especiales
   */
  --secondary-purple-purple-50: #f6f0f5;
  --secondary-purple-purple-100: #ebe3ea;
  --secondary-purple-purple-200: #d6c5d3;
  --secondary-purple-purple-300: #c1a7bc;
  --secondary-purple-purple-400: #a67f9f;
  --secondary-purple-purple-500: #94678b;
  --secondary-purple-purple-600-iberia: #7a5573;
  --secondary-purple-purple-700: #553e51;
  --secondary-purple-purple-800: #453041;
  --secondary-purple-purple-900: #332330;

  /* ============================================
     OPERATIONS COLORS
     Colores específicos para la vertical de operaciones
     ============================================ */

  /**
   * Operations Sky Blue
   * Uso: Elementos específicos de operaciones aéreas
   */
  --operations-sky-blue-sky-blue-50: #f0fbfc;
  --operations-sky-blue-sky-blue-100: #d7f7fa;
  --operations-sky-blue-sky-blue-200: #c5eff5;
  --operations-sky-blue-sky-blue-300: #99e3ed;
  --operations-sky-blue-sky-blue-400: #84dfeb;
  --operations-sky-blue-sky-blue-500: #6ed8e6;
  --operations-sky-blue-sky-blue-600: #42ccde;
  --operations-sky-blue-sky-blue-700: #1c909f;
  --operations-sky-blue-sky-blue-800: #0c4248;
  --operations-sky-blue-sky-blue-900: #02363c;

  /**
   * Operations Tangelo
   * Uso: Alertas operacionales, estados urgentes
   */
  --operations-tangelo-tangelo-50: #fff5ec;
  --operations-tangelo-tangelo-100: #ffe3cc;
  --operations-tangelo-tangelo-200: #ffc799;
  --operations-tangelo-tangelo-300: #ffab66;
  --operations-tangelo-tangelo-400: #ff8f33;
  --operations-tangelo-tangelo-500: #ff8017;
  --operations-tangelo-tangelo-600: #ff7300;
  --operations-tangelo-tangelo-700: #cc5c00;
  --operations-tangelo-tangelo-800: #994500;
  --operations-tangelo-tangelo-900: #662e00;

  /**
   * Operations Indigo
   * Uso: Estados especiales, elementos destacados en operaciones
   */
  --operations-indigo-indigo-50: #f3f0ff;
  --operations-indigo-indigo-100: #e3daff;
  --operations-indigo-indigo-200: #bea7ff;
  --operations-indigo-indigo-300: #9874ff;
  --operations-indigo-indigo-400: #7241ff;
  --operations-indigo-indigo-500: #4c0eff;
  --operations-indigo-indigo-600: #3800da;
  --operations-indigo-indigo-700: #2b00a7;
  --operations-indigo-indigo-800: #1e0074;
  --operations-indigo-indigo-900: #110041;

  /* ============================================
     NEUTRAL COLORS
     Escala de grises para textos, fondos y bordes
     ============================================ */

  --neutral-neutral-50: #ffffff;
  --neutral--neutral-100: #fafafa;
  --neutral--neutral-200: #eeeeee;
  --neutral--neutral-300: #dddddd;
  --neutral--neutral-400: #cccccc;
  --neutral--neutral-500: #b1b1b1;
  --neutral--neutral-600: #999999;
  --neutral--neutral-700: #666666;
  --neutral--neutral-800: #333333;
  --neutral-neutral-900: #000000;

  /* ============================================
     SEMANTIC TOKENS - BACKGROUND
     Tokens semánticos para fondos de componentes
     ============================================ */

  /** Fondos base de la aplicación */
  --semantic-background-base: var(--neutral-neutral-50);
  --semantic-background-base-inverse: var(--neutral--neutral-800);
  --semantic-background-base-01: var(--neutral--neutral-100);
  --semantic-background-base-02: var(--neutral--neutral-200);
  --semantic-background-base-03: var(--neutral--neutral-300);
  --semantic-background-disabled: var(--neutral--neutral-300);

  /** Fondos de marca */
  --semantic-background-brand: var(--primary-red-red-500-iberia);
  --semantic-background-brand-subtle-01: var(--primary-red-red-200);
  --semantic-background-brand-subtle-02: var(--primary-red-red-50);
  --semantic-background-brand-subtle-03: var(--primary-red-red-100);

  /** Fondos de estado */
  --semantic-background-success-subtle-01: var(--primary-green-green-300);
  --semantic-background-success-subtle-02: var(--primary-green-green-100);
  --semantic-background-alert-subtle-01: var(--primary-orange-orange-300);
  --semantic-background-alert-subtle-02: var(--primary-orange-orange-100);
  --semantic-background-error-subtle-01: var(--primary-red-red-300);
  --semantic-background-error-subtle-02: var(--primary-red-red-100);
  --semantic-background-warning-subtle-01: var(--primary-yellow-yellow-200);
  --semantic-background-warning-subtle-02: var(--primary-yellow-yellow-50);
  --semantic-background-info-subtle-01: var(--primary-blue-blue-300);
  --semantic-background-info-subtle-02: var(--primary-blue-blue-100);

  /* ============================================
     SEMANTIC TOKENS - BORDER
     Tokens semánticos para bordes y separadores
     ============================================ */

  /** Bordes generales */
  --semantic-border-primary: var(--neutral--neutral-300);
  --semantic-border-subtle: var(--neutral--neutral-200);
  --semantic-border-subtle-01: var(--neutral--neutral-300);
  --semantic-border-subtle-02: var(--neutral--neutral-400);
  --semantic-border-disabled: var(--neutral--neutral-300);
  --semantic-border-inverse: var(--neutral-neutral-50);
  --semantic-border-inverse-subtle: var(--neutral--neutral-200);

  /** Bordes de interacción (focus, hover, visited) */
  --semantic-border-focus-red: var(--primary-red-red-500-iberia);
  --semantic-border-focus-red-subtle: var(--primary-red-red-300);
  --semantic-border-hover-red: var(--primary-red-red-600);
  --semantic-border-visited-red: var(--primary-red-red-700);
  --semantic-border-focus-black: var(--neutral-neutral-900);
  --semantic-border-hover-black: var(--neutral--neutral-800);
  --semantic-border-visited-black: var(--neutral--neutral-700);

  /** Bordes de estado */
  --semantic-border-success: var(--primary-green-green-500-iberia);
  --semantic-border-error: var(--primary-red-red-500-iberia);
  --semantic-border-alert: var(--primary-orange-orange-500-iberia);
  --semantic-border-warning: var(--primary-yellow-yellow-500-iberia);
  --semantic-border-info: var(--primary-blue-blue-500-iberia);

  /* ============================================
     SEMANTIC TOKENS - TEXT
     Tokens semánticos para colores de texto
     ============================================ */

  /** Texto principal */
  --semantic-text-primary: var(--neutral--neutral-800);
  --semantic-text-secondary: var(--neutral--neutral-700);
  --semantic-text-primary-inverse: var(--neutral-neutral-50);
  --semantic-text-secondary-inverse: var(--neutral--neutral-200);
  --semantic-text-brand: var(--primary-red-red-500-iberia);
  --semantic-text-label: var(--neutral--neutral-800);
  --semantic-text-placeholder: var(--neutral--neutral-500);
  --semantic-text-helper: var(--neutral--neutral-600);
  --semantic-text-disabled: var(--neutral--neutral-600);

  /** Texto de estado */
  --semantic-text-error: var(--primary-red-red-600);
  --semantic-text-alert: var(--primary-orange-orange-700);
  --semantic-text-info: var(--primary-blue-blue-600);
  --semantic-text-success: var(--primary-green-green-600);
  --semantic-text-warning: var(--primary-yellow-yellow-700);

  /** Enlaces inline - Tema claro */
  --semantic-text-inline-light: var(--primary-red-red-500-iberia);
  --semantic-text-inline-light-hover: var(--primary-red-red-700);
  --semantic-text-inline-light-focused: var(--primary-red-red-500-iberia);
  --semantic-text-inline-light-visited: var(--primary-red-red-300);

  /** Enlaces inline - Tema oscuro */
  --semantic-text-inline-dark: var(--neutral-neutral-50);
  --semantic-text-inline-dark-hover: var(--neutral--neutral-300);
  --semantic-text-inline-dark-focused: var(--neutral-neutral-50);
  --semantic-text-inline-dark-visited: var(--neutral--neutral-400);

  /* ============================================
     SEMANTIC TOKENS - INTERACTIVE
     Tokens para elementos interactivos (botones, enlaces, etc.)
     ============================================ */

  --semantic-interactive-disabled: var(--neutral--neutral-400);

  /** Interactivo primario rojo (CTA principal) */
  --semantic-interactive-primary-red-default: var(--primary-red-red-500-iberia);
  --semantic-interactive-primary-red-hover: var(--primary-red-red-600);
  --semantic-interactive-primary-red-selected: var(--primary-red-red-700);

  /** Interactivo primario negro (CTA secundario) */
  --semantic-interactive-primary-black-default: var(--neutral-neutral-900);
  --semantic-interactive-primary-black-hover: var(--neutral--neutral-800);
  --semantic-interactive-primary-black-selected: var(--neutral--neutral-700);

  /** Interactivo inverso (sobre fondos oscuros) */
  --semantic-interactive-inverse-default: var(--neutral-neutral-50);
  --semantic-interactive-inverse-hover: var(--neutral--neutral-100);
  --semantic-interactive-inverse-selected: var(--neutral--neutral-200);

  /* ============================================
     SEMANTIC TOKENS - ICON
     Tokens para colores de iconos
     ============================================ */

  --semantic-icon-default: var(--neutral-neutral-900);
  --semantic-icon-inverse: var(--neutral-neutral-50);
  --semantic-icon-help: var(--neutral--neutral-600);
  --semantic-icon-disabled: var(--neutral--neutral-500);
  --semantic-icon-active: var(--primary-red-red-500-iberia);
  --semantic-icon-hover: var(--primary-red-red-600);
  --semantic-icon-visited: var(--primary-red-red-700);

  /** Iconos de estado */
  --semantic-icon-info: var(--primary-blue-blue-600);
  --semantic-icon-warning: var(--primary-yellow-yellow-700);
  --semantic-icon-success: var(--primary-green-green-600);
  --semantic-icon-error: var(--primary-red-red-600);
  --semantic-icon-alert: var(--primary-orange-orange-700);
}

/**
 * =============================================================================
 * IBERIA DESIGN SYSTEM - TYPOGRAPHY TOKENS
 * =============================================================================
 *
 * Este archivo contiene los tokens tipográficos del sistema de diseño.
 *
 * NOTA: Los tamaños de fuente (font-size) y alturas de línea (line-height)
 * se gestionan a través de los tokens nativos de PatternFly.
 * Ver: https://www.patternfly.org/tokens/all-patternfly-tokens
 *
 * CONTENIDO:
 * - Font Family: Familias tipográficas corporativas
 * - Font Weight: Pesos de fuente
 * - Font Style: Estilos de fuente (normal, italic)
 *
 * FAMILIAS TIPOGRÁFICAS:
 * - Iberia Headline: Títulos y encabezados principales
 * - Iberia Text: Cuerpo de texto y contenido general
 * - Arial/Helvetica/Noto: Fallbacks del sistema
 *
 * USO:
 * @example
 * .headline {
 *   font-family: var(--font-family-iberia-headline);
 *   font-weight: var(--font-weight-bold);
 * }
 *
 * .body-text {
 *   font-family: var(--font-family-iberia-text);
 *   font-weight: var(--font-weight-regular);
 * }
 */

:root {
  /* ============================================
     FONT FAMILY
     Familias tipográficas del sistema
     ============================================ */

  /** Fuentes del sistema (fallbacks) */
  --font-family-arial: 'Arial', sans-serif;
  --font-family-helvetica: 'Helvetica Neue', sans-serif;
  --font-family-noto: 'Noto Sans', sans-serif;

  /** Fuentes corporativas Iberia */
  --font-family-iberia-headline: 'Iberia Headline', sans-serif;
  --font-family-iberia-text: 'Iberia Text', sans-serif;

  /* ============================================
     FONT WEIGHT
     Pesos de fuente disponibles
     ============================================ */

  /** Light (300) - Texto decorativo, grandes tamaños */
  --font-weight-light: 300;

  /** Regular (400) - Cuerpo de texto por defecto */
  --font-weight-regular: 400;

  /** Bold (700) - Énfasis, títulos, CTAs */
  --font-weight-bold: 700;

  /* ============================================
     FONT STYLE
     Estilos de fuente
     ============================================ */

  --font-style-normal: normal;
  --font-style-italic: italic;
}

/**
 * =============================================================================
 * IBERIA DESIGN SYSTEM - STYLE TOKENS
 * =============================================================================
 *
 * Este archivo contiene los tokens de estilo para bordes del sistema de diseño.
 *
 * CONTENIDO:
 * - Border Radius: Valores de redondeo de esquinas
 * - Border Width: Grosores de borde
 *
 * USO:
 * @example
 * .card {
 *   border-radius: var(--radius-md);
 *   border: var(--border-thin) solid var(--semantic-border-primary);
 * }
 *
 * .button {
 *   border-radius: var(--radius-sm);
 * }
 *
 * .avatar {
 *   border-radius: var(--radius-round);
 * }
 */

:root {
  /* ============================================
     BORDER RADIUS
     Valores para redondeo de esquinas
     ============================================ */

  /** Sin redondeo - Bordes completamente rectos */
  --radius-sharp: 0px;

  /** Extra pequeño - Redondeo mínimo */
  --radius-xs: 2px;

  /** Pequeño - Botones pequeños, inputs compactos */
  --radius-sm: 4px;

  /** Mediano - Botones, cards, inputs estándar */
  --radius-md: 8px;

  /** Grande - Cards destacadas, modales */
  --radius-lg: 16px;

  /** Extra grande - Contenedores principales */
  --radius-xlg: 24px;

  /** Extra extra grande - Secciones hero */
  --radius-xxlg: 32px;

  /** Redondo - Avatares, badges circulares, pills */
  --radius-round: 999px;

  /* ============================================
     BORDER WIDTH
     Grosores de borde para diferentes énfasis
     ============================================ */

  /** Sin borde */
  --border-none: 0px;

  /** Fino - Separadores sutiles, bordes por defecto */
  --border-thin: 1px;

  /** Por defecto - Bordes estándar de componentes */
  --border-default: 1.5px;

  /** Medio - Énfasis moderado, estados hover */
  --border-medium: 2px;

  /** Fuerte - Alto énfasis, estados focus */
  --border-strong: 2.5px;

  /** Extra fuerte - Máximo énfasis, bordes destacados */
  --border-xstrong: 3px;
}

/**
 * =============================================================================
 * IBERIA DESIGN SYSTEM - GRID & SPACING TOKENS
 * =============================================================================
 *
 * Este archivo contiene los tokens de layout y espaciado del sistema de diseño.
 *
 * CONTENIDO:
 * - Breakpoints: Puntos de ruptura para responsive design
 * - Grid Columns: Número de columnas por breakpoint
 * - Spacing: Sistema de espaciado consistente
 *
 * SISTEMA DE ESPACIADO:
 * - Condense (00-07): Espaciados compactos (0-24px)
 * - Medium (01-05): Espaciados medianos (32-80px)
 * - Large (01-05): Espaciados grandes (120-240px)
 *
 * USO CON MEDIA QUERIES:
 * @example
 * .container {
 *   padding: var(--spacing-condense-03);
 * }
 *
 * @media (min-width: 768px) {
 *   .container {
 *     padding: var(--spacing-condense-05);
 *   }
 * }
 *
 * @media (min-width: 1024px) {
 *   .container {
 *     padding: var(--spacing-medium-01);
 *   }
 * }
 *
 * NOTA: Los breakpoints están definidos como custom properties para referencia,
 * pero deben usarse como valores literales en media queries ya que CSS
 * no permite variables en media queries.
 */

:root {
  /* ============================================
     BREAKPOINTS
     Puntos de ruptura para diseño responsive
     ============================================ */

  /** Mobile - Smartphones (375px) */
  --breakpoint-mobile: 375px;

  /** Tablet - Tablets y dispositivos medianos (768px) */
  --breakpoint-tablet: 768px;

  /** Desktop mínimo - Laptops pequeños (1024px) */
  --breakpoint-desktop-min: 1024px;

  /** Desktop - Monitores estándar (1440px) */
  --breakpoint-desktop: 1440px;

  /* ============================================
     GRID COLUMNS
     Número de columnas del sistema de grid
     ============================================ */

  /** Mobile: 4 columnas */
  --grid-columns-mobile: 4;

  /** Tablet: 8 columnas */
  --grid-columns-tablet: 8;

  /** Desktop: 12 columnas */
  --grid-columns-desktop: 12;

  /* ============================================
     SPACING
     Sistema de espaciado consistente
     ============================================ */

  /** Espaciado base (16px) */
  --spacing-base: 16px;

  /* ----- Spacing Condense (compacto) ----- */
  /** Para espaciados pequeños en componentes */

  --spacing-condense-00: 0px;
  --spacing-condense-01: 2px;
  --spacing-condense-02: 4px;
  --spacing-condense-03: 8px;
  --spacing-condense-04: 12px;
  --spacing-condense-05: 16px;
  --spacing-condense-06: 20px;
  --spacing-condense-07: 24px;

  /* ----- Spacing Medium ----- */
  /** Para espaciados entre secciones y componentes */

  --spacing-medium-01: 32px;
  --spacing-medium-02: 40px;
  --spacing-medium-03: 48px;
  --spacing-medium-04: 56px;
  --spacing-medium-05: 80px;

  /* ----- Spacing Large ----- */
  /** Para espaciados de secciones y layouts principales */

  --spacing-large-01: 120px;
  --spacing-large-02: 144px;
  --spacing-large-03: 168px;
  --spacing-large-04: 192px;
  --spacing-large-05: 240px;
}

/**
 * =============================================================================
 * PATTERNFLY GLOBAL TOKEN OVERRIDES
 * =============================================================================
 *
 * Este archivo sobrescribe los tokens globales de PatternFly con los colores
 * del Iberia Design System.
 *
 * Al sobrescribir estos tokens a nivel :root, TODOS los componentes de
 * PatternFly (Button, Badge, Switch, Progress, etc.) usarán automáticamente
 * los colores de Iberia.
 *
 * Referencia: node_modules/@patternfly/react-styles/css/components/Button/button.css
 */

:root {
  /* ============================================
     BRAND COLORS
     Afecta: Primary Button, Badge, Toggle, etc.
     ============================================ */

  /* Fondo del botón primary */
  --pf-t--global--color--brand--default: var(--semantic-interactive-primary-red-default);
  --pf-t--global--color--brand--hover: var(--semantic-interactive-primary-red-hover);
  --pf-t--global--color--brand--clicked: var(--semantic-interactive-primary-red-selected);

  /* ============================================
     TEXT ON BRAND
     Texto e iconos sobre fondos brand (primary button)
     ============================================ */

  --pf-t--global--text--color--on-brand--default: var(--semantic-text-primary-inverse);
  --pf-t--global--text--color--on-brand--hover: var(--semantic-text-primary-inverse);
  --pf-t--global--text--color--on-brand--clicked: var(--semantic-text-primary-inverse);

  --pf-t--global--icon--color--on-brand--default: var(--semantic-text-primary-inverse);
  --pf-t--global--icon--color--on-brand--hover: var(--semantic-text-primary-inverse);
  --pf-t--global--icon--color--on-brand--clicked: var(--semantic-text-primary-inverse);

  /* ============================================
     BRAND TEXT
     Texto de secondary, tertiary y link buttons
     ============================================ */

  --pf-t--global--text--color--brand--default: var(--primary-red-red-500-iberia);
  --pf-t--global--text--color--brand--hover: var(--primary-red-red-600);
  --pf-t--global--text--color--brand--clicked: var(--primary-red-red-700);

  /* ============================================
     BRAND BORDER
     Borde del secondary button
     ============================================ */

  --pf-t--global--border--color--brand--default: var(--semantic-border-focus-red);
  --pf-t--global--border--color--brand--hover: var(--semantic-border-hover-red);
  --pf-t--global--border--color--brand--clicked: var(--semantic-border-visited-red);

  /* ============================================
     BRAND ICONS
     Iconos en secondary, tertiary y link buttons
     ============================================ */

  --pf-t--global--icon--color--brand--default: var(--primary-red-red-500-iberia);
  --pf-t--global--icon--color--brand--hover: var(--primary-red-red-600);
  --pf-t--global--icon--color--brand--clicked: var(--primary-red-red-700);

  /* ============================================
     BORDER RADIUS
     Esquinas cuadradas estilo Iberia (2px)
     ============================================ */

  --pf-t--global--border--radius--pill: var(--radius-xs);

  /* ============================================
     TYPOGRAPHY - FONT FAMILIES
     Sobrescribe las fuentes de Red Hat por Iberia
     ============================================ */

  /* Token base para texto body (reemplaza Red Hat Text) */
  --pf-t--global--font--family--100: 'Iberia Text', Arial, Helvetica, sans-serif;

  /* Token base para headings (reemplaza Red Hat Display) */
  --pf-t--global--font--family--200: 'Iberia Headline', Arial, Helvetica, sans-serif;

  /* Tokens semánticos que usan los anteriores */
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
}

/* ============================================
   COMPONENT-SPECIFIC OVERRIDES
   Estilos que no se pueden hacer via tokens globales.
   Incluye overrides de propiedades CSS reales para
   contrarrestar CSS resets a nivel de tag (ej:
   button { background-color: transparent })
   ============================================ */

/* Button: propiedades reales + tipografía Iberia */
.pf-v6-c-button {
  font-family: var(--font-family-iberia-text);
  color: var(--pf-v6-c-button--Color);
  background-color: var(--pf-v6-c-button--BackgroundColor);
}

/* Tipografía Iberia para Title (headings) */
.pf-v6-c-title {
  --pf-v6-c-title--FontFamily: var(--font-family-iberia-headline);
}

/* FormControl: propiedades reales + tipografía Iberia */
.pf-v6-c-form-control {
  font-family: var(--font-family-iberia-text);
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
}

/* CalendarMonth: celda con más padding para acomodar etiquetas debajo */
.pf-v6-c-calendar-month__dates-cell {
  --pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd: 1.2em;
  padding-block-end: 1.2em !important;
}

/* CalendarMonth: ajustar fondo del rango para que no ocupe todo el padding extra */
.pf-v6-c-calendar-month__dates-cell.pf-m-in-range::before,
.pf-v6-c-calendar-month__dates-cell.pf-m-start-range::before,
.pf-v6-c-calendar-month__dates-cell.pf-m-end-range::before {
  --pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: 1.2em;
  inset-block-end: 1.2em !important;
}

/* CalendarMonth: botón mantiene tamaño original para círculo perfecto */
.pf-v6-c-calendar-month__date {
  position: relative;
}

/* CalendarMonth: día seleccionado estilo Iberia */
.pf-v6-c-calendar-month__dates-cell.pf-m-selected {
  --pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(
    --primary-red-red-500-iberia
  );
  --pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(
    --primary-red-red-500-iberia
  );
  --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(
    --primary-red-red-500-iberia
  );
  --pf-v6-c-calendar-month__dates-cell--m-selected__date--Color: var(--neutral-neutral-50);
  --pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(
    transparent
  );
  --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent;
  --pf-v6-c-calendar-month__date--BorderRadius: 999px;
}

/* CalendarMonth: rango seleccionado estilo Iberia */
.pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
  --pf-v6-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: #d7192d2e;
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: #d7192d2e;
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: #d7192d2e;
  --pf-v6-c-calendar-month__dates-cell--after--BorderColor: transparent;
}

/* CalendarMonth: día actual en negrita y subrayado (sin fondo gris) */
.pf-v6-c-calendar-month__dates-cell.pf-m-current {
  --pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor: transparent;
  --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: 0;
  --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: transparent;
}

.pf-v6-c-calendar-month__dates-cell.pf-m-current .pf-v6-c-calendar-month__date {
  font-weight: 700;
  text-decoration: underline;
}

/* CalendarMonth: días no seleccionables (disabled) - solo texto en gris, sin fondo */
.pf-v6-c-calendar-month__dates-cell.pf-m-disabled {
  --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
  --pf-v6-c-calendar-month__date--disabled--BackgroundColor: transparent;
  --pf-v6-c-calendar-month__date--disabled--Color: var(--neutral--neutral-500);
}

.pf-v6-c-calendar-month__date:disabled {
  --pf-v6-c-calendar-month__date--BackgroundColor: transparent !important;
  background-color: transparent !important;
  color: var(--neutral--neutral-500);
}

:root {
  /* Crew OCC Custom Tokens - extending PatternFly semantic tokens */

  /* Primary Colors */
  --crew-occ-color-primary: var(--pf-t--global--color--brand--default, #0066cc);
  --crew-occ-color-primary-hover: var(--pf-t--global--color--brand--hover, #004d99);
  --crew-occ-color-primary-active: var(--pf-t--global--color--brand--clicked, #003366);

  /* Secondary Colors */
  --crew-occ-color-secondary: var(--pf-t--global--color--nonstatus--gray--default, #6a6e73);
  --crew-occ-color-secondary-hover: var(--pf-t--global--color--nonstatus--gray--hover, #4f5255);
  --crew-occ-color-secondary-active: var(--pf-t--global--color--nonstatus--gray--clicked, #3c3f42);

  /* Status Colors */
  --crew-occ-color-danger: var(--pf-t--global--color--status--danger--default, #c9190b);
  --crew-occ-color-danger-hover: var(--pf-t--global--color--status--danger--hover, #a30000);
  --crew-occ-color-warning: var(--pf-t--global--color--status--warning--default, #f0ab00);
  --crew-occ-color-warning-hover: var(--pf-t--global--color--status--warning--hover, #c58c00);
  --crew-occ-color-success: var(--pf-t--global--color--status--success--default, #3e8635);
  --crew-occ-color-success-hover: var(--pf-t--global--color--status--success--hover, #1e4f18);
  --crew-occ-color-info: var(--pf-t--global--color--status--info--default, #2b9af3);
  --crew-occ-color-info-hover: var(--pf-t--global--color--status--info--hover, #0066cc);

  /* Background Colors */
  --crew-occ-background-primary: var(--pf-t--global--background--color--primary--default, #ffffff);
  --crew-occ-background-secondary: var(
    --pf-t--global--background--color--secondary--default,
    #f0f0f0
  );
  --crew-occ-background-tertiary: var(
    --pf-t--global--background--color--tertiary--default,
    #e0e0e0
  );

  /* Text Colors */
  --crew-occ-text-primary: var(--pf-t--global--text--color--regular, #151515);
  --crew-occ-text-secondary: var(--pf-t--global--text--color--subtle, #6a6e73);
  --crew-occ-text-on-brand: var(--pf-t--global--text--color--on-brand--default, #ffffff);
  --crew-occ-text-link: var(--pf-t--global--text--color--link--default, #0066cc);

  /* Spacing */
  --crew-occ-spacing-xs: var(--pf-t--global--spacer--xs, 0.25rem);
  --crew-occ-spacing-sm: var(--pf-t--global--spacer--sm, 0.5rem);
  --crew-occ-spacing-md: var(--pf-t--global--spacer--md, 1rem);
  --crew-occ-spacing-lg: var(--pf-t--global--spacer--lg, 1.5rem);
  --crew-occ-spacing-xl: var(--pf-t--global--spacer--xl, 2rem);
  --crew-occ-spacing-2xl: var(--pf-t--global--spacer--2xl, 3rem);

  /* Font Sizes */
  --crew-occ-font-size-xs: var(--pf-t--global--font--size--xs, 0.75rem);
  --crew-occ-font-size-sm: var(--pf-t--global--font--size--sm, 0.875rem);
  --crew-occ-font-size-md: var(--pf-t--global--font--size--md, 1rem);
  --crew-occ-font-size-lg: var(--pf-t--global--font--size--lg, 1.125rem);
  --crew-occ-font-size-xl: var(--pf-t--global--font--size--xl, 1.25rem);
  --crew-occ-font-size-2xl: var(--pf-t--global--font--size--2xl, 1.5rem);

  /* Font Weights */
  --crew-occ-font-weight-normal: var(--pf-t--global--font--weight--body--default, 400);
  --crew-occ-font-weight-bold: var(--pf-t--global--font--weight--body--bold, 700);
  --crew-occ-font-weight-heading: var(--pf-t--global--font--weight--heading--default, 700);

  /* Line Heights */
  --crew-occ-line-height-sm: var(--pf-t--global--font--line-height--sm, 1.3);
  --crew-occ-line-height-md: var(--pf-t--global--font--line-height--body, 1.5);

  /* Border Radius */
  --crew-occ-border-radius-sm: var(--pf-t--global--border--radius--small, 3px);
  --crew-occ-border-radius-md: var(--pf-t--global--border--radius--medium, 6px);
  --crew-occ-border-radius-lg: var(--pf-t--global--border--radius--large, 12px);
  --crew-occ-border-radius-pill: var(--pf-t--global--border--radius--pill, 9999px);

  /* Border Width */
  --crew-occ-border-width-sm: var(--pf-t--global--border--width--regular, 1px);
  --crew-occ-border-width-md: var(--pf-t--global--border--width--strong, 2px);

  /* Border Colors */
  --crew-occ-border-color-default: var(--pf-t--global--border--color--default, #d2d2d2);
  --crew-occ-border-color-strong: var(--pf-t--global--border--color--strong, #8a8d90);

  /* Shadows */
  --crew-occ-shadow-sm: var(--pf-t--global--box-shadow--sm, 0 1px 2px rgba(0, 0, 0, 0.06));
  --crew-occ-shadow-md: var(--pf-t--global--box-shadow--md, 0 4px 8px rgba(0, 0, 0, 0.1));
  --crew-occ-shadow-lg: var(--pf-t--global--box-shadow--lg, 0 8px 16px rgba(0, 0, 0, 0.15));

  /* Transitions */
  --crew-occ-transition-fast: 150ms ease-in-out;
  --crew-occ-transition-normal: 250ms ease-in-out;
  --crew-occ-transition-slow: 400ms ease-in-out;

  /* Z-index */
  --crew-occ-z-dropdown: 100;
  --crew-occ-z-sticky: 200;
  --crew-occ-z-fixed: 300;
  --crew-occ-z-modal-backdrop: 400;
  --crew-occ-z-modal: 500;
  --crew-occ-z-popover: 600;
  --crew-occ-z-tooltip: 700;
}

/* Dark theme support */
.pf-v6-theme-dark {
  --crew-occ-background-primary: var(--pf-t--global--background--color--primary--default, #1b1d21);
  --crew-occ-background-secondary: var(
    --pf-t--global--background--color--secondary--default,
    #212427
  );
  --crew-occ-background-tertiary: var(
    --pf-t--global--background--color--tertiary--default,
    #292c30
  );
  --crew-occ-text-primary: var(--pf-t--global--text--color--regular, #e0e0e0);
  --crew-occ-text-secondary: var(--pf-t--global--text--color--subtle, #a2a5a8);
  --crew-occ-border-color-default: var(--pf-t--global--border--color--default, #444548);
  --crew-occ-border-color-strong: var(--pf-t--global--border--color--strong, #6a6e73);
}
/**
 * Estilos personalizados para Modal de Iberia
 *
 * Ajusta el espaciado interno y el color del botón de cierre
 */

/* Aplicar padding al contenido del modal */
.pf-v5-c-modal-box__body,
.pf-v6-c-modal-box__body {
  padding: 1.5rem !important;
}

/* Padding del header para separar título de los bordes */
.pf-v5-c-modal-box__header,
.pf-v6-c-modal-box__header {
  padding: 1.5rem !important;
  padding-bottom: 1rem !important;
}

/* Separación del título */
.pf-v5-c-modal-box__title,
.pf-v6-c-modal-box__title {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Color del icono del botón de cierre (X) - rojo Iberia usando variable de PatternFly */
.pf-v5-c-modal-box__close .pf-v5-c-button,
.pf-v6-c-modal-box__close .pf-v6-c-button {
  --pf-v5-c-button__icon--Color: var(--primary-red-red-500-iberia, #d7192d) !important;
  --pf-v6-c-button__icon--Color: var(--primary-red-red-500-iberia, #d7192d) !important;
}

/* Hover del botón de cierre */
.pf-v5-c-modal-box__close .pf-v5-c-button:hover,
.pf-v6-c-modal-box__close .pf-v6-c-button:hover {
  --pf-v5-c-button__icon--Color: var(--primary-red-red-600-iberia, #b81528) !important;
  --pf-v6-c-button__icon--Color: var(--primary-red-red-600-iberia, #b81528) !important;
  background-color: rgba(215, 25, 45, 0.1) !important;
}

/* Ocultar focus ring del botón de cierre salvo con navegación por teclado */
.pf-v5-c-modal-box__close .pf-v5-c-button:focus:not(:focus-visible),
.pf-v6-c-modal-box__close .pf-v6-c-button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Asegurar padding consistente en el footer si existe */
.pf-v5-c-modal-box__footer,
.pf-v6-c-modal-box__footer {
  padding: 1rem 1.5rem 1.5rem 1.5rem !important;
}

/**
 * Estilos personalizados para CalendarMonth de Iberia
 *
 * Todos los selectores están prefijados con `.iberia-calendar-month` para:
 *  1. Aumentar la especificidad CSS y evitar que proyectos consumidores los sobreescriban.
 *  2. Aislar los estilos al ámbito del componente sin depender únicamente de !important.
 *
 * Los selectores de mes y año mantienen su comportamiento nativo de PatternFly.
 */

/* ─── Contenedor raíz ─────────────────────────────────────────────── */

/* Fuentes de Iberia + anchura adaptativa + esquinas redondeadas */
.iberia-calendar-month .pf-v5-c-calendar-month,
.iberia-calendar-month .pf-v6-c-calendar-month {
  font-family: var(--font-family-iberia-text) !important;
  --pf-v6-c-calendar-month__header-year--Width: 100px;
  width: 100% !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  padding-bottom: 46px !important;
}

/* ─── Grid de días: padding lateral y tabla 100 % ─────────────────── */

.iberia-calendar-month .pf-v5-c-calendar-month__calendar,
.iberia-calendar-month .pf-v6-c-calendar-month__calendar {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

.iberia-calendar-month .pf-v5-c-calendar-month__calendar table,
.iberia-calendar-month .pf-v6-c-calendar-month__calendar table {
  width: 100% !important;
}

/* ─── Celdas de día: alto suficiente para círculo + label ─────────── */

.iberia-calendar-month .pf-v5-c-calendar-month__dates-cell,
.iberia-calendar-month .pf-v6-c-calendar-month__dates-cell {
  height: 58px !important;
  vertical-align: middle !important;
  /* El área de contenido de la celda será exactamente igual a la altura del botón (4ch) */
  --pf-v6-c-calendar-month__dates-cell--PaddingBlockStart: calc(
    (58px - var(--pf-v6-c-calendar-month__date--Height, 4ch)) / 2
  );
  --pf-v6-c-calendar-month__dates-cell--PaddingBlockEnd: calc(
    (58px - var(--pf-v6-c-calendar-month__date--Height, 4ch)) / 2
  );
  --pf-v6-c-calendar-month__dates-cell--before--InsetBlockEnd: calc(
    (58px - var(--pf-v6-c-calendar-month__date--Height, 4ch)) / 2
  );
}

/* ─── Sin selección explícita: ocultar highlight del día ──────────── */

.iberia-calendar-month--no-selection
  .pf-v5-c-calendar-month__dates-cell.pf-m-selected
  .pf-v5-c-calendar-month__date,
.iberia-calendar-month--no-selection
  .pf-v6-c-calendar-month__dates-cell.pf-m-selected
  .pf-v6-c-calendar-month__date {
  background-color: transparent !important;
  color: inherit !important;
  --pf-v6-c-calendar-month__date--m-selected--BackgroundColor: transparent;
  --pf-v6-c-calendar-month__date--m-selected--Color: inherit;
}

.iberia-calendar-month--no-selection
  .pf-v5-c-calendar-month__dates-cell.pf-m-selected
  .pf-v5-c-calendar-month__date::before,
.iberia-calendar-month--no-selection
  .pf-v6-c-calendar-month__dates-cell.pf-m-selected
  .pf-v6-c-calendar-month__date::before {
  background-color: transparent !important;
}

/* ─── Header nativo de PF oculto (reemplazado por header estático) ─ */

.iberia-calendar-month .pf-v5-c-calendar-month__header,
.iberia-calendar-month .pf-v6-c-calendar-month__header {
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.iberia-calendar-month .pf-v5-c-calendar-month,
.iberia-calendar-month .pf-v6-c-calendar-month {
  padding-top: 0 !important;
}

/* ─── Cabecera estática de mes/año ────────────────────────────────── */

.iberia-calendar-month__static-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 8px;
}

.iberia-calendar-month__static-header-text {
  font-family: var(--font-family-iberia-headline) !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 100%;
  text-align: center;
  color: #333333;
  flex: 1;
}

.iberia-calendar-month__nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--primary-red-red-500-iberia) !important;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.iberia-calendar-month__nav-arrow:hover {
  color: var(--primary-red-red-600) !important;
}

.iberia-calendar-month__nav-arrow:focus-visible {
  outline: 2px solid var(--primary-red-red-500-iberia);
  outline-offset: 2px;
}

.iberia-calendar-month__nav-arrow:focus:not(:focus-visible) {
  outline: none;
}

.iberia-calendar-month__nav-arrow--disabled,
.iberia-calendar-month__nav-arrow:disabled {
  color: #cccccc !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Foco: solo visible en navegación por teclado ────────────────── */

/* PatternFly usa ::after con variables CSS en lugar de outline */
.iberia-calendar-month .pf-v5-c-calendar-month__date:focus:not(:focus-visible),
.iberia-calendar-month .pf-v6-c-calendar-month__date:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  --pf-v6-c-calendar-month__date--after--BorderColor: transparent !important;
  --pf-v6-c-calendar-month__date--after--BorderWidth: 0 !important;
  --pf-v6-c-calendar-month__date--after--OutlineOffset: 0 !important;
}

/* ─── Botón de leyenda ────────────────────────────────────────────── */
/* ─── Círculo coloreado alrededor del día ───────────────────────────── */

.iberia-calendar-month .calendar-day-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pf-v6-c-calendar-month__date--Width, 4ch);
  height: var(--pf-v6-c-calendar-month__date--Height, 4ch);
  flex-shrink: 0;
  border-radius: 50%;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  box-sizing: border-box;
}

.iberia-calendar-month .calendar-day-circle-label {
  position: absolute;
  bottom: -1.2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65em;
  line-height: 1;
  white-space: nowrap;
}

/* Botón PF que contiene un círculo: desactivar hover/selected oval y dar espacio */
.iberia-calendar-month .pf-v5-c-calendar-month__date:has(.calendar-day-circle),
.iberia-calendar-month .pf-v6-c-calendar-month__date:has(.calendar-day-circle) {
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Botón PF que contiene iconos posicionados absolutamente (palm, pairings, círculos) */
.iberia-calendar-month .pf-v5-c-calendar-month__date,
.iberia-calendar-month .pf-v6-c-calendar-month__date {
  overflow: visible !important;
}

.iberia-calendar-month .calendar-palm-icon {
  width: 26px !important;
  height: auto !important;
  display: block !important;
  min-width: 26px !important;
}

/* Desactivar el ::after (hover/selected ring) de PF en celdas con círculo */
.iberia-calendar-month .pf-v5-c-calendar-month__date:has(.calendar-day-circle)::after,
.iberia-calendar-month .pf-v6-c-calendar-month__date:has(.calendar-day-circle)::after {
  display: none !important;
}

.iberia-calendar-month .calendar-legend-button {
  position: absolute;
  bottom: 12px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  z-index: 10;
}

.iberia-calendar-month .calendar-legend-button:hover {
  filter: brightness(0.8);
}

.iberia-calendar-month .calendar-legend-button:focus-visible {
  outline: 2px solid var(--primary-red-red-500-iberia);
  outline-offset: 2px;
}

.iberia-calendar-month .calendar-legend-button:active {
  transform: scale(0.95);
}

.iberia-select {
  position: relative;

  /* Border */
  --pf-v6-c-menu-toggle--BorderRadius: 0.5rem;
  --pf-v6-c-menu-toggle--BorderColor: #e5e7eb;
  --pf-v6-c-menu-toggle--BorderWidth: 1px;

  /* Background */
  --pf-v6-c-menu-toggle--BackgroundColor: #ffffff;
  --pf-v6-c-menu-toggle--hover--BackgroundColor: #ffffff;
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: #ffffff;

  /* Hover */
  --pf-v6-c-menu-toggle--hover--BorderColor: #d7192d;
  --pf-v6-c-menu-toggle--hover--BorderWidth: 1px;

  /* Expanded/open */
  --pf-v6-c-menu-toggle--expanded--BorderColor: #d7192d;
  --pf-v6-c-menu-toggle--expanded--BorderWidth: 1px;

  /* Text color */
  --pf-v6-c-menu-toggle--Color: #374151;
  --pf-v6-c-menu-toggle--hover--Color: #374151;
  --pf-v6-c-menu-toggle--expanded--Color: #374151;

  /* Chevron icon */
  --pf-v6-c-menu-toggle__toggle-icon--Color: #d7192d;
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: #d7192d;
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: #d7192d;

  /* Vertical padding to match react-select height (~38px) */
  --pf-v6-c-menu-toggle--PaddingBlockStart: 0.375rem;
  --pf-v6-c-menu-toggle--PaddingBlockEnd: 0.375rem;
  --pf-v6-c-menu-toggle--PaddingInlineStart: 0.75rem;
  --pf-v6-c-menu-toggle--PaddingInlineEnd: 0.75rem;

  /* Elimina el gap entre __text y __controls para que la X quede pegada al chevron */
  --pf-v6-c-menu-toggle--Gap: 0;
}

/* El toggle button es el contexto de posicionamiento para la X */
.iberia-select .pf-v6-c-menu-toggle {
  position: relative;
}

/* Espacio extra a la derecha del texto cuando hay botón X, para no solaparse */
.iberia-select .pf-v6-c-menu-toggle__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 1.25rem;
}

/* X posicionada absolutamente dentro del toggle, justo a la izquierda del chevron */
.iberia-select__clear {
  position: absolute;
  right: calc(var(--pf-v6-c-menu-toggle--PaddingInlineEnd, 0.75rem) + 1.25rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  padding: 2px;
  border-radius: 2px;
  cursor: pointer;
  line-height: 0;
  outline: none;
  z-index: 1;
}

.iberia-select__clear:hover {
  color: #6b7280;
}

/* Chevron rojo */
.iberia-select .pf-v6-c-menu-toggle__toggle-icon {
  color: #d7192d;
}

/* Placeholder text */
.iberia-select .pf-v6-c-menu-toggle.pf-m-placeholder .pf-v6-c-menu-toggle__text {
  color: #9ca3af;
}

/* Focus/hover — fuerza el color rojo sobreescribiendo la variable directamente en el elemento */
.iberia-select .pf-v6-c-menu-toggle:is(:hover, :focus),
.iberia-select .pf-v6-c-menu-toggle.pf-m-expanded {
  --pf-v6-c-menu-toggle--BorderColor: #d7192d;
  outline: none;
}

/* Elimina outline y box-shadow en foco */
.iberia-select .pf-v6-c-menu-toggle:focus,
.iberia-select .pf-v6-c-menu-toggle:focus-visible,
.iberia-select .pf-v6-c-menu-toggle.pf-m-expanded {
  outline: none;
  box-shadow: none;
}

/* Elimina el ::after de PF que también puede pintar el borde */
.iberia-select .pf-v6-c-menu-toggle:focus::after,
.iberia-select .pf-v6-c-menu-toggle:focus-visible::after {
  display: none;
}

/**
 * Switch component styles — Iberia overrides
 *
 * The global _patternfly-overrides.css already maps brand tokens to Iberia red,
 * so the checked-state background is automatically correct.
 *
 * What we fix here:
 *   - Border-radius: the global override sets --pf-t--global--border--radius--pill
 *     to 2px (squared buttons), which would break the toggle pill shape. We
 *     restore it locally so the Switch keeps its characteristic rounded look.
 */

.pf-v6-c-switch {
  /* Restore pill shape for the toggle track */
  --pf-v6-c-switch__toggle--BorderRadius: var(--radius-round, 999px);

  /* Ensure the focus outline uses Iberia red (already global, but explicit here) */
  --pf-v6-c-switch__input--focus__toggle--OutlineColor: var(--primary-red-red-500-iberia, #d7192d);

  /* Checked state background — Iberia red */
  --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(
    --primary-red-red-500-iberia,
    #d7192d
  );
}

/* Hover: slightly darker red when checked */
.pf-v6-c-switch__input:checked:hover ~ .pf-v6-c-switch__toggle {
  --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(--primary-red-red-600, #b9191a);
}
/*# sourceMappingURL=index.css.map *//* Iberia Headline — títulos y encabezados */
@font-face {
  font-family: 'Iberia Headline';
  src: url('/fonts/IberiaHeadline.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Iberia Headline';
  src: url('/fonts/IberiaHeadlineItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Iberia Headline';
  src: url('/fonts/IberiaHeadlineBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Iberia Text — cuerpo de texto */
@font-face {
  font-family: 'Iberia Text';
  src: url('/fonts/IberiaText.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Iberia Text';
  src: url('/fonts/IberiaTextItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Iberia Text';
  src: url('/fonts/IberiaTextBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --core-header-height: 48px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Iberia Text', sans-serif;
}
/*$vite$:1*/