@charset "UTF-8";
/*
    IMPORTS:
        - Iconos de bootstrap como fuente.
        - Fuente de la página.
*/
@import "../lib/bootstrap-icons/bootstrap-icons.css";
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
/*
    BREAKPOINTS

    Escala de anchos de viewport del design system. Sigue la escala de
    Bootstrap (sm/md/lg/xl/xxl, coincide con el grid col-sm/col-md que ya usa
    la app) ampliada con 3 tramos propios por debajo de 576px para cubrir la
    granularidad móvil que Bootstrap no define.

    Uso:
        @include mq-up('lg') { ... }              // >= 992px
        @include mq-down('xs') { ... }             // <= 399.98px
        @include mq-between('md', 'lg') { ... }    // 768px - 991.98px
*/
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
:root,
[data-theme=finaliser] {
  --token-brand-primary: #048813;
  --token-brand-primary-light: #07DD1F;
  --token-brand-primary-light-med: #98FCA4;
  --token-brand-primary-lighter: #CFFED5;
  --token-brand-primary-dark: #02510B;
  --token-brand-primary-darker: #012B06;
  --token-brand-default: #059A16;
  --token-brand-hover: #05AA18;
  --token-brand-active: #03670F;
  --token-brand-disabled: #D6D6D6;
}

[data-theme=garbayo-chivite] {
  --token-brand-primary: #FF5B29;
  --token-brand-primary-light: #FFAA90;
  --token-brand-primary-light-med: #FFDFD6;
  --token-brand-primary-lighter: #FFEFEA;
  --token-brand-primary-dark: #851F00;
  --token-brand-primary-darker: #471100;
  --token-brand-default: #FA3A00;
  --token-brand-hover: #FA3A00;
  --token-brand-active: #A82700;
  --token-brand-disabled: #D6D6D6;
}

/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/*
    RESPONSIVE DE LA PANTALLA DE LOGIN

    - < 576px ('sm')       -> layout movil: se oculta el panel lateral y la
                              tarjeta del formulario ocupa el ancho completo.
                              Cubre todos los moviles (360, 375, 390, 412,
                              430, 480, 540...), no solo los de menos de 400px.
    - < 360px ('xxs')      -> ajuste extra para moviles muy estrechos.
    - 576px - 992px ('lg') -> se mantiene el layout partido pero con los
                              paddings y el logo reducidos para que no quede
                              comprimido.
*/
.login-page {
  display: flex;
  /*
      min-height (no height) + sin overflow:hidden: si el formulario no cabe
      en alto (movil en horizontal, ventanas bajas) la pagina crece y hace
      scroll en vez de recortar el boton de login.
  */
  min-height: 100vh;
  width: 100%;
  background-color: #FFFFFF;
}
@media (max-width: 575.98px) {
  .login-page {
    flex-direction: column-reverse;
  }
}

.lado-izda-login {
  position: relative;
  width: 30%;
  background-color: black;
  padding: 3rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .lado-izda-login {
    padding: 1.5rem;
  }
}
@media (max-width: 575.98px) {
  .lado-izda-login {
    display: none;
  }
}

.logo-login {
  width: 120px;
  height: auto;
  object-fit: contain;
  margin-top: 2rem;
  margin-left: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  animation: fadeInLeft 0.8s ease-out;
  z-index: 9999;
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .logo-login {
    width: 100%;
    max-width: 120px;
    margin-top: 1rem;
  }
}
@media (max-width: 575.98px) {
  .logo-login {
    display: none;
  }
}

.lado-decha-login {
  width: 70%;
  /* el padding vertical evita que el formulario toque los bordes (y el pie
     de i3code) cuando la ventana es baja y la pagina pasa a hacer scroll */
  padding: 2rem 3rem 4rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #FFFFFF;
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .lado-decha-login {
    padding: 2rem 1.5rem 4rem 1.5rem;
  }
}
@media (max-width: 575.98px) {
  .lado-decha-login {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 24px 20px 48px 20px;
    /* la tarjeta arranca arriba y la pagina crece si no cabe */
    justify-content: flex-start;
    margin-top: 0;
  }
}
.lado-decha-login form,
.lado-decha-login .tarjeta-login {
  width: 100%;
  max-width: 450px;
  animation: fadeInRight 0.8s ease-out;
  position: relative;
  z-index: 10;
}
@media (max-width: 575.98px) {
  .lado-decha-login form,
  .lado-decha-login .tarjeta-login {
    width: 100%;
    max-width: 420px;
    margin: 4vh auto 0 auto;
    background-color: #FFFFFF;
    padding: 24px 22px 32px 22px;
    border-radius: 8px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  }
}
@media (max-width: 359.98px) {
  .lado-decha-login form,
  .lado-decha-login .tarjeta-login {
    padding: 20px 16px 28px 16px;
    margin-top: 2vh;
  }
}
.lado-decha-login form .form-floating-login,
.lado-decha-login .tarjeta-login .form-floating-login {
  margin-bottom: 1.5rem;
  position: relative;
}
@media (max-width: 575.98px) {
  .lado-decha-login form .form-floating-login,
  .lado-decha-login .tarjeta-login .form-floating-login {
    margin-bottom: 1rem;
  }
}
.lado-decha-login form .form-floating-login .form-control,
.lado-decha-login .tarjeta-login .form-floating-login .form-control {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background-color: transparent;
  color: #121212;
  transition: all 0.3s ease;
}
@media (max-width: 575.98px) {
  .lado-decha-login form .form-floating-login .form-control,
  .lado-decha-login .tarjeta-login .form-floating-login .form-control {
    padding: 0.625rem 0.75rem;
    /* 16px: por debajo iOS hace zoom automatico al enfocar */
    font-size: 1rem;
  }
}
.lado-decha-login form .form-floating-login .form-control:focus,
.lado-decha-login .tarjeta-login .form-floating-login .form-control:focus {
  outline: none;
  border-color: #E6E6E6;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(var(--token-brand-primary), 0.1);
}
.lado-decha-login form .form-floating-login .form-control::placeholder,
.lado-decha-login .tarjeta-login .form-floating-login .form-control::placeholder {
  color: transparent;
}
.lado-decha-login form .form-floating-login .form-label,
.lado-decha-login .tarjeta-login .form-floating-login .form-label {
  left: 0;
  font-size: 0.875rem;
  color: #121212;
  transition: all 0.3s ease;
  pointer-events: none;
  background-color: transparent;
  padding: 0 0.25rem;
  margin-bottom: 6px;
}
.lado-decha-login form .form-floating-login .form-control:focus,
.lado-decha-login .tarjeta-login .form-floating-login .form-control:focus {
  top: -0.75rem;
  font-size: 0.75rem;
  color: #121212;
  background-color: #FFFFFF;
}

.titulos-login {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 12px;
  font-family: "DM Sans", sans-serif;
  margin-bottom: 40px;
}
@media (max-width: 575.98px) {
  .titulos-login {
    margin-bottom: 28px;
  }
}
@media (max-width: 575.98px) {
  .titulos-login h2 {
    font-size: 1.5rem;
  }
}

.subtitulo-login {
  font-family: "DM Sans", sans-serif;
  color: #929292;
  font-size: 12pt;
  font-weight: 400;
}
@media (max-width: 575.98px) {
  .subtitulo-login {
    font-size: 0.9375rem;
  }
}
@media (max-width: 359.98px) {
  .subtitulo-login {
    font-size: 0.875rem;
  }
}

.contenedor-mensaje-confirmacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.contenedor-mensaje-confirmacion .icono-confirmacion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 2rem;
  color: #096BFF;
  background-color: #EBF3FF;
}
.contenedor-mensaje-confirmacion .icono-confirmacion.icono-aviso {
  color: #DD3300;
  background-color: #FFEFEA;
}
.contenedor-mensaje-confirmacion .mensaje-confirmacion {
  margin: 0;
  font-size: 0.9375rem;
  color: #585858;
}
.contenedor-mensaje-confirmacion .mensaje-confirmacion a {
  color: #2C80FF;
}

.bloque-forgot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.forgot-pass {
  text-align: center;
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #2C80FF;
  text-decoration: none;
  transition: all 0.3s ease;
}
@media (max-width: 575.98px) {
  .forgot-pass {
    margin-bottom: 1.25rem;
  }
}
.forgot-pass:hover {
  color: #096BFF;
  text-decoration: underline;
}

.btn-login {
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  background-color: #121212;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn-login:hover {
  background-color: #121212;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(230, 230, 230, 0.3);
  color: #FFFFFF;
}
.btn-login:active {
  background-color: #121212;
  transform: translateY(0);
  color: #FFFFFF;
}
.btn-login:disabled {
  background-color: #E6E6E6;
  cursor: not-allowed;
  transform: none;
  /*       color: $token-text-terciary;*/
}

.cabecera-movil {
  display: none;
}
@media (max-width: 575.98px) {
  .cabecera-movil {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
  }
  .cabecera-movil .logo-login-movil {
    width: 90px;
    height: auto;
    object-fit: contain;
    top: 0;
    margin-left: 0;
    margin-bottom: 32px;
    animation: fadeInLeft 0.8s ease-out;
  }
}
@media (max-width: 359.98px) {
  .cabecera-movil .logo-login-movil {
    width: 78px;
    margin-bottom: 24px;
  }
}

.fondo-empresa-login {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fondo-empresa-login-movil {
  display: none;
}
@media (max-width: 575.98px) {
  .fondo-empresa-login-movil {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
#inicio {
  min-height: calc(100vh - 140px);
  isolation: isolate;
}

#inicio .imagen-promocion, #about .imagen-promocion {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
#inicio .imagen-promocion .wrapper-promocion, #about .imagen-promocion .wrapper-promocion {
  height: 100%;
  width: 100%;
}
#inicio .imagen-promocion .wrapper-promocion img, #about .imagen-promocion .wrapper-promocion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 5px;
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.25);
  opacity: 0.3;
}

#inicio .accesos-ot-resumen {
  display: flex;
  flex-direction: row;
}
@media (max-width: 399.98px) {
  #inicio .accesos-ot-resumen {
    flex-direction: column;
  }
}

.accesos-directos-ot-resumen {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.grupo-ot-resumen {
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-ot-resumen {
  display: flex;
  text-decoration: none;
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 4px 6px;
}
.btn-ot-resumen:hover, .btn-ot-resumen:focus {
  padding: 4px 6px;
  background-color: #F2F2F2;
  border-radius: 8px;
}
@media (max-width: 399.98px) {
  .btn-ot-resumen {
    font-size: 14px;
    line-height: 19px;
  }
}

.accesos-directos-promocion {
  display: flex;
  flex-direction: row;
  /*    justify-content: space-between;*/
  gap: 10px;
  /*
      Por debajo de 576px ('sm') los accesos se apilan en columna. Antes
      estaba en 'xs' (400px) y entre 400 y 576 los botones seguian en fila
      y se desbordaban: son 4-5 botones con textos largos.
  */
}
@media (max-width: 575.98px) {
  .accesos-directos-promocion {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
  }
}

.btn-acceso-directo {
  /*    @extend .boton-text;*/
  display: flex;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  flex-direction: column;
  justify-content: center;
  font-weight: 500;
  width: fit-content;
  /*    max-width: 70px;*/
  padding: 16px 16px;
  display: flex;
  text-decoration: none;
  background-color: var(--token-brand-primary-lighter);
  color: var(--token-brand-primary-dark);
  border-radius: 4px;
  /* acompaña al cambio a columna de .accesos-directos-promocion */
}
.btn-acceso-directo:hover, .btn-acceso-directo:focus {
  background-color: var(--token-brand-hover);
  color: #FFFFFF;
}
@media (max-width: 575.98px) {
  .btn-acceso-directo {
    flex-direction: row;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  /*    color:inherit !important;*/
  /*  color: $color-primitive-gris-negro-5;*/
  /*
      El margen lateral en movil lo pone ahora .container-fluid-nuevo (app.scss),
      que envuelve todas las vistas. Aqui habia un padding de 8px solo por debajo
      de 400px: se quita para no sumar 16px y para que el hueco sea el mismo en
      todos los anchos de movil.
  */
}

.switch-mostrar-promociones {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-left: 10px;
}

.switch-mostrar-promociones .boton-text, .switch-mostrar-promociones .boton-toolbar, .switch-mostrar-promociones .upload-card-file-name, .switch-mostrar-promociones .btn, .switch-mostrar-promociones .boton-toolbar-letra, .switch-mostrar-promociones .boton-toolbar-signo, .switch-mostrar-promociones .k-upload-button, .switch-mostrar-promociones .k-button-solid-base, .switch-mostrar-promociones .k-button-solid-primary, .switch-mostrar-promociones .btn-outline-primary, .switch-mostrar-promociones .btn-icon-brand, .switch-mostrar-promociones .btn-contextual-secundario, .switch-mostrar-promociones .btn-contextual, .switch-mostrar-promociones .btn-tertiary, .switch-mostrar-promociones .btn-outline-danger, .switch-mostrar-promociones .btn-secondary, .switch-mostrar-promociones .radio-button-group .k-radio:active + .k-radio-label, .radio-button-group .switch-mostrar-promociones .k-radio:active + .k-radio-label,
.switch-mostrar-promociones .radio-button-group .k-radio:checked + .k-radio-label,
.radio-button-group .switch-mostrar-promociones .k-radio:checked + .k-radio-label, .switch-mostrar-promociones .btn-primary, .switch-mostrar-promociones .btn-cta, .switch-mostrar-promociones .filtro-mobile-title {
  font-size: 12pt;
}

/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
.filtro-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #F2F2F2;
}

.filtro-mobile-title {
  font-weight: 600;
}

.filtro-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0.1rem 0.2rem;
  font-size: 1.1rem;
}

.filtro-mobile-close,
.filter-pane .filter-pane-close {
  color: #242424;
}
.filtro-mobile-close:hover, .filtro-mobile-close:focus-visible, .filtro-mobile-close:active,
.filter-pane .filter-pane-close:hover,
.filter-pane .filter-pane-close:focus-visible,
.filter-pane .filter-pane-close:active {
  color: var(--token-brand-default);
}

.filtro-campo-acotado {
  min-width: 135px;
  max-width: 227px;
}
@media (max-width: 767.98px) {
  .filtro-campo-acotado {
    max-width: none;
  }
}

.filtro-campo-ancho {
  min-width: 220px;
}
@media (max-width: 767.98px) {
  .filtro-campo-ancho {
    min-width: 0;
  }
}

.filter-pane-footer > * {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .filtros .collapsing {
    transition: none !important;
  }
  .filtros .filtros-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: calc(100vh - 88px);
    z-index: 1100;
    margin: 0;
    overflow-y: auto;
    background-color: #FFFFFF;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    padding: 16px;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
  }
  .filtros .filtros-panel > * {
    width: 100%;
    max-width: 100%;
  }
  .filtros .filtros-panel.mobile-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .filtro-mobile-footer {
    margin-top: auto;
    gap: 0.5rem;
    padding-top: 12px;
    border-top: 1px solid #F2F2F2;
  }
  .filtro-mobile-footer > * {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
  .filtros-panel .filtro-accion-aplicar {
    min-height: 40px;
    padding: 8px 8px;
    border-radius: 4px;
    text-decoration: none;
    background-color: #242424;
    color: #FFFFFF;
    border: 1px solid #242424;
  }
  .filtros-panel .filtro-accion-aplicar:hover, .filtros-panel .filtro-accion-aplicar:focus {
    background-color: #FFFFFF;
    color: #242424;
    border: 1px solid #242424;
  }
  .filtros-panel .filtro-accion-limpiar {
    min-height: 40px;
    padding: 8px 8px;
    border-radius: 4px;
    text-decoration: none;
    background-color: #FFFFFF;
    color: #313131;
    border: 1px solid #313131;
  }
  .filtros-panel .filtro-accion-limpiar:hover, .filtros-panel .filtro-accion-limpiar:focus {
    background-color: #313131;
    color: #FFFFFF;
  }
}
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/*
    Tarjetas de plantilla de correo (Promociones/Editar, pestaña Notificaciones > Plantillas):
    en movil el titulo + switch "Activa/Inactiva" y las filas "Para <destinatario>" + CCO no
    caben en una sola linea sin apretujarse o salirse de la tarjeta. Se deja que envuelvan
    (flex-wrap) en vez de forzarlos siempre en fila: en escritorio caben de sobra y no se
    nota el cambio, en movil pasan a su propia linea.
*/
#tabstripSelect,
#nestedTabstripSelect,
#nestedTabstrip2Select {
  margin-bottom: 16px;
  border-radius: 8px;
  border-color: #E6E6E6;
  box-shadow: none;
}
#tabstripSelect:focus,
#nestedTabstripSelect:focus,
#nestedTabstrip2Select:focus {
  border-color: #98C1FF;
  box-shadow: 0 0 0 0.2rem rgba(9, 107, 255, 0.25);
}

.plantilla-card [style*="justify-content: space-between"] {
  flex-wrap: wrap;
  row-gap: 8px;
}

.plantilla-card div:has(> .kendo-form-control) {
  flex-wrap: wrap;
  row-gap: 4px;
}

@media (max-width: 575.98px) {
  .estancias-titulo-wrapper {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
}

@media (min-width: 768px) {
  .gremios-asociados-intro {
    max-width: 86%;
  }
}

#VerListadoGremios .bi {
  font-size: 1rem;
}

.panel-lateral #GremioList {
  background-color: transparent;
}
.panel-lateral #GremioList .k-listview-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0 !important;
  max-height: none;
  overflow: visible;
}

.gremio-disponible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid #E6E6E6;
  border-radius: 8px;
  background-color: #FFFFFF;
}
.gremio-disponible .gremio-disponible-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.gremio-disponible .gremio-disponible-nombre {
  font-weight: 600;
  color: #242424;
}
.gremio-disponible .box-tipologia {
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  background-color: #003E52;
  color: #FFFFFF;
  font-size: 13px;
}
.gremio-disponible .btn-asociar-gremio {
  flex-shrink: 0;
}

/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/*
    (PRONTO EJEMPLOS EN FIGMA)
    H1 - Para títulos de página
    H2 - Para títulos de secciones
    H3 - Para títulos de subsecciones
    H4 - Para títulos de apartados
    h5 para swiches de confug
    ---
    Parrafo-basico - Para texto
    Parrafo-small - Para texto pequeño (usar poco)
    Label-on - Para inputs vacíos
    Label-off - Para el resultado de inputs
    Badge - para las pastillas de los estados
    Boton-text - Para el texto de los botones
    Tab-text - Para el texto de las tabs


*/
.h1 {
  font-family: "DM Sans", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
}
@media (max-width: 399.98px) {
  .h1 {
    font-size: 22px;
    line-height: 32px;
  }
}

.h2 {
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .h2 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px;
  }
}

.h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .h3 {
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 10px;
  }
}

.h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .h4 {
    font-size: 15px;
    line-height: 24px;
  }
}

.h5 {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 8px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .h5 {
    font-size: 15px;
    line-height: 24px;
  }
}

.label-on {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}
@media (max-width: 399.98px) {
  .label-on {
    font-size: 12px;
    line-height: 17px;
  }
}

.label-off {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
@media (max-width: 399.98px) {
  .label-off {
    font-size: 14px !important;
    line-height: 17px;
  }
}

.form-info {
  color: #636363;
  padding-top: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}

.parrafo-basico {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .parrafo-basico {
    font-size: 13px;
    line-height: 19px;
  }
}

.parrafo-small {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
}
@media (max-width: 399.98px) {
  .parrafo-small {
    font-size: 12px;
    line-height: 16px;
  }
}

.boton-text, .boton-toolbar, .upload-card-file-name, .btn, .boton-toolbar-letra, .boton-toolbar-signo, .k-upload-button, .k-button-solid-base, .k-button-solid-primary, .btn-outline-primary, .btn-icon-brand, .btn-contextual-secundario, .btn-contextual, .btn-tertiary, .btn-outline-danger, .btn-secondary, .radio-button-group .k-radio:active + .k-radio-label,
.radio-button-group .k-radio:checked + .k-radio-label, .btn-primary, .btn-cta, .filtro-mobile-title {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}
@media (max-width: 399.98px) {
  .boton-text, .boton-toolbar, .upload-card-file-name, .btn, .boton-toolbar-letra, .boton-toolbar-signo, .k-upload-button, .k-button-solid-base, .k-button-solid-primary, .btn-outline-primary, .btn-icon-brand, .btn-contextual-secundario, .btn-contextual, .btn-tertiary, .btn-outline-danger, .btn-secondary, .radio-button-group .k-radio:active + .k-radio-label,
  .radio-button-group .k-radio:checked + .k-radio-label, .btn-primary, .btn-cta, .filtro-mobile-title {
    font-size: 14px;
    line-height: 19px;
  }
}

.tab-text {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
@media (max-width: 399.98px) {
  .tab-text {
    font-size: 13px;
    line-height: 19px;
  }
}

.badge {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
@media (max-width: 399.98px) {
  .badge {
    font-size: 13px;
    line-height: 19px;
  }
}

/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/* ===== BADGES ===== */
/* Layout comun */
:is(.badgeGremioActivo, .badgeGremioInactivo, .badgeGremioActivo, .badgeGremioInactivo, .badgePromocionAbierta, .badgePromocionCerrada, .badgeCurvyOTRCCerrada, .badgeCurvyOTRCAbierta, .badgeCurvyOTRCPendiente, .badgeCurvyOTRCRealizada, .badgeCurvyOTRCBloqueada, .badgeCurvyOTRCNoProcede, .badgeCurvyOTRCDesestimadaPendiente, .badgeOTRCCerrada, .badgeOTRCAbierta, .badgeOTRCPendiente, .badgeOTRCRealizada, .badgeOTRCBloqueada, .badgeOTRCNoProcede, .badgeOTRCDesestimadaPendiente, .badgeBorderPromocionAbierta, .badgeBorderPromocionCerrada, .badgeBorderCurvyOTRCCerrada, .badgeBorderCurvyOTRCAbierta, .badgeBorderCurvyOTRCPendiente, .badgeBorderCurvyOTRCRealizada, .badgeBorderCurvyOTRCBloqueada, .badgeBorderCurvyOTRCNoProcede, .badgeBorderCurvyOTRCDesestimadaPendiente, .badgeBorderOTRCCerrada, .badgeBorderOTRCAbierta, .badgeBorderOTRCPendiente, .badgeBorderOTRCRealizada, .badgeBorderOTRCBloqueada, .badgeBorderOTRCNoProcede, .badgeBorderOTRCDesestimadaPendiente) {
  display: inline-flex;
  padding: 2px 10px 2px 8px;
  align-items: center;
  gap: 4px;
}

/* Gremio y Promocion */
.badgeGremioActivo,
.badgePromocionAbierta {
  border-radius: 2px;
  border: 1px solid #03670F;
  background: #CFFED5;
  color: #03670F;
}

.badgeGremioInactivo,
.badgePromocionCerrada {
  border-radius: 2px;
  border: 1px solid #585858;
  background: #E6E6E6;
  color: #585858;
}

/* OT/RC redondeados */
:is(.badgeCurvyOTRCCerrada, .badgeCurvyOTRCAbierta, .badgeCurvyOTRCPendiente, .badgeCurvyOTRCRealizada, .badgeCurvyOTRCBloqueada, .badgeCurvyOTRCNoProcede, .badgeCurvyOTRCDesestimadaPendiente) {
  border-radius: 16px;
}

.badgeCurvyOTRCCerrada {
  background: #CFFED5;
}

.badgeCurvyOTRCAbierta {
  background: #FBE0E0;
}

.badgeCurvyOTRCRealizada {
  background: #FFDFD6;
}

.badgeCurvyOTRCBloqueada {
  background: #BED8FF;
}

.badgeCurvyOTRCPendiente {
  background: #FFDFD6;
}

.badgeCurvyOTRCNoProcede {
  background: #BED8FF;
}

.badgeCurvyOTRCDesestimadaPendiente {
  background: #BED8FF;
}

/* ===== TIPOGRAFiA ===== */
.tipografiaVerde,
.tipografiaGris,
.tipografiaNaranja,
.tipografiaRoja,
.tipografiaAzul {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
@media (max-width: 399.98px) {
  .tipografiaVerde,
  .tipografiaGris,
  .tipografiaNaranja,
  .tipografiaRoja,
  .tipografiaAzul {
    font-size: 13px;
    line-height: 19px;
  }
}

.tipografiaVerde {
  color: #03670F;
}

.tipografiaGris {
  color: #585858;
}

.tipografiaAzul {
  color: #004FC7;
}

.tipografiaNaranja {
  color: #FF5B29;
}

.tipografiaRoja {
  color: #B01414;
}

.tipografiaAzul {
  color: #004FC7;
}

.textoGris {
  color: #585858;
}

.circuloVerde {
  color: #059A16;
}

.circuloNaranja {
  color: #FF5B29;
}

.circuloRojo {
  color: #E52020;
}

/* ===== CHIPS DE FILTRO POR ESTADO ===== */
.badgeCurvyTodas {
  display: inline-flex;
  padding: 2px 10px 2px 8px;
  align-items: center;
  gap: 4px;
  border-radius: 16px;
  background: #E6E6E6;
  color: #585858;
}

/* Contenedor de los chips */
.estado-chips {
  display: inline-flex;
  padding: 2px 10px 2px 8px;
  align-items: center;
  gap: 4px;
}
.estado-chips.pill-listado-wrapper {
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}

/* Cada chip es un <button>: le quitamos el borde y el fondo nativos */
.estado-chip {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  /* Al estar activo, resaltamos el badge interior con borde de su propio color + sombra */
}
.estado-chip:focus, .estado-chip:focus-visible {
  outline: none;
}
.estado-chip.active > div {
  border: 1px solid currentColor;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.estado-chips-label span {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #585858;
}

.estado-chips-wrapper {
  position: relative;
  overflow: hidden;
}
.estado-chips-wrapper::before, .estado-chips-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 2;
}
.estado-chips-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #f3f3f3 0%, transparent 100%);
}
.estado-chips-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #f3f3f3 0%, transparent 100%);
}
@media (max-width: 399.98px) {
  .estado-chips-wrapper {
    min-width: 390px;
    max-width: 390px;
  }
}

.estado-chips-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.5rem;
  scrollbar-width: none;
}
@media (max-width: 575.98px) {
  .estado-chips-row {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
  }
}
.estado-chips-row::-webkit-scrollbar {
  display: none;
}

/*
    Desplegable de estado (movil): sustituye a .estado-chips-row por debajo de md (d-md-none /
    d-none d-md-flex en la vista). Lo rellena initEstadoDropdown (Utils.ts): el boton lleva las
    mismas clases que el badge de la pill activa (badgeCurvy* + tipografia*), asi que su fondo
    y su texto son los del estado elegido; aqui solo se le da forma de boton a todo el ancho.
*/
.estado-select {
  position: relative;
  width: 100%;
  align-self: stretch;
}
.estado-select .estado-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
}
.estado-select .estado-select-toggle .bi {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.estado-select .estado-select-toggle[aria-expanded=true] .bi {
  transform: rotate(180deg);
}
.estado-select .estado-select-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(9, 107, 255, 0.25);
}
.estado-select .estado-select-valor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.estado-select .estado-select-menu {
  width: 100%;
  min-width: 0;
  margin-top: 4px;
  padding: 4px;
  border-radius: 12px;
}
.estado-select .estado-select-item {
  padding: 6px 8px;
  border-radius: 8px;
}
.estado-select .estado-select-item:hover, .estado-select .estado-select-item:focus, .estado-select .estado-select-item:active {
  background-color: #F2F2F2;
}
.estado-select .estado-select-item.active {
  background-color: transparent;
}
.estado-select .estado-select-item.active > div {
  border: 1px solid currentColor;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767.98px) {
  .estado-chips.pill-listado-wrapper {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .reclamaciones-search-row:has(.estado-select) {
    flex: 1 1 100%;
    width: 100%;
  }
}
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
.navbar-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem 1rem;
  background-color: #FFFFFF;
  box-shadow: none;
  position: sticky;
  z-index: 50;
  top: 0;
}
.navbar-custom .navbar-menu {
  font-size: 24px;
  cursor: pointer;
  padding: 0 5px;
}

.navbar-custom .navbar-content {
  display: flex;
}

.navbar-custom .navbar-user > a,
.navbar-custom .navbar-prom {
  display: flex;
  color: #242424;
  align-items: center;
  text-decoration: none;
  font-size: 16px !important;
}
@media (max-width: 399.98px) {
  .navbar-custom .navbar-user > a,
  .navbar-custom .navbar-prom {
    padding-right: 8px;
    border-radius: 4px;
    color: var(--token-brand-primary-darker);
    background-color: var(--token-brand-primary-lighter);
  }
}

.navbar-custom .navbar-user .user-box,
.navbar-menu {
  background-color: var(--token-brand-primary-lighter);
  color: var(--token-brand-primary-darker);
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
}

.navbar-custom .navbar-user .user-box,
.navbar-custom .navbar-prom .prom-box,
.navbar-menu {
  /*        box-shadow: 0 0 1rem 0 rgb(0 0 0 / 5%);*/
  height: 42px;
  width: 42px;
  text-align: center;
  line-height: 42px;
  border-radius: 4px;
  user-select: none;
}
.navbar-custom .navbar-user span:nth-child(2),
.navbar-custom .navbar-prom span:nth-child(2) {
  font-size: 12px;
  color: #747474;
}

.dropdown-item {
  font-family: "DM Sans", sans-serif;
  color: #242424;
}

.dropdown-item:focus, .dropdown-item:hover {
  color: #242424;
  background-color: #BFBFBF;
  border-radius: 4px;
}

.dropdown-item:active {
  color: #FFFFFF;
  background-color: #242424;
  border-radius: 4px;
}

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.3rem 0.5rem;
  margin: 0;
  font-size: 1rem;
  color: #242424;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: none;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  border-radius: 0 0 2px;
}

@media (max-width: 399.98px) {
  .dropdown .navbar-user {
    display: flex;
    color: var(--token-brand-primary-darker);
    background-color: var(--token-brand-primary-lighter);
  }
}

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.sidenav {
  min-width: 250px;
  max-width: 250px;
  border: none;
  /*    box-shadow: 0 0 2rem 0 rgb(0 0 0 / 3%);*/
  display: flex;
  background-color: #FFFFFF;
  flex-direction: column;
  overflow: hidden;
  transition: margin-left ease 0.3s;
}

.sidenav.toggle {
  margin-left: -250px;
}

.sidenav .sidenav-marca {
  padding: 1rem;
  display: block;
  text-align: left;
}

.sidenav .sidenav-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.sidenav .sidenav-content ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.sidenav .sidenav-content li {
  padding: 0.2rem 0.6rem;
}

.sidenav .sidenav-content li.menu-sep,
.navbar-content .sep {
  border: 1px solid rgba(0, 62, 82, 0.2);
  margin: 0 1.5rem;
  padding: 0;
}

.sidenav .nav-link {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #242424;
  border-radius: 4px; /*
padding: 0.5rem 1.5rem;*/
  text-align: start;
}

.sidenav button.nav-link {
  width: 100%;
  border: 0;
  background-color: transparent;
}

.sidenav .nav-link:hover {
  background-color: var(--token-brand-primary-lighter);
}

.sidenav .nav-link:active {
  background-color: var(--token-brand-primary-light-med);
}

.sidenav .sidenav-content li.active .nav-link {
  color: var(--token-brand-primary-darker);
  background-color: var(--token-brand-primary-lighter);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.sidenav .nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  white-space: nowrap;
}

.sidenav .nav-link .material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  user-select: none;
}

.sidenav li.active .nav-link .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #656565;
  white-space: nowrap;
}

/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
.btn, .boton-toolbar-letra, .boton-toolbar-signo, .boton-toolbar, .k-upload-button, .k-button-solid-base, .k-button-solid-primary, .btn-outline-primary, .btn-icon-brand, .btn-contextual-secundario, .btn-contextual, .btn-tertiary, .btn-outline-danger, .btn-secondary, .radio-button-group .k-radio:active + .k-radio-label,
.radio-button-group .k-radio:checked + .k-radio-label, .btn-primary, .btn-cta {
  text-decoration: none;
  display: inline-flex;
  padding: 8px 8px;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
}
@media (max-width: 399.98px) {
  .btn, .boton-toolbar-letra, .boton-toolbar-signo, .boton-toolbar, .k-upload-button, .k-button-solid-base, .k-button-solid-primary, .btn-outline-primary, .btn-icon-brand, .btn-contextual-secundario, .btn-contextual, .btn-tertiary, .btn-outline-danger, .btn-secondary, .radio-button-group .k-radio:active + .k-radio-label,
  .radio-button-group .k-radio:checked + .k-radio-label, .btn-primary, .btn-cta {
    padding: 8px 4px;
  }
}

.btn-cta {
  background-color: var(--token-brand-default);
  color: #FFFFFF;
  border: 1px solid var(--token-brand-default);
}
.btn-cta:hover, .btn-cta:focus {
  background-color: var(--token-brand-hover);
  color: #FFFFFF;
  border: 1px solid var(--token-brand-hover);
}
.btn-cta:active {
  background-color: var(--token-brand-active);
  color: #FFFFFF;
  border: 1px solid var(--token-brand-active);
}
.btn-cta:disabled {
  background-color: var(--token-brand-disabled);
  color: #929292;
  border: 1px solid var(--token-brand-disabled);
}
@media (max-width: 399.98px) {
  .btn-cta {
    padding: 8px 8px;
    /*flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
    text-align: center;

    span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }*/
  }
}

.btn-primary {
  background-color: #242424;
  color: #FFFFFF;
  border: 1px solid #242424;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #FFFFFF;
  color: #242424;
  border: 1px solid #242424;
}
.btn-primary:active {
  background-color: #121212;
  color: #FFFFFF;
}
.btn-primary:disabled {
  background-color: #E6E6E6;
  color: #AAAAAA;
}

.btn-secondary, .radio-button-group .k-radio:active + .k-radio-label,
.radio-button-group .k-radio:checked + .k-radio-label {
  background-color: #FFFFFF;
  color: #313131;
  border: 1px solid #313131;
}
.btn-secondary:hover, .radio-button-group .k-radio:active + .k-radio-label:hover,
.radio-button-group .k-radio:checked + .k-radio-label:hover, .btn-secondary:focus, .radio-button-group .k-radio:active + .k-radio-label:focus,
.radio-button-group .k-radio:checked + .k-radio-label:focus {
  background-color: #313131;
  color: #FFFFFF !important;
}
.btn-secondary:active, .radio-button-group .k-radio:active + .k-radio-label:active,
.radio-button-group .k-radio:checked + .k-radio-label:active {
  background-color: #313131;
  color: #FFFFFF;
}
.btn-secondary:disabled, .radio-button-group .k-radio:active + .k-radio-label:disabled,
.radio-button-group .k-radio:checked + .k-radio-label:disabled {
  background-color: #F2F2F2;
  color: #AAAAAA;
}

.btn-outline-danger {
  background-color: #FFFFFF;
  color: #E52020;
  border: 1px solid #E52020;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: #E52020;
  color: #FFFFFF !important;
}
.btn-outline-danger:active {
  background-color: #8B1010;
  color: #FFFFFF;
}
.btn-outline-danger:disabled {
  background-color: #F2F2F2;
  color: #AAAAAA;
  border-color: #AAAAAA;
}

.btn-eliminar-seleccion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  font-size: 20px;
  background-color: #FFFFFF;
  color: #E52020;
  border: 1px solid #E52020;
}
.btn-eliminar-seleccion:hover, .btn-eliminar-seleccion:focus {
  background-color: #E52020;
  color: #FFFFFF;
}
.btn-eliminar-seleccion:active {
  background-color: #8B1010;
  color: #FFFFFF;
}
.btn-eliminar-seleccion:disabled {
  background-color: #FFFFFF;
  color: #AAAAAA;
  border-color: #E6E6E6;
  cursor: default;
}

.btn-tertiary {
  width: 100%;
  background-color: transparent;
  color: #242424;
  border: 0;
}
.btn-tertiary:hover, .btn-tertiary:focus {
  background-color: #E6E6E6;
  color: #121212;
  font-weight: 500;
}
.btn-tertiary:active {
  background-color: #585858;
  color: #FFFFFF;
  font-weight: 500;
}
.btn-tertiary:disabled {
  background-color: transparent;
  color: #929292;
}

.btn-contextual {
  cursor: pointer;
  border-radius: 8px;
  padding-left: 8px;
  border: 0;
  padding-right: 8px;
  background-color: transparent;
  color: #585858;
}
.btn-contextual:hover, .btn-contextual:focus {
  background-color: #BFBFBF;
  color: #313131;
}
.btn-contextual:active {
  background-color: #585858;
  color: #F2F2F2;
}
.btn-contextual:disabled {
  background-color: #E6E6E6;
  color: #AAAAAA;
}

.btn-contextual-secundario {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  background-color: transparent;
  color: #585858;
}
.btn-contextual-secundario:hover, .btn-contextual-secundario:focus {
  background-color: #E6E6E6;
  color: #313131;
}
.btn-contextual-secundario:active {
  background-color: #585858;
  color: #F2F2F2;
}
.btn-contextual-secundario:disabled {
  background-color: #E6E6E6;
  color: #AAAAAA;
}

@media (max-width: 767.98px) {
  .btn-contextual,
  .btn-contextual-secundario {
    text-decoration: underline;
  }
}
.btn-icon-brand {
  color: var(--token-brand-default);
}
.btn-icon-brand:hover, .btn-icon-brand:focus {
  color: var(--token-brand-hover);
}
.btn-icon-brand:active {
  color: var(--token-brand-active);
}
.btn-icon-brand:disabled {
  color: var(--token-brand-disabled);
}

.btn-outline-primary {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  background-color: transparent;
  color: #585858;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: #E6E6E6;
  color: #313131;
}
.btn-outline-primary:active {
  background-color: #585858;
  color: #F2F2F2;
}
.btn-outline-primary:disabled {
  background-color: #E6E6E6;
  color: #AAAAAA;
}

.k-button-solid-primary {
  background-color: #FFFFFF;
  color: #313131;
  border: 1px solid #313131 !important;
}
.k-button-solid-primary:hover, .k-button-solid-primary:focus {
  background-color: #313131;
  color: #F2F2F2;
}
.k-button-solid-primary:active {
  background-color: #313131;
  color: #FFFFFF;
}
.k-button-solid-primary:disabled {
  background-color: #F2F2F2;
  color: #AAAAAA;
}

.k-button-solid-base {
  background-color: #FFFFFF;
  color: #313131;
  border: 1px solid #313131 !important;
}
.k-button-solid-base:hover, .k-button-solid-base:focus {
  background-color: #313131;
  color: #F2F2F2;
}
.k-button-solid-base:active {
  background-color: #313131;
  color: #FFFFFF;
}
.k-button-solid-base:disabled {
  background-color: #F2F2F2;
  color: #AAAAAA;
}

.k-radio:checked, .k-radio.k-checked {
  border-color: #096BFF !important;
  color: white !important;
  background-color: #096BFF !important;
}

@media (max-width: 767.98px) {
  .boton-toolbar.boton-toolbar--bloque-movil {
    width: 100%;
    justify-content: center;
  }
  .boton-toolbar.boton-toolbar--bloque-movil .boton-toolbar-letra {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/*
    Fila de ajuste (design.md 11.6): titulo + explicacion a la izquierda y un control
    (switch, boton, campo...) a la derecha.

        .fila-ajuste                 rejilla: [texto de ancho fijo] [hueco] [control]
          .fila-ajuste-copy          titulo + explicacion (una fila de la rejilla cada uno)
          .fila-ajuste-control       el switch / boton / campo

    Por defecto el control va SIEMPRE a la derecha del texto, tambien en movil (la columna
    de texto se estrecha y la explicacion ocupa mas lineas): es lo que se quiere para los
    switches. Para controles anchos (botones, campos, fechas) o switches con etiqueta sin
    explicacion, .fila-ajuste--apilar hace que en movil bajen debajo del texto.
*/
.fila-ajuste {
  display: grid;
  grid-template-columns: minmax(0, 800px) auto;
  justify-content: start;
  align-items: center;
  column-gap: clamp(24px, 7%, 64px);
  row-gap: 12px;
}

.fila-ajuste-copy {
  display: contents;
}
.fila-ajuste-copy > * {
  grid-column: 1;
  margin: 0 !important;
}
.fila-ajuste-copy .parrafo-basico {
  font-size: 15px;
  line-height: 22px;
}

.fila-ajuste-control {
  grid-column: 2;
  grid-row: 1;
}

.fila-ajuste:has(> .fila-ajuste-copy > :nth-child(2)) > .fila-ajuste-control {
  grid-row: 1/span 2;
}

@media (max-width: 767.98px) {
  .fila-ajuste {
    align-items: start;
  }
  .fila-ajuste:has(> .fila-ajuste-copy > :nth-child(2)) > .fila-ajuste-control {
    grid-row: 2;
  }
  .fila-ajuste--apilar {
    grid-template-columns: minmax(0, 1fr);
  }
  .fila-ajuste--apilar > .fila-ajuste-control, .fila-ajuste--apilar:has(> .fila-ajuste-copy > :nth-child(2)) > .fila-ajuste-control {
    grid-column: 1;
    grid-row: auto;
    width: 100% !important;
  }
  .fila-ajuste--apilar > .btn.fila-ajuste-control, .fila-ajuste--apilar > .fila-ajuste-control.boton-toolbar-letra, .fila-ajuste--apilar > .fila-ajuste-control.boton-toolbar-signo, .fila-ajuste--apilar > .fila-ajuste-control.boton-toolbar, .fila-ajuste--apilar > .fila-ajuste-control.k-upload-button, .fila-ajuste--apilar > .fila-ajuste-control.btn-cta, .fila-ajuste--apilar > .fila-ajuste-control.btn-primary, .fila-ajuste--apilar > .fila-ajuste-control.btn-secondary, .radio-button-group .fila-ajuste--apilar > .k-radio:active + .fila-ajuste-control.k-radio-label,
  .radio-button-group .fila-ajuste--apilar > .k-radio:checked + .fila-ajuste-control.k-radio-label, .fila-ajuste--apilar > .fila-ajuste-control.btn-outline-danger, .fila-ajuste--apilar > .fila-ajuste-control.btn-tertiary, .fila-ajuste--apilar > .fila-ajuste-control.btn-contextual, .fila-ajuste--apilar > .fila-ajuste-control.btn-contextual-secundario, .fila-ajuste--apilar > .fila-ajuste-control.btn-icon-brand, .fila-ajuste--apilar > .fila-ajuste-control.btn-outline-primary, .fila-ajuste--apilar > .fila-ajuste-control.k-button-solid-primary, .fila-ajuste--apilar > .fila-ajuste-control.k-button-solid-base {
    justify-content: center;
  }
}
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/*
    Tarjeta de subida de archivo (PDF de ayuda, Logotipo, Foto de inicio en Promociones):
    la cabecera es una fila de ajuste (design.md 11.6) en la vista:
        <div class="upload-card-header fila-ajuste fila-ajuste--apilar">
            <div class="">titulo + descripcion</div>
            <div class="fila-ajuste-control">@(Html.Kendo().Upload()...)</div>
        </div>
    y debajo de una linea divisoria, si hay archivo, una fila con icono + nombre + peso +
    boton para quitarlo.

    El Html.Kendo().Upload() de cada campo se deja en el DOM (Editar.ts sigue leyendo el
    archivo elegido via $("#Id").data("kendoUpload").getFiles()) pero solo se le deja ver el
    boton de seleccionar: el resto del dropzone de Kendo (icono, texto de arrastrar) se oculta.
*/
.upload-card .k-upload {
  display: inline-flex !important;
  width: auto !important;
}

.upload-card .k-upload .k-dropzone {
  padding: 0;
  border: 0;
  background: none;
}

.upload-card .k-upload .k-dropzone-hint,
.upload-card .k-upload .k-upload-status,
.upload-card .k-upload .k-upload-files {
  display: none !important;
}

.upload-card .k-upload-button {
  margin: 0;
}

.upload-card--lista .fila-ajuste-control,
.upload-card--lista .k-upload {
  display: contents !important;
}

.upload-card--lista .k-upload .k-dropzone {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
}

.upload-card--lista .k-upload .k-upload-files {
  display: block !important;
  grid-column: 1/-1;
  margin: 0;
}

#PdfAyuda .k-upload-button {
  background-color: #242424;
  color: #FFFFFF;
  border: 1px solid #242424;
}
#PdfAyuda .k-upload-button:hover, #PdfAyuda .k-upload-button:focus {
  background-color: #FFFFFF;
  color: #242424;
  border: 1px solid #242424;
}

.upload-card-file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #F2F2F2;
}
.upload-card-file[hidden] {
  display: none;
}

.upload-card-file-icon {
  flex-shrink: 0;
  font-size: 28px;
  color: #757575;
}

.upload-card-file-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.upload-card-file-name {
  color: #242424;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-card-file-name:hover, .upload-card-file-name:focus {
  text-decoration: underline;
}

.upload-card-file-size {
  font-size: 13px;
  color: #757575;
}

.upload-card-file-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #585858;
  border-radius: 4px;
  cursor: pointer;
}
.upload-card-file-remove:hover, .upload-card-file-remove:focus {
  background-color: #F2F2F2;
  color: #313131;
}

@media (max-width: 767.98px) {
  .upload-card-header .k-upload,
  .upload-card-header .k-upload .k-dropzone,
  .upload-card-header .k-upload .k-dropzone * {
    width: 100% !important;
  }
  .upload-card-header .k-upload-button {
    justify-content: center;
    text-align: center;
  }
  .upload-card--lista .k-upload .k-dropzone {
    grid-column: 1;
    grid-row: auto;
  }
}
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/*
    (PRONTO EJEMPLOS EN FIGMA)
    H1 - Para títulos de página
    H2 - Para títulos de secciones
    H3 - Para títulos de subsecciones
    H4 - Para títulos de apartados
    h5 para swiches de confug
    ---
    Parrafo-basico - Para texto
    Parrafo-small - Para texto pequeño (usar poco)
    Label-on - Para inputs vacíos
    Label-off - Para el resultado de inputs
    Badge - para las pastillas de los estados
    Boton-text - Para el texto de los botones
    Tab-text - Para el texto de las tabs


*/
.h1 {
  font-family: "DM Sans", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
}
@media (max-width: 399.98px) {
  .h1 {
    font-size: 22px;
    line-height: 32px;
  }
}

.h2 {
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .h2 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px;
  }
}

.h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .h3 {
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 10px;
  }
}

.h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .h4 {
    font-size: 15px;
    line-height: 24px;
  }
}

.h5 {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 8px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .h5 {
    font-size: 15px;
    line-height: 24px;
  }
}

.label-on {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}
@media (max-width: 399.98px) {
  .label-on {
    font-size: 12px;
    line-height: 17px;
  }
}

.label-off {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}
@media (max-width: 399.98px) {
  .label-off {
    font-size: 14px !important;
    line-height: 17px;
  }
}

.form-info {
  color: #636363;
  padding-top: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}

.parrafo-basico {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .parrafo-basico {
    font-size: 13px;
    line-height: 19px;
  }
}

.parrafo-small {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
}
@media (max-width: 399.98px) {
  .parrafo-small {
    font-size: 12px;
    line-height: 16px;
  }
}

.boton-text, .boton-toolbar, .filtro-mobile-title, .btn, .boton-toolbar-letra, .boton-toolbar-signo, .k-upload-button, .btn-cta, .btn-primary, .btn-secondary, .radio-button-group .k-radio:active + .k-radio-label,
.radio-button-group .k-radio:checked + .k-radio-label, .btn-outline-danger, .btn-tertiary, .btn-contextual, .btn-contextual-secundario, .btn-icon-brand, .btn-outline-primary, .k-button-solid-primary, .k-button-solid-base, .upload-card-file-name {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}
@media (max-width: 399.98px) {
  .boton-text, .boton-toolbar, .filtro-mobile-title, .btn, .boton-toolbar-letra, .boton-toolbar-signo, .k-upload-button, .btn-cta, .btn-primary, .btn-secondary, .radio-button-group .k-radio:active + .k-radio-label,
  .radio-button-group .k-radio:checked + .k-radio-label, .btn-outline-danger, .btn-tertiary, .btn-contextual, .btn-contextual-secundario, .btn-icon-brand, .btn-outline-primary, .k-button-solid-primary, .k-button-solid-base, .upload-card-file-name {
    font-size: 14px;
    line-height: 19px;
  }
}

.tab-text {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
@media (max-width: 399.98px) {
  .tab-text {
    font-size: 13px;
    line-height: 19px;
  }
}

.badge {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
@media (max-width: 399.98px) {
  .badge {
    font-size: 13px;
    line-height: 19px;
  }
}

/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
.container-tabla-cabecera {
  max-width: none;
  width: auto;
  background-color: #FFFFFF;
  border-radius: 8px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 20px;
  margin-top: 30px;
}

.container.container-tabla-cabecera,
.container-lg.container-tabla-cabecera {
  max-width: none;
}

.cabecera-tabla {
  background-color: #FFFFFF;
  border-radius: 8px;
  display: flex;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
  color: #FFFFFF;
  background-color: #656565;
}

.k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
  color: #242424;
  background-color: #D6D6D6;
}

.k-button-flat-primary {
  color: var(--token-brand-primary-dark);
}

.form-control:focus {
  color: #212529;
  background-color: #fff;
  border: 1px solid;
  border-color: #BFBFBF;
  outline: 0;
  /*  box-shadow: 0 0 0 .25rem rgb(181, 181, 181, 0,45);*/
}

.k-expander {
  border-width: 0px;
  border-style: none;
  border: none;
  box-sizing: border-box;
  overflow: hidden;
  outline: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  color: #313131;
  display: flex;
  flex-direction: column;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0;
  background-color: #FFFFFF;
}
@media (max-width: 399.98px) {
  .k-expander {
    font-size: 20px;
    line-height: 30px;
  }
}

.k-expander-content {
  font-size: 15px;
  line-height: 1.5;
}

.k-tabstrip-top {
  border: none;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper {
  border: none;
  background: transparent;
  display: flex;
  margin-top: 0 !important;
  gap: 20px;
  padding: 4px;
  flex-wrap: wrap;
  justify-content: start;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
  font-weight: 400;
  margin: 0;
  border: 1px solid #005BE4;
  border-radius: 12px;
  background-color: #FFFFFF;
  padding: 4px;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item .k-link {
  padding-block: var(--kendo-spacing-1\.5, 0.375rem);
  padding-inline: var(--kendo-spacing-3, 0.75rem);
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;
  flex: 0 0 auto;
  padding: 0 4px;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 10px;
  color: #005BE4;
  background-color: #FFFFFF;
  border: none;
  border-radius: 8px;
  text-decoration: none;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item .k-link:hover {
  background-color: #004FC7;
  color: #FFFFFF;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item .k-link:visited {
  color: #005BE4;
  background-color: #FFFFFF;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:hover {
  border: 1px solid #005BE4;
  background-color: #005BE4;
  color: #FFFFFF;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:hover .k-link {
  color: #FFFFFF;
  background-color: #005BE4;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:hover .k-link:visited {
  color: #FFFFFF;
  background-color: #005BE4;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-selected {
  border: 1px solid #005BE4 !important;
  background-color: #005BE4 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  padding: 4px !important;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active .k-link, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active .k-link, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-selected .k-link {
  color: #FFFFFF !important;
  background-color: #005BE4 !important;
  border: none !important;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active .k-link:visited, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active .k-link:visited, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-selected .k-link:visited {
  color: #FFFFFF !important;
  background-color: #005BE4 !important;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active:hover, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active:hover, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-selected:hover {
  border: 1px solid #005BE4 !important;
  background-color: #005BE4 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
}
.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active:hover .k-link, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active:hover .k-link, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-selected:hover .k-link {
  color: #FFFFFF !important;
  background-color: #005BE4 !important;
  border: none !important;
}

.k-tabstrip-content {
  border: none;
  background: transparent;
  padding: 20px 10px;
}

.k-tabstrip-items-start {
  padding-top: 20px;
  gap: 10px;
  justify-content: center;
}

.tab-nav-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  --tab-accent: #003F9D;
}
.tab-nav-wrapper.tab-nav-wrapper--nested {
  --tab-accent: #2C80FF;
}
.tab-nav-wrapper .nav-pills {
  flex: 1;
  flex-wrap: wrap;
  gap: 20px;
  padding: 4px;
  justify-content: flex-start;
}
.tab-nav-wrapper .nav-pills .nav-link {
  border: 1px solid var(--tab-accent);
  border-radius: 16px;
  color: var(--tab-accent);
  background-color: #FFFFFF;
  font-weight: 400;
  padding: 4px 8px;
  white-space: nowrap;
}
.tab-nav-wrapper .nav-pills .nav-link:hover {
  background-color: var(--tab-accent);
  color: #FFFFFF;
}
.tab-nav-wrapper .nav-pills .nav-link.active {
  background-color: var(--tab-accent);
  color: #FFFFFF;
  border-color: var(--tab-accent);
}
.tab-nav-wrapper .tab-nav-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--tab-accent);
  border-radius: 16px;
  background-color: #FFFFFF;
  color: var(--tab-accent);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.tab-nav-wrapper .tab-nav-arrow:hover:not(:disabled) {
  background-color: var(--tab-accent);
  color: #FFFFFF;
}
.tab-nav-wrapper .tab-nav-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 767.98px) {
  .tab-nav-wrapper .tab-nav-arrow {
    display: flex;
  }
  .tab-nav-wrapper:not(.tab-nav-wrapper--nested) .nav-pills {
    overflow: hidden;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
  }
  .tab-nav-wrapper:not(.tab-nav-wrapper--nested) .nav-pills .nav-item {
    display: none;
    flex: 1;
  }
  .tab-nav-wrapper:not(.tab-nav-wrapper--nested) .nav-pills .nav-item:has(.nav-link.active) {
    display: flex;
  }
  .tab-nav-wrapper:not(.tab-nav-wrapper--nested) .nav-pills .nav-link {
    width: 100%;
    text-align: center;
    justify-content: center;
    border-radius: 16px;
  }
  .tab-nav-wrapper.tab-nav-wrapper--center .nav-pills {
    overflow: visible;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .tab-nav-wrapper.tab-nav-wrapper--center .nav-pills .nav-item {
    display: flex;
  }
  .tab-nav-wrapper.tab-nav-wrapper--center .tab-nav-arrow {
    display: none;
  }
  .tab-nav-wrapper.tab-nav-wrapper--nested .nav-pills {
    overflow: hidden;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .tab-nav-wrapper.tab-nav-wrapper--nested .nav-pills .nav-item {
    display: none;
    flex: 1;
  }
  .tab-nav-wrapper.tab-nav-wrapper--nested .nav-pills .nav-item.tabnav-visible {
    display: flex;
  }
  .tab-nav-wrapper.tab-nav-wrapper--nested .nav-pills .nav-link {
    width: 100%;
    text-align: center;
    justify-content: center;
    border-radius: 16px;
  }
}

.tab-select {
  --tab-accent: #003F9D;
  position: relative;
}
.tab-select.tab-select--nested {
  --tab-accent: #2C80FF;
}
.tab-select .tab-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 16px;
  border: 1px solid var(--tab-accent);
  border-radius: 16px;
  background-color: var(--tab-accent);
  color: #FFFFFF;
  font-weight: 500;
  text-align: left;
}
.tab-select .tab-select-toggle .bi {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.tab-select .tab-select-toggle[aria-expanded=true] .bi {
  transform: rotate(180deg);
}
.tab-select .tab-select-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(9, 107, 255, 0.25);
}
.tab-select .tab-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-select .tab-select-menu {
  width: 100%;
  min-width: 0;
  margin-top: 4px;
  padding: 4px;
  border: 1px solid var(--tab-accent);
  border-radius: 12px;
}
.tab-select .tab-select-menu .dropdown-item {
  border-radius: 8px;
  white-space: normal;
}
.tab-select .tab-select-menu .dropdown-item:hover, .tab-select .tab-select-menu .dropdown-item:focus {
  background-color: #EBF3FF;
  color: var(--tab-accent);
}
.tab-select .tab-select-menu .dropdown-item.active, .tab-select .tab-select-menu .dropdown-item:active {
  background-color: var(--tab-accent);
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .tab-nav-wrapper--center .nav-pills,
  .tab-nav-wrapper--nested .nav-pills {
    justify-content: flex-start;
  }
  .tab-nav-wrapper--nested .nav-pills {
    margin-inline-start: 20px;
  }
  .tab-nav-wrapper--nested .nav-pills .nav-link {
    font-size: 13px;
  }
}
@media (max-width: 767.98px) {
  .k-tabstrip-top > .k-tabstrip-items-wrapper {
    gap: 4px;
    padding: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  .k-tabstrip-items-start {
    justify-content: flex-start;
  }
  .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
    margin: 0 !important;
    padding: 2px !important;
    flex-shrink: 0;
    min-width: fit-content;
  }
  .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item .k-link {
    padding: 4px 8px !important;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    flex: 0 0 auto !important;
  }
}
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/* ============================================
   MODERN KENDO TABLES - SIN BORDES REDONDEADOS
   ============================================ */
/* Grid Container */
.k-grid {
  border: 1px solid #E6E6E6;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Remove default Kendo borders */
  border-radius: 0;
}
.k-grid, .k-grid-pane-wrapper, .k-grid-view,
.k-grid .k-pane-wrapper .k-pane > .k-view > .k-content,
.k-grid .k-pane-wrapper .k-grid-edit-form .k-edit-form-container,
.k-grid .k-grid-toolbar {
  border: none;
  background-color: transparent;
}

/* Header */
.k-grid-header {
  background-color: #F2F2F2;
  border-bottom: 2px solid #E6E6E6;
  /* Filter row if present */
}
.k-grid-header th {
  border-right: 1px solid #E6E6E6;
  padding: 16px 12px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #313131;
  text-align: left;
  background-color: #F2F2F2;
  /* Corners without rounded borders */
}
.k-grid-header th:last-child {
  border-right: none;
}
.k-grid-header th.first-cell {
  border-radius: 0;
}
.k-grid-header th.last-cell {
  border-radius: 0;
}
.k-grid-header .k-filter-row th {
  padding: 8px 12px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E6E6E6;
}

/* Table Rows */
.k-grid-content {
  background-color: #FFFFFF;
}
.k-grid-content table {
  border-collapse: collapse;
}
.k-grid-content tr {
  border-bottom: 1px solid #F2F2F2;
}
.k-grid-content tr:hover {
  background-color: #F2F2F2;
}
.k-grid-content tr.k-alt {
  background-color: #FFFFFF;
  box-shadow: none;
}
.k-grid-content tr.k-state-selected, .k-grid-content tr.k-selected {
  background-color: #EBF3FF;
}
.k-grid-content tr.k-state-selected td, .k-grid-content tr.k-selected td {
  color: #121212;
  font-weight: 500;
}
.k-grid-content td {
  border-right: 1px solid #F2F2F2;
  padding: 14px 12px;
  font-size: 0.9rem;
  color: #313131;
}
.k-grid-content td:last-child {
  border-right: none;
}
.k-grid-content td.first-cell {
  border-radius: 0;
}
.k-grid-content td.last-cell {
  border-radius: 0;
}

.k-grid td.k-selected, .k-grid .k-table-row.k-selected > td, .k-grid .k-table-td.k-selected, .k-grid .k-table-row.k-selected > .k-table-td {
  background-color: #E6E6E6;
}

/* Pager */
.k-grid-pager {
  background-color: #F2F2F2;
  border-top: 1px solid rgba(214, 214, 214, 0.1);
  padding: 12px 16px;
}
.k-grid-pager .k-pager-info {
  color: #656565;
  font-size: 0.85rem;
}
.k-grid-pager .k-pager-nav button {
  border: 1px solid #E6E6E6;
  background-color: #FFFFFF;
  color: #313131;
}
.k-grid-pager .k-pager-nav button:hover {
  background-color: #F2F2F2;
}
.k-grid-pager .k-pager-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toolbar */
.k-grid-toolbar {
  background-color: #FFFFFF;
  border-bottom: 1px solid #E6E6E6;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Command Cells */
.k-command-cell {
  padding: 8px 12px;
}
.k-command-cell button, .k-command-cell a {
  margin: 0 4px;
}
.k-command-cell button:last-child, .k-command-cell a:last-child {
  margin-right: 0;
}

/* Edit Form */
.k-grid-edit-form {
  border: 1px solid #E6E6E6;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.k-grid-edit-form .k-header {
  background-color: #313131 !important;
  color: #FFFFFF;
  padding: 16px;
  font-weight: 600;
  border-bottom: none;
}
.k-grid-edit-form .k-edit-form-container {
  padding: 20px;
  width: 100%;
  min-width: 0;
  max-width: 600px;
}

.k-window-actions > [ref-update-button] .k-button-icon,
.k-window-actions > [ref-cancel-button] .k-button-icon {
  display: none;
}
.k-window-actions > [ref-update-button] {
  background-color: #242424;
  color: #FFFFFF;
  border-color: #242424 !important;
}
.k-window-actions > [ref-update-button]:hover, .k-window-actions > [ref-update-button]:focus {
  background-color: #FFFFFF;
  color: #242424;
}
.k-window-actions > [ref-update-button]:active {
  background-color: #121212;
  color: #FFFFFF;
}
.k-window-actions > [ref-cancel-button]:hover, .k-window-actions > [ref-cancel-button]:focus {
  background-color: #313131;
  color: #FFFFFF;
}
.k-window-actions > [ref-cancel-button]:active {
  background-color: #313131;
  color: #FFFFFF;
}

/* Hierarchy & Grouping */
.k-hierarchy-cell {
  border-radius: 0;
  padding: 14px 12px;
  width: 40px;
  text-align: center;
}
.k-hierarchy-cell > .k-icon {
  padding: 0;
  line-height: 1;
}

.k-grouping-row {
  background-color: #F2F2F2;
  font-weight: 600;
}
.k-grouping-row td {
  padding: 12px 16px;
}

/* Sorting Indicators */
.k-grid-header .k-link {
  display: flex;
  align-items: center;
  gap: 6px;
}
.k-grid-header .k-link .k-icon {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Loading Indicator */
.k-loading-image {
  background: none;
}
.k-loading-image::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #E6E6E6;
  border-radius: 50%;
  border-top-color: #313131;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* No Records Template */
.k-grid-norecords {
  background-color: #FFFFFF;
  padding: 40px 20px;
  text-align: center;
  color: #929292;
}
.k-grid-norecords .k-norecords {
  font-size: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
  .k-grid-header th {
    padding: 12px 8px;
    font-size: 0.85rem;
  }
  .k-grid-content td {
    padding: 12px 8px;
    font-size: 0.85rem;
  }
  .k-command-cell {
    padding: 8px 4px;
  }
  .k-grid-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }
}
@media (max-width: 399.98px) {
  .k-grid-header th {
    padding: 10px 6px;
    font-size: 0.8rem;
  }
  .k-grid-content td {
    padding: 10px 6px;
    font-size: 0.8rem;
  }
  .k-grid-pager {
    padding: 8px 12px;
  }
  .k-grid-pager .k-pager-info {
    font-size: 0.8rem;
  }
}
/* Disabled State */
.k-grid[disabled],
.k-grid.k-state-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Selection Checkbox */
.k-grid .k-checkbox {
  margin: 0;
  transform: scale(1.1);
}

/* Row Striping Alternative */
.k-grid-content tbody > tr:nth-child(even) {
  background-color: #F2F2F2;
}

/* Hover State on Commands */
.k-command-cell button:hover,
.k-command-cell a:hover {
  background-color: #F2F2F2;
  border-color: #D6D6D6;
}

/* ===== BORDE IZQUIERDO PARA FILAS DEL GRID ===== */
/* Estilos para filas con borde izquierdo coloreado segun estado */
.k-grid tbody tr.row-estado-abierta {
  border-left: 4px solid #B01414;
  padding-left: 0 !important;
}
.k-grid tbody tr.row-estado-cerrada {
  border-left: 4px solid #03670F;
  padding-left: 0 !important;
}
.k-grid tbody tr.row-estado-realizada {
  border-left: 4px solid #FF5B29;
  padding-left: 0 !important;
}
.k-grid tbody tr.row-estado-bloqueada {
  border-left: 4px solid #585858;
  padding-left: 0 !important;
}
.k-grid tbody tr.row-estado-pendiente {
  border-left: 4px solid #FF5B29;
  padding-left: 0 !important;
}
.k-grid tbody tr.row-estado-noprocede {
  border-left: 4px solid #004FC7;
  padding-left: 0 !important;
}
.k-grid tbody tr.row-estado-desestimada {
  border-left: 4px solid #004FC7;
  padding-left: 0 !important;
}

/* No necesita compensar el padding - el borde es parte del disenioo */
.k-grid tbody tr td:first-child {
  padding-left: 12px; /* Mantener el padding original */
}

.k-grid a {
  color: #242424;
  text-decoration: none;
}
.k-grid a:hover, .k-grid a:focus {
  color: #121212;
}

.k-button-icon {
  color: #454545;
  text-decoration: none;
}
.k-button-icon:hover, .k-button-icon:focus {
  color: #242424;
}

.btn-icon-red {
  color: #E52020 !important;
  text-decoration: none;
}
.btn-icon-red:hover, .btn-icon-red:focus {
  color: #C91717 !important;
}

.k-grid .k-command-cell .k-button.k-icon-button:not(.k-grid-save-command) {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.k-grid .k-command-cell .k-button.k-icon-button:not(.k-grid-save-command):hover, .k-grid .k-command-cell .k-button.k-icon-button:not(.k-grid-save-command):focus, .k-grid .k-command-cell .k-button.k-icon-button:not(.k-grid-save-command):active {
  color: #313131;
  background-color: #F2F2F2 !important;
}

.k-grid .k-command-cell .k-grid-save-command.k-icon-button {
  color: #FFFFFF;
  background-color: #121212 !important;
  border-color: #121212 !important;
}
.k-grid .k-command-cell .k-grid-save-command.k-icon-button .k-button-icon {
  color: #FFFFFF;
}

.k-grid .k-grid-edit-row .k-checkbox:checked,
.k-grid .k-grid-edit-row .k-checkbox.k-checked {
  background-color: var(--token-brand-default);
  border-color: var(--token-brand-default);
}
.k-grid .k-grid-edit-row input[type=checkbox]:not(.k-checkbox) {
  width: 1rem;
  height: 1rem;
  accent-color: var(--token-brand-default);
  transform: scale(1.1);
}

.k-icon .k-svg-icon .bi bi-save .k-button-icon {
  color: var(--token-brand-default);
  text-decoration: none;
  background-color: white;
  border: 1px solid transparent;
}
.k-icon .k-svg-icon .bi bi-save .k-button-icon:hover, .k-icon .k-svg-icon .bi bi-save .k-button-icon:focus {
  color: var(--token-brand-hover);
}

/* ============================================================
   GREMIOS/TIPOLOGIAS - Tabla de Capitulos + subtabla de Defectos
   ============================================================
   Los botones de Acciones se apilaban en movil por un problema de
   espacio, no de alineacion. Con las reglas que ya existian:
     .k-command-cell          -> padding 8px 12px  = 24px
     .k-command-cell button,a -> margin 0 4px      = ~12px
     .btn (buttons.scss)      -> padding 8px + icono 16px + borde
                                 = ~34px por boton
   Dos botones necesitaban 24 + 68 + 12 = ~104px dentro de una
   columna de 90px, asi que el segundo caia a la linea siguiente.
   La solucion es dar espacio suficiente y quitar los margenes
   sobrantes, no forzar la alineacion.
   ============================================================ */
.capitulos-grid .k-command-cell,
.capitulos-grid td.last-cell,
.defectos-grid .k-command-cell,
.defectos-grid td.last-cell {
  padding-inline: 4px;
  white-space: nowrap;
  text-align: left;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.capitulos-grid .k-command-cell > a,
.capitulos-grid .k-command-cell > button,
.capitulos-grid td.last-cell > a,
.capitulos-grid td.last-cell > button,
.defectos-grid .k-command-cell > a,
.defectos-grid .k-command-cell > button,
.defectos-grid td.last-cell > a,
.defectos-grid td.last-cell > button {
  margin: 0;
  flex: 0 0 auto;
}
.capitulos-grid .k-grid-content td.cell-ellipsis,
.defectos-grid .k-grid-content td.cell-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.capitulos-grid .k-grid-toolbar,
.defectos-grid .k-grid-toolbar {
  justify-content: flex-start;
}
@media (max-width: 991.98px) {
  .capitulos-grid .k-grid-header th,
  .capitulos-grid .k-grid-content td:not(.k-command-cell):not(.last-cell),
  .defectos-grid .k-grid-header th,
  .defectos-grid .k-grid-content td:not(.k-command-cell):not(.last-cell) {
    padding: 6px 8px;
    font-size: 0.85rem;
  }
  .capitulos-grid .k-grid-header .k-grid-filter,
  .capitulos-grid .k-grid-header .k-header-column-menu,
  .capitulos-grid .k-grid-header .k-grid-filter-menu,
  .capitulos-grid .k-grid-header .k-grid-header-menu,
  .defectos-grid .k-grid-header .k-grid-filter,
  .defectos-grid .k-grid-header .k-header-column-menu,
  .defectos-grid .k-grid-header .k-grid-filter-menu,
  .defectos-grid .k-grid-header .k-grid-header-menu {
    display: none;
  }
}

.capitulos-grid .k-grid-content table {
  table-layout: fixed;
}

.capitulos-grid .k-detail-cell {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8px 4px;
}

.detalle-cell-scroll {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.defectos-detalle {
  display: block;
  background-color: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 5px;
  padding: 8px 6px;
  box-sizing: border-box;
}

.defectos-grid .k-grid-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.defectos-grid .k-grid-header-wrap {
  overflow: hidden;
}

.capitulos-grid .k-hierarchy-cell {
  padding-inline: 2px;
  width: 24px;
}

.capitulos-grid .k-hierarchy-col {
  width: 32px;
}

.capitulos-grid,
.defectos-grid {
  container: grid-ficha/inline-size;
}

@container grid-ficha (max-width: 575.98px) {
  .capitulos-grid .k-grid-header,
  .defectos-grid .k-grid-header {
    display: none;
  }
  .capitulos-grid .k-grid-content,
  .capitulos-grid .detalle-cell-scroll,
  .defectos-grid .k-grid-content,
  .defectos-grid .detalle-cell-scroll {
    overflow: visible;
  }
  .capitulos-grid .k-grid-content > table,
  .defectos-grid .k-grid-content > table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }
  .capitulos-grid .k-grid-content > table > colgroup,
  .defectos-grid .k-grid-content > table > colgroup {
    display: none;
  }
  .capitulos-grid .k-grid-content > table > tbody,
  .defectos-grid .k-grid-content > table > tbody {
    display: block;
  }
  .capitulos-grid .k-grid-content tr.k-master-row,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row,
  .defectos-grid .k-grid-content tr.k-master-row,
  .defectos-grid .k-grid-content tr.k-grid-edit-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    background-color: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 5px;
    overflow: hidden;
  }
  .capitulos-grid .k-grid-content tr.k-master-row > td,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td,
  .defectos-grid .k-grid-content tr.k-master-row > td,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 8px 12px !important;
    font-size: inherit;
    text-align: right;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
    border: 0;
    border-bottom: 1px solid #E6E6E6;
    border-radius: 0 !important;
  }
  .capitulos-grid .k-grid-content tr.k-master-row > td:last-child,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td:last-child,
  .defectos-grid .k-grid-content tr.k-master-row > td:last-child,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td:last-child {
    border-bottom: 0;
  }
  .capitulos-grid .k-grid-content tr.k-master-row > td[data-label]::before,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td[data-label]::before,
  .defectos-grid .k-grid-content tr.k-master-row > td[data-label]::before,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: auto;
    color: #656565;
    text-align: left;
  }
  .capitulos-grid .k-grid-content tr.k-master-row > td > .k-input,
  .capitulos-grid .k-grid-content tr.k-master-row > td > .k-textbox,
  .capitulos-grid .k-grid-content tr.k-master-row > td > input,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td > .k-input,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td > .k-textbox,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td > input,
  .defectos-grid .k-grid-content tr.k-master-row > td > .k-input,
  .defectos-grid .k-grid-content tr.k-master-row > td > .k-textbox,
  .defectos-grid .k-grid-content tr.k-master-row > td > input,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td > .k-input,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td > .k-textbox,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td > input {
    flex: 1 1 auto;
    min-width: 0;
  }
  .capitulos-grid .k-grid-content tr.k-master-row > td.k-command-cell,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td.k-command-cell,
  .defectos-grid .k-grid-content tr.k-master-row > td.k-command-cell,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td.k-command-cell {
    order: 99;
  }
  .capitulos-grid .k-grid-content tr.k-grid-edit-row,
  .defectos-grid .k-grid-content tr.k-grid-edit-row {
    border: 2px solid var(--token-brand-default);
    box-shadow: 0 2px 8px rgba(18, 18, 18, 0.08);
  }
  .capitulos-grid .k-grid-content tr.k-grid-edit-row::before,
  .defectos-grid .k-grid-content tr.k-grid-edit-row::before {
    content: "Rellena los datos y pulsa guardar";
    padding: 10px 12px;
    background-color: var(--token-brand-primary-lighter);
    color: var(--token-brand-primary-dark);
    font-weight: 600;
  }
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td:has(.k-input, .k-textbox),
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td:has(.k-input, .k-textbox) {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: left;
  }
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td:has(.k-input, .k-textbox)[data-label]::before,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td:has(.k-input, .k-textbox)[data-label]::before {
    margin-right: 0;
    color: #242424;
    font-weight: 500;
  }
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td .k-input,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td .k-textbox,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td .k-input,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td .k-textbox {
    width: 100%;
    min-height: 44px;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    background-color: #FFFFFF;
  }
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td .k-input:focus-within,
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td .k-textbox:focus-within,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td .k-input:focus-within,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td .k-textbox:focus-within {
    border-color: #98C1FF;
    box-shadow: 0 0 0 0.2rem rgba(9, 107, 255, 0.25);
  }
  .capitulos-grid .k-grid-content tr.k-grid-edit-row > td.k-command-cell .k-button,
  .defectos-grid .k-grid-content tr.k-grid-edit-row > td.k-command-cell .k-button {
    min-width: 44px;
    min-height: 44px;
  }
  .capitulos-grid .k-grid-content tr.k-master-row > td.k-hierarchy-cell {
    order: 98;
  }
  .capitulos-grid .k-grid-content tr.k-master-row > td.k-hierarchy-cell::before {
    content: "Defectos";
    margin-right: auto;
    color: #656565;
  }
  .capitulos-grid .k-grid-content tr.k-detail-row {
    display: block;
    margin: -4px 0 12px;
  }
  .capitulos-grid .k-grid-content tr.k-detail-row > td.k-hierarchy-cell {
    display: none;
  }
  .capitulos-grid .k-grid-content tr.k-detail-row > td.k-detail-cell {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 0 !important;
    border: 0;
    overflow: visible;
  }
}
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
body.layout-login {
  position: relative;
  /*
      app.scss fija `body, html { height: 100% }`. En el login el contenido
      puede pasar de 100vh (ventanas bajas / movil en horizontal), asi que
      el body debe crecer para que el pie quede al final del documento y no
      flotando sobre el formulario.
  */
  height: auto;
  min-height: 100%;
}
body.layout-login > .footer-i3code {
  position: absolute;
  bottom: 0;
  left: 30%;
  right: 0;
  z-index: 1;
}
@media (max-width: 575.98px) {
  body.layout-login > .footer-i3code {
    left: 0;
    background-color: #F2F2F2;
  }
}

.page-content > main {
  flex-grow: 1;
}

@media (min-width: 992px) {
  .page-content:has(#reclamacionesLayout:not(.filters-collapsed)) .footer-i3code,
  .page-content:has(#ordenesTrabajoLayout:not(.filters-collapsed)) .footer-i3code {
    margin-right: calc(380px + 1rem);
  }
}
.footer-i3code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  color: #929292;
  font-size: 0.75rem;
  padding-bottom: 5px;
  transition: margin-right 0.2s ease;
}
.footer-i3code svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.footer-i3code a {
  color: inherit;
  text-decoration: none;
}
.footer-i3code a:hover {
  color: #585858;
}

/*
    switches.scss se importa al FINAL del fichero, no aqui: tiene que sobrescribir
    las reglas de .form-check-input que estan mas abajo en este mismo app.scss, y
    con la misma especificidad manda el orden.
*/
/*
    TEMAS DE MARCA:
    No hace falta ningun @include. Al importar color-theme.scss (arriba) se
    emiten los bloques :root / [data-theme='...'] con las custom properties.
    La marca activa se elige en runtime con data-theme="..." en el <html>
    (se inyecta desde appsettings -> Marca:Theme). El mismo app.css sirve
    para todas las marcas.
*/
/*
    LAYOUT PRINCIPAL
*/
.container, .container-lg {
  max-width: 1400px;
}

body, html {
  height: 100%;
}

.page-content {
  width: 100vw;
  min-width: 100vw;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #F2F2F2;
}

.border-top {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.border-dark-top {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {
  .border-top-sm {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}
.content {
  padding: 0 1rem 1rem;
}

.arrow-none::after {
  display: none;
}

.btn:focus, .boton-toolbar-letra:focus, .boton-toolbar-signo:focus, .boton-toolbar:focus, .k-upload-button:focus, .btn-cta:focus, .btn-primary:focus, .btn-secondary:focus, .radio-button-group .k-radio:active + .k-radio-label:focus,
.radio-button-group .k-radio:checked + .k-radio-label:focus, .btn-outline-danger:focus, .btn-tertiary:focus, .btn-contextual:focus, .btn-contextual-secundario:focus, .btn-icon-brand:focus, .btn-outline-primary:focus, .k-button-solid-primary:focus, .k-button-solid-base:focus, .btn:active:focus {
  box-shadow: none;
}

.background-image-none {
  background-image: none;
}

.hover-transparent:hover {
  background-color: transparent;
}

/*
    DEFINICION ESTILOS GENERALES (estilo bootstrap)
*/
.row-gap-0 {
  row-gap: 0 !important;
}

.row-gap-1 {
  row-gap: 0.25rem !important;
}

.row-gap-2 {
  row-gap: 0.5rem !important;
}

.row-gap-3 {
  row-gap: 1rem !important;
}

.row-gap-4 {
  row-gap: 1.5rem !important;
}

.row-gap-5 {
  row-gap: 3rem !important;
}

.column-gap-0 {
  column-gap: 0 !important;
}

.column-gap-1 {
  column-gap: 0.25rem !important;
}

.column-gap-2 {
  column-gap: 0.5rem !important;
}

.column-gap-3 {
  column-gap: 1rem !important;
}

.column-gap-4 {
  column-gap: 1.5rem !important;
}

.column-gap-5 {
  column-gap: 3rem !important;
}

.border-left-radius-0 {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.min-width-auto {
  min-width: auto !important;
}

/*
    BOTONERA
*/
.botonera {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 100;
}

.botonera.expandible {
  text-align: end;
}

.botonera.expandible .botonera-acciones {
  overflow: hidden;
  transition: max-height 0.75s ease-in-out;
}

.botonera.expandible .botonera-acciones.botones-3 {
  max-height: 300px;
}

.botonera.expandible .botonera-acciones.botones-4 {
  max-height: 400px;
}

.botonera.expandible .botonera-acciones.botones-5 {
  max-height: 500px;
}

.botonera.expandible .botonera-acciones.botones-6 {
  max-height: 600px;
}

.botonera.expandible .botonera-acciones.botones-7 {
  max-height: 700px;
}

.botonera.expandible .botonera-acciones.botones-8 {
  max-height: 800px;
}

.botonera.expandible .botonera-acciones.collapsed {
  max-height: 0;
}

.botonera .botonera-acciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.botonera .btn-botonera {
  text-decoration: none;
  display: inline-flex;
  padding: 10px 10px;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  text-align: center;
  color: #FFFFFF;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
  transform: scale(0.9);
  transition: color 0.2s ease, background-color 0.3s ease, transform 0.3s ease;
}
@media (max-width: 399.98px) {
  .botonera .btn-botonera {
    padding: 8px 8px;
  }
}

.botonera .btn-botonera:hover,
.botonera .btn-botonera:focus {
  transform: scale(1);
}

.botonera .btn-botonera > i,
.botonera .btn-botonera > ph-check-circle,
.botonera .btn-botonera > ph-check-square-offset,
.botonera .btn-botonera > ph-timer,
.botonera .btn-botonera > ph-circle-dashed {
  font-size: 1.75rem;
}

.botonera .btn-botonera > span {
  display: block;
  font-size: 1rem;
  font-weight: 500;
}

.botonera .btn-botonera.botonera-submit {
  background-color: var(--token-brand-primary);
  color: #FFFFFF;
  border: 1px solid var(--token-brand-primary);
}

.botonera .btn-botonera.botonera-submit:hover,
.botonera .btn-botonera.botonera-submit:focus {
  background-color: var(--token-brand-hover);
  color: #FFFFFF;
  border: 1px solid var(--token-brand-hover);
}

.botonera .btn-botonera.botonera-return {
  background-color: #FFFFFF;
  color: var(--token-brand-default);
  border: 1px solid var(--token-brand-default);
}

.botonera .btn-botonera.botonera-return:hover,
.botonera .btn-botonera.botonera-return:focus {
  background-color: var(--token-brand-default);
  color: #FFFFFF;
}

.botonera .btn-botonera.botonera-delete {
  background-color: #FFFFFF;
  color: var(--token-brand-default);
  border: 1px solid var(--token-brand-default);
}

.botonera .btn-botonera.botonera-delete:hover,
.botonera .btn-botonera.botonera-delete:focus {
  background-color: var(--token-brand-default);
  color: #FFFFFF;
}

.botonera .btn-botonera.botonera-abrir {
  background-color: #FBE0E0;
  color: #B01414;
  border: 1px solid #B01414;
}

.botonera .btn-botonera.botonera-abrir:hover,
.botonera .btn-botonera.botonera-abrir:focus {
  background-color: #F9CBCB;
  color: #B01414;
  border: 1px solid #B01414;
}

.botonera .btn-botonera.botonera-pendiente {
  background-color: #FFDFD6;
  color: #FF5B29;
  border: 1px solid #FA3A00;
}

.botonera .btn-botonera.botonera-pendiente:hover,
.botonera .btn-botonera.botonera-pendiente:focus {
  background-color: #FFAA90;
  color: #FA3A00;
  border: 1px solid #FA3A00;
}

.botonera .btn-botonera.botonera-cerrar {
  background-color: #CFFED5;
  color: #03670F;
  border: 1px solid #03670F;
}

.botonera .btn-botonera.botonera-cerrar:hover,
.botonera .btn-botonera.botonera-cerrar:focus {
  background-color: #98FCA4;
  color: #02510B;
  border: 1px solid #02510B;
}

.botonera .btn-botonera.botonera-noprocede {
  background-color: #BED8FF;
  color: #004FC7;
  border: 1px solid #98C1FF;
}

.botonera .btn-botonera.botonera-noprocede:hover,
.botonera .btn-botonera.botonera-noprocede:focus {
  background-color: #98C1FF;
  color: #004FC7;
  border: 1px solid #98C1FF;
}

.botonera .btn-botonera.botonera-aceptar {
  background-color: #FBE0E0;
  color: #B01414;
  border: 1px solid #B01414;
}

.botonera .btn-botonera.botonera-aceptar:hover,
.botonera .btn-botonera.botonera-aceptar:focus {
  background-color: #F9CBCB;
  color: #B01414;
  border: 1px solid #B01414;
}

.botonera .btn-botonera.botonera-rechazar {
  background-color: #98C1FF;
  color: #004FC7;
  border: 1px solid #004FC7;
}

.botonera .btn-botonera.botonera-rechazar:hover,
.botonera .btn-botonera.botonera-rechazar:focus {
  background-color: #98C1FF;
  color: #004FC7;
  border: 1px solid #BED8FF;
}

.botonera .btn-botonera.botonera-resolver {
  background-color: #FFDFD6;
  color: #FF5B29;
  border: 1px solid #FF5B29;
}

.botonera .btn-botonera.botonera-resolver:hover,
.botonera .btn-botonera.botonera-resolver:focus {
  background-color: #FFAA90;
  color: #FA3A00;
  border: 1px solid #FA3A00;
}

.botonera .btn-botonera.botonera-desestimar {
  background-color: #BED8FF;
  color: #004FC7;
  border: 1px solid #004FC7;
}

.botonera .btn-botonera.botonera-desestimar:hover,
.botonera .btn-botonera.botonera-desestimar:focus {
  background-color: #98C1FF;
  color: #004FC7;
  border: 1px solid #004FC7;
}

.botonera .btn-botonera.botonera-expand {
  background-color: #FFFFFF;
  color: var(--token-brand-default);
  border: 1px solid var(--token-brand-default);
}

.botonera .btn-botonera.botonera-expand:hover {
  background-color: var(--token-brand-default);
  color: #FFFFFF;
}

.botonera .btn-botonera.botonera-exportar {
  background-color: #FFFFFF;
  color: var(--token-brand-default);
  border: 1px solid var(--token-brand-default);
}

.botonera .btn-botonera.botonera-exportar:hover,
.botonera .btn-botonera.botonera-exportar:focus {
  background-color: var(--token-brand-default);
  color: #FFFFFF;
}

.botonera .btn-botonera.botonera-desbloquear {
  background-color: #BED8FF;
  color: #004FC7;
  border: 1px solid #BED8FF;
}

.botonera .btn-botonera.botonera-desbloquear:hover,
.botonera .btn-botonera.botonera-desbloquear:focus {
  background-color: var(--token-brand-default);
  background-color: #98C1FF;
  color: #004FC7;
  border: 1px solid #BED8FF;
}

/*
    CARDS
*/
.card, .k-grid .k-grid-pager, .k-grid thead {
  background-color: #FFFFFF;
}

.big-card, .image-card {
  background-color: #FFFFFF;
  border: 0;
  border-radius: 5px;
}

.validation-summary-errors {
  padding: 1rem;
  margin-bottom: 1rem;
  color: #FFFFFF;
  background-color: #E52020;
  border: 0;
  border-radius: 5px;
}

.validation-summary-errors ul {
  margin: 0;
}

.big-card {
  height: 100%;
}

.plantilla-card {
  background-color: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 5px;
  height: 100%;
}

.image-card {
  position: relative;
  overflow: hidden;
}

.image-card.loading,
.image-card.error img {
  display: none;
}

.image-card .error-image,
.image-card .video {
  background-color: #FFFFFF;
  height: 250px;
  max-width: 100%;
  border-radius: 5px;
  transition: transform 0.35s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.image-card img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  border-radius: 5px;
  transition: transform 0.35s;
}

.image-card .image-card-content {
  position: absolute;
  z-index: 15;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: color-mix(in srgb, var(--token-brand-default) 85%, transparent);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translateY(60px);
  transform: translateY(60px);
}

.image-card:hover .image-card-content {
  opacity: 1;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.image-card:hover img,
.image-card:hover .error-image,
.image-card:hover .video {
  -webkit-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}

/*
    BOTONES
*/
.btn-icon, .btn-icon:hover, .btn-icon:active, .btn-icon:focus {
  border-radius: 30px;
  height: 60px;
  width: 60px;
  font-size: 1.5rem;
  background-color: var(--token-brand-default);
  border-color: transparent;
}

.k-button {
  border-radius: 0.25rem !important;
  border: 1px solid transparent;
  padding: 10px;
}

.k-upload-button {
  background-color: #FFFFFF;
  color: #313131;
  border: 1px solid #313131;
}
.k-upload-button:hover, .k-upload-button:focus {
  background-color: #313131;
  color: #FFFFFF;
}
.k-upload-button:active {
  background-color: #313131;
  color: #FFFFFF;
}
.k-upload-button:disabled {
  background-color: #F2F2F2;
  color: #AAAAAA;
}

.k-primary {
  background-color: #096BFF !important;
  border-color: #004FC7 !important;
}

.k-primary:hover {
  background-color: #005BE4 !important;
  border-color: #004FC7 !important;
  color: #FFFFFF;
}

.k-grid-add {
  color: #FFFFFF !important;
  background-color: #096BFF !important;
  border-color: #004FC7 !important;
}

.k-grid-add:hover {
  color: #FFFFFF !important;
  background-color: #005BE4 !important;
  border-color: #004FC7 !important;
}

/*
    FORMULARIOS
*/
.i3-floating-label input {
  border: 0;
  border-bottom: 2px solid #757575;
  border-radius: 0;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-bottom: 0.25rem !important;
}

.form-mw-700 {
  width: 100%;
  max-width: 700px;
}

.form-switch {
  padding: 0 0.75rem;
}

.form-floating label {
  opacity: 0.8;
}

input:required + label:after,
.kendo-form-control.required > label:after {
  content: " *";
  color: #E52020;
}

.input-group button i,
.input-group label i {
  font-size: 1.5rem !important;
  line-height: 30px;
}

.input-group button span {
  display: block;
  line-height: 17px;
  font-size: 0.9rem;
}

.input-group.floating-group-right input {
  border-radius: 0.25rem 0 0 0.25rem;
}

.input-group.floating-group-left input {
  border-radius: 0 0.25rem 0.25rem 0;
}

.input-group.floating-group-right button i,
.input-group.floating-group-left button i {
  line-height: 25px;
}

.input-group.floating-group-right button span,
.input-group.floating-group-left button span {
  line-height: 16px;
}

.kendo-form-control .form-label {
  opacity: 0.65;
  color: #242424 !important;
  transform-origin: 0 0;
  transform: scale(0.85) translateY(0.2rem);
  margin-bottom: 0;
  padding: 0 0.75rem;
}

.k-datepicker {
  width: 8.4em;
  border: 0;
  display: inline-flex;
}

.k-datepicker .k-picker-wrap {
  border: 0;
  box-shadow: none !important;
}

.k-datepicker input {
  border-right: 0;
  border-radius: 0.25rem 0 0 0.25rem;
}

.k-datepicker .k-select {
  border: 1px solid #D6D6D6;
  border-radius: 0 0.25rem 0.25rem 0;
  border-left: 0;
}

.k-datepicker .form-control:focus + .k-select {
  border-color: #98C1FF;
}

/*
    INPUTS KENDO CON ETIQUETA FLOTANTE
    (.form-floating.form-floating-date -> DatePicker / DateTimePicker,
     .form-floating.form-floating-number -> NumericTextBox)
    Kendo pinta un <span class="k-..."> con el <input class="k-input-inner"> y sus
    botones (calendario, reloj, flechas) dentro, asi que la regla de Bootstrap
    (input:not(:placeholder-shown) ~ label) no llega a la etiqueta. Se replica con
    :has() sobre el input interno, que necesita placeholder=" ".
    Los colores de la caja son los de .form-control de Bootstrap a proposito, para que
    quede identica al resto de inputs del formulario.
*/
.form-floating-date > .k-datepicker,
.form-floating-date > .k-datetimepicker,
.form-floating-date > .k-numerictextbox,
.form-floating-number > .k-datepicker,
.form-floating-number > .k-datetimepicker,
.form-floating-number > .k-numerictextbox {
  width: 100%;
  height: calc(3.5rem + 2px);
  display: flex;
  align-items: stretch;
  padding: 0;
  font-size: 1rem;
  color: #212529;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-shadow: none;
}
.form-floating-date > .k-datepicker.k-focus,
.form-floating-date > .k-datepicker:focus-within,
.form-floating-date > .k-datetimepicker.k-focus,
.form-floating-date > .k-datetimepicker:focus-within,
.form-floating-date > .k-numerictextbox.k-focus,
.form-floating-date > .k-numerictextbox:focus-within,
.form-floating-number > .k-datepicker.k-focus,
.form-floating-number > .k-datepicker:focus-within,
.form-floating-number > .k-datetimepicker.k-focus,
.form-floating-number > .k-datetimepicker:focus-within,
.form-floating-number > .k-numerictextbox.k-focus,
.form-floating-number > .k-numerictextbox:focus-within {
  border-color: #BFBFBF;
  box-shadow: none;
}
.form-floating-date > .k-datepicker.k-disabled,
.form-floating-date > .k-datetimepicker.k-disabled,
.form-floating-date > .k-numerictextbox.k-disabled,
.form-floating-number > .k-datepicker.k-disabled,
.form-floating-number > .k-datetimepicker.k-disabled,
.form-floating-number > .k-numerictextbox.k-disabled {
  background-color: #e9ecef;
  opacity: 1;
  filter: none;
}
.form-floating-date .k-input-inner,
.form-floating-number .k-input-inner {
  height: 100%;
  padding: 1.625rem 0.75rem 0.625rem;
  font-size: 1rem;
  line-height: 1.25;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.form-floating-date .k-input-inner::placeholder,
.form-floating-number .k-input-inner::placeholder {
  color: transparent;
}
.form-floating-date .k-input-button,
.form-floating-number .k-input-button {
  align-self: center;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
  color: #313131;
  background: transparent;
  border: 0 !important;
  box-shadow: none;
}
.form-floating-date .k-input-spinner,
.form-floating-number .k-input-spinner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  padding-inline: 0.5rem;
  background: transparent;
  border: 0;
}
.form-floating-date .k-input-spinner .k-button,
.form-floating-number .k-input-spinner .k-button {
  width: auto;
  height: auto;
  padding: 0 0.25rem;
  color: #313131;
  background: transparent;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none;
}
.form-floating-date .k-input-spinner .k-button:hover,
.form-floating-number .k-input-spinner .k-button:hover {
  background-color: #F2F2F2;
}
.form-floating-date > label,
.form-floating-number > label {
  z-index: 2;
}
.form-floating-date:focus-within > label, .form-floating-date.has-value > label, .form-floating-date:has(.k-input-inner:not(:placeholder-shown)) > label,
.form-floating-number:focus-within > label,
.form-floating-number.has-value > label,
.form-floating-number:has(.k-input-inner:not(:placeholder-shown)) > label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating-date.required > label::after,
.form-floating-number.required > label::after {
  content: " *";
  color: #E52020;
}

.form-check, .form-check input, .form-check label {
  cursor: pointer;
}

.form-min-width {
  min-width: 160px;
}

.form-min-s-width {
  min-width: 140px;
}

.k-item {
  border-bottom: 1px solid #D6D6D6;
}

.k-dropdown.form-select {
  min-width: 160px;
  display: block;
}

.k-dropdown.form-select[aria-disabled=true] {
  background-image: none;
}

.k-dropdown.filtro {
  max-width: 300px;
}

.k-dropdown.small {
  max-width: 135px !important;
  min-width: 135px !important;
}

.k-dropdown.form-select .k-dropdown-wrap {
  border: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

.k-dropdown.form-select .k-dropdown-wrap .k-input {
  padding: 0;
  display: block;
}

.k-dropdown.form-select .k-dropdown-wrap .k-select {
  display: none;
}

.k-multiselect.form-select {
  min-width: 160px;
  display: block;
  padding-right: 40px;
  height: auto;
  padding-bottom: 0;
}

.k-multiselect.form-select .k-multiselect-wrap {
  border: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

.k-datepicker.form-select {
  min-width: 160px;
  display: block;
}

.k-calendar {
  --kendo-color-primary: var(--token-brand-active);
}

.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link {
  border-color: var(--token-brand-active);
  color: #FFFFFF;
  background-color: var(--token-brand-default);
}

.k-calendar .k-range-start .k-calendar-cell-inner,
.k-calendar .k-range-start .k-link,
.k-calendar .k-range-end .k-calendar-cell-inner,
.k-calendar .k-range-end .k-link {
  background-color: var(--token-brand-default) !important;
}
.k-calendar .k-range-start .k-calendar-cell-inner:hover,
.k-calendar .k-range-start .k-link:hover,
.k-calendar .k-range-end .k-calendar-cell-inner:hover,
.k-calendar .k-range-end .k-link:hover {
  background-color: var(--token-brand-default) !important;
}

.k-calendar .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
  color: var(--kendo-color-on-primary, #FFFFFF);
  background-color: var(--token-brand-default) !important;
}

.radio-button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.radio-button-group .k-radio {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.radio-button-group .k-radio-label {
  display: block;
  margin: 0;
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  font-size: 1rem;
}

/*
    LOGIN
*/
/*
    DIALOG
*/
.k-dialog-titlebar {
  border-color: inherit;
  color: #454545;
  background-color: #F2F2F2;
}

/*
    TABLAS Y LISTADOS
        - Sobreescribir estilos grid kendo
        - Filtros
*/
.grid-row-alt {
  border-radius: 0;
  border-top: 1px solid #BFBFBF;
  border-bottom: 1px solid #BFBFBF;
  box-shadow: none;
}

.k-grid,
.k-pane-wrapper, .k-view,
.k-pane-wrapper .k-pane > .k-view > .k-content,
.k-pane-wrapper .k-grid-edit-form .k-edit-form-container,
.k-grid .k-grid-toolbar {
  border: 0;
  background-color: transparent;
}

.k-grid table[data-role=selectable] tr {
  cursor: pointer;
}

.k-grid tr.k-alt {
  background-color: rgba(255, 255, 255, 0.7);
}

.k-grid thead {
  font-weight: 600;
  font-size: 0.92rem;
}

.k-grid thead th {
  border: 0;
  padding: 15px 12px;
}

.k-grid tbody td {
  border: 0;
  padding: 5px 12px;
  min-height: 50px;
  height: 50px;
}

.k-grid tbody:before {
  content: "-";
  display: block;
  line-height: 0.85rem;
  visibility: hidden;
}

.k-grid .k-grid-pager {
  padding: 10px 8px;
  margin-top: 10px;
}

.k-grid-edit-form .k-header {
  background-color: #096BFF !important;
}

.k-hierarchy-cell {
  border-radius: 10px 0 0 10px;
}

.k-grid .k-hierarchy-cell > .k-icon {
  padding: 17px 0;
}

.filtros input:not([type=checkbox]):not([data-role=datepicker]),
.filtros select,
.filtros .form-control-datepicker {
  min-width: 178px;
}

.filtros .form-control-datepicker-sm {
  width: 120px;
}

.filtros input[data-role=datepicker] {
  padding: 0;
}

.filtros .form-control-datepicker .k-select {
  position: absolute;
  right: 0;
  margin-right: -40px;
  margin-top: -5px;
  background-color: transparent;
  border: 0;
  background-image: none;
}

.filtros .form-control-datepicker-sm .k-select {
  position: absolute;
  right: 0;
  margin-right: 10px;
  background-color: transparent;
  border: 0;
  background-image: none;
}

.filtros .form-control-datepicker-sm .k-datepicker .k-picker-wrap {
  background-color: transparent;
}

#listadoOrdenesTrabajoReclamacion .k-command-cell,
#listadoViviendaContactos .k-command-cell {
  width: 50px;
  padding: 0;
}

/*
    TAB STRIP KENDO
*/
.k-tabstrip {
  margin-top: 30px;
  background-color: #FFFFFF;
  border-radius: 8px;
}

.k-tabstrip .k-content {
  background-color: transparent;
  border: 0;
  overflow: visible;
  padding: 0;
  outline: none !important;
}

@media (max-width: 767.98px) {
  .k-tabstrip-items {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: auto;
  }
  .k-tabstrip-item {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    min-width: 120px;
  }
}
/*
    MODAL WINDOW KENDO
*/
/*
    INICIO
*/
#inicio .contenido-inicio, #about .contenido-inicio {
  height: auto;
  padding: 0.75rem;
  border: 0;
  border-radius: 4px;
  left: 50%;
  background-color: #FFFFFF;
}

#inicio .contenido-inicio-OT {
  height: auto;
  padding: 1.25rem;
  border: 0;
  border-radius: 4px;
  left: 50%;
  top: 2%;
  bottom: unset;
  background-color: #FFFFFF;
}
@media (max-width: 399.98px) {
  #inicio .contenido-inicio-OT {
    padding: 0rem;
  }
}

#inicio .contenido-inicio2 {
  height: auto;
  padding: 1.25rem;
  border-radius: 4px;
  border: 0;
  margin: 15px auto 0;
  width: 60%;
  background-color: #FFFFFF;
}

#about .contenido-inicio {
  position: absolute;
  height: auto;
  padding: 1.25rem;
  border-radius: 4px;
  border: 0;
  left: 33%;
  top: 55%;
  transform: translate(-50%, 50%);
  width: 60%;
  background-color: #FFFFFF;
}

@media (max-width: 991.98px) {
  #inicio .contenido-inicio2 {
    width: 90%;
  }
}
#inicio .contenido-inicio-OT2 {
  position: absolute;
  height: auto;
  padding: 1.25rem;
  border: 0;
  border-radius: 5px;
  left: 50%;
  top: 2%;
  bottom: unset;
  transform: translate(-50%, 50%);
  width: 90%;
  background-color: #FFFFFF;
}
@media (max-width: 399.98px) {
  #inicio .contenido-inicio-OT2 {
    padding: 0.2rem;
  }
}

.descripcion-promocion.mb-0 {
  display: none;
}

#inicio .accesos-directos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 0.75rem;
}
@media (max-width: 399.98px) {
  #inicio .accesos-directos {
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
    justify-content: space-between;
  }
}

/*
    NAV BOOSTRAP EXTENSION - NAV-DIVIDER
*/
.nav.nav-divider .nav-item,
.nav.nav-md-divider .nav-item {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.nav.nav-divider .nav-item + .nav-item:before {
  content: "•";
  color: inherit;
  padding-left: 0.65rem;
  padding-right: 0.75rem;
  opacity: 0.8;
}

.fs-small-title {
  transform: scale(0.85) translateY(0.5rem);
  transform-origin: 0 0;
}

/*
    RECLAMACIONES
*/
.reclamacion-estado {
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
}

.reclamacion-estado.abierta {
  background-color: #E52020;
  color: #FFFFFF;
}

.reclamacion-estado.cerrada {
  background-color: #048813;
  color: #FFFFFF;
}

.reclamacion-estado.no-procede {
  background-color: #096BFF;
  color: #FFFFFF;
}

.reclamacion-estado.pendiente {
  background-color: #FF5B29;
  color: #FFFFFF;
}

.reclamacion-estado.resuelta {
  background-color: var(--token-brand-default);
  color: #FFFFFF;
}

.reclamacion-estado.bloqueada {
  background-color: #8B1010;
  color: #FFFFFF;
}

.reclamacion-estado.desbloqueada {
  background-color: #02510B;
  color: #FFFFFF;
}

#listadoImagenesReclamacion img {
  width: 100%;
}

#listadoImagenesReclamacionOT div.image-card {
  box-shadow: none;
}

#listadoImagenesReclamacionOT img {
  object-fit: contain;
  max-height: 200px;
  width: auto;
  margin: auto;
}

#configurarGeneral .k-upload,
#configurarPlantillas .k-upload,
#configurarCorreo .k-upload,
#editarPromocion .k-upload,
#crearPromocion .k-upload,
#vistaDocumentos .k-upload,
#crearPromotor .k-upload,
#editarPromotor .k-upload,
#editarPerfil .k-upload {
  box-shadow: none !important;
}

.k-upload {
  border: 0 !important;
}

.k-upload:not(.k-upload-empty) .k-dropzone {
  box-shadow: 0px 1.5rem 1.5rem -1.5rem rgba(0, 0, 0, 0.08);
}

.k-upload .k-dropzone .k-dropzone-hint.k-hidden {
  display: block !important;
}

.k-upload .k-dropzone.k-dropzone-hovered {
  background-color: #F2F2F2 !important;
}

.k-upload .k-action-buttons {
  display: none !important;
}

@media (max-width: 575.98px) {
  #configurarGeneral .k-upload .k-dropzone,
  #configurarGeneral .k-upload .k-upload-dropzone {
    flex-direction: column;
    align-items: stretch;
  }
  #configurarGeneral .k-upload-button-wrap,
  #configurarGeneral .k-upload-button {
    width: 100%;
  }
}
/*
    RELACION GREMIOS - PROMOCIONES
        - Para que funcione el drag and drop es necesario que el listview-content tenga un minimo de alto
*/
#GremioList, #GremioAsociadoList {
  border-radius: 5px;
  background-color: #FFFFFF;
  border: none;
}

.custom-placeholder {
  opacity: 0.4;
}

.k-listview-content {
  min-height: 200px !important;
}

#GremioList .k-listview-content {
  max-height: calc(100vh - 315px);
}

#GremioAsociadoList .k-listview-content {
  max-height: calc(100vh - 290px);
}

.text-gch-primary {
  color: var(--token-brand-primary) !important;
}

.text-gch-secondary {
  color: #121212 !important;
}

.k-listview-content .gremio-list-content, .k-listview-content .asociado-list-content {
  padding: 1rem 2rem;
}

.k-listview-content .gremio-list-content {
  cursor: grab;
}

.k-listview-content .gremio-list-content:not(:last-child), .k-listview-content .asociado-list-content:not(:last-child) {
  border-bottom: 1px solid #E6E6E6;
}

.k-listview-content .gremio-list-content:first-child, .k-listview-content .asociado-list-content:first-child {
  border-radius: 5px 5px 0 0;
}

.k-listview-content .gremio-list-content:last-child, .k-listview-content .asociado-list-content:last-child {
  border-radius: 0 0 5px 5px;
}

.k-listview-content .gremio-list-content .box-tipologia, .k-listview-content .asociado-list-content .box-tipologia {
  padding: 0.25rem 0.5rem;
  background-color: #003E52;
  color: #FFFFFF;
  border-radius: 3px;
}

.icon-field-readonly {
  display: flex;
  gap: 0.5rem;
}

.icon-field-readonly dl,
.icon-field-readonly dd,
.icon-field-readonly dl,
.icon-field-readonly dd {
  margin: 0 !important;
}

span.disabled-input {
  border: 0;
  background-color: transparent;
  box-shadow: none;
  opacity: 1 !important;
  filter: none !important;
  color: inherit;
  height: auto;
}

input.disabled-input {
  padding: 0;
  margin: 0;
  filter: none !important;
  height: auto;
}

.w-200 {
  width: 200px !important;
}

.empty-list-text {
  background-color: transparent !important;
  text-align: center;
  padding: 1rem;
  width: fit-content;
  margin: auto;
}

/*
    Listado ORDEN DE TRABAJO
*/
.ordenTrabajo-estadoDias > span > i, .ordenTrabajo-estadoDias > i {
  color: #096BFF !important;
  font-size: 1rem;
}

.ordenTrabajo-estadoDias-enPlazo > span > i, .ordenTrabajo-estadoDias-enPlazo > i {
  font-size: 1rem;
  color: #048813;
}

.ordenTrabajo-estadoDias-fueraPlazo > span > i, .ordenTrabajo-estadoDias-fueraPlazo > i {
  font-size: 1rem;
  color: #F0CC00;
}

.ordenTrabajo-estadoDias-sancionada > span > i, .ordenTrabajo-estadoDias-sancionada > i {
  font-size: 1rem;
  color: #E52020;
}

.diasResolverTextbox {
  margin-top: 10px;
}

.sancionada {
  color: #E52020;
}

/*
    EDITAR ORDEN DE TRABAJO
*/
.firma-body {
  min-height: 200px;
  position: relative;
}

.firma-body::before {
  content: "Firma";
  position: absolute;
  bottom: 65px;
  left: 10%;
  width: 80%;
  color: #D6D6D6;
  border-bottom: 2px dashed #E6E6E6;
}

.firma-body canvas {
  position: relative;
  width: 100%;
  height: 200px;
}

.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

.form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  border: 2px solid #BFBFBF;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.form-check-input:hover {
  border-color: #005BE4;
}
.form-check-input:active {
  transform: scale(0.95);
}
.form-check-input:focus-visible {
  outline: none;
  border-color: #005BE4;
  box-shadow: 0 0 0 4px rgba(0, 91, 228, 0.18);
}
.form-check-input:checked {
  background-color: #005BE4;
  border-color: #005BE4;
}
.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-check-input[type=checkbox] {
  border-radius: 12px;
}
.form-check-input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3e%3c/svg%3e");
}

.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input[type=radio]:checked {
  background-image: radial-gradient(circle, #FFFFFF 0 35%, transparent 40%);
}

.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--token-brand-active);
  border-color: var(--token-brand-hover);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}

.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  opacity: 0.5;
}

.form-check-input {
  width: 2em;
  margin-left: -2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}

.form-check-plantilla {
  margin: auto;
  width: 1em;
}

.switch-medio {
  height: 1.5em;
  width: 3em !important;
  background-color: #E52020 !important;
  border-color: #E52020 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.switch-medio:checked {
  background-color: #096BFF !important;
  border-color: #096BFF !important;
}

@media (prefers-reduced-motion: reduce) {
  .form-check-input {
    transition: none;
  }
}
.form-check-input {
  margin-left: 10px;
}
@media (min-width: 400px) {
  .form-check-input {
    margin-left: 0;
  }
}

.form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}

.form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/*
    BREAKPOINTS
*/
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .page-content {
    width: 100%;
    min-width: 0;
  }
  .navbar-content {
    flex-direction: row;
    align-items: center;
  }
  .navbar-content .sep,
  .navbar-content strong {
    display: inline-block;
  }
  .navbar-content .sep {
    margin: 0 1rem;
  }
  .navbar-custom .navbar-user .user-info,
  .navbar-custom .navbar-prom .prom-info {
    display: flex;
    flex-direction: column;
    height: 42px;
  }
  #login-form {
    background-image: url("/assets/images/background4.jpg");
    justify-content: center;
    align-items: center;
  }
  #iniciarSesion {
    border-radius: 25px;
    width: 50%;
    padding: 2rem 4rem;
    max-width: 600px;
  }
  #inicio .imagen-promocion .wrapper-promocion, #about .imagen-promocion .wrapper-promocion {
    width: 100%;
    margin-left: 0;
  }
  #inicio .contenido-inicio, #about .contenido-inicio {
    bottom: 5%;
    left: 0;
    transform: translate(0, 0);
  }
  #inicio .contenido-inicio-OT {
    top: 8%;
    bottom: unset;
    left: 0;
    transform: translate(0, 0);
  }
  .descripcion-promocion.mb-0 {
    display: block;
  }
  #inicio .descripcion-promocion {
    max-height: auto;
    overflow: hidden;
  }
  .k-dropdown.filtro-lg {
    max-width: 160px;
  }
  #listadoViviendaContactos .k-command-cell {
    width: 100px;
  }
  #listadoOrdenesTrabajoReclamacion .k-command-cell {
    width: 210px;
  }
}
@media (max-width: 479.98px) {
  .contenido-inicio-OT > .titulo-promocion {
    display: none;
  }
  #inicio .contenido-inicio-OT {
    top: 103%;
  }
}
@media (max-width: 359.98px) {
  #inicio .contenido-inicio {
    bottom: unset;
  }
  #inicio .contenido-inicio-OT {
    top: -10%;
    bottom: unset;
  }
}
/* Medium and small devices (tablet and mobiles, 992px and less) */
@media (max-width: 991.98px) {
  .ocultar-fechas {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .sidenav {
    margin-left: -250px;
  }
  .sidenav.toggle {
    margin-left: 0;
  }
}
/* Medium screens */
/* Small screens */
.tituloOT {
  min-width: 270px;
}

@media (max-width: 479.98px) {
  .tituloOT {
    min-width: 50vw;
  }
}
/* Mensajes al importar con excel*/
.msg {
  font-weight: 400;
  line-height: 1.5;
  color: #242424;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  margin-top: 5px;
}

.msg-success {
  color: #FFFFFF;
  background-color: #059A16;
  border-color: #059A16;
}

.msg-danger {
  color: #FFFFFF;
  background-color: #E52020;
  border-color: #E52020;
}

.msg-warning {
  color: #121212;
  background-color: #FFE44D;
  border-color: #FFE44D;
}

/*
    KENDO SWITCH
*/
.k-switch-on .k-switch-container {
  background-color: #096BFF !important;
}

.k-switch-off .k-switch-container {
  background-color: #E52020 !important;
  color: #FFFFFF !important;
}

#div-esOTP .k-switch-on .k-switch-container, #div-esRCP .k-switch-on .k-switch-container {
  background-color: var(--token-brand-default) !important;
}

#div-esOTP .k-switch-off .k-switch-container, #div-esRCP .k-switch-off .k-switch-container {
  background-color: #003E52 !important;
  color: #FFFFFF !important;
}

.gremio-check {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.gremio-label {
  cursor: pointer;
  width: 150px;
  height: 30px;
  background: #003E52;
  display: inline-block;
  border-radius: 100px;
  position: relative;
  color: #FFFFFF;
}

.gremio-label:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 28px;
  height: 28px;
  background: #F2F2F2;
  border-radius: 90px;
  transition: 0.3s;
}

.gremio-label:hover:after {
  background: #FFFFFF;
}

.gremio-check:checked + .gremio-label {
  background: var(--token-brand-default);
}

.gremio-check:checked + .gremio-label:after {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

.icono-info-gremios {
  position: relative;
  bottom: 10px;
}

.span-label-gremio {
  position: relative;
  vertical-align: sub;
}

/*
    KENDO TEXTAREA
*/
.kendo-textarea .k-floating-label-container {
  width: 100%;
  border: 1px solid #D6D6D6;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  padding-top: 1.625rem;
}

.kendo-textarea .k-floating-label-container.k-state-focused {
  border-color: #98C1FF;
}

.kendo-textarea .k-floating-label-container.k-state-empty > .k-label,
.kendo-textarea .k-textbox-container.k-state-empty > .k-label {
  opacity: 0.8;
  top: 16px;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.kendo-textarea .k-floating-label-container.k-state-focused > .k-label,
.kendo-textarea .k-floating-label-container > .k-label,
.kendo-textarea .k-textbox-container.k-state-focused > .k-label,
.kendo-textarea .k-textbox-container > .k-label {
  opacity: 0.65;
  top: 0.5rem;
  -webkit-transform: scale(0.85);
  -ms-transform: scale(0.85);
  transform: scale(0.85);
}

.kendo-textarea .k-label {
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  left: 0 !important;
  font-size: 1rem;
  user-select: none;
  padding-left: 0.75rem;
  transition: color 0.15s ease-out, top 0.15s ease-out, left 0.15s ease-out, -webkit-transform 0.15s ease-out;
  transition: transform 0.15s ease-out, color 0.15s ease-out, top 0.15s ease-out, left 0.15s ease-out;
  transition: transform 0.15s ease-out, color 0.15s ease-out, top 0.15s ease-out, left 0.15s ease-out, -webkit-transform 0.15s ease-out;
}

.kendo-textarea .k-textarea {
  border: 0;
  box-shadow: none;
  color: #242424;
}

.kendo-textarea .k-textarea textarea {
  padding: 0 0.75rem 0.625rem;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0px;
  margin-bottom: 0px;
}

/*
    Mensaje kendo
*/
.k-notification {
  max-width: 600px;
  left: 50%;
  transform: translateX(-50%);
}

#listadoViviendaContactos .k-grid-toolbar {
  justify-content: flex-end;
}

.k-notification-warning {
  background-color: #FFE44D !important;
}

.k-notification h3 {
  padding: 0.5rem 0.5rem 0;
  font-size: 1.5em;
  line-height: normal;
}

/*
    Cerrar ventana _ValidationSummary
*/
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #121212;
  text-shadow: 0 1px 0 #FFFFFF;
  filter: alpha(opacity=20);
  opacity: 0.2;
  text-decoration: none;
}

.close:hover, .close:focus {
  color: #121212;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

.text-right {
  text-align: right !important;
}

.form-control.deshabilitado {
  background-color: #E6E6E6;
  opacity: 1;
}

.k-switch.deshabilitado {
  outline: 0;
  cursor: default;
  opacity: 0.6;
  -webkit-filter: grayscale(0.1);
  filter: grayscale(0.1);
  pointer-events: none;
  box-shadow: none;
}

.puedeEliminar {
  display: none;
}

.readonly {
  background-color: #E6E6E6;
  opacity: 1;
}

.form-select.k-disabled {
  background-color: #E6E6E6 !important;
}

.loadingZIntex {
  width: 98%;
  height: 75%;
  box-shadow: none;
  padding-top: 15%;
  justify-content: center;
  flex-direction: unset;
}

#obtenerPDFWrapDisabled {
  opacity: 0.65;
}

#obtenerPDFWrapEnabled {
  opacity: 1;
}

#obtenerPDF, #adjuntarArchivo, #enviarValoracion2 {
  margin-top: 8px;
}

#adjuntarArchivo {
  margin-left: 5px;
}

.download-status-info {
  z-index: 10003;
  display: none;
  opacity: 0.5;
  background-color: #121212;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pdfSpinner {
  position: relative !important;
  top: 50%;
  left: 48%;
  color: #FFFFFF;
}

@media (max-width: 575.98px) {
  .filtrosDiv {
    flex-wrap: wrap;
  }
  .obtenerPDFWrapMain {
    margin-bottom: 5px !important;
  }
}
.singOutButton {
  text-align: center;
}

.gap-contacto {
  column-gap: 1rem !important;
}

@media (min-width: 768px) {
  .gap-contacto-md-5 {
    column-gap: 3rem !important;
  }
}
.problemaOTColumn {
  min-width: 260px;
  max-width: 260px;
}

.specialIconButton {
  color: #121212;
}

@media (min-width: 1400px) {
  .d-xl-flex-ot {
    display: flex !important;
  }
  .d-xl-none-ot {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .d-xl-flex-rc {
    display: flex !important;
  }
  .d-xl-none-rc {
    display: none !important;
  }
}
@media (max-width: 399.98px) {
  .d-xs-flex-ot {
    display: flex !important;
  }
  .d-xs-none-ot {
    display: none !important;
  }
}
@media (max-width: 359.98px) {
  .d-xs-flex-rc {
    display: flex !important;
  }
  .d-xs-none-rc {
    display: none !important;
  }
}
/* .toast-header (Bootstrap) se usa como cabecera de seccion: sin linea inferior. */
.toast-header {
  border-bottom: 0;
}

/*
    TOOLTIP
*/
.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width: 300px;
  color: #FFFFFF;
  background-color: #242424;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  padding: 4px 8px 4px 8px;
  right: 25px;
}

.icono-info-gremios:hover .tooltip-text {
  visibility: visible;
}

.gremios-loading-background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 101;
}

/*Checkbox*/
.k-checkbox {
  margin-right: 4px;
  border: 1px solid #D6D6D6;
  transition: 0.1s;
  transform: scale(1.2);
}

.k-checkbox:hover {
  transform: scale(1.5);
  background-color: #D6D6D6;
  opacity: 0.5;
}

.k-checkbox:checked {
  background-color: #059A16;
  border-color: #048813;
}

.k-checkbox:checked:focus {
  background-color: #03670F;
  border-color: #048813;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
}

.k-checkbox:focus {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
  border-color: #D6D6D6;
}

/*Plano de la vivienda en la reclamacion*/
#map {
  width: 100%;
  height: 100%;
  border: 1px solid #D6D6D6;
  box-sizing: border-box;
}

#infoPlano {
  margin-bottom: 10px; /* Ajusta según necesites */
}

/*Tabstrip Gremios*/
#tabstripGremios .k-tabstrip-items {
  display: flex;
}

.filtro .k-input-button {
  display: none !important;
}

.k-multiselect .k-clear-value {
  display: none !important;
}

.k-dropdownlist .k-input-button {
  display: none !important;
}

.k-datetimepicker {
  position: relative;
  display: flex;
  align-items: center;
}

.k-datetimepicker .k-picker-wrap {
  display: flex;
  position: absolute;
  right: 0;
}

.k-datetimepicker .k-input-button {
  margin-left: 5px;
}

.k-upload .k-dropzone, .k-upload .k-upload-dropzone {
  background-color: transparent;
}

.k-switch-on .k-switch-track {
  border-color: transparent !important;
  background-color: #096BFF !important;
  color: #FFFFFF !important;
}

.k-switch-off .k-switch-track {
  border-color: transparent !important;
  background-color: #E52020 !important;
  color: #FFFFFF !important;
}

.k-grid-save-command.btn.background-image-none.hover-transparent.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-primary.k-icon-button, .k-grid-save-command.background-image-none.hover-transparent.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-primary.k-icon-button {
  background-color: #121212 !important;
  border-color: #121212 !important;
  color: #FFFFFF !important;
}

.radio-button-group .k-radio-item {
  min-height: unset;
}

.radio-button-group .btn, .radio-button-group .boton-toolbar-letra, .radio-button-group .boton-toolbar-signo, .radio-button-group .boton-toolbar, .radio-button-group .btn-cta, .radio-button-group .btn-primary, .radio-button-group .btn-secondary, .radio-button-group .btn-outline-danger, .radio-button-group .btn-tertiary, .radio-button-group .btn-contextual, .radio-button-group .btn-contextual-secundario, .radio-button-group .btn-icon-brand, .radio-button-group .btn-outline-primary, .radio-button-group .k-button-solid-primary, .radio-button-group .k-button-solid-base, .radio-button-group .k-upload-button, .radio-button-group .k-radio:active + .k-radio-label,
.radio-button-group .k-radio:checked + .k-radio-label {
  padding: 1px 6px;
  line-height: 0;
}

.btn.background-image-none.hover-transparent.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-primary.k-icon-button:not(.k-grid-edit-command), .background-image-none.hover-transparent.k-button.k-button-md.k-rounded-md.k-button-solid.k-button-solid-primary.k-icon-button:not(.k-grid-edit-command) {
  background-color: #121212 !important;
  border-color: #121212 !important;
  color: #FFFFFF !important;
}

/* POP-UP Reclamaciones */
#calcularTiemposRC {
  width: 12.4em;
  transition: transform 0.05s ease-in-out;
  transform-origin: center;
}

#calcularTiemposRC:hover {
  transform: scale(1.05);
}

/*Comentarios Reclamacion*/
.comment {
  padding: 10px;
  border-bottom: 1px solid #D6D6D6;
}

.comment p {
  margin-bottom: 0px !important;
}

#commentsContainer {
  margin-top: 0px;
}

#commentsContainer hr {
  margin-bottom: 0px;
}

/*About*/
/* Nueva clase para la sección inicial */
.inicio-seccion {
  position: relative;
  width: 65%;
  bottom: 5%;
  left: 0;
  transform: translate(0, 0);
}

/* Nueva clase para la caja de versión */
.caja-version {
  position: relative;
  height: auto;
  padding: 1.25rem;
  border: 0;
  border-radius: 5px;
  width: 90%;
  background-color: #FFFFFF;
  margin: 20px auto;
}

.caja-version-funcionalidad {
  position: relative;
  height: auto;
  padding: 1.25rem;
  border: 0;
  border-radius: 5px;
  width: calc(90% - 60px);
  background-color: #FFFFFF;
  margin: 20px auto;
}
@media (max-width: 399.98px) {
  .caja-version-funcionalidad {
    width: 90%;
  }
}

#about-detalle-1, #about-detalle-3, #about-detalle-4, #about-detalle-5, #about-detalle-6, #about-detalle-7, #about-detalle-8, #about-detalle-9, #about-detalle-10, #about-detalle-11, #about-detalle-12, #about-detalle-13, #about-detalle-14, #about-detalle-15 {
  display: none;
  margin-bottom: 50px;
}

/*Comentarios*/
.textarea-container {
  position: relative;
  width: 100%;
  border: none;
}

.char-counter {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 12px;
  color: #929292;
}

textarea {
  width: 100%;
  height: 150px;
  padding-bottom: 20px; /* Espacio para el contador */
  resize: none;
}

.comment {
  word-wrap: break-word; /* Rompe palabras largas */
  overflow-wrap: break-word; /* Alternativa moderna */
  white-space: normal; /* Permite saltos de línea */
  max-width: 100%; /* Evita que se salga del contenedor */
}

/*Cuadros de información*/
.info-box {
  display: inline-block;
  background-color: #EBF3FF; /* Azul claro */
  border: 1px solid #096BFF; /* Azul más oscuro */
  border-radius: 5px;
  margin-left: 10px;
  padding: 10px;
  font-size: 14px;
  color: #003F9D; /* Texto en azul oscuro */
  max-width: 850px;
  margin-bottom: 0px;
}

@media (max-width: 767.98px) {
  .info-box {
    display: inline-block;
    background-color: #EBF3FF; /* Azul claro */
    border: 1px solid #096BFF; /* Azul más oscuro */
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 0px;
    padding: 10px;
    font-size: 14px;
    color: #003F9D; /* Texto en azul oscuro */
    max-width: 850px;
    margin-bottom: 0px;
  }
}
.info-box-notificaciones-gremios {
  display: inline-block;
  background-color: #EBF3FF; /* Azul claro */
  border: 1px solid #096BFF; /* Azul más oscuro */
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  color: #003F9D; /* Texto en azul oscuro */
}

.info-box-notificaciones-opciones {
  display: inline-block;
  background-color: #EBF3FF; /* Azul claro */
  border: 1px solid #096BFF; /* Azul más oscuro */
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  color: #003F9D; /* Texto en azul oscuro */
  margin-bottom: 0px;
}

@media (max-width: 479.98px) {
  .info-box-notificaciones-opciones {
    display: inline-block;
    background-color: #EBF3FF; /* Azul claro */
    border: 1px solid #096BFF; /* Azul más oscuro */
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    color: #003F9D; /* Texto en azul oscuro */
    margin-left: 0px;
    margin-bottom: 0px;
    width: 180px !important;
  }
}
.info-box-usuario-constructor {
  display: inline-block;
  background-color: #EBF3FF; /* Azul claro */
  border: 1px solid #096BFF; /* Azul más oscuro */
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  color: #003F9D; /* Texto en azul oscuro */
  max-width: 850px;
  margin-bottom: 0px;
}

/*Ventana grafico RC*/
.grafico-estado-window {
  width: 1000px !important;
  height: 600px !important;
}

@media (max-width: 991.98px) {
  .grafico-estado-window {
    width: 90% !important;
    height: 90% !important;
  }
}
/*Ventana Tags Correo*/
@media (max-width: 479.98px) {
  div#popUp_tags.k-window-content {
    width: 300px;
  }
}
/*Ventana tiempos RC*/
@media (max-width: 479.98px) {
  div#tiemposRCDialog.k-window-content.k-dialog-content {
    width: 300px;
  }
}
.k-window {
  border-radius: 8px !important;
  padding: 0;
  border-width: 0px;
  border-style: solid;
  box-sizing: border-box;
  outline: 0;
  font-family: var(--kendo-font-family, inherit);
  font-size: var(--kendo-font-size, inherit);
  line-height: var(--kendo-line-height-sm, normal);
  display: inline-flex;
  flex-direction: column;
  position: absolute;
  z-index: 10002;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.k-dialog-wrapper:has(.tiempos-window) {
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 10vh;
}

.popup-aviso .k-button.bg-success {
  background-color: #037611 !important;
  color: #FFFFFF !important;
}

.popup-aviso .k-button.bg-danger {
  background-color: #E52020;
  color: #FFFFFF !important;
}

.info-box-notificaciones-propietarios {
  display: inline-block;
  background-color: #EBF3FF; /* Azul claro */
  border: 1px solid #096BFF; /* Azul más oscuro */
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  color: #003F9D; /* Texto en azul oscuro */
}

.info-box-config-pdf {
  display: inline-block;
  background-color: #EBF3FF; /* Azul claro */
  border: 1px solid #096BFF; /* Azul más oscuro */
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  color: #003F9D; /* Texto en azul oscuro */
  max-width: 1100px;
}

.margen-derecha {
  margin-right: 4px;
}

.cursor-dashboard:hover {
  background-color: #F2F2F2 !important;
}

.logo-img {
  max-width: 10rem;
  max-height: 10rem;
  width: auto;
  height: auto;
}

.icon-firma::before {
  content: "\e157";
  font-family: "kendo-icons", sans-serif;
  font-size: 1.25rem;
  display: inline-block;
}

.ajuste-sangria {
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

@media (max-width: 991.98px) {
  .accesos-directos {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}
.custom-panel {
  background-color: #FFFFFF;
  position: relative;
}

.reclamaciones-container {
  max-width: none;
}

.reclamaciones-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 380px);
  gap: 1rem;
  align-items: start;
  width: 100%;
}

.reclamaciones-main {
  width: 100%;
  min-width: 0;
}

#listadoReclamaciones {
  width: 100%;
}

#listadoReclamaciones .k-grid,
#listadoReclamaciones .k-grid-content,
#listadoReclamaciones .k-grid-header-wrap,
#listadoReclamaciones .k-grid-content table,
#listadoReclamaciones .k-grid-header table {
  width: 100% !important;
}

.reclamaciones-search-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.filter-pane {
  width: 100%;
  min-width: 360px;
  border: 1px solid #E6E6E6;
  border-radius: 8px;
  background: #FFFFFF;
  position: sticky;
  top: 88px;
  height: calc(100vh - 88px);
  max-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

.filter-pane-close {
  margin-left: auto;
  display: none;
  text-decoration: none;
  padding: 0.1rem 0.2rem;
}

.mobile-filter-search {
  display: none;
}

.filter-pane-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #E6E6E6;
  background: #FFFFFF;
}

.filter-pane-title {
  color: #242424;
  font-weight: 600;
}

.filter-pane-body {
  padding: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.filter-pane-fields {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 0.15rem;
}

.filter-pane-body .form-floating,
.filter-pane-body .mb-3,
.filter-pane-body .mb-2 {
  margin-bottom: 0.3rem !important;
}

.filter-pane-body .k-dropdownlist,
.filter-pane-body .k-picker,
.filter-pane-body .k-input,
.filter-pane-body .form-control,
.filter-pane-body .form-control-datepicker {
  width: 100% !important;
  min-width: 0 !important;
}

.filter-pane-body .k-dropdownlist,
.filter-pane-body .k-picker,
.filter-pane-body .form-control,
.filter-pane-body .form-control-datepicker,
.filter-pane-body .k-input {
  border: 1px solid #D6D6D6 !important;
  border-radius: 0.25rem !important;
}

.filter-pane-body .k-dropdownlist:focus,
.filter-pane-body .k-picker:focus-within,
.filter-pane-body .form-control:focus,
.filter-pane-body .k-input:focus-within {
  border-color: #98C1FF !important;
  box-shadow: 0 0 0 0.2rem rgba(9, 107, 255, 0.25) !important;
}

.filter-pane-body .k-dropdownlist,
.filter-pane-body .k-picker {
  height: 54px;
}

.filter-pane-body .form-control,
.filter-pane-body .form-control-datepicker {
  min-height: 46px;
}

.filter-pane-body .k-input-inner,
.filter-pane-body .k-input-value-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-pane .form-floating,
.filter-pane .filter-grid > * {
  min-width: 0;
}

.filter-pane-body .k-dropdownlist,
.filter-pane-body .k-picker,
.filter-pane-body .k-input {
  max-width: 100% !important;
  overflow: hidden;
}

.filter-pane-body .k-dropdownlist .k-input-inner,
.filter-pane-body .k-dropdownlist .k-input-value-text,
.filter-pane-body .k-picker .k-input-inner,
.filter-pane-body .k-picker .k-input-value-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-pane-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid #E6E6E6;
  background: #FFFFFF;
}
@media (max-width: 399.98px) {
  .filter-pane-footer {
    padding: 0.75rem;
    margin-bottom: 10px;
  }
}

.filter-pane-footer .btn, .filter-pane-footer .boton-toolbar-letra, .filter-pane-footer .boton-toolbar-signo, .filter-pane-footer .boton-toolbar, .filter-pane-footer .btn-cta, .filter-pane-footer .btn-primary, .filter-pane-footer .btn-secondary, .filter-pane-footer .btn-outline-danger, .filter-pane-footer .btn-tertiary, .filter-pane-footer .btn-contextual, .filter-pane-footer .btn-contextual-secundario, .filter-pane-footer .btn-icon-brand, .filter-pane-footer .btn-outline-primary, .filter-pane-footer .k-button-solid-primary, .filter-pane-footer .k-button-solid-base, .filter-pane-footer .k-upload-button, .filter-pane-footer .radio-button-group .k-radio:active + .k-radio-label, .radio-button-group .filter-pane-footer .k-radio:active + .k-radio-label,
.filter-pane-footer .radio-button-group .k-radio:checked + .k-radio-label,
.radio-button-group .filter-pane-footer .k-radio:checked + .k-radio-label {
  min-height: 40px;
}

.filter-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0.8rem 0 0.2rem;
}

.filter-grid {
  display: grid;
  gap: 0.2rem;
}

.filter-grid.two-cols {
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
}

.filter-grid.two-cols .filter-col-full {
  grid-column: 1/-1;
}

.excel-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px dashed #757575;
  color: #757575;
  background: #FFFFFF;
  border-radius: 6px;
  min-height: 45px;
  font-weight: 400;
  cursor: pointer;
}

.excel-drop-zone:focus-visible {
  outline: 2px solid #757575;
  outline-offset: 1px;
}

.excel-drop-zone.is-dragover,
.excel-drop-zone:hover {
  background: #E6E6E6;
}

.excel-drop-zone.is-uploading {
  opacity: 0.6;
  pointer-events: none;
}

#reclamacionesFilterPane .form-floating {
  margin-bottom: 5px;
}

#reclamacionesLayout .filter-pane-body,
#ordenesTrabajoLayout .filter-pane-body {
  padding: 8px 12px;
  overflow-y: hidden;
}

#reclamacionesLayout.filters-collapsed .filter-pane,
#ordenesTrabajoLayout.filters-collapsed .filter-pane {
  width: 0;
  opacity: 0;
  transform: translateX(16px);
  border: 0;
  overflow: hidden;
}

#reclamacionesLayout.filters-collapsed,
#ordenesTrabajoLayout.filters-collapsed {
  grid-template-columns: minmax(0, 1fr) 0;
}

.panel-item {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  overflow: visible;
}

.panel-header {
  background-color: #F2F2F2;
  border-bottom: none;
}

.panel-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.8rem;
  color: #585858;
  background-color: transparent;
  border: none;
  text-align: left;
  font-weight: 500;
  transition: all 0.2s ease;
}

.panel-button:hover, .panel-button:focus {
  background-color: rgba(0, 0, 0, 0.03);
  text-decoration: none;
  outline: none;
  color: #242424;
}

.panel-button:not(.collapsed) .panel-icon {
  transform: rotate(180deg);
}

.panel-icon {
  transition: transform 0.2s ease;
  color: #454545;
}

.panel-content {
  position: absolute;
  width: 100%;
  z-index: 1000;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0 0 0.25rem 0.25rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.panel-body {
  padding: 0.75rem;
}

.imagen-index {
  background-image: url("/assets/images/background4.jpg");
}

.container-fluid-nuevo {
  width: 100%;
  /*
      Margen lateral unico para TODAS las vistas en movil.

      .container-fluid-nuevo envuelve el @RenderBody() en _Layout, asi
      que es el unico punto por el que pasan todas las pantallas.

      Antes el margen solo lo tenian los listados (.container-tabla-cabecera,
      8px) y lo que colgaba de un .container por debajo de 400px. Las vistas
      de formulario (Usuarios/Crear, Gremios/Crear...) quedaban pegadas al
      borde: su .big-card lleva m-auto (margin:auto !important de Bootstrap)
      y no hay contenedor intermedio donde ponerle el margen.

      Los contenedores que ya traian separacion propia la anulan aqui debajo
      para que el total siga siendo 8px y no 16px.
  */
}
@media (max-width: 575.98px) {
  .container-fluid-nuevo {
    padding-inline: 8px;
  }
}

@media (max-width: 575.98px) {
  .container-fluid-nuevo .container-tabla-cabecera {
    margin-left: 0;
    margin-right: 0;
  }
}
#inicio .container-lg {
  margin-bottom: 20px;
  margin-top: 30px;
}
@media (max-width: 991.98px) {
  #inicio .container-lg {
    width: auto;
    margin-left: 8px;
    margin-right: 8px;
  }
}

@media (max-width: 991.98px) {
  #configuracion.container {
    width: auto;
    margin-left: 8px;
    margin-right: 8px;
  }
}

.boton-toolbar {
  display: flex;
  padding: 0;
  background-color: var(--token-brand-default);
  border: none;
  justify-content: flex-end;
}

.boton-toolbar-signo {
  background-color: var(--token-brand-default);
  color: #FFFFFF;
}
.boton-toolbar-signo:hover, .boton-toolbar-signo:focus {
  background-color: var(--token-brand-hover);
  color: #FFFFFF;
}
.boton-toolbar-signo:active {
  background-color: var(--token-brand-active);
  color: #FFFFFF;
}
.boton-toolbar-signo:disabled {
  background-color: var(--token-brand-disabled);
  color: #929292;
}
@media (max-width: 399.98px) {
  .boton-toolbar-signo {
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .boton-toolbar-signo span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}

.boton-toolbar-letra {
  background-color: var(--token-brand-default);
  color: #FFFFFF;
}
.boton-toolbar-letra:hover, .boton-toolbar-letra:focus {
  background-color: var(--token-brand-hover);
  color: #FFFFFF;
}
.boton-toolbar-letra:active {
  background-color: var(--token-brand-active);
  color: #FFFFFF;
}
.boton-toolbar-letra:disabled {
  background-color: var(--token-brand-disabled);
  color: #929292;
}
@media (max-width: 399.98px) {
  .boton-toolbar-letra {
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .boton-toolbar-letra span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}

.enlaces-index {
  display: inline-block;
  width: 50px;
  height: 30px;
  border-radius: 2px;
  border: 1px solid #F2F2F2;
  align-content: center;
}

#listadoReclamaciones .k-grid-content, #listadoOrdenesTrabajo .k-grid-content {
  overflow-y: auto;
}

#listadoReclamaciones .k-grid-draggable-header, #listadoOrdenesTrabajo .k-grid-draggable-header {
  padding-right: 0 !important;
  scrollbar-gutter: stable;
}

.k-column-menu .k-column-menu-item.k-set-column-position {
  display: none !important;
}

#listadoPromotorPromocion .k-table-tbody::before {
  display: none !important;
}

#listadoOrdenesTrabajo .header-urgente .k-link {
  text-indent: -9999px;
}

@media (max-width: 991.98px) {
  #limpiarFiltrosGrid {
    display: none !important;
  }
  .reclamaciones-layout {
    display: block;
  }
  .reclamaciones-panels-group {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }
  .reclamaciones-panels-group .custom-panel {
    flex: 0 0 calc(50% - 0.25rem) !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(50% - 0.25rem) !important;
  }
  .filter-pane {
    position: fixed;
    left: 0;
    right: 0;
    transform: translateY(100%);
    bottom: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    z-index: 1100;
    opacity: 1;
    pointer-events: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    height: calc(100vh - 88px);
    max-height: calc(100vh - 88px);
    transition: transform 0.28s ease, opacity 0.28s ease;
  }
  #reclamacionesLayout.filters-mobile-open .filter-pane,
  #ordenesTrabajoLayout.filters-mobile-open .filter-pane {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .filter-pane-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .filter-pane-close {
    display: inline-flex;
  }
  .mobile-filter-search {
    display: block;
  }
  .desktop-only-search {
    display: none;
  }
  .filter-pane-body {
    overflow: hidden;
    padding-bottom: 0;
  }
  .filter-pane-fields {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
  }
  .filter-pane-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
  }
  .estado-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .estado-chip {
    flex: 0 0 auto;
  }
  .reclamaciones-search-row {
    flex-wrap: wrap;
  }
  .reclamaciones-filtros-inline {
    gap: 0.5rem;
  }
  .reclamaciones-filtros-inline .estado-chips {
    flex: 1 1 100%;
    order: 2;
  }
  .reclamaciones-filtros-inline .reclamaciones-search-input {
    flex: 1 1 100%;
    order: 1;
  }
  .filter-grid.two-cols {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}
@media (max-width: 1199.98px) {
  #limpiarFiltrosGridOT {
    display: none !important;
  }
}
.loading-background {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

.loading-position {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: -30px;
  z-index: -1;
  color: var(--token-brand-primary);
}

.loading-background:before {
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

#TiemposReclamaciones .k-table-row {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.2 !important;
}

.popUp {
  display: none;
}

#popupModificar .form-floating {
  width: 300px !important;
  margin: 10px auto;
}

#popupModificar .form-control {
  padding: 0.4rem 0.75rem;
}

#popupModificar #cambiarContrasenaContacto {
  display: block;
  margin: 15px auto;
  padding: 0.4rem 1rem;
}

#popupModificar {
  padding: 20px;
  text-align: center;
}

/* Mantiene estructura sin saltos al ocultar columnas */
.rg-fixed-size .k-grid-header,
.rg-fixed-size .k-grid-content {
  width: var(--rg-fixed-width);
}

/* Asegurar que los grids ocupen todo el ancho */
.full-width-grid {
  width: 100% !important;
}

.k-grid {
  width: 100% !important;
}

.k-grid table {
  width: 100% !important;
}

.k-grid-content {
  width: 100% !important;
}

/* Contenedores de grid */
#gridResumenGremiosCompactoContainer,
#gridResumenGremiosDetalleContainer {
  width: 100% !important;
}

/* Cursor para elementos clickeables */
.cursor-dashboard {
  cursor: pointer !important;
}

.cursor-dashboard:hover {
  background-color: #F2F2F2 !important;
}

/* Asegurar que los enlaces en modo responsive funcionen */
.enlaces-index a.cursor-dashboard {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.enlaces-index a.cursor-dashboard:hover {
  background-color: #E6E6E6;
  text-decoration: none;
}

@media (min-width: 576px) {
  /* large */
  .width-lg-475 {
    width: 475px !important;
  }
}
#listadoPermisosPromotorContacto .k-dirty {
  display: none !important;
}

.reclamacion-no-eliminable {
  background-color: #FBE0E0 !important;
}

/* Column chooser dropdown — checkboxes cuadrados (anula estilo toggle global) */
#columnChooserDropdown .form-check-input[type=checkbox] {
  border-radius: 0.25em;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  float: none;
  margin-left: 0;
  margin-top: 0;
  background-image: none;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

#columnChooserDropdown .form-check-input[type=checkbox]:checked {
  background-color: var(--token-brand-active);
  border-color: var(--token-brand-hover);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-position: center;
  background-size: 80%;
}

#columnChooserDropdown .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#columnChooserDropdown .form-check:last-child {
  border-bottom: none;
}

.form-floating.filtro-aplicado .k-dropdownlist,
.form-floating.filtro-aplicado .k-picker {
  border-color: #75ACFF !important;
  box-shadow: 0 0 0 0.12rem rgba(152, 193, 255, 0.22) !important;
}

.form-floating.filtro-aplicado .form-control {
  border-color: #75ACFF !important;
  box-shadow: 0 0 0 0.12rem rgba(152, 193, 255, 0.22) !important;
}

.form-control-datepicker.filtro-aplicado {
  border-color: #75ACFF !important;
  box-shadow: 0 0 0 0.12rem rgba(152, 193, 255, 0.22) !important;
}

.form-floating.filtro-aplicado label {
  color: #004FC7;
  font-weight: 500;
}

/* Esto cambiará todos los títulos de ExpansionPanel de la app */
.k-expander-title {
  text-transform: none !important;
  font-family: "DM Sans", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .k-expander-title {
    font-size: 20px;
    line-height: 30px;
  }
}

/* En móvil, a veces el borde inferior desaparece por el overflow */
@media (max-width: 399.98px) {
  .k-expander-title {
    /* Ayuda a visualizar el límite si el tema falla */
  }
}
/*
    AUDITORÍA (_DatosCreacionFormulario)
    Exclusivo de esta vista: rótulos "Creado/Modificado por" en azul-55
    y datos (nombre - fecha) en una sola línea horizontal.
*/
.datos-auditoria .label-on,
.datos-auditoria .label-off {
  color: #2C80FF;
}
.datos-auditoria .nav-divider > li {
  display: inline-block;
}

/* Ver nota en la lista de imports del principio: va al final a proposito. */
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/* ============================================================
   SWITCHES Y CASILLAS
   ============================================================
   Paleta en blanco y negro:
     - apagado  -> fondo blanco, borde gris, bola gris
     - encendido-> fondo negro, bola / marca en blanco

   Antes iban en azul ($color-primitive-azul-45, #005BE4), redefinido
   dentro de app.scss.

   Se importa DESPUES del bloque de .form-check-input de app.scss: misma
   especificidad, gana el orden. Por eso este fichero va al final de la
   lista de imports en app.scss.

   No toca .switch-medio ni .switch-medio-tipoOT (los de tipo de OT), que
   llevan su propia paleta con !important a proposito.
*/
.form-check-input {
  background-color: #FFFFFF;
  border-color: #BFBFBF;
}
.form-check-input:hover {
  border-color: #121212;
}
.form-check-input:active {
  filter: none;
}
.form-check-input:focus, .form-check-input:focus-visible {
  outline: none;
  border-color: #121212;
  box-shadow: 0 0 0 4px rgba(18, 18, 18, 0.15);
  /*
      app.scss pinta la bola de azul (#86b7fe) al enfocar. Se deja en gris,
      el mismo de reposo, para que al enfocar no cambie de color.

      Va aqui, en .form-check-input a secas, y no solo bajo .form-check:
      hay controles sueltos fuera de un .form-check (por ejemplo el de
      "Enviar correo de alta al usuario" en Gremios/Crear, que cuelga
      directamente de un d-flex) a los que si no, no les llegaba.
  */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23949494'/%3e%3c/svg%3e");
}
.form-check-input:checked {
  background-color: #121212;
  border-color: #121212;
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #121212;
  border-color: #121212;
}
.form-check-input:disabled {
  opacity: 0.45;
}

/*
    Separacion a ambos lados.

    En app.scss el control arrastra el float y el margen negativo de Bootstrap
    (.form-check .form-check-input { float: left; margin-left: -1.5em }), pensados
    para el marcado clasico "input y despues label". En esta aplicacion la etiqueta
    va SIEMPRE delante, asi que ese margen negativo montaba el control encima del
    texto: por eso el switch aparecia pegado a la etiqueta.

    Se anula el float y se pone un margen fijo a los dos lados, valga el orden que
    valga en el marcado.
*/
.form-check:has(> .form-check-input:not(:first-child)),
.form-switch:has(> .form-check-input:not(:first-child)) {
  padding-left: 0;
}
.form-check:has(> .form-check-input:not(:first-child)) > .form-check-input,
.form-switch:has(> .form-check-input:not(:first-child)) > .form-check-input {
  float: none;
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 0;
  flex-shrink: 0;
}

.form-check > .form-check-input:first-child,
.form-switch > .form-check-input:first-child {
  margin-right: 8px;
}

.form-check-input {
  margin-left: 8px;
  margin-right: 8px;
}

/*
    Las casillas y los radios no llevan bola, solo su marca (tick o punto).
    La heredaban del bloque de switch de app.scss, asi que una casilla sin marcar
    era indistinguible de un switch apagado. El bloque de .form-switch de aqui
    abajo se la vuelve a poner a los que si son switches.
*/
.form-check .form-check-input {
  background-image: none;
}

/* --- Switch (role="switch" / .form-switch) -------------------------------- */
.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23949494'/%3e%3c/svg%3e");
  background-position: left center;
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23949494'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked, .form-switch .form-check-input:checked:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-position: right center;
}

/*
    Switch por role="switch", este o no dentro de .form-switch.

    Muchas vistas envuelven el switch solo en .form-check (o en nada): el bloque de arriba no
    les llegaba y se quedaban con el estilo de casilla de legacy (_11-ordenes-trabajo.scss,
    ".form-check-input:checked[type=checkbox]"): un check blanco al encenderlos y sin bola
    (o con la bola gris antigua) al apagarlos. Aqui se les pone la misma bola que al resto en
    los dos estados. Misma especificidad que esa regla de legacy (0,3,0): gana por ir despues.
*/
.form-check-input[role=switch] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23949494'/%3e%3c/svg%3e");
  background-position: left center;
}
.form-check-input[role=switch]:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23949494'/%3e%3c/svg%3e");
}
.form-check-input[role=switch]:checked, .form-check-input[role=switch]:checked:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-position: right center;
}

/*
    Tamano unico para todos los switches de la app: 32x16px, a juego con el texto de .form-info
    (15px / 18px de interlineado). Antes cada uno media distinto segun la regla de legacy que le
    llegara (20px de alto, 2em de ancho...). Fuera quedan los de tipo de OT (.switch-medio), que
    son mas grandes a proposito.
*/
.form-switch .form-check-input:not(.switch-medio):not(.switch-medio-tipoOT),
.form-check-input[role=switch]:not(.switch-medio):not(.switch-medio-tipoOT) {
  width: 32px;
  height: 16px;
  border-radius: 16px;
  background-size: contain;
}

@media (max-width: 767.98px) {
  .switches-alineados {
    display: grid !important;
    grid-template-columns: max-content max-content;
    justify-content: start;
    align-items: center;
    gap: 16px 0 !important;
  }
  .switches-alineados > .form-switch {
    display: contents !important;
  }
}

/*
    Switch con etiqueta dinamica (design.md 11.5): el texto cambia al encenderlo/apagarlo
    ("Urgente" / "No urgente"). El control va DELANTE y la etiqueta detras, y la etiqueta
    reserva desde el principio el ancho del mas largo de sus dos textos (data-on / data-off,
    pintados invisibles y sin alto en ::before / ::after): al cambiar no se mueve nada.

    <div class="form-check form-switch switch-etiqueta d-flex align-items-center gap-2">
        <input asp-for="Urgente" class="form-check-input" type="checkbox" role="switch" />
        <label class="form-info mb-0 switch-etiqueta-texto" for="Urgente" id="UrgenteLabel"
               data-on="Urgente" data-off="No urgente">@(Model.Urgente ? "Urgente" : "No urgente")</label>
    </div>

    El texto lo cambia App.ts para cualquier label .switch-etiqueta-texto: no hace falta JS por pagina.
*/
.form-switch.switch-etiqueta {
  padding-left: 0;
}
.form-switch.switch-etiqueta > .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
}

.switch-etiqueta-texto {
  display: inline-flex;
  flex-direction: column;
  padding-top: 0;
}
.switch-etiqueta-texto::before, .switch-etiqueta-texto::after {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.switch-etiqueta-texto::before {
  content: attr(data-on);
}
.switch-etiqueta-texto::after {
  content: attr(data-off);
}

/* Menu de acciones de tres puntos: detras de menu-nav.scss para ganar a su .dropdown-item global. */
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/*
    Menu de acciones de tres puntos (design.md 11.11): en movil/tablet agrupa los botones de la
    barra de un listado (Gremios, Capitulos, Viviendas, Reclamaciones...) o las acciones de una
    ficha (gremios asociados de una promocion, promotores).

        <div class="dropdown d-lg-none">
            <button class="btn-contextual menu-acciones-toggle" data-bs-toggle="dropdown" ...>
                <i class="bi bi-three-dots-vertical"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end menu-acciones">
                <li><h6 class="dropdown-header">Grupo</h6></li>
                <li><button class="dropdown-item"><i class="bi ..."></i>Accion</button></li>
                <li><hr class="dropdown-divider"></li>
                <li><button class="dropdown-item text-danger">...</button></li>
            </ul>
        </div>

    El .dropdown-item global (menu-nav.scss) es compacto a proposito para menus largos (usuario,
    columnas...). Aqui es tactil: cada fila tiene 48px de alto minimo y separacion entre si, y
    todas las opciones usan los mismos colores (texto gris-10, icono gris-40; rojo solo en las
    destructivas), sean <button>, <a> o <div>.
*/
.menu-acciones-toggle {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  font-size: 20px;
}

.menu-acciones-campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 280px;
  padding: 8px 12px;
  border: 1px solid #D6D6D6;
  border-radius: 4px;
  background-color: #FFFFFF;
  color: #242424;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.menu-acciones-campo .bi {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.menu-acciones-campo[aria-expanded=true] .bi {
  transform: rotate(180deg);
}
.menu-acciones-campo:hover {
  border-color: #585858;
}
.menu-acciones-campo:focus-visible {
  outline: none;
  border-color: #98C1FF;
  box-shadow: 0 0 0 0.2rem rgba(9, 107, 255, 0.25);
}

.dropdown-menu.menu-acciones {
  min-width: 260px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border-radius: 12px;
}
.dropdown-menu.menu-acciones li + li {
  margin-top: 2px;
}
.dropdown-menu.menu-acciones .dropdown-header {
  padding: 8px 12px 4px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #656565;
}
.dropdown-menu.menu-acciones .dropdown-divider {
  margin: 8px 4px;
}
.dropdown-menu.menu-acciones .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  color: #242424;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}
.dropdown-menu.menu-acciones .dropdown-item .bi {
  flex-shrink: 0;
  width: 20px;
  margin: 0 !important;
  font-size: 1.1rem;
  color: #585858;
}
.dropdown-menu.menu-acciones .dropdown-item:hover, .dropdown-menu.menu-acciones .dropdown-item:focus {
  background-color: #F2F2F2;
  color: #242424;
}
.dropdown-menu.menu-acciones .dropdown-item:active {
  background-color: #E6E6E6;
  color: #242424;
}
.dropdown-menu.menu-acciones .dropdown-item.text-danger .bi {
  color: inherit;
}
.dropdown-menu.menu-acciones .dropdown-item.text-danger:hover, .dropdown-menu.menu-acciones .dropdown-item.text-danger:focus, .dropdown-menu.menu-acciones .dropdown-item.text-danger:active {
  background-color: #FDEFEF;
}
.dropdown-menu.menu-acciones .dropdown-item:disabled, .dropdown-menu.menu-acciones .dropdown-item.disabled {
  color: #AAAAAA;
  background-color: transparent;
  pointer-events: none;
}
.dropdown-menu.menu-acciones .dropdown-item:disabled .bi, .dropdown-menu.menu-acciones .dropdown-item.disabled .bi {
  color: inherit;
}

.dropdown-menu.menu-acciones.menu-usuario .dropdown-header {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}

/* Botonera siempre expandible: detras de legacy/_03-botonera.scss, que es donde vive el resto. */
/*
    BREAKPOINTS

    Escala de anchos de viewport del design system. Sigue la escala de
    Bootstrap (sm/md/lg/xl/xxl, coincide con el grid col-sm/col-md que ya usa
    la app) ampliada con 3 tramos propios por debajo de 576px para cubrir la
    granularidad móvil que Bootstrap no define.

    Uso:
        @include mq-up('lg') { ... }              // >= 992px
        @include mq-down('xs') { ... }             // <= 399.98px
        @include mq-between('md', 'lg') { ... }    // 768px - 991.98px
*/
/*
    Botonera flotante (legacy/_03-botonera.scss): siempre expandible y plegada al cargar
    (_Botonera.cshtml), con el engranaje para desplegarla, aunque solo tenga un boton. En movil
    asi no tapa el ultimo campo del formulario.

    Va importado detras de legacy/ (app.scss): por eso las alturas de 1-2 botones llevan
    :not(.collapsed), para no ganar a ".botonera.expandible .botonera-acciones.collapsed".
*/
.botonera.expandible .botonera-acciones.botones-1:not(.collapsed) {
  max-height: 100px;
}

.botonera.expandible .botonera-acciones.botones-2:not(.collapsed) {
  max-height: 200px;
}

@media (min-width: 992px) {
  .botonera.botonera--expandible-movil .botonera-expand {
    display: none;
  }
  .botonera.expandible.botonera--expandible-movil .botonera-acciones {
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 991.98px) {
  .page-content:has(.botonera) > main {
    padding-bottom: 96px;
  }
}
/* Fila de busqueda de Reclamaciones / OT (escritorio): detras de legacy/ y Bootstrap. */
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/*
    BREAKPOINTS

    Escala de anchos de viewport del design system. Sigue la escala de
    Bootstrap (sm/md/lg/xl/xxl, coincide con el grid col-sm/col-md que ya usa
    la app) ampliada con 3 tramos propios por debajo de 576px para cubrir la
    granularidad móvil que Bootstrap no define.

    Uso:
        @include mq-up('lg') { ... }              // >= 992px
        @include mq-down('xs') { ... }             // <= 399.98px
        @include mq-between('md', 'lg') { ... }    // 768px - 991.98px
*/
/*
    Fila de busqueda de los listados con panel lateral de filtros (Reclamaciones y Ordenes de
    Trabajo, .reclamaciones-search-row): busqueda + pills de estado + "Consultas y creacion" +
    papelera + columnas visibles. Solo escritorio (en movil la fila es otra: design.md 11.8).

    - Todos los controles con la misma altura (48px), el mismo borde ($token-border-medium),
      radio y fondo blanco. El input de busqueda es un .form-floating: se baja de los 58px de
      Bootstrap a 48px ajustando su padding y el de la etiqueta flotante.
    - Nada se sale al abrir el panel de filtros (la columna principal pierde ~390px): las
      pills se encogen con scroll horizontal (.estado-chips-row ya lo tiene).

    Va importado detras de legacy/ y de Bootstrap para ganarles sin !important (salvo el mb-2
    de la vista, que es una utilidad de Bootstrap con !important).
*/
@media (min-width: 992px) {
  .reclamaciones-search-row {
    min-width: 0;
  }
  .reclamaciones-search-row .reclamaciones-search-input {
    flex-shrink: 0;
    margin-bottom: 0 !important;
  }
  .reclamaciones-search-row .reclamaciones-search-input > .form-control {
    height: 48px;
    min-height: 48px;
    padding: 1.25rem 0.75rem 0.25rem;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
  }
  .reclamaciones-search-row .reclamaciones-search-input > label {
    padding: 0.75rem;
  }
  .reclamaciones-search-row .reclamaciones-search-input > .form-control:focus ~ label,
  .reclamaciones-search-row .reclamaciones-search-input > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(0.85) translateY(-0.45rem) translateX(0.15rem);
  }
  .reclamaciones-search-row .estado-chips {
    flex: 0 1 auto;
    min-width: 0;
  }
  .reclamaciones-search-row .estado-chips-row {
    max-width: 100%;
  }
  .reclamaciones-search-row .estado-chip {
    flex: 0 0 auto;
  }
  .reclamaciones-search-row .estado-chip > div {
    white-space: nowrap;
  }
  .reclamaciones-search-row > .dropdown,
  .reclamaciones-search-row > .ms-auto {
    flex-shrink: 0;
  }
  .reclamaciones-search-row .menu-acciones-campo {
    height: 48px;
    min-width: 0;
    gap: 8px;
  }
  .reclamaciones-search-row .btn-eliminar-seleccion {
    width: 48px;
    height: 48px;
  }
  .reclamaciones-search-row .btn-eliminar-seleccion:disabled {
    border-color: #D6D6D6;
  }
  .reclamaciones-search-row #toggleGridColumnFilter {
    justify-content: center;
    height: 48px;
    min-width: 48px;
    padding: 0 12px;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    background-color: #FFFFFF;
    color: #585858;
  }
  .reclamaciones-search-row #toggleGridColumnFilter:hover, .reclamaciones-search-row #toggleGridColumnFilter:focus-visible, .reclamaciones-search-row #toggleGridColumnFilter[aria-expanded=true] {
    border-color: #585858;
    background-color: #F2F2F2;
    color: #242424;
  }
}
/* Panel lateral (derecha en escritorio, desde abajo en movil): Asociar gremio. */
/*// ============================================
// TOKENS DE COMPONENTES (Construidos con otros tokens)
// ============================================
// Estos usan otros tokens, así que cambian indirectamente

// Botón Primario (Usa marca)
$token-button-primary-bg: $token-brand-primary;
$token-button-primary-bg-hover: $token-brand-hover;
$token-button-primary-bg-active: $token-brand-active;
$token-button-primary-text: $token-text-inverse;

// Botón Secundario (Usa neutrales - permanente)
$token-button-secondary-bg: $token-background-secondary;
$token-button-secondary-bg-hover: $token-background-hover;
$token-button-secondary-border: $token-border-medium;
$token-button-secondary-text: $token-text-primary;

// Enlaces (Usa marca)
$token-link-default: $token-brand-primary;
$token-link-hover: $token-brand-hover;
$token-link-active: $token-brand-active;
$token-link-visited: $color-primitive-azul-50; // Siempre azul*/
/*
    BREAKPOINTS

    Escala de anchos de viewport del design system. Sigue la escala de
    Bootstrap (sm/md/lg/xl/xxl, coincide con el grid col-sm/col-md que ya usa
    la app) ampliada con 3 tramos propios por debajo de 576px para cubrir la
    granularidad móvil que Bootstrap no define.

    Uso:
        @include mq-up('lg') { ... }              // >= 992px
        @include mq-down('xs') { ... }             // <= 399.98px
        @include mq-between('md', 'lg') { ... }    // 768px - 991.98px
*/
/*
    Panel lateral (design.md 11.13): se abre sobre la vista para elegir algo sin salir de ella
    ("Asociar gremio" en Promociones/Editar > Gremios). Escritorio: entra por la derecha a toda
    la altura, con el fondo oscurecido. Movil: sube desde abajo, como el panel de filtros
    (filtros-panel.scss / filter-pane).

        <div id="...Fondo" class="panel-lateral-fondo" hidden></div>
        <aside id="..." class="panel-lateral" role="dialog" aria-modal="true" aria-hidden="true">
            <div class="panel-lateral-cabecera">
                <span class="h4 mb-0">Titulo</span>
                <button class="filtro-mobile-close" aria-label="Cerrar"><i class="bi bi-x-lg"></i></button>
            </div>
            <div class="panel-lateral-cuerpo"> ... </div>
        </aside>

    Se abre/cierra con la clase .abierto en el panel y en el fondo (JS de la vista); el fondo
    lleva hidden mientras esta cerrado para no tapar clics. La cruz es la de los filtros
    (negra, color de marca al pasar/pulsar).
*/
.panel-lateral-fondo {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background-color: rgba(18, 18, 18, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.panel-lateral-fondo.abierto {
  opacity: 1;
}

.panel-lateral {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background-color: #FFFFFF;
  box-shadow: -4px 0 24px rgba(18, 18, 18, 0.18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.panel-lateral.abierto {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.28s ease, visibility 0s;
}

.panel-lateral-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 24px 12px;
}

.panel-lateral-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 24px 24px;
  overflow-y: auto;
}

@media (max-width: 767.98px) {
  .panel-lateral {
    top: auto;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 88px);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(18, 18, 18, 0.18);
    transform: translateY(100%);
  }
  .panel-lateral.abierto {
    transform: translateY(0);
  }
  .panel-lateral-cabecera {
    padding: 16px 16px 12px;
    border-bottom: 1px solid #F2F2F2;
    margin-bottom: 12px;
  }
  .panel-lateral-cuerpo {
    padding: 0 16px 16px;
  }
}
/* Ventanas Kendo: esquinas, centrado y texto. Al final para ganar a legacy/_18 (.k-window). */
/*
    Ventanas Kendo (Html.Kendo().Window / kendoWindow), todas las de la app.

    - Esquinas redondeadas (radio m) tambien en cabecera y contenido, que son los que
      pintan el fondo en las esquinas.
    - Siempre centradas en la pantalla: Kendo las coloca con top/left en linea al abrirlas
      (y se descuadran si el contenido llega despues por Ajax), asi que se centran por CSS,
      con !important para ganar al estilo en linea. Se acotan al alto de la pantalla para
      que se vean enteras sin hacer scroll de la pagina; el scroll, si hace falta, es del
      contenido de la ventana.
    - Texto del contenido con las caracteristicas de .parrafo-basico. Los elementos con su
      propia clase (titulos, botones, campos) conservan las suyas.

    Solo ventanas reales (con barra de titulo): hay divs sueltos con la clase k-window
    (p. ej. los de carga) que no deben tocarse. Los Dialog ya los centra Kendo con su
    contenedor, por eso se excluyen.
*/
.k-window:has(> .k-window-titlebar):not(.k-dialog) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
}

.k-window {
  border-radius: 8px !important;
}
.k-window > .k-window-titlebar {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.k-window > .k-window-content {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: auto;
}

.k-window-content {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: #313131;
}
@media (max-width: 399.98px) {
  .k-window-content {
    font-size: 13px;
    line-height: 19px;
  }
}

/*# sourceMappingURL=app.css.map */
/* Marco fijo de entorno de pruebas (solo Staging, ver Views/Shared/_BannerEntornoPruebas). */
.marco-entorno-pruebas {
  position: fixed;
  inset: 0;
  border: 6px solid #21b0ba;
  pointer-events: none;
  z-index: 20000;
}

.etiqueta-entorno-pruebas {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 0.2rem 0.9rem;
  border-radius: 4px 4px 0 0;
  background-color: #21b0ba;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 20001;
  cursor: default;
}