/*Inicio espacio para las fuentes*/
@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Rubik";
  src: url("../../../fonts/Rubik-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../../../fonts/AlbertSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../../fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Mulish";
  src: url("../../../fonts/Mulish-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Nunito";
  src: url("../../../fonts/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "SofiaSans";
  src: url("../../../fonts/SofiaSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "SofiaSans";
  src: url("../../../fonts/SofiaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "SofiaSans";
  src: url("../../../fonts/SofiaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "SofiaSans";
  src: url("../../../fonts/SofiaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/*fuente poppins*/
@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../../../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/*fin poppins*/

@font-face {
  font-family: "iconos-sistel";
  src: url("../../../public/font/font_sistel/iconos-sistel.eot?41096833");
  src: url("../../../public/font/font_sistel/iconos-sistel.eot?41096833#iefix")
      format("embedded-opentype"),
    url("../../../public/font/font_sistel/iconos-sistel.woff?41096833")
      format("woff"),
    url("../../../public/font/font_sistel/iconos-sistel.ttf?41096833")
      format("truetype"),
    url("../../../public/font/font_sistel//iconos-sistel.svg?41096833#iconos-sistel")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

body {
  /*font-family: "Montserrat" !important;
  display: flex;
  min-height: 100vh;
  flex-direction: column;*/
  display: flex;
  /*ajuste mp 25072025*/
  flex-direction: column;
  min-height: 100vh;
}

/*Fin espacio para las fuentes*/
/*Entregado por diseno styleguide*/
:root {
  /* primary del template y footer */
  --bs-primary: rgb(0, 75, 133); /* #374ef7 */
  --brand-footer: rgb(0, 75, 133); /* #161d50 */
  /* Brand principal colors */
  --brand-principal-default: rgb(0, 75, 133); /* #374ef7 */
  --brand-principal-hover: rgb(0, 54, 91); /* #283ada */
  --brand-principal-activo: rgb(0, 54, 91); /* #0c1268 */
  --brand-principal-inactivo: rgb(127,163,191); /* #5375ff */
  /* Brand Secondary colors */
  --brand-secondary-default: #ec7e00; /* #0c1268 */
  --brand-secondary-hover: rgba(236, 126, 0); /* #006644 */
  --brand-secondary-activo: rgba(236, 126, 0); /* #006E44 */
  --brand-secondary-inactivo: rgba(242, 178, 102); /* #006E44 */
  /* Secondary States (probablemente poco usados) */
  --secundario-default: #89878c; /* #89878c */
  --secundario-hover: rgba(93,91,96); /* #93,91,96 */
  --secundario-activo: rgba(93,91,96); /* #93,91,96 */
  --secundario-inactivo: rgba(154,153,160); /* #154,153,160 */
  /* Neutral colors */
  --neutral-color100: rgba(247, 248, 248, 1); /* #F7F8F8 */
  --neutral-color200: rgba(237, 238, 241, 1); /* #EDEEF1 */
  --neutral-color300: rgba(219, 219, 223, 1); /* #DBDBDF */
  --neutral-color400: rgba(182, 186, 195, 1); /* #B6BAC3 */
  --neutral-color500: rgba(142, 149, 162, 1); /* #8E95A2 */
  --neutral-color600: rgba(104, 114, 128, 1); /* #687280 */
  --neutral-color700: rgba(88, 97, 110, 1); /* #58616E */
  --neutral-color800: rgba(74, 78, 90, 1); /* #4A4E5A */
  --neutral-color900: rgba(64, 68, 76, 1); /* #40444C */
  /* Success colors */
  --success-color100: rgba(76, 175, 80, 1); /* #4CAF50 */
  --success-color200: rgba(32, 104, 48, 1); /* #206830 */
  --success-color300: rgba(203, 234, 201, 1); /* #CBEAC9 */
  /* Error colors */
  --error-color100: rgba(220, 38, 38, 1); /* #DC2626 */
  --error-color200: rgba(153, 24, 27, 1); /* #99181B */
  --error-color300: rgba(254, 202, 202, 1); /* #FECACA */
  /* Warning colors */
  --warning-color100: rgba(234, 189, 8, 1); /* #EABD08 */
  --warning-color200: rgba(202, 162, 4, 1); /* #CAA204 */
  --warning-color300: rgba(254, 231, 138, 1); /* #FEE78A */

  /* text colors */
  --text-color-black: #000000;
  --text-color-white: #ffffff;
  --text-color-perso: #004b85;

  --paragraph-01-regular-font-family: "Montserrat", Helvetica;
  --paragraph-01-regular-font-weight: 400;
  --paragraph-01-regular-font-size: 16px;
  --paragraph-01-regular-letter-spacing: 0px;
  --paragraph-01-regular-line-height: normal;
  --paragraph-01-regular-font-style: normal;
  --paragraph-01-semibold-font-family: "Montserrat", Helvetica;
  --paragraph-01-semibold-font-weight: 600;
  --paragraph-01-semibold-font-size: 16px;
  --paragraph-01-semibold-letter-spacing: 0px;
  --paragraph-01-semibold-line-height: normal;
  --paragraph-01-semibold-font-style: normal;
  --paragraph-01-bold-font-family: "Montserrat", Helvetica;
  --paragraph-01-bold-font-weight: 700;
  --paragraph-01-bold-font-size: 16px;
  --paragraph-01-bold-letter-spacing: 0px;
  --paragraph-01-bold-line-height: normal;
  --paragraph-01-bold-font-style: normal;
  --paragraph-01-reg-italic-font-family: "Montserrat", Helvetica;
  --paragraph-01-reg-italic-font-weight: 400;
  --paragraph-01-reg-italic-font-size: 16px;
  --paragraph-01-reg-italic-letter-spacing: 0px;
  --paragraph-01-reg-italic-line-height: normal;
  --paragraph-01-reg-italic-font-style: italic;
  --paragraph-01-semibold-italic-font-family: "Montserrat", Helvetica;
  --paragraph-01-semibold-italic-font-weight: 600;
  --paragraph-01-semibold-italic-font-size: 16px;
  --paragraph-01-semibold-italic-letter-spacing: 0px;
  --paragraph-01-semibold-italic-line-height: normal;
  --paragraph-01-semibold-italic-font-style: italic;
  --paragraph-01-bold-italic-font-family: "Montserrat", Helvetica;
  --paragraph-01-bold-italic-font-weight: 700;
  --paragraph-01-bold-italic-font-size: 16px;
  --paragraph-01-bold-italic-letter-spacing: 0px;
  --paragraph-01-bold-italic-line-height: normal;
  --paragraph-01-bold-italic-font-style: italic;
  --hero-italic-font-family: "Montserrat", Helvetica;
  --hero-italic-font-weight: 400;
  --hero-italic-font-size: 32px;
  --hero-italic-letter-spacing: 0px;
  --hero-italic-line-height: normal;
  --hero-italic-font-style: italic;
  --hero-bold-font-family: "Montserrat", Helvetica;
  --hero-bold-font-weight: 700;
  --hero-bold-font-size: 32px;
  --hero-bold-letter-spacing: 0px;
  --hero-bold-line-height: normal;
  --hero-bold-font-style: normal;
  --hero-bold-italic-font-family: "Montserrat", Helvetica;
  --hero-bold-italic-font-weight: 700;
  --hero-bold-italic-font-size: 32px;
  --hero-bold-italic-letter-spacing: 0px;
  --hero-bold-italic-line-height: normal;
  --hero-bold-italic-font-style: italic;
  --body-small-regular-font-family: "Montserrat", Helvetica;
  --body-small-regular-font-weight: 400;
  --body-small-regular-font-size: 14px;
  --body-small-regular-letter-spacing: 0px;
  --body-small-regular-line-height: normal;
  --body-small-regular-font-style: normal;
  --body-small-semibold-font-family: "Montserrat", Helvetica;
  --body-small-semibold-font-weight: 600;
  --body-small-semibold-font-size: 14px;
  --body-small-semibold-letter-spacing: 0px;
  --body-small-semibold-line-height: normal;
  --body-small-semibold-font-style: normal;
  --body-small-bold-font-family: "Montserrat", Helvetica;
  --body-small-bold-font-weight: 700;
  --body-small-bold-font-size: 14px;
  --body-small-bold-letter-spacing: 0px;
  --body-small-bold-line-height: normal;
  --body-small-bold-font-style: normal;
  --body-small-italic-font-family: "Montserrat", Helvetica;
  --body-small-italic-font-weight: 400;
  --body-small-italic-font-size: 14px;
  --body-small-italic-letter-spacing: 0px;
  --body-small-italic-line-height: normal;
  --body-small-italic-font-style: italic;
  --body-small-semibold-italic-font-family: "Montserrat", Helvetica;
  --body-small-semibold-italic-font-weight: 600;
  --body-small-semibold-italic-font-size: 14px;
  --body-small-semibold-italic-letter-spacing: 0px;
  --body-small-semibold-italic-line-height: normal;
  --body-small-semibold-italic-font-style: italic;
  --body-small-bold-italic-font-family: "Montserrat", Helvetica;
  --body-small-bold-italic-font-weight: 700;
  --body-small-bold-italic-font-size: 14px;
  --body-small-bold-italic-letter-spacing: 0px;
  --body-small-bold-italic-line-height: normal;
  --body-small-bold-italic-font-style: italic;
  --h2-title-medium-font-family: "Montserrat", Helvetica;
  --h2-title-medium-font-weight: 500;
  --h2-title-medium-font-size: 28px;
  --h2-title-medium-letter-spacing: 0px;
  --h2-title-medium-line-height: normal;
  --h2-title-medium-font-style: normal;
  --h2-title-medium-italic-font-family: "Montserrat", Helvetica;
  --h2-title-medium-italic-font-weight: 500;
  --h2-title-medium-italic-font-size: 28px;
  --h2-title-medium-italic-letter-spacing: 0px;
  --h2-title-medium-italic-line-height: normal;
  --h2-title-medium-italic-font-style: italic;
  --h2-title-bold-font-family: "Montserrat", Helvetica;
  --h2-title-bold-font-weight: 700;
  --h2-title-bold-font-size: 28px;
  --h2-title-bold-letter-spacing: 0px;
  --h2-title-bold-line-height: normal;
  --h2-title-bold-font-style: normal;
  --h2-title-bold-italic-font-family: "Montserrat", Helvetica;
  --h2-title-bold-italic-font-weight: 700;
  --h2-title-bold-italic-font-size: 28px;
  --h2-title-bold-italic-letter-spacing: 0px;
  --h2-title-bold-italic-line-height: normal;
  --h2-title-bold-italic-font-style: italic;
  --h3-subtitle-regular-font-family: "Montserrat", Helvetica;
  --h3-subtitle-regular-font-weight: 400;
  --h3-subtitle-regular-font-size: 22px;
  --h3-subtitle-regular-letter-spacing: 0px;
  --h3-subtitle-regular-line-height: normal;
  --h3-subtitle-regular-font-style: normal;
  --h3-subtitle-regular-italic-font-family: "Montserrat", Helvetica;
  --h3-subtitle-regular-italic-font-weight: 400;
  --h3-subtitle-regular-italic-font-size: 22px;
  --h3-subtitle-regular-italic-letter-spacing: 0px;
  --h3-subtitle-regular-italic-line-height: normal;
  --h3-subtitle-regular-italic-font-style: italic;
  --h3-subtitle-bold-font-family: "Montserrat", Helvetica;
  --h3-subtitle-bold-font-weight: 700;
  --h3-subtitle-bold-font-size: 22px;
  --h3-subtitle-bold-letter-spacing: 0px;
  --h3-subtitle-bold-line-height: normal;
  --h3-subtitle-bold-font-style: normal;
  --h3-subtitle-bold-italic-font-family: "Montserrat", Helvetica;
  --h3-subtitle-bold-italic-font-weight: 700;
  --h3-subtitle-bold-italic-font-size: 22px;
  --h3-subtitle-bold-italic-letter-spacing: 0px;
  --h3-subtitle-bold-italic-line-height: normal;
  --h3-subtitle-bold-italic-font-style: italic;
  --m3-schemes-primary: rgba(101, 85, 143, 1);
  --border-radius: 0.6rem;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --transition: all 0.3s ease;
  --bs-body-font-family: "Montserrat";
}

[data-m3-mode="light"] {
  --m3-schemes-primary: rgba(101, 85, 143, 1);
}

[data-m3-mode="light-high-contrast"] {
  --m3-schemes-primary: rgba(39, 23, 78, 1);
}

[data-m3-mode="light-medium-contrast"] {
  --m3-schemes-primary: rgba(73, 57, 113, 1);
}

[data-m3-mode="dark"] {
  --m3-schemes-primary: rgba(208, 188, 254, 1);
}

[data-m3-mode="dark-high-contrast"] {
  --m3-schemes-primary: rgba(255, 249, 255, 1);
}

[data-m3-mode="dark-medium-contrast"] {
  --m3-schemes-primary: rgba(211, 193, 255, 1);
}

[data-m3-mode="monochrome-LT"] {
  --m3-schemes-primary: rgba(0, 0, 0, 1);
}

[data-m3-mode="monochrome-DT"] {
  --m3-schemes-primary: rgba(255, 255, 255, 1);
}

[data-m3-mode="pink-LT"] {
  --m3-schemes-primary: rgba(138, 75, 104, 1);
}

[data-m3-mode="pink-DT"] {
  --m3-schemes-primary: rgba(254, 176, 209, 1);
}

[data-m3-mode="rose-LT"] {
  --m3-schemes-primary: rgba(143, 74, 86, 1);
}

[data-m3-mode="rose-DT"] {
  --m3-schemes-primary: rgba(255, 178, 189, 1);
}

[data-m3-mode="red-LT"] {
  --m3-schemes-primary: rgba(145, 75, 67, 1);
}

[data-m3-mode="red-DT"] {
  --m3-schemes-primary: rgba(255, 167, 155, 1);
}

[data-m3-mode="orange-LT"] {
  --m3-schemes-primary: rgba(141, 79, 40, 1);
}

[data-m3-mode="orange-DT"] {
  --m3-schemes-primary: rgba(255, 182, 140, 1);
}

[data-m3-mode="yellow-LT"] {
  --m3-schemes-primary: rgba(121, 90, 12, 1);
}

[data-m3-mode="yellow-DT"] {
  --m3-schemes-primary: rgba(233, 193, 108, 1);
}

[data-m3-mode="chartreuse-LT"] {
  --m3-schemes-primary: rgba(92, 100, 30, 1);
}

[data-m3-mode="chartreuse-DT"] {
  --m3-schemes-primary: rgba(195, 205, 124, 1);
}

[data-m3-mode="green-LT"] {
  --m3-schemes-primary: rgba(55, 106, 62, 1);
}

[data-m3-mode="green-DT"] {
  --m3-schemes-primary: rgba(156, 212, 159, 1);
}

[data-m3-mode="teal-LT"] {
  --m3-schemes-primary: rgba(0, 107, 96, 1);
}

[data-m3-mode="teal-DT"] {
  --m3-schemes-primary: rgba(130, 213, 199, 1);
}

[data-m3-mode="cyan-LT"] {
  --m3-schemes-primary: rgba(1, 104, 125, 1);
}

[data-m3-mode="cyan-DT"] {
  --m3-schemes-primary: rgba(134, 209, 234, 1);
}

[data-m3-mode="blue-LT"] {
  --m3-schemes-primary: rgba(72, 94, 146, 1);
}

[data-m3-mode="blue-DT"] {
  --m3-schemes-primary: rgba(176, 198, 255, 1);
}

[data-m3-mode="indigo-LT"] {
  --m3-schemes-primary: rgba(91, 89, 146, 1);
}

[data-m3-mode="indigo-DT"] {
  --m3-schemes-primary: rgba(197, 192, 255, 1);
}

[data-m3-mode="purple-LT"] {
  --m3-schemes-primary: rgba(107, 84, 141, 1);
}

[data-m3-mode="purple-DT"] {
  --m3-schemes-primary: rgba(214, 187, 251, 1);
}

.border-primary {
  border-color: var(--brand-principal-default);
}

/*fin styleguide*/

main,
div.page-wraper {
  flex: 1 0 auto;
  background-color: #ffffff;
  /*Se restablece su color a blanco por sugeriencia de soporte*/
}

html,
body {
  /*width: 100% !important;
  font-size: 17px;*/
  /*ajuste mp 25072025*/
  height: 100%;
  margin: 0;
  padding: 0;
}

/*nuevos estilos Discovery*/

/*estilos del login*/
.contenido-index-login {
 display: flex;
  justify-content: flex-end;
}

.centro,
.izquierda,
.derecha {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.izquierda {
  margin-left: 0%;
}

.centro {
  margin-left: auto;
  margin-right: auto;
}

.derecha {
  /*margin-left: 66.66666%;*/
  float: right;
}

.completo {
  height: 100%;
  z-index: 5;
}

.login{
  background-color: rgb(255, 255, 255);
  width: 35%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.contenedor_login {
  width: 100%;
  /*max-width: 450px;*/
  /* height: 100vh; */
  background-color: #fff;
}

.pequeno .login_interno {
  /*padding-top: 40px; en movil hace que se esconda los ultimos botones*/
  /*ajuste mp 25072025*/
  /* margin-left: 20px; */
  /*margin-right: 20px; queda mas hacia un lado*/
}

.completo .fondo-form {
  height: 100vh;
  z-index: 1;
}

/* Inicio ajuste de modal para recuperar contraseña */
.offcanvas-wide {
  overflow-y: scroll !important;
  margin-top: 0;
}

.offcanvas-backdrop {
  margin-top: 0;
}

.offcanvas-backdrop.show {
  margin-top: 0;
}

/* loader de recuparar contraseña: */
.loader_password {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid var(--secundario-default);
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.loader_password::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-left: 4px solid var(--brand-principal-inactivo);
  border-bottom: 4px solid transparent;
  animation: rotation 0.5s linear infinite reverse;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* FIn ajuste de modal para recuperar contraseña */
/* ajuste imagenes de cards en vista de biblioteca */
.image-card {
  object-fit: contain !important;
  /* Para que la imagen no se distorsione */
  width: 100%;
  /* Ancho 100% para ocupar todo el contenedor */
  /* height: 200px !important;
  Puedes ajustar la altura como desees */
}

.imagen_logo {
  min-height: 150px;
  max-width: 300px;
  max-height: 300px;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  /*margin-top: 20px; baja la imagen y por ende todo lo demas*/
  /*ajuste mp 25072025*/
  background-position: center;
  background-repeat: no-repeat;
}

.imagen_fondo {
  /*
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 90vh;
  background-position: top center;
  max-width: 100%;
  min-height: 716px; */
  background-size: cover;
  /*ajuste mp 25072025*/

  background-repeat: no-repeat;
  width: 100%;
  min-height: calc(100vh - 100px);
  background-position: top center;
  max-width: 100%;
}

.sesion-idiomas {
  position: absolute;
  top: 0.5rem;
  left: 0.3rem;
}

.fondo-form {
  min-height: 650px;
}

.login .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Montserrat", Helvetica;
  font-weight: 700;
  color: var(--brand-principal-default);
  font-size: 1.5em;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.login .ingresa-tus-datos {
  position: relative;
  align-self: stretch;
  font-family: "Montserrat", Helvetica;
  font-weight: 400;
  color: var(--brand-principal-activo);
  font-size: 1.5em;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.login .campo-usuario {
  gap: 14.97px;
  padding: 11.97px;
  top: 210px;
  left: 2px;
  border-radius: 5.99px;
  border: 1.5px solid;
  display: flex;
  width: 467px;
  height: 54px;
  align-items: center;
  position: absolute;
  border-color: var(--neutral-color500);
}

.login .button-cuenta-corp {
  border-radius: 5.44px;
  border: 1.36px solid;
  border-color: var(--neutral-color500);
  color: var(--brand-principal-default) !important;
  background-color: transparent;
  /* Asegurar fondo transparente */

  &:focus,
  &:active {
    border-color: var(--neutral-color500) !important;
    color: var(--brand-principal-default) !important;
    background-color: transparent !important;
    outline: none;
    /* Remover outline por defecto */
  }
}

.login .button-cuenta-corp:hover {
  border-radius: 5.44px;
  border: 1.36px solid;
  border-color: var(--neutral-color500);
  color: rgba(255, 255, 255, 1) !important;
  background-color: var(--brand-principal-default) !important;
}

/* Agregar esto para forzar el color del span */
.login .button-cuenta-corp:hover .text-wrapper {
  color: rgba(255, 255, 255, 1) !important;
}

.login .button-cuenta-corp:hover i {
  color: rgba(255, 255, 255, 1) !important;
}

/***************************/
.form_login {
  margin-bottom: 20px;
  width: 100%;
}

.cont-inpt {
  position: relative;
  display: block;
  width: 100%;
}

.cont-inpt .icono {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #6c757d;
  font-size: 18px;
}

.cont-inpt input {
  padding-left: 50px !important;
  height: 50px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: #fff;
  width: 100% !important;
  box-sizing: border-box;
}

.cont-inpt input:focus {
  border-color: var(--secundario-default);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}

.cont-inpt input::placeholder {
  color: #adb5bd;
  font-weight: 400;
}

.btn-login {
  width: 100% !important;
  height: 50px;
  background-color: var(--secundario-default);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.btn-login:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.login .button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34.73px;
  padding: 20.84px 81.03px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  margin-top: -8.61px;
  margin-bottom: -8.61px;
  background-color: var(--brand-principal-default);
  border-radius: 5.79px;
}

.enlace_autoregistro {
  color: var(--brand-principal-activo);
  font-weight: 600;
}

.enlace_autoregistro:hover,
.enlace_autoregistro:focus {
  text-decoration: underline;
  color: var(--brand-principal-default);
}

/*Fin estilos login*/

/* Estilos adicionales para complementar el diseño */

/*Inicio banner sliders */
.carousel-banner-principal .carousel-item {
  border-radius: 0.4rem;
  padding: 1rem;
  width: 100%;
  height: 255px;
  position: relative;
  transition: background-image 0.3s ease;
  background-size: cover;
  background-position: 50% 50%;
}

.carousel-banner-principal .carousel-item.active {
  display: flex !important;
  align-items: center;
}

.carousel-banner-principal .contenedor-texto-slider .titulo {
  font-weight: var(--hero-bold-font-weight);
  color: #ffffff;
  /* font-size: var(--hero-bold-font-size); */
  font-size: 2rem;
  white-space: nowrap;
  position: relative;
  font-family: var(--hero-bold-font-family);
  letter-spacing: var(--hero-bold-letter-spacing);
  line-height: var(--hero-bold-line-height);
  font-style: var(--hero-bold-font-style);
}

.carousel-banner-principal .contenedor-texto-slider .descripcion {
  position: relative;
  align-self: stretch;
  font-family: var(--h2-title-medium-font-family);
  font-weight: var(--h2-title-medium-font-weight);
  color: #ffffff;
  /* font-size: var(--h2-title-medium-font-size); */
  font-size: 1.2rem;
  letter-spacing: var(--h2-title-medium-letter-spacing);
  line-height: var(--h2-title-medium-line-height);
  font-style: var(--h2-title-medium-font-style);
  margin-bottom: 0;
  text-align: justify;
}

.carousel-banner-principal .carousel-indicators > button {
  width: 10px;
  height: 10px;
}

/*Fin banner sliders */
.header-front-external {
  background-color: var(--brand-principal-default);
  padding: 1rem;
}

/* Texto de bienvenida */
.texto-bienvenida {
  text-align: center;
  margin-bottom: 2rem;
}

.text-wrapper-5 {
  color: var(--brand-principal-default);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: "Montserrat", Helvetica;
}

.ingresa-tus-datos {
  color: var(--brand-principal-activo);
  font-size: 1rem;
  margin: 0;
  font-family: "Montserrat", Helvetica;
  font-weight: 400;
}

.login .text-wrapper {
  position: relative;
  width: 342.41px;
  margin-top: -0.49px;
  font-family: var(--body-small-regular-font-family);
  font-weight: var(--body-small-regular-font-weight);
  color: var(--brand-principal-activo);
  font-size: var(--body-small-regular-font-size);
  letter-spacing: var(--body-small-regular-letter-spacing);
  line-height: var(--body-small-regular-line-height);
  font-style: var(--body-small-regular-font-style);
}

/*Esto se usa en los cheks del login ajuste mp 25072025 */
.form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid var(--neutral-color500);
  border-radius: 0 !important;
  background-color: transparent !important;
}

.form-check-input:checked {
  background-color: var(--brand-principal-default) !important;
  border-color: var(--brand-principal-default) !important;
}

.form-check-input:focus:not(:checked) {
  background-color: transparent !important;
  /* O white si prefieres */
  border-color: var(--brand-principal-default) !important;
  box-shadow: 0 0 0 2px rgba(var(--brand-principal-default-rgb), 0.25) !important;
}

.form-check-input:focus:checked {
  background-color: var(--brand-principal-default) !important;
  border-color: var(--brand-principal-default) !important;
  box-shadow: 0 0 0 2px rgba(var(--brand-principal-default-rgb), 0.25) !important;
}

.form-check-input:hover:not(:checked) {
  border-color: var(--brand-principal-default) !important;
  background-color: rgba(var(--brand-principal-default-rgb), 0.1) !important;
}

.form-check-input:hover:checked {
  background-color: var(--brand-principal-default) !important;
  border-color: var(--brand-principal-default) !important;
  opacity: 0.9;
}

/*Fin esto se usa en los cheks del login ajuste mp 25072025 */

.form-check-label {
  font-size: 0.875em;
  color: var(--brand-principal-activo);
  font-family: "Montserrat", Helvetica;
  line-height: 1.4;
  margin: 0;
  flex: 1;
}

.form-check-label a {
  color: var(--brand-principal-default);
}

/* Ajustar el botón principal para que use los estilos existentes */
.btn-login {
  background-color: var(--brand-principal-default) !important;
  border-color: var(--brand-principal-default) !important;
  font-weight: 600;
  text-transform: uppercase;
}

.btn-login:hover {
  background-color: var(--brand-principal-activo) !important;
  color: #fff !important;
  border-color: var(--brand-principal-activo) !important;
}

/* Botón de cuenta corporativa */
.btn-outline-primary {
  border-color: var(--brand-principal-default) !important;
  color: var(--brand-principal-default) !important;
  font-size: var(--body-small-regular-font-size) !important;
  padding: 12px 20px;
}

.btn-outline-primary:hover {
  background-color: var(--brand-principal-default) !important;
  border-color: var(--brand-principal-default) !important;
  color: var(--neutral-color100) !important;
}

/*iconos dentro de los input*/
.cont-inpt {
  position: relative;
  display: block;
  width: 100%;
}

.cont-inpt .icono {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #6c757d;
  font-size: 18px;
  pointer-events: none;
  /* Para que no interfiera con el click del input */
}

.cont-inpt input {
  padding-left: 45px !important;
  /* Espacio para el icono */
  height: 50px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: #fff;
  width: 100% !important;
  box-sizing: border-box;
}

.cont-inpt input:focus {
  border-color: var(--secundario-default);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}

/*recorte de login en pantallas pequenas*/

/******************************************************************************** Fin de estilos login***************************************************************/

/****************************************************************************footer******************************************************************************/
.text-wrapper-6 {
  position: relative;
  align-self: stretch;
  font-weight: var(--body-small-bold-font-weight);
  font-size: var(--body-small-bold-font-size);
  letter-spacing: var(--body-small-bold-letter-spacing);
  line-height: var(--body-small-bold-line-height);
  font-style: var(--body-small-bold-font-style);
}

.text-wrapper-7 {
  position: relative;
  align-self: stretch;
  font-weight: var(--body-small-regular-font-weight);
  color: #ffffff;
  font-size: var(--body-small-regular-font-size);
  letter-spacing: var(--body-small-regular-letter-spacing);
  line-height: var(--body-small-regular-line-height);
  font-style: var(--body-small-regular-font-style);
}

.img_logo_footer {
  max-height: 5em;
}

/* Ajustes del .navbar-brand  */

.navbar-brand {
  margin: 0 0 0 0.63rem;
}

.navbar {
  background-color: var(--brand-principal-default);
  position: fixed;
  width: calc(100% - 16.2rem);
  transition: all 0.3s ease;
  right: 0;
  top: 0;
}

.nav .navbar-inner {
  padding: 0 3rem;
}

.navbar #navbarSupportedContent ul li a {
  margin: 0 0.3rem;
}

.navbar #navbarSupportedContent ul li a svg {
  width: 1.5rem;
}

.sidebar {
  box-shadow: 0 0 15px #00000094;
}

.sidebar .sidebar-toggle {
  top: 75px;
  z-index: 1000 !important;
}

.active svg {
  color: white;
}

.sidebar .navbar-brand {
  padding: 0.9rem 1rem;
  overflow: hidden;
}

.sidebar .sidebar-header {
  background-color: var(--brand-principal-default);
  padding: 0.16rem 0;
}

/* Ajustes generales para los botones del evaluacion */
.btn_default {
  color: white !important;
  background-color: var(--brand-principal-inactivo);
  text-decoration: none !important;
  font-size: 0.8rem;
  font-weight: 600;
}

.btn_default:hover {
  transition: all 0.5s;
  background-color: var(--brand-principal-activo);
}

/* Ajustes generales para los botones del evaluacion */
.btn_default {
  color: white;
  background-color: var(--brand-principal-inactivo);
}

.btn_default:hover {
  transition: all 0.5s;
  background-color: var(--brand-principal-activo);
  color: white;
}

/* Ajustes para el footer */
.main-content {
  position: relative;
}

.footer {
  margin-top: auto;
  position: relative;
  bottom: 0 !important;
  left: 0;
  right: 0;
  background-color: var(--brand-footer);
  /* margin: 2rem 0 0 0;  */
  z-index: 10;
  padding: 10px;
  /*padding-bottom: 2rem;*/
}

/* navegacion .breadcrumb-item.active*/
.breadcrumb-item {
  font-weight: bold;
  color: var(--neutral-color600) !important;
}

.breadcrumb-item.active {
  font-weight: bold;
  color: var(--neutral-color800) !important;
}

.breadcrumb-item.hover {
  font-weight: bold;
  color: var(--brand-principal-activo) !important;
}

/* Texto inical */
.texto_info {
  /* text-align: center; */
  margin: 0;
}

.container-table {
  width: 100%;
  margin: 0 auto 5rem auto;
  /* padding: 1rem; */
  /* border-radius: 1rem; */
  /* background-color: var(--neutral-color100); */
  background-color: #fff;
}

.table_title {
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  padding: 0.5rem 0;
  border: 1px solid white;
  border-radius: 0.5rem;
  margin: 0.1rem 0 2rem 0;
  background-color: var(--brand-principal-default);
  color: white;
}

/* Estilos tablas con datatable */

.table-responsive .dataTables_wrapper .row .dataTables_length {
  padding-left: 0;
}

.table-responsive .dataTables_wrapper .row .dataTables_info {
  padding-left: 0;
  margin: 1rem 0;
}

.table-responsive .dataTables_wrapper .row .dataTables_filter,
.table-responsive .dataTables_wrapper .row .dataTables_paginate {
  padding-right: 0;
}

.table-responsive .dataTables_wrapper .row .dataTables_paginate {
  margin: 1rem 0;
}

.table > :not(:last-child) > :last-child > * {
  text-align: center;
}

/* Para los íconos activos */
.nav-item.active .nav-link .icon {
  color: #ffffff;
  /* Color blanco para los activos */
}

/* Para los íconos no activos */
.nav-item .nav-link .icon {
  color: var(--brand-principal-default);
  /* Color azul para los inactivos */
}

/* buscador del nav */
.search-input {
  border: 1px solid var(--brand-primary2);
  border-radius: 5px;
}

.search-input input {
  background-color: transparent;
  outline: none;
}

.search-input input:focus {
  outline: none;
  background-color: transparent;
}

.search-input span {
  background-color: transparent;
}

/* Estilos del icono de accesibilidad */

.contenedor-widget {
  position: relative;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.asw-menu {
  position: fixed;
  display: flex;
  flex-direction: column;
  left: unset !important;
  top: 0;
  right: 0 !important;
  box-shadow: 0 0 20px #00000080;
  opacity: 1;
  transition: 0.3s;
  z-index: 50000 !important;
  overflow: hidden;
  background: #eff1f5;
  width: 500px;
  line-height: 1;
  font-size: 16px;
  height: 100%;
  letter-spacing: 0.015em;
}

.asw-menu-btn {
  width: 42px;
  height: 42px;
}

.asw-menu-btn svg {
  width: 26px;
  height: 26px;
  min-height: 26px;
  min-width: 26px;
  max-width: 26px;
  max-height: 26px;
}

.asw-widget,
.asw-menu {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.asw-widget *,
.asw-menu * {
  box-sizing: border-box !important;
}

.asw-menu .asw-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  height: 72px !important;
  font-weight: 700 !important;
  background-color: var(--brand-principal-default) !important;
}

.asw-menu-btn {
  position: relative !important;
  z-index: 1000 !important;
  left: 0 !important;
  bottom: 0 !important;
  top: 0 !important;
  left: 0 !important;
  box-shadow: unset !important;
  transition: transform 0.2s ease;
  border-radius: unset;
  align-items: center;
  justify-content: center;
  width: 2rem !important;
  height: 2rem !important;
  display: flex;
  cursor: pointer;
  border: 1px solid white !important;
  outline: unset !important;
  text-decoration: none !important;
  background: unset !important;
  background: unset !important;
  padding: 2px !important;
}

.asw-menu-btn svg {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  background: transparent !important;
}

.asw-menu-btn:hover {
  transform: scale(1.05);
}

/* Estilos de las tablas de Logros */
.text-secondary-default {
  color: var(--brand-secondary-default);
}
.table-logros thead .table-title {
  /* background-color: red; */
  /* border-radius: 5px; */
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 1.5rem;
  background-color: var(--brand-principal-default);
}

.botones_tabla {
  background-color: #dde0e0;
  transition: all 0.3s ease;
  color: #6c7280;
  font-weight: bold;
  width: 150px;
}

.botones_tabla:hover {
  background-color: #b8bdbd;
  transition: all 0.3s ease;
  color: #fff;
}

.botones_tabla_active {
  background-color: var(--brand-principal-default);
  color: #fff;
}

.botones_tabla_active:hover {
  background-color: var(--brand-principal-default);
  color: #fff;
}

/****************************************************** ESTILOS CURSOS COMPRIMIDOS **************************************************/
/* ===== BOTONES Y CONTROLES ===== */
.btn-filtro-curso,
.mobile-btn,
.filters-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: none;
  background: #00000000;
  color: var(--brand-principal-activo);
  cursor: pointer;
  transition: var(--transition);
  padding: 0.5rem;
}

.icon-btn {
  flex: 1;
  max-width: 10rem;
  border: 1px solid #ccc;
  background: white;
  padding: 0.5rem;
  /* display: flex; */
  align-items: left;
  justify-content: left;
  gap: 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--neutral-color900);
}

.btn-filtro-curso:hover,
.mobile-btn:hover,
.filters-btn:hover {
  background-color: var(--brand-principal-activo);
  color: white;
}

.btn-cursos-carpetas,
.btn-cursos-carpetas-list {
  color: var(--brand-principal-default);
  background-color: #fff;
  border: 1px solid var(--brand-principal-default);
  border-radius: 0.15rem;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  transition: var(--transition);
}

.btn-cursos-carpetas {
  display: block;
  width: 100%;
  text-align: center;
}

.btn-cursos-carpetas:hover,
.btn-cursos-carpetas-list:hover {
  color: #fff;
  background-color: var(--brand-principal-default);
  transform: translateY(-2px);
}

.btn-cursos-carpetas:hover::before {
  width: 300px;
  height: 300px;
}

.search-input-cursos {
  width: 100%;
  padding: 0.6rem 1rem;
  background-color: #e3e5e962;
  border: none;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  transition: var(--transition);
}

.search-input-cursos:focus {
  outline: none;
  border-color: var(--brand-principal-activo);
  box-shadow: 0 0 0 2px rgba(58, 83, 252, 0.1);
}

/* ===== BADGES ===== */
.badge-estado {
  padding: 0.25em 0.5em;
  border-radius: 0.17rem;
  font-size: 0.85rem;
  color: white;
  white-space: nowrap;
}

.badge-gris {
  padding: 0.25em 0.5em;
  border-radius: 0.17rem;
  font-size: 0.85rem;
  color: white;
  background-color: var(--neutral-color500);
  white-space: nowrap;
}

.badge-poriniciar {
  background-color: var(--neutral-color500);
}

.badge-pendiente {
  background-color: var(--error-color100);
}

.badge-pendienteevaluacion {
  background-color: var(--error-color100);
}

.badge-enprogreso {
  background-color: var(--warning-color100);
}

.badge-iniciado {
  background-color: var(--secundario-default);
}

.badge-completado {
  background-color: var(--success-color100);
}
/* Estilos para la etiqueta "Nuevo" */
.etiqueta-nuevo {
  position: absolute;
  top: 2.5rem;
  left: 8px;
  background: var(--brand-principal-default);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 12px;
  z-index: 15;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: pulseNew 2s infinite;
}
.etiqueta-nuevo-list {
  position: absolute;
  bottom: 8px;
  left: 0.6rem;
  background: var(--brand-principal-default);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 12px;
  z-index: 15;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: pulseNew 2s infinite;
}
/* Estilos para la etiqueta de la macroempresa */
.etiqueta-macroempresa {
  position: absolute;
  top: 1rem; /* Ajusta la distancia desde arriba */
  right: 0px; /* Ajusta la distancia desde la derecha */
  z-index: 10; /* Asegura que esté por encima de otros elementos */
  background-color: #ffffff;
  padding: 0.5px 1px; /* Espaciado interno */
  border-radius: 8px 0 0 8px; /* Bordes ligeramente redondeados */
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  Sombra sutil */
  display: flex; /* Para centrar la imagen si es necesario */
  align-items: center;
  justify-content: center;
  max-width: 125px; /* Ancho máximo para la etiqueta */
  max-height: 30px; /* Alto máximo para la etiqueta */
}
.etiqueta-macroempresa img {
  max-width: 100%; /* La imagen no debe desbordarse de su contenedor */
  max-height: 100%; /* La imagen no debe desbordarse de su contenedor */
  height: auto; /* Mantiene la proporción */
  display: block; /* Elimina espacio extra debajo de la imagen */
}
.etiqueta-macroempresa-list {
  position: absolute;
  bottom: 1rem; /* Ajusta la distancia desde arriba */
  left: 0px; /* Ajusta la distancia desde la derecha */
  z-index: 10; /* Asegura que esté por encima de otros elementos */
  background-color: #ffffff;
  padding: 0.5px 1px; /* Espaciado interno */
  border-radius: 0px 8px 8px 0px; /* Bordes ligeramente redondeados */
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  Sombra sutil */
  display: flex; /* Para centrar la imagen si es necesario */
  align-items: center;
  justify-content: center;
  max-width: 125px; /* Ancho máximo para la etiqueta */
  max-height: 50px; /* Alto máximo para la etiqueta */
}

.etiqueta-macroempresa-list img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  display: block;
  left: 0px;
}
/* ===== LAYOUT PRINCIPAL ===== */
.layout-wrapper {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.filters-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 2rem;
  height: fit-content;
}

.filter-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid #e5e7eb;
}

.filter-section {
  margin-bottom: 1.5rem;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-section h6 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--neutral-color800);
}

.filter-checkbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.filter-checkbox input[type="checkbox"] {
  margin-right: 0;
  margin-left: 0.5rem;
  transform: scale(1.1);
  accent-color: var(--brand-principal-default);
}

.filter-checkbox label {
  font-size: 0.9rem;
  color: var(--neutral-color600);
  cursor: pointer;
  margin: 0;
}

.filter-checkbox:hover label {
  color: var(--brand-principal-default);
}

.content-area {
  flex: 1;
  min-width: 0;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.content-filters,
.content-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.mobile-controls {
  display: none;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}

.mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: 1px solid var(--brand-principal-activo);
  background: white;
  color: var(--brand-principal-activo);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

.vista-filters-right {
  display: flex;
  justify-content: center;
}

.mobile-btn:hover {
  background-color: var(--brand-principal-activo);
  color: white;
}

.filters-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: 1px solid var(--brand-principal-default);
  background: #00000000;
  color: var(--brand-principal-default);
  border-radius: 0.38rem;
  cursor: pointer;
  transition: var(--transition);
  padding: 0.5rem;
}

.content-area {
  animation: fadeInUp 0.8s ease-out;
}

.section-title {
  opacity: 0;
  animation: slideInLeft 0.8s ease-out 0.3s forwards;
  position: relative;
}

.section-title::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--brand-principal-default),
    var(--brand-principal-activo)
  );
  border-radius: 2px;
}

.info-box {
  border: 2px solid var(--brand-principal-default);
  border-radius: 15px;
  background: linear-gradient(
    135deg,
    rgba(58, 83, 252, 0.05),
    rgba(255, 255, 255, 0.95)
  );
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.info-box:hover {
  box-shadow: 0 15px 35px rgba(58, 83, 252, 0.1);
}

/* Iconos con efectos */
.info-box svg {
  transition: transform 0.3s ease;
}

.info-box:hover svg {
  transform: scale(1.1) rotate(5deg);
}

.objetivos-section {
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.filters-btn:hover {
  background-color: var(--brand-principal-default);
  color: white;
}

/* ===== VISTA GRID ===== */
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.curso-card {
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #e5e7eb;
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(30px);
  animation: slideInCard 0.6s ease-out forwards;
  position: relative;
}

.curso-card:nth-child(1) {
  animation-delay: 0.1s;
}

.curso-card:nth-child(2) {
  animation-delay: 0.2s;
}

.curso-card:nth-child(3) {
  animation-delay: 0.3s;
}

.curso-card:nth-child(4) {
  animation-delay: 0.4s;
}

.curso-card:nth-child(5) {
  animation-delay: 0.5s;
}

.curso-card:nth-child(6) {
  animation-delay: 0.6s;
}

.curso-card:nth-child(n + 7) {
  animation-delay: 0.7s;
}

.curso-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border: 1px solid rgba(58, 83, 252, 0.2);
}

.curso-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.6s ease;
  z-index: 1;
}

.curso-card:hover::before {
  left: 100%;
}

.curso-card .image-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.curso-card .image-container > .imagen-curso {
  transition: transform 0.4s ease, filter 0.3s ease;
  filter: brightness(0.9);
}

.curso-card .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(58, 83, 252, 0.85),
    rgba(41, 64, 217, 0.7)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.curso-card:hover .image-overlay {
  opacity: 1;
}

.curso-card .overlay-content {
  text-align: center;
  color: white;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.curso-card:hover .overlay-content {
  transform: translateY(0);
}

.curso-card .curso-numero {
  background: linear-gradient(
    135deg,
    var(--brand-principal-default),
    var(--brand-principal-activo)
  );
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 4;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(58, 83, 252, 0.3);
}

.curso-card:hover .curso-numero {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px rgba(58, 83, 252, 0.4);
}

.curso-card .badge {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.curso-card .badge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.curso-card .curso-card:hover .badge::after {
  width: 100px;
  height: 100px;
}

/* Animaciones de pulso para badges */
.curso-card .badge-completado {
  animation: pulseGreen 3s infinite;
}

.curso-card .badge-enprogreso {
  animation: pulseOrange 3s infinite;
}

.curso-card .badge-pendiente {
  animation: pulseRed 3s infinite;
}

.curso-card .badge-pendienteevaluacion {
  animation: pulseRed 3s infinite;
}

.curso-card .badge-poriniciar {
  animation: pulseGray 3s infinite;
}

.curso-card .curso-titulo {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.curso-card .curso-titulo::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--brand-principal-default),
    var(--brand-principal-activo)
  );
  transition: width 0.3s ease;
}

.curso-card:hover .curso-titulo::after {
  width: 100%;
}

.curso-card .progress-percentage {
  font-weight: bold;
  color: var(--brand-principal-default);
  transition: all 0.3s ease;
}

.curso-card:hover .progress-percentage {
  transform: scale(1.05);
  color: var(--brand-principal-activo);
}

.text-wrapper-2 {
  transition: color 0.3s ease;
}

.curso-card:hover .text-wrapper-2 {
  color: var(--brand-principal-activo) !important;
}

.text-wrapper-3 {
  transition: color 0.3s ease;
}

.curso-card:hover .text-wrapper-3 {
  color: var(--brand-principal-default) !important;
}

.curso-card img {
  width: 100%;
  object-fit: cover;
}

.curso-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}

.curso-card-body .barra-de-progreso {
  position: relative;
  z-index: 3;
}

.curso-card-body .progress-container {
  position: relative;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.curso-card-body .progress-container .rectangle {
  background: linear-gradient(
    90deg,
    var(--brand-principal-default),
    var(--brand-principal-activo)
  );
  transition: width 0.8s ease;
  border-radius: 10px;
  position: relative;
}

.curso-card-body .progress-container .rectangle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

.curso-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.curso-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--neutral-color900);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  flex: 1;
}

.curso-card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* ===== VISTA LISTA ===== */
.cursos-lista {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.curso-card-horizontal {
  display: flex;
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #e5e7eb;
  transition: var(--transition);
  align-items: stretch;
  padding: 0;
  min-height: 180px;
  position: relative;
}

.curso-card-horizontal img {
  width: auto;
  height: auto;
  object-fit: cover;
  /*  aspect-ratio: 4/3; */
  flex-shrink: 0;
  transition: max-width 0.2s;
}

.curso-info-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

/* ===== PAGINACIÓN ===== */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.pagination {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}

.pagination li {
  display: block;
}

.pagination a,
.pagination span {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--brand-principal-activo);
  text-decoration: none;
  border: 1px solid var(--brand-principal-activo);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.pagination a:hover {
  background-color: var(--brand-principal-activo);
  color: white;
}

.pagination .active span {
  background-color: var(--brand-principal-activo);
  color: white;
}

.pagination .disabled span {
  color: #9ca3af;
  border-color: #9ca3af;
  cursor: not-allowed;
}

/* ===== MODALES ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

.search-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: var(--border-radius);
  padding: 2rem;
  width: 90%;
  max-width: 400px;
  z-index: 1001;
}

.filters-modal {
  position: fixed;
  top: 0;
  right: -100%;
  width: 90%;
  max-width: 350px;
  height: 100vh;
  background: white;
  z-index: 1001;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.filters-modal.show {
  right: 0;
}

.filters-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: white;
  color: white;
}

.filters-modal-content {
  padding: 1.5rem;
}

.close-btn {
  background: none;
  border: none;
  color: var(--brand-principal-activo);
  font-size: 2rem;
  cursor: pointer;
  padding: 0;
}

.vista-btn {
  border: none;
  background: transparent;
  color: var(--neutral-color500);
  font-size: 1.5rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  transition: color 0.2s;
}

.vista-btn.active,
.vista-btn:active {
  color: var(--brand-principal-default) !important;
}

.filters-btn.active,
.filters-btn:active {
  background-color: var(--brand-principal-default) !important;
  color: #fff !important;
  border-color: var(--brand-principal-default) !important;
}

/* ===== ESTADOS AUXILIARES ===== */
.no-results {
  text-align: center;
  padding: 3rem;
  color: var(--neutral-color600);
}

.no-results h4 {
  color: var(--neutral-color900);
  margin-bottom: 1rem;
}

/* ===== UTILIDADES ===== */
.hidden {
  display: none;
}

.show {
  display: block;
}

.flex {
  display: flex;
}

.gap-1 {
  gap: 0.5rem;
}

.gap-2 {
  gap: 1rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  margin-bottom: 1rem;
}

.text-center {
  text-align: center;
}

.favorito {
  background: #adb5bda6;
  color: #ffff;
  padding: 0.4rem 0.4rem;
  border-radius: 50%;
}

.favorito:hover,
.favorito:active,
.favorito:focus {
  color: var(--warning-color100);
  transform: scale(1.1);
}

.favorito.active {
  background: var(--brand-principal-activo) !important;
}

.contenido-descarga {
  gap: 1rem;
  /* opcional, si quieres algo de espacio si hay más elementos */
  flex-wrap: nowrap;
  /* evita que se vayan abajo en pantallas pequeñas */
  padding-bottom: 1rem;
}

/* Fin estilos para cards de cursos, carpetas, biblioteca y contenido */
/************************ CSS PARA INFO CURSO *************************/
.info-curso-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  font-size: 14px;
  color: #666;
}

.breadcrumb-nav a {
  color: #666;
  text-decoration: none;
}

.breadcrumb-nav a:hover {
  color: #4f46e5;
}

.breadcrumb-nav .separator {
  margin: 0 10px;
  color: #999;
}

.curso-titulo {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 30px;
  line-height: 1.2;
}

.curso-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 40px;
  margin-bottom: 40px;
}

.curso-media {
  position: relative;
  background: #f8fafc;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.curso-media img,
.curso-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.curso-specs {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  border: 1px solid #e5e7eb;
  height: fit-content;
}

.specs-title {
  font-size: 21px;
  font-weight: 600;
  color: var(--neutral-color900);
  margin-bottom: 25px;
}

.spec-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 12px;
}

.spec-item:last-of-type {
  margin-bottom: 30px;
}

.spec-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--brand-principal-default);
  /*   border-color: var(--brand-principal-default);*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.spec-icon::after {
  content: "✓";
  color: var(--brand-principal-default);
  font-size: 20px;
  font-weight: bold;
}

.spec-content {
  flex: 1;
}

.spec-label {
  font-weight: 600;
  color: var(--neutral-color800);
  margin-bottom: 2px;
  font-size: 18px;
}

.spec-value {
  color: var(--neutral-color600);
  font-size: 18px;
  line-height: 1.4;
}

.ver-contenido-btn {
  width: 100%;
  background: var(--brand-principal-default);
  color: white;
  border: none;
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ver-contenido-btn:hover {
  background: var(--brand-principal-activo);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--brand-primary800);
}

.ver-contenido-btn::after {
  font-size: 18px;
  font-weight: bold;
}

.descripcion-section {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  border: 1px solid #e5e7eb;
}

.descripcion-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--neutral-color900);
  margin-bottom: 20px;
}

.descripcion-text {
  color: var(--neutral-color700);
  line-height: 1.6;
  font-size: 16px;
}

.fade-in {
  animation: fadeIn 0.6s ease-in;
}

/************************ FIN CSS PARA INFO CURSO *************************/

/************************ CSS para DETALLE DOCUMENTO que el acordeón ocupe todo el ancho disponible ****************************/
/* Botón regresar */
.retroceso {
  margin-bottom: 32px;
}

.retroceso a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--brand-principal-default);
  border-radius: 8px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(55, 78, 247, 0.2);
  border: 1px solid var(--neutral-color100);
}

.retroceso a:hover {
  background-color: var(--brand-principal-activo);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(55, 78, 247, 0.3);
  color: #ffffff;
  text-decoration: none;
}
.retroceso a .material-icons {
  transition: transform 0.3s ease;
}

.retroceso a:hover .material-icons {
  transform: translateX(-2px);
}
.titulo-contenidos-curso {
  font-weight: 600;
  font-size: 20px;
  color: var(--brand-principal-activo);
  margin-top: 0;
}

.boton-certificado-curso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px;
  background-color: var(--brand-principal-default);
  border-radius: 8px;
  border: none;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  line-height: 1.2;
}

.boton-certificado-curso:hover {
  background-color: var(--brand-principal-activo);
  transform: translateY(-1px);
}

.boton-certificado-curso .icono-descarga {
  width: 16px;
  height: 16px;
}

#documentosAccordion {
  width: 100% !important;
  max-width: 100% !important;
  border: none;
}

.accordion-cursos-item {
  width: 100% !important;
  display: block !important;
  border: none !important;
  margin-bottom: 8px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.accordion-cursos-header {
  width: 100% !important;
  display: block !important;
  border: none;
}

.accordion-cursos-button {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: left !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-color900);
  padding: 16px;
  border: 1px solid #00000000 !important;
  border-top: 1px solid #00000027 !important;
  border-bottom: 1px solid #00000027 !important;
  background-color: white !important;
  box-shadow: none !important;
  position: relative;
}

.accordion-cursos-button:not(.collapsed) {
  width: 100% !important;
  background-color: #f8f9ff !important;
  border-color: var(--neutral-color100) !important;
  border-radius: 8px 8px 0 0 !important;
  border-bottom: none !important;
}

.accordion-cursos-button:focus {
  box-shadow: none !important;
}

.accordion-cursos-button::after {
  display: none;
}

.content-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.content-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Estilos para los iconos de tipo de documento */
.document-type-icon {
  width: 32px;
  height: 32px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Color azul único para todos los tipos de documento */
/* Estado no completado - azul opaco */
.document-type-icon:not(.completed) {
  background: var(--brand-principal-inactivo); /* Azul opaco */
}

/* Estado completado - azul vibrante */
.document-type-icon.completed {
  background: var(--brand-principal-default); /* Azul vibrante */
}
.check-chulo-icon:not(.completed) {
  color: var(--neutral-color300); /* gris */
}

/* Estado completado  */
.check-chulo-icon.completed {
  color: var(--success-color100); /* verde */
}

/* Ícono de documento */
.document-icon {
  background: #e8f0fe;
  color: var(--primary-color);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.content-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0;
}

.accordion-cursos-collapse {
  width: 100% !important;
  border: none;
}

.curso-descripcion {
  color: var(--neutral-color700);
  text-align: left;
  font-weight: 600;
}

.accordion-cursos-body {
  width: 100% !important;
  padding: 16px 20px;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: white;
}

/* Cuando está expandido, quitar el border-radius inferior del botón */
.accordion-cursos-button:not(.collapsed) {
  border-radius: 8px 8px 0 0 !important;
  border-bottom: none !important;
}

/* Estilos adicionales para mejorar la apariencia */
.accordion-cursos-button:hover {
  background-color: #f8f9fa !important;
}

.accordion-cursos-button:not(.collapsed):hover {
  background-color: #f8f9ff !important;
}

/* buscador de secciones-> comunidad, biblioteca etc */
.buscador_seccion {
  background-color: #edeef1;
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
  .accordion-cursos-button {
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  .document-icon {
    padding: 4px 6px;
    font-size: 11px;
  }

  .document-icon span {
    display: none;
    /* Ocultar texto en móviles, solo mostrar ícono */
  }
}

/************************************* DETALLE DOCUMENTO ************************************/
/* Contenedor principal dividido en dos zonas 
/* Layout principal - Flexbox */
.principal-curso {
  display: flex;
  max-width: 100%;
  min-height: calc(100vh - 95px);
  background: transparent;
  gap: 20px;
  padding: 0 20px;
  align-items: flex-start;
}

/* Estilos adicionales para mejorar la experiencia visual */
.zone_2_cursos .contenedor {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zone_2_cursos .sesion-central {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Asegurar que el contenido multimedia se ajuste correctamente */
.zone_2_cursos video {
  max-width: 100%;
  height: auto;
}

.zone_2_cursos iframe {
  max-width: 100%;
  height: 100%;
}

.zone_2_cursos .contenido-video {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.zone_2_cursos .contenido-frame {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: none;
  border-radius: 8px;
}

/* Modo expandido */
.principal-curso.expandido {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  padding: 20px;
  gap: 0;
}

.principal-curso.expandido .zone_1_cursos {
  display: none;
}

.principal-curso.expandido .zone_2_cursos {
  flex: 1;
  width: 100%;
  height: calc(100vh - 40px);
  max-height: none;
  margin: 0;
}

.principal-curso.expandido .zone_2_cursos .contenedor {
  background: transparent;
  height: 100%;
}

.principal-curso.expandido .zone_2_cursos iframe,
.principal-curso.expandido .zone_2_cursos video {
  width: 100%;
  height: 100%;
}

/* ZONA 2: CONTENIDO PRINCIPAL */
.zone_2_cursos {
  flex: 2.5;
  order: 1;
  background: transparent;
  height: calc(100vh - 150px);
  max-height: 900px;
  min-height: 600px;
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: auto;
  width: 100%;
}

/* ZONA 1: PANEL LATERAL DERECHO */
.zone_1_cursos {
  flex: 0 0 350px;
  order: 2;
  height: calc(100vh - 150px);
  max-height: 900px;
  min-height: 600px;
  margin-top: 20px;
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 12px;
  border-left: 5px solid #8e95a233;
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.3s ease;
  padding: 32px 24px 32px 32px;
  overflow-y: auto;
  overflow-x: hidden;
}

.zone_1_cursos::after {
  content: "";
  display: block;
  height: 20px;
  width: 100%;
}

.zone_1_cursos::-webkit-scrollbar {
  width: 8px;
}

.zone_1_cursos::-webkit-scrollbar-track {
  background: var(--neutral-color100);
  border-radius: 4px;
  margin: 10px 0;
}

.zone_1_cursos::-webkit-scrollbar-thumb {
  background: var(--brand-principal-inactivo);
  border-radius: 4px;
  border: 1px solid var(--neutral-color200);
}

.zone_1_cursos::-webkit-scrollbar-thumb:hover {
  background: var(--brand-principal-default);
}

/* Para Firefox */
.zone_1_cursos {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-principal-inactivo) var(--neutral-color100);
}

.zone_1_cursos.zone_active_cursos {
  display: block;
}

.zone_1_cursos.zone_active_cursos {
  animation: slideInRight 0.3s ease;
}

/* Encabezado de módulo */
.info-modulo h1.titulo-modulo {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333;
}

/* Progreso */
.progreso-modulo {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.porcentaje-progreso {
  font-weight: bold;
  color: var(--brand-principal-activo);
}

.barra-progreso-container {
  background: #e4e9f0;
  border-radius: 6px;
  overflow: hidden;
  height: 10px;
}

.barra-progreso {
  background: linear-gradient(
    90deg,
    var(--brand-principal-inactivo) 0%,
    var(--brand-principal-default) 100%
  );
  height: 100%;
  border-radius: 6px;
}

/* Botón de certificado */
.boton-certificado-curso {
  background: var(--brand-principal-default);
  color: #fff;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.boton-certificado-curso:hover {
  background: var(--brand-principal-activo);
  color: #fff;
}

/* Título contenidos */
.titulo-contenidos-curso {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

/* Acordeón personalizado */
.accordion-cursos-item {
  margin-bottom: 10px;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  overflow: hidden;
}

.accordion-cursos-button {
  width: 100%;
  background-color: #f7f9fb;
  border: none;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-cursos-button:hover {
  background-color: #eef2f7;
}

.accordion-cursos-body {
  padding: 15px;
  background: #ffffff;
}

.content-left {
  display: flex;
  align-items: center;
}

.content-title {
  font-weight: 500;
  color: #333;
}

/* Iframe o SCORM o HTML */
.contenido-frame {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: none;
}

/* Video */
.contenido-video {
  width: 100%;
  height: auto;
  max-height: 75vh;
  border-radius: 8px;
}

/* Imagen */
.contenido-img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 8px;
  object-fit: contain;
}

/* Botón de expandir */
.expand-button-container {
  text-align: right;
}

#expandToggle {
  font-size: 0.85rem;
}

/*************************************FIN DETALLE DOCUMENTO *********************************/
.custom-audio-player {
  max-width: 600px;
  height: 20rem;
  /* Permite que la altura se ajuste automáticamente al contenido */
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  margin: 10px auto 0;
  box-sizing: border-box;
  /* padding-bottom: 20px; */
}

.custom-audio-player audio {
  display: none;
}

.player-overlay {
  position: relative;
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.music-note-icon {
  width: 25vw;
  max-width: 150px;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}

/* --- REVISIÓN DEL BOTÓN PLAY/PAUSE --- */
/* Definimos un tamaño base con em/rem para el contenedor del botón,
   y luego los bordes del triángulo serán porcentuales a ese tamaño. */
.play-button {
  /* Establece un tamaño base para el botón con rem, que es más estable */
  font-size: 3rem;
  /* Esto afectará el tamaño base del triángulo/barras */
  width: 0;
  height: 0;
  border-top: 0.8em solid transparent;
  /* 0.8 de la font-size (3rem) = 2.4rem */
  border-bottom: 0.8em solid transparent;
  /* 0.8 de la font-size */
  border-left: 1.2em solid rgba(255, 255, 255, 0.8);
  /* 1.2 de la font-size */
  transition: all 0.2s ease;
  z-index: 10;
  /* Aseguramos que no se haga enorme */
  max-width: 70px;
  max-height: 80px;
  /* Ajuste para centrar el triángulo mejor */
  transform: translateX(10%);
}

.play-button.paused {
  /* Usamos em para que escale con el font-size de su padre */
  width: 1.2em;
  /* 1.2 de la font-size (3rem) */
  height: 1.6em;
  /* 1.6 de la font-size */
  border-top: none;
  border-bottom: none;
  border-left: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Restablecer la transformación para las barras */
  transform: translateX(0);
}

.play-button.paused::before,
.play-button.paused::after {
  content: "";
  display: block;
  width: 45%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

/* --- FIN REVISIÓN DEL BOTÓN PLAY/PAUSE --- */

.controls-bottom {
  width: 100%;
  padding: 15px 20px;
  background-color: #222;
  color: #fff;
  display: flex;
  flex-direction: column;
  /* gap: 15px; */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: 10px 0 0 0;
  box-sizing: border-box;
}

.progress-time-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.progress-container {
  flex-grow: 1;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  min-width: 0;
}

#progressBar {
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
}

#progressBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  cursor: grab;
  margin-top: -5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#progressBar::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#progressBar::-ms-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#progressBar::-webkit-slider-runnable-track {
  background: transparent;
}

#progressBar::-moz-range-track {
  background: transparent;
}

#progressBar::-ms-track {
  background: transparent;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--secundario-default);
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.time-display {
  font-size: 0.9em;
  color: #bbb;
  white-space: nowrap;
}

.playback-speed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.playback-buttons {
  display: flex;
  gap: 15px;
}

.control-button {
  background: none;
  border: none;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: var(--neutral-color900);
}

.control-button:hover {
  color: var(--secundario-default);
  background-color: var(--neutral-color900);
}

.speed-control {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #bbb;
  font-size: 0.9em;
}

#playbackSpeed {
  background-color: var(--neutral-color900);
  color: #fff;
  border: 1px solid var(--neutral-color600);
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
  outline: none;
  font-size: 0.9em;
}

#playbackSpeed option {
  background-color: var(--neutral-color900);
  color: #fff;
}

/************************************* FIN VISTA CURSOS *************************************/

/*Reporte jefe Seguimiento jefe*/
.cir-segui {
  background-color: var(--brand-principal-activo);
  width: 100px;
  height: 100px;
}

.table-title-sj th {
  background-color: var(--brand-principal-default);
  color: #fff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.table-title2 {
  background-color: var(--neutral-color500);
}

.prs-sj {
  height: 0.7rem;
  width: 90%;
  /* AGREGAR ESTA LÍNEA */
  background-color: var(--neutral-color300);
  box-shadow: none;
}

p.porcent-sj {
  font-size: 0.7rem !important;
  font-weight: 700;
}

.td-progreso {
  min-width: 180px;
}

.progress-seguimiento {
  width: 100%;
  flex: 1;
  /* Para que ocupe todo el espacio disponible */
}

.porcent-sj {
  min-width: 50px;
  /* Ancho fijo para el porcentaje */
  flex-shrink: 0;
  /* esto evita que se encoja */
}

.btn-sj,
.btn-sj:hover {
  background-color: var(--brand-principal-default);
  color: var(--neutral-color100);
  font-weight: 800;
  font-size: medium;
}

.btn-success {
  background-color: var(--success-color100);
  color: #ffffff;
}

.btn-danger {
  background-color: var(--error-color100);
  color: #ffffff;
  font-size: 1.4rem;
}

.card-header-custom {
  background-color: var(--brand-principal-default);
  color: white;
  font-weight: 600;
  text-align: center;
  border: none;
}

.info-label {
  color: #6c757d;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.info-value {
  color: #495057;
  font-weight: 500;
  font-size: 0.95rem;
}

.info-icon {
  color: var(--brand-principal-default);
  margin-right: 0.5rem;
}

.no-content-card {
  animation: fadeInUp 0.8s ease-out;
  border-radius: 15px;
}

.no-content-card i {
  animation: pulse 2s infinite;
}

.color-txt1 {
  color: var(--brand-principal-activo);
}

.color-txt2 {
  color: var(--brand-principal-activo);
}

.size-lett {
  font-size: 1.1rem !important;
  font-weight: 400;
}

.page-item .page-link {
  border-color: var(--neutral-color100);
  background-color: var(--neutral-color100);
  /* color: var(--brand-principal-default); */
  color: var(--neutral-color400);
}

/*FIN Reporte jefe Seguimiento jefe*/
/* Buscador móvil igual que desktop */
.content-search-mobile {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

.content-search-mobile input.search-input-cursos {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  transition: var(--transition);
}

.content-search-mobile input.search-input-cursos:focus {
  outline: none;
  border-color: var(--brand-principal-activo);
  box-shadow: 0 0 0 2px rgba(58, 83, 252, 0.1);
}

.content-filters-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.content-filters-left {
  display: flex;
  gap: 0.5rem;
}

.content-filters-right {
  display: flex;
  gap: 0.5rem;
}

.no-disponible {
  background: rgb(95 93 93 / 60%);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 6;
  cursor: no-drop;
}

.no-disponible:hover::after {
  content: attr(data-mensaje);
  display: flex;
  background: var(--brand-principal-inactivo);
  text-align: center;
  color: #000000;
  height: 100%;
  animation: slideInLeft 0.8s ease-out;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  padding: 1rem;
}

/* cards del home */
.card_cursos,
.card_programas {
  transition: all 0.3s ease;
}

.card_cursos:hover {
  background-color: var(--brand-principal-activo) !important;
}

.card_programas {
  color: var(--brand-principal-default);
  /* Color original */
  transition: color 0.3s ease, background-color 0.3s ease;
  border: 1px solid var(--brand-principal-default);
}

.card_programas:hover {
  color: #fff !important;
  /* Nuevo color al hacer hover */
  background-color: var(--brand-principal-default);
}

/* Aplica la transición también a los SVGs para que el `fill="currentColor"` funcione */
.card_programas svg {
  transition: fill 0.3s ease;
  fill: currentColor;
}

/* Si hay texto con clases como text-primary o text-secondary, forzamos que usen `inherit` */
.card_programas * {
  color: inherit !important;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* card de continuar viendo (Ver mas) */
.ver_mas_cursos {
  transition: all 0.3s ease;
}

.ver_mas_cursos:hover {
  color: var(--brand-principal-default) !important;
}

/* card de continuar viendo */
.card_curso_continuar {
  transition: all 0.3s ease;
}

.card_curso_continuar:hover {
  border: 1px solid var(--brand-principal-default);
}

/* progress-bar */
.progress-bar-oscuro {
  background-color: var(--brand-principal-activo);
}

/* home => promedios, ranking y puedos card redonda */
.card_redondas_home {
  width: 94px;
  height: 94px;
  background-color: var(--brand-secondary-default);
}

.card_redondas_home .text-start h5 {
  color: var(--brand-principal-activo);
}

/* vista de rankings o logros */
.texto_oscuro_tabla {
  color: var(--brand-principal-activo);
}

/* hover en roles del navbar */
.submenuRoles .li-roles {
  transition: all 0.3s;
}

.submenuRoles .li-roles:hover {
  /* background-color: #ebeefd9a; */
  font-weight: 700;
}

.iconos-navbar {
  transition: transform 0.3s ease;
}

.iconos-navbar:hover {
  transform: scale(0.9);
  /* aumenta tamaño un 5% */
}

/* contenedor_perfil_usuario */
.contenedor_perfil_usuario {
  display: none;
}

.contenedor_perfil_usuario_items {
  display: none;
}

.sidebar .sidebar-header .sidebar-toggle .icon2 {
  display: none;
}

.sidebar-toggle .icon2 {
  display: none;
}

.navbar .navbar-inner .logo-main {
  display: none;
}

/* ajuste de evaluaciones */
.container-table__title {
  padding: 1rem;
  text-align: center;
  background-color: var(--brand-principal-default);
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 10px 0;
  border-radius: 5px;
}

/* Container del contador de evaluaciones */
.container-time-evaluar {
  position: relative;
}

.container-time-evaluar .container-time-evaluar__counter {
  position: fixed;
  z-index: 100;
}

input[type="radio"].form-check-input {
  border-radius: 50% !important;
  width: 1.2em;
  height: 1.2em;
}

/* contendor lateral del home */
.card_curso_continuar div h6 {
  font-weight: bold !important;
  font-size: 0.9rem !important;
  /* background-color: rosybrown; */
}

.card_curso_continuar div p {
  margin: 0;
  font-size: 0.7rem !important;
}

#contenedor-cursos-pendientes {
  max-height: 290px;
  overflow-y: auto;
}

.slide-in {
  animation: slideInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(30px);
}

.favorite-btn.loading {
  opacity: 0.6;
  pointer-events: none;
}

.favorite-btn.loading i {
  animation: spin 1s linear infinite;
}

.favorite-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 4;
  color: var(--neutral-color400);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.favorite-btn:hover {
  background: #ffffff;
  transform: scale(1.1);
  color: var(--warning-color100);
}

.favorite-btn.active {
  background: var(--warning-color100);
  color: #ffffff;
}

.favorite-btn.active:hover {
  background: var(--warning-color100);
}

.favorite-btn-list {
  color: #6c757d;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.favorite-btn-list:hover {
  color: var(--warning-color100);
  transform: scale(1.1);
}

.favorite-btn-list.active {
  color: var(--warning-color100);
}

.curso-card-horizontal .imagen-curso {
  max-width: 14em;
}

.badge-notifications {
  margin-left: 15px !important;
  align-items: center;
  display: flex;
  top: 0 !important;
  border-radius: 50%;
  color: #ffff !important;
  min-width: 1.3rem !important;
  min-height: 1.3rem !important;
  font-size: 0.7rem !important;
  position: absolute !important;
  background-color: var(--error-color100) !important;
  border: 1px solid var(--error-color300) !important;
  box-shadow: rgb(0 0 0 / 19%) 0px 10px 20px, rgb(0 0 0 / 23%) 0px 6px 6px;
}

/* input search del header */
.header_search::placeholder {
  color: white !important;
  opacity: 1;
  /* Hace que no sea translúcido */
}

.header_search:focus {
  color: white;
  border-color: white;
  box-shadow: none !important;
  /* Elimina el efecto azul de Bootstrap */
}

/* color del fondo para barras de progresos del home y ranking */
.card_barras_progresos .progress {
  --bs-progress-bg: #ecedef;
  /* Fondo real */
  --bs-progress-box-shadow: none;
  /* Sin sombra interna que cambie el tono */
}

.filters-btn-external {
  background: var(--neutral-color200);
  padding: 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--neutral-color900);
  font-size: 13px;
}

.filters-btn-external:hover {
  background: var(--neutral-color500);
  color: var(--neutral-color100);
}

.btn-cursos-carpetas.disabled,
.btn-cursos-carpetas-list.disabled {
  pointer-events: none;
  opacity: 0.5;
  border-color: var(--neutral-color500);
  color: var(--neutral-color900);
  background-color: var(--neutral-color300);
  cursor: not-allowed;
}

/* ---------------------------------------- Inicio Ajustes para tablas - Diseño fianl definido por gerencia ------------------------------------------- */

/* Forzar separación entre cabecera y cuerpo */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 8px !important; /* separación vertical de 3px */
}

/* Cabecera de la tabla */
table.dataTable thead th {
  background-color: var(--bs-primary); /* color de fondo similar a la imagen */
  border: none;
  padding: 10px;
  font-weight: 600;
  color: #fff;
}

/* Fila completa de cabecera */
table.dataTable thead tr {
  border-radius: 5px;
  overflow: hidden; /* para que el redondeo afecte a las celdas */
  display: table-row; /* asegurar que se mantenga el formato de fila */
}

/* Redondear solo las esquinas exteriores */
table.dataTable thead tr th:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
table.dataTable thead tr th:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Filas del body */
table.dataTable tbody tr {
  background-color: #f7f7f7; /* blanco como tarjeta */
  border-radius: 5px;
  overflow: hidden; /* que el redondeo no deje esquinas cuadradas */
}
/* panding interior en vertical */
table.dataTable tbody tr td {
  padding: 15px 0;
}
/* Redondear esquinas superiores */
table.dataTable tbody tr td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
table.dataTable tbody tr td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Efecto hover */
table.dataTable tbody tr:hover {
  background-color: #e8f1ff !important; /* azul claro como en tu imagen */
}

/* Ocultar buscador por defecto de DataTables */
.dataTables_filter {
  display: none !important;
}

/* Contenedor general buscador + botón filtrar */
.top-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
}

/* Contenedor de buscador con icono */
.search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 4px 8px;
}

/* Input buscador */
.search-box input {
  border: none;
  outline: none;
  padding: 5px;
  font-size: 14px;
}

/* Icono buscador */
.search-box i {
  color: #6b7280;
  font-size: 14px;
  margin-left: 5px;
}

/* Botón filtrar */
.btn-filtrar {
  border-radius: 5px;
  padding: 6px 12px;
  background-color: #f8f9fa;
  border: 1px solid #d1d5db;
  color: #6b7280;
  font-weight: 500;
}

/* Dropdown flotante */
.dropdownFiltros {
  position: absolute;
  top: 44px; /* ajusta según tu barra */
  right: 0;
  display: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  z-index: 999;
}
.dropdownFiltros select {
  width: 220px;
  margin: 6px 0 10px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.fs-7 {
  font-size: 0.8rem !important;
}

/* icono de busqueda */
#icon-search-movil {
  display: none;
}

/* resultados de busquedad, flotante */
.results-pill {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #104735;
  color: #fff;
  padding: 12px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: all 0.3s;
}
.results-pill:hover {
  background: #1729b4;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.results-pill-2 {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #ffc107;
  color: #212529;
  padding: 12px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1000;
  display: block;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: all 0.3s;
}
.results-pill-2:hover {
  background: #e0a800;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
/* Estilos mínimos para el carrusel */
.tabla-logros-carousel-container {
  overflow: hidden;
  position: relative;
}

.tabla-logros-carousel-track {
  display: flex;
  gap: 5px;
  transition: transform 0.8s ease;
  will-change: transform;
}

/* Ocultar scrollbar pero mantener funcionalidad */
.tabla-logros-carousel-container::-webkit-scrollbar {
  display: none;
}

.tabla-logros-carousel-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Estilos del tooltip */
.custom-tooltip {
  position: relative;
  cursor: pointer;
  display: inline-block;
}
.tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 14px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.custom-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
/* ---------------------------------------- Fin Ajustes para tablas - Diseño fianl definido por gerencia ------------------------------------------- */

/* ================ Inicio Estilos Para El Sudmenu Configuraciones ================ */
/* Submenú oculto por defecto */
.contenedor_perfil_usuario_items .submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

/* Submenú expandido */
.contenedor_perfil_usuario_items.active .submenu {
  max-height: 500px;
  padding-top: 5px;
}

/* Animación de la flecha */
.contenedor_perfil_usuario_items .chevron {
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Estado activo del menú principal */
.contenedor_perfil_usuario_items.active > .toggle-submenu {
  background-color: #104735;
  border-radius: 8px;
}

/* Evita que cambie de color al hacer hover si está activo */
.contenedor_perfil_usuario_items.active > .icon-configuracion:hover {
  background-color: #104735 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Asegura que el texto e ícono sigan blancos */
.contenedor_perfil_usuario_items.active > .icon-configuracion .item-name,
.contenedor_perfil_usuario_items.active > .icon-configuracion img,
.contenedor_perfil_usuario_items.active > .icon-configuracion .chevron {
  color: #fff !important;
  filter: brightness(0) invert(1);
}

/* Texto blanco cuando está activo */
.contenedor_perfil_usuario_items.active .toggle-submenu .item-name {
  color: #fff !important;
  transition: color 0.3s ease;
}

/* Engranaje blanco */
.contenedor_perfil_usuario_items.active .toggle-submenu img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* Flecha blanca y rotada */
.contenedor_perfil_usuario_items.active .chevron {
  transform: rotate(180deg);
  color: #6c757d !important;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* --- Estado activo de los subítems dentro del submenu --- */
.contenedor_perfil_usuario_items .submenu .active-subitem > a {
  background-color: #104735 !important;
  color: #fff !important;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Icono blanco cuando el subítem está activo */
.contenedor_perfil_usuario_items .submenu .active-subitem img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* Texto blanco dentro del subítem activo */
.contenedor_perfil_usuario_items .submenu .active-subitem .item-name {
  color: #fff !important;
}

/* Aplica el mismo estilo de color activo al submenú de Roles */
.contenedor_perfil_usuario_items.active ul.collapse,
.contenedor_perfil_usuario_items.active ul.submenu {
  padding-top: 5px;
}

/* Flecha del submenú Roles */
.contenedor_perfil_usuario_items.active .toggle-submenu .chevron {
  transform: rotate(180deg);
  color: #fff !important;
}

.chevron {
  color: #6c757d;
}

/* ================ Fin Estilos Para El Sudmenu Configuraciones ================ */

/* ================ Inicio Estilos Para El Sudmenu Roles ================ */
/* Submenu Roles oculto por defecto */
.roles-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  padding-top: 0;
}

/* Submenu Roles activo */
.contenedor_perfil_usuario_items.active .roles-submenu {
  padding-top: 5px;
}

/* Flecha Roles */
.roles-chevron {
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Opcional: estilo activo de subitems de Roles */
.roles-submenu .active-role {
  background-color: #104735 !important;
  color: #fff !important;
  border-radius: 8px;
}

/* Padre activo del submenu Roles */
.contenedor_perfil_usuario_items.active > .toggle-roles {
  background-color: #104735;
  /* fondo naranja */
  border-radius: 8px;
}

/* Texto y ícono blancos */
.contenedor_perfil_usuario_items.active > .toggle-roles .item-name,
.contenedor_perfil_usuario_items.active > .toggle-roles img,
.contenedor_perfil_usuario_items.active > .toggle-roles .roles-chevron {
  color: #fff !important;
  /* texto y flecha */
  filter: brightness(0) invert(1);
  /* icono SVG blanco */
}

/* Flecha rotada */
.contenedor_perfil_usuario_items.active > .toggle-roles .roles-chevron {
  transform: rotate(180deg);
}

/* Hover solo cambia el texto, no el punto */
.roles-submenu .li-roles a:hover {
  color: #104735;
  /* texto naranja */
}
/* ================ Fin Estilos Para El Sudmenu Roles ================ */
/* ========================= Inicio Estilos personalizados para modificar el menú de accesibilidad ========================= */

/* Contenedor principal */
.contenedor-widget {
  position: relative;
  height: 50px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Botón invisible (overlay) */
.asw-menu-btn {
  opacity: 0 !important; /* invisible */
  pointer-events: auto !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Icono de accesibilidad */
.custom-access-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2; /* por encima */
}

/* Colores íconos laterales (Reset y Close) */
.asw-menu-header .asw-menu-reset svg,
.asw-menu-header .asw-menu-close svg {
  fill: #000 !important;
}

/* Botón de restablecer configuración (footer) */
button.asw-menu-reset-footer-btn {
  background: #104735 !important;
}

/* Botones principales - hover y seleccionado */
button.asw-btn:hover,
button.asw-btn.asw-selected {
  border-color: #104735 !important;
}

/* Color del icono SVG y texto de la parte inferior */
button.asw-btn.asw-selected svg,
button.asw-btn.asw-selected span {
  fill: #104735 !important;
  color: #104735 !important;
}

/* Color del icono cuando se selecciona una acción */
button.asw-btn.asw-selected:after {
  background-color: #104735 !important;
}

/* Botones -/+ hover */
div.asw-minus:hover,
div.asw-plus:hover {
  border-color: #104735 !important;
}

a.fc-daygrid-day-number {
  color: #656565 !important;
}

a.fc-col-header-cell-cushion {
  color: #656565 !important;
}

.generate-qr:hover {
  background-color: var(--brand-principal-hover) !important;
  border: var(--brand-principal-hover) !important;
  color: #fff;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ========================= Fin Estilos personalizados para modificar el menú de accesibilidad ========================= */
/* ================================================
ANIMACIONES Y TRANSICIONES
================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes slideInCard {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGreen {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--success-color100);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
}

@keyframes pulseOrange {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--warning-color200);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}

@keyframes pulseRed {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--error-color100);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}

@keyframes pulseGray {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--neutral-color500);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(107, 114, 128, 0);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-informativo {
  background-color: var(--neutral-color200);
}



.color-txt1{
  color: var(--text-color-perso) !important;
}

.color-txt2{
  color: var(--text-color-white) !important;
}

/*
.color-txt3{
  color: var(--neutral-color--negro) !important;
}

.color-txt4{
  color: var(--neutral-color--blanco) !important;  
}

.color-txt5{
  color: var(--brand-primary500) !important;
}
*/

.icono-accesibilidad {
    color: #ffffff; /* blanco */
}

.txt-footer {
    font-size: 0.7rem !important;
}

.ft-user {
    font-size: 2em;
    color: var(--bs-primary);
}

.ft-left{
  font-size: 1.2em;
  color: var(--bs-primary);
}

.ultimo_ingreso {
    background-color: var(--neutral-color200);
}





















/* ===== RESPONSIVE ===== */
/************************************MEDIA QUERIES ORGANIZADOS DE MAYOR A MENOR*******************************/

/* Pantallas muy grandes - desde 1470px */

@media (min-width: 1470px) {
  .curso-card-horizontal img {
    max-height: 13rem;
  }

  .offcanvas-wide {
    min-width: 650px !important;
  }
}

/* Pantallas muy grandes - desde 1400px */
@media (min-width: 1400px) {
  .zone_1_cursos {
    flex: 0 0 380px;
    max-width: 400px;
  }

  .zone_2_cursos {
    flex: 3;
  }
}

/* Hasta 1480px */
@media (max-width: 1480px) {
  .curso-descripcion {
    display: none;
  }
}

@media (max-width: 1470px) {
  .cursos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .curso-card-horizontal {
    max-height: 12rem;
  }
}

/* Hasta 1331px */
@media (max-width: 1331px) {
  .curso-title {
    font-size: 0.9rem;
  }

  .btn-cursos-carpetas-list {
    font-size: 0.9rem;
    padding: 0.4rem;
  }
}

/* Hasta 1200px */
@media (max-width: 1200px) {
  .navbar {
    width: 100%;
  }

  .form_login {
    margin-bottom: 9px;
  }

  .zone_1_cursos {
    flex: 0 0 320px;
    height: calc(100vh - 110px);
    max-height: 840px;
  }

  .zone_2_cursos {
    flex: 2.2;
    height: calc(100vh - 110px);
    max-height: 840px;
  }

  .principal-curso {
    gap: 15px;
    padding: 0 15px;
  }
}

@media (max-width: 1199.98px) {
  .search-input {
    display: none;
    position: fixed;
    background-color: var(--brand-principal-default);
    top: 69px;
    left: 0;
    right: 0;
    margin: 0 !important;
  }
  #icon-search-movil {
    display: block;
    cursor: pointer;
  }
}

/* Hasta 1024px */
@media (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  .carousel-banner-principal .titulo {
    font-size: 2.5rem;
  }

  .carousel-banner-principal .descripcion {
    font-size: 1.1rem;
  }

  .login .text-wrapper-5 {
    font-size: 21.5px;
  }

  .login .ingresa-tus-datos {
    font-size: 14.5px;
  }

  .form_login {
    margin-bottom: 9px;
  }

  .fondo-form {
    margin: 0 0 10rem 0;
  }

  .curso-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .curso-specs {
    order: -1;
    margin-bottom: 20px;
  }
}

/* Hasta 992px */
@media (max-width: 992px) {
  .pequeno .login_interno {
    height: 81%;
    vertical-align: middle;
    display: flex;
    align-items: center;
  }

  .imagen_logo {
    min-height: 170px;
    /*margin-bottom: 20px;*/
    margin-top: 72px;
  }

  .fondo-form {
    border-radius: 1rem;
  }

  .centro,
  .izquierda,
  .derecha {
    flex: 0;
    margin-left: 0% !important;
    max-width: 100%;
  }

  .contenedor_login {
    max-width: 100%;
    min-width: 100%;
  }

  .fondo-form,
  .contenedor_login {
    width: 100%;
    min-height: auto;
    z-index: 1;
  }

  .carousel-item {
    height: 30vh;
  }

  .login .text-wrapper-5 {
    font-size: 21.5px;
  }

  .login .ingresa-tus-datos {
    font-size: 14.5px;
  }

  .contenedor_perfil_usuario {
    display: block;
  }

  .contenedor_perfil_usuario_items {
    display: block;
  }

  .sidebar .navbar-brand {
    display: none;
  }

  .sidebar .sidebar-header .sidebar-toggle .icon {
    display: none;
  }

  .sidebar .sidebar-header .sidebar-toggle .icon2 {
    display: block;
  }

  .sidebar {
    max-width: 19rem !important;
  }

  .sidebar .sidebar-header {
    justify-content: center !important;
    padding: 40px 0;
  }

  .sidebar .sidebar-toggle {
    top: 10px;
  }

  .iq-navbar .navbar-collapse:not(.offcanvas-collapse) {
    position: unset;
    top: unset;
    left: unset;
    width: unset;
    -webkit-box-flex: unset;
    -webkit-flex-grow: unset;
    -ms-flex-positive: unset;
    flex-grow: unset;
    background: #00000000;
  }

  .collapse:not(.show) {
    display: block;
  }

  .navbar-toggler {
    display: none !important;
  }

  .navbar .navbar-brand {
    display: none;
  }

  .contenedor_perfil_usuario_header {
    display: none;
  }

  .nav .navbar-inner {
    padding: unset;
  }

  .sidebar-toggle .icon2 {
    display: block;
  }

  .sidebar-toggle .icon {
    display: none;
  }

  .page-wraper {
    padding: 2rem 0 0 0;
  }

  .navbar .navbar-inner .logo-main {
    display: block !important;
  }

  #contenedor-cursos-pendientes {
    max-height: unset;
    overflow-y: unset;
  }

  .principal-curso {
    flex-direction: row;
    gap: 15px;
    padding: 0 15px;
  }

  .zone_1_cursos {
    flex: 0 0 280px;
    height: calc(100vh - 115px);
    max-height: 840px;
    order: 2;
    margin-top: 0;
    border-radius: 12px;
  }

  .zone_2_cursos {
    flex: 2;
    width: auto;
    order: 1;
    margin-top: 10px;
    height: calc(100vh - 115px);
    max-height: 840px;
  }
}

/* Hasta 912px */
@media (max-width: 912px) {
  .content-filters-right,
  .btn-filtro-curso {
    display: none;
  }

  .filters-sidebar {
    display: none;
  }

  .content-actions {
    display: none;
    justify-content: center;
  }

  .mobile-controls {
    display: flex;
  }

  .layout-wrapper {
    flex-direction: column;
    gap: 1rem;
  }

  .content-header {
    flex-direction: column;
    align-items: stretch;
  }

  .content-filters {
    justify-content: center;
  }

  .offcanvas-wide {
    width: 100% !important;
  }

  .content-filters-row {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
  }

  .content-filters-left {
    flex: 1;
    width: 100%;
    justify-content: center;
    align-items: stretch;
    display: flex;
    gap: 0.5rem;
  }

  .content-filters-left button {
    width: 100%;
    margin: 0;
  }

  .content-filters-right {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }

  .content-filters-right button {
    width: 100%;
    display: none;
  }
}

/* Hasta 768px */
@media (max-width: 768px) {
  .login{
    background-color: rgb(255, 255, 255);
    width: 100%;
  }
  .custom-audio-player {
    width: 100%;
    padding-bottom: 15px;
  }

  .music-note-icon {
    width: 30vw;
    max-width: 150px;
  }

  /* Ajuste para el botón play/pause en pantallas medianas */
  .play-button {
    font-size: 2.5rem;
    /* Reduce el tamaño base */
    max-width: 3rem;
    max-height: 3rem;
  }

  .play-button.paused {
    max-width: 2rem;
    max-height: 3rem;
  }

  .controls-bottom {
    /*             padding: 10px 15px;
 */
    gap: 10px;
  }

  .control-button {
    font-size: 0.9rem;
    padding: 4px 8px;
  }

  #playbackSpeed {
    font-size: 0.85em;
    padding: 4px 6px;
  }

  .form-check-label {
    font-size: 13px;
  }

  .form-check-input {
    width: 18px;
    height: 18px;
  }

  .container-cursos {
    padding: 0 0.5rem;
  }

  .cursos-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .curso-card-horizontal img {
    max-height: 12rem;
    /*     aspect-ratio: 4 / 3;*/
  }

  .filters-modal {
    width: 100%;
  }

  .buscador-y-filtros {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .search-container {
    max-width: none;
    min-width: auto;
  }

  .view-controls {
    align-self: center;
  }

  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
  }

  .carousel-banner-principal .titulo {
    font-size: 2rem;
    letter-spacing: 1px;
  }

  .carousel-banner-principal .descripcion {
    font-size: 1rem;
  }

  .paginador {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .program-card {
    max-width: 100% !important;
  }

  .curso-card:hover {
    transform: translateY(-5px) scale(1.01);
  }

  .curso-numero {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }

  .btn-cursos-carpetas {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }

  .navbar .navbar-inner .logo-main svg {
    width: 90px !important;
  }

  .asw-menu-btn {
    width: 42px;
    height: 42px;
  }

  .asw-menu-btn svg {
    width: 26px;
    height: 26px;
    min-height: 26px;
    min-width: 26px;
    max-width: 26px;
    max-height: 26px;
  }

  .principal-cursos,
  .principal-curso {
    flex-direction: column-reverse;
    padding: 30px 10px;
    gap: 10px;
  }

  .accordion-cursos-button {
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  .document-icon {
    padding: 4px 6px;
    font-size: 11px;
  }

  .document-icon span {
    display: none;
  }

  .zone_1_cursos {
    flex: none;
    width: 100%;
    height: auto;
    max-height: 400px;
    min-height: 300px;
    order: 1;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 12px;
    position: relative;
    right: auto;
    top: auto;
  }

  .zone_2_cursos {
    flex: none;
    width: 100%;
    order: 2;
    margin-top: 10px;
    height: calc(100vh - 200px);
    min-height: 400px;
  }

  .principal-curso.expandido {
    padding: 10px;
  }

  .principal-curso.expandido .zone_2_cursos {
    height: calc(100vh - 20px);
  }

  /* ajuste del scroll del aside */
  .scroll-content {
    height: 115vh;
  }

  .info-curso-container {
    padding: 15px;
  }

  .curso-titulo {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .curso-specs {
    padding: 20px;
  }

  .specs-title {
    font-size: 18px;
  }

  .descripcion-section {
    padding: 20px;
  }

  .descripcion-title {
    font-size: 20px;
  }
  .etiqueta-nuevo {
    font-size: 9px;
    padding: 3px 6px;
    top: 6px;
    right: 6px;
  }
}
@media (max-width: 730px) {
  .cursos-lista {
    display: none !important;
  }
  .cursos-grid {
    display: grid !important;
  }
  .cards-grid {
    grid-template-columns: 2fr;
    gap: 1rem;
  }
  .cursos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Hasta 600px */
@media (max-width: 600px) {
  .generic-table {
    width: 100% !important;
  }
  .sidebar .sidebar-toggle {
    position: absolute;
    right: 12px;
    top: 16px;
    cursor: pointer;
    color: var(--brand-principal-default);
    /*padding: 0.8rem;*/
    -webkit-border-radius: 50rem;
    border-radius: 50rem;
    -webkit-box-shadow: 0 .125rem .25rem rgba(58, 87, 232, .1);
    box-shadow: 0 .125rem .25rem rgba(58, 87, 232, .1);
  }
  .responsive-table {
    border: 0;
  }

  .tabla-responsive thead {
    display: none;
  }

  .tabla-responsive tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 0.5rem;
  }

  .tabla-responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .tabla-responsive td::before {
    content: attr(data-label);
    font-weight: bold;
    flex-basis: 40%;
    text-align: left;
    color: #555;
  }

  .dataTables_length label,
  .dataTables_filter label {
    font-size: 0.75rem;
    margin-bottom: 0;
  }

  .form-select-sm,
  .form-control-sm {
    font-size: 0.75rem;
  }

  .dataTables_paginate
    .paginate_button:not(.previous):not(.next):not(.current) {
    display: none !important;

    .tabla-responsive td:last-child {
      border-bottom: none;
    }
  }
}
@media (max-width: 575px) {
       .iq-navbar .navbar-collapse .navbar-nav li .sub-drop.dropdown-menu
    {
        margin: auto  !important;
        left: auto !important; 
        right: 0  !important;
    }
}
/* Hasta 576px */
@media (max-width: 576px) {
  .cont-inpt input {
    height: 45px;
    font-size: 14px;
  }

  .btn-login {
    height: 45px;
    font-size: 14px;
  }

  .carousel-item {
    height: 25vh;
  }

  .container-cursos {
    padding: 0 1rem;
  }

  .search-input-cursos {
    font-size: 16px;
  }

  .curso-card-horizontal img {
    max-width: 10rem;
  }

  .curso-card-horizontal {
    max-height: 10rem;
  }

  .cursos-lista {
    display: none;
  }

  .cursos-grid {
    display: grid;
  }

  .vista-filters-right {
    display: none;
  }

  .sidebar {
    max-width: 100% !important;
  }

  .contenedor-texto-slider .contendor-info-banner {
    padding: 0 !important;
    width: 100% !important;
  }

  .carousel-banner-principal .contenedor-texto-slider .titulo {
    font-size: 1.5rem;
  }

  .carousel-banner-principal .contenedor-texto-slider .descripcion {
    font-size: 0.9rem;
  }
}

/* Hasta 480px */
@media (max-width: 480px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .btn-cursos-carpetas {
    padding: 0.4rem;
  }

  .program-card {
    height: auto !important;
    min-height: 380px !important;
  }

  .carousel-banner-principal .titulo {
    font-size: 1.75rem 0.9rem;
    letter-spacing: 0.5px;
  }

  .carousel-banner-principal .descripcion {
    font-size: 0.95rem;
  }

  .card-content-area {
    padding: 1rem 1rem 0.75rem !important;
  }

  .card-actions-area {
    padding: 0 1rem 1rem !important;
  }

  .custom-audio-player {
    width: 100%;
    padding-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .music-note-icon {
    width: 2rem;
    margin-bottom: 15px;
  }

  /* Ajuste para el botón play/pause en pantallas pequeñas */
  .play-button {
    font-size: 2rem;
    /* Reduce aún más el tamaño base */
    max-width: 70px;
    /* Asegurar un tamaño mínimo decente para tocar */
    max-height: 80px;
  }

  .play-button.paused {
    max-width: 1.5rem;
    max-height: 2rem;
  }

  .controls-bottom {
    /*             padding: 8px 10px;
 */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-top: 5px;
  }

  .progress-time-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }

  .progress-container {
    width: 100%;
    margin-bottom: 5px;
  }

  .time-display {
    width: 100%;
    text-align: center;
    font-size: 0.8em;
  }

  .playback-speed-row {
    flex-direction: column;
    gap: 8px;
  }

  .playback-buttons {
    width: 100%;
    justify-content: center;
    gap: 8px;
  }

  .control-button {
    font-size: 0.9em;
  }

  .speed-control {
    width: 100%;
    justify-content: center;
    font-size: 0.8em;
  }

  #playbackSpeed {
    font-size: 0.8em;
    padding: 3px 5px;
  }

  .breadcrumb-nav {
    font-size: 12px;
  }

  .curso-titulo {
    font-size: 20px;
  }

  /*   .play-button {
    width: 60px;
    height: 60px;
  }

  .play-button::after {
    border-left-width: 15px;
    border-top-width: 9px;
    border-bottom-width: 9px;
  } */
}

/* Hasta 440px */
@media (max-width: 440px) {
  .cursos-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Hasta 400px */
@media (max-width: 400px) {
  .cursos-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }
}

/* Hasta 374px */
@media (max-width: 374px) {
  .cursos-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }

  .contenedor_login {
    height: 89vh;
  }
}

@keyframes pulseNew {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}


.btn-certificado, .btn-certificado:hover , .btn-certificado:focus, .btn-certificado:active{
  color: #fff !important;
  background: var(--brand-principal-default);
  font-weight: 400;
  border-radius:50px;
  font-size: 0.9em !important;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  width: 447px;
}