/*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  -- Primary colors */

  --brand-footer: rgb(22, 29, 80);
  /* #161d50 */


  /*Default - primary */
  --bs-primary: #3771ff;
  /* #3771ff */
  
  /************ Brand principal colors ***************/

  /*Disabled - inactivo*/
  --brand-principal-inactivo: #b6c9ef;

  /*Default*/
  --brand-principal-default: #3771ff;
  
  /*Hover*/
  --brand-principal-hover: #1d5bd8;
  
  /*Active*/
  --brand-principal-activo: #0447b2;
  
  
  




  /* Brand Secondary colors */
  --brand-secondary-default: #0c1268;
  /* #0c1268 */
  --brand-secondary-hover: rgba(0, 102, 68, 1);
  /* #006644 */
  --brand-secondary-activo: rgba(0, 110, 68, 1);
  /* #006E44 */
  --brand-secondary-inactivo: rgba(54, 113, 93, 1);
  /* #006E44 */
  /* Secondary States (probablemente poco usados) */
  --secundario-default: rgba(97, 212, 133, 1);
  /* #104735 */
  --secundario-hover: rgba(0, 191, 255, 1);
  /* #22A14A */
  --secundario-activo: rgba(34, 161, 74, 1);
  /* #22A14A */
  --secundario-inactivo: rgba(174, 223, 189, 1);
  /* #AEDFBD */
  /* Neutral colors */
  --neutral-color100: #F5F5F5;
  /* #F7F8F8 */
  --neutral-color200: #ffffff;
  /* #EDEEF1 */
  --neutral-color300: #E0E0E0;
  /* #DBDBDF */
  --neutral-color400: rgb(232, 240, 254);
  /* #e0e0e0 */
  --neutral-color500: #9E9E9E;
  /* #8E95A2 */
  --neutral-color600: rgba(104, 114, 128, 1);
  /* #687280 */
  --neutral-color700: #616161;
  /* #58616E */
  --neutral-color800: rgba(74, 78, 90, 1);
  /* #4A4E5A */
  --neutral-color900: #212121;
  /* #40444C */

  /* Error colors */
  --error-color100: #f9dedc;
  --error-color500: #f44336;
  --error-color700: #d32f2f;
  --error-color900: #b71c1c;

  /* Warning colors */
  --warning-color100: #f4d8ba;
  --warning-color500: #FF9800;
  --warning-color700: #F57C00;
  --warning-color900: #E65100;

  /* Success colors */
  --success-color100: #d8efd8;
  --success-color500: #4CAF50;
  --success-color700: #388E3C;
  --success-color900: #1B5E20;

  /* Info colors */
  --info-color-100: #c7e2f2;
  --info-color-500: #03A9F4;
  --info-color-700: #0288D1;
  --info-color-900: #01579B;





  --paragraph-01-regular-font-family: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish", 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: "Mulish";
}

[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: var(--neutral-color100);
  /*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: 42%;
}

.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: 104px;
  max-width: 300px;
  max-height: clamp(70px, 12vw, 104px);
  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-weight: 400;
  font-size: clamp(0.85rem, 0.9vw, 1rem);
  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(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgb(1 71 44 / 25%);
  outline: none;
}

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

.btn-login {
  border-radius: 12px;
  height: 44px;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 16px;
  color: rgb(255, 255, 255);
  border: none;
  gap: 8px;
  background-color: var(--brand-principal-default);
  background: var(--brand-principal-gradient, var(--brand-principal-default));
  border-color: var(--brand-principal-default);
  font-weight: 600;
}

.btn-login:hover {
  background: linear-gradient(90deg, #540a66 0%, #135b51 100%) !important;
  color: #fff !important;
}

.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%;
  min-height: clamp(180px, 35vw, 300px);
  position: relative;
  transition: background-image 0.3s ease;
  display: flex !important;
  align-items: flex-end;
  overflow: hidden;
}

/* Contenedor de texto del slider */
.carousel-banner-principal .home-slider-corto-texto {
  position: absolute;
  z-index: 1;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 0;
}

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

.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: clamp(1.1rem, 1.5vw, 1.8rem);
  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 {
  font-size: clamp(1.4rem, 2.4vw, 2.4rem) !important;
}

.text-wrapper-5 {
  /*color: var(--brand-principal-default); comentado por mjp ya se toma color de texto del configurador*/
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  /*font-family: "Montserrat", Helvetica;*/
}

.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(--neutral-color900) !important;
  background-color: rgba(var(--neutral-color900), 0.1) !important;
}

.form-check-input:hover:checked {
  background-color: var(--neutral-color900) !important;
  border-color: var(--neutral-color900) !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); comentado por mjp color de tecto desde configurador*/
  /*font-family: "Montserrat", Helvetica;*/
  line-height: 1.4;
  margin: 0;
  flex: 1;
}

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

/* 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 {
  box-shadow: 0 0 0 0.2rem rgb(1 71 44 / 25%);
  border-color: var(--bs-primary);
}

/*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;
  top: 0.5rem;
  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: 3em;
}

/* Ajustes del .navbar-brand  */

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

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

.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); */
  /* Comentado para nuevo estilo claro */
  padding: 0.16rem 0;
}

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

.btn_default:hover,
.btn_default:active,
.btn_default:focus,
.btn_default:focus-visible {
  transition: all 0.5s;
  background-color: var(--bg-primary-700);
  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);
}

/* ── Tarjetas métricas individuales (ranking, estrellas, promedio) ── */
.metric-card-logro {
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  min-height: 90px;
}

.metric-card-logro .metric-icon-circle {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-card-logro .metric-icon-circle svg {
  width: 32px;
  height: 32px;
}

.metric-card-logro .metric-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.metric-card-logro .metric-label {
  font-size: 0.8rem;
  opacity: 0.85;
  color: #fff;
  margin-top: 2px;
}

/* ── Encabezado de tablas de logros (nuevo estilo limpio) ── */
.table-logros thead .table-title {
  text-align: center;
  font-weight: 700;
  color: white;
  font-size: 1.15rem;
  background-color: var(--brand-principal-default);
  padding: 0.75rem 1rem;
}

.table-logros thead .table-title th {
  padding: 0.75rem 1rem;
}

/* Subencabezado de columnas */
.table-logros .table-subtitle th {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: capitalize;
  padding: 0.6rem 1rem;
  background-color: #fff;
  border-bottom: 1px solid #e5e7eb;
}

/* Cuerpo de la tabla */
.table-logros tbody td {
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.table-logros tbody tr:last-child td {
  border-bottom: none;
}

.table-logros tbody tr:hover {
  background-color: #f9fafb;
}

/* ── Badge de posición en ranking (top 3 con color, resto gris) ── */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.rank-badge-1 {
  background-color: var(--brand-principal-default);
}

.rank-badge-2 {
  background-color: var(--brand-principal-default);
  opacity: 0.8;
}

.rank-badge-3 {
  background-color: var(--brand-principal-default);
  opacity: 0.65;
}

.rank-badge-default {
  background: transparent;
  color: #6b7280;
  font-weight: 600;
}

/* ── Paginación de ranking ── */
.ranking-pagination-row td {
  padding: 0.75rem 1rem !important;
}

.ranking-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ranking-pagination .page-link-ranking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #d1d5db;
  background-color: #fff;
  color: #374151;
  transition: all 0.2s ease;
  cursor: pointer;
}

.ranking-pagination .page-link-ranking:hover {
  background-color: var(--brand-principal-default);
  color: #fff;
  border-color: var(--brand-principal-default);
}

.ranking-pagination .page-link-ranking.active {
  background-color: var(--brand-principal-default);
  color: #fff;
  border-color: var(--brand-principal-default);
}

.ranking-pagination .page-link-ranking.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Botones de filtro del ranking ── */
.botones_tabla {
  background-color: #f3f4f6;
  transition: all 0.25s ease;
  color: #6b7280;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  border: 1px solid #d1d5db;
  white-space: nowrap;
}

.botones_tabla:hover {
  background-color: var(--brand-principal-default);
  transition: all 0.25s ease;
  color: #fff;
  border-color: var(--brand-principal-default);
}

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

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

/* ── Footer de filtros del ranking (ya no grid absoluto) ── */
.ranking-filters-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.75rem 1rem;
  background-color: #fff;
  border-top: 1px solid #f3f4f6;
}

/****************************************************** 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(--bg-primary-500);
  background-color: #fff;
  border: 1px solid var(--bg-primary-500);
  border-radius: 0.15rem;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  transition: var(--transition);
  border-radius: 0.4rem;
}

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

.btn-cursos-carpetas:hover,
.btn-cursos-carpetas-list:hover {
  color: #fff;
  background-color: var(--bg-primary-500);
  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 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.badge-estado::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  animation: badge-estado-pulse 2s ease-in-out infinite;
  transform-origin: center;
  flex-shrink: 0;
}

@keyframes badge-estado-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }

  50% {
    transform: scale(1.45);
    opacity: 1;
  }
}

.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: white;
  border: 2px solid var(--warning-color500);
  color: var(--warning-color500);
}

.badge-pendiente {
  background-color: white;
  border: 2px solid var(--error-color500);
  color: var(--error-color500);
}

.badge-pendienteevaluacion {
  background-color: white;
  border: 2px solid var(--error-color500);
  color: var(--error-color500);
  border-radius: 10px;
  padding: 0.3rem;
}

.badge-enprogreso {
  background-color: white;
  border: 2px solid var(--warning-color500);
  color: var(--warning-color500);
}

.badge-iniciado,
.badge-completado-sin-aprobar {
  background-color: white;
  border: 2px solid var(--info-color-500);
  color: var(--info-color-500);
}

.badge-completado,
.badge-success {
  background-color: white;
  border: 2px solid var(--success-color500);
  color: var(--success-color500);
  border-radius: 10px;
  padding: 0.3rem;
}

/*color de barras*/
.barra-badge-poriniciar {
  background-color: transparent;
}

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

.barra-badge-completado-sin-aprobar {
  background-color: var(--error-color500);
}

.barra-badge-completado {
  background-color: var(--success-color500);
}

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

.barra-badge-bloqueado {
  background-color: transparent;
}

/* 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);
  cursor: pointer;
  transition: var(--transition);
  border-radius: 50px;
  padding: 6px 18px;
}

.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; */
}

.objetivos-section {
  animation: fadeInUp 0.6s ease-out 0.2s both;
  background: #ffffff;
  border: 1px solid var(--neutral-color300);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.objetivos-section__content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.objetivos-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--info-color-100);
  color: var(--bs-primary);
}

.objetivos-section__icon svg {
  stroke: currentColor;
}

.objetivos-section__body {
  flex: 1;
}

.objetivos-section__title {
  color: rgb(33, 33, 33);
  font-size: 0.875rem;
  font-weight: 600;
}

.objetivos-section__text {
  margin: 0;
  color: var(--neutral-color700);
  font-size: 0.875rem;
  line-height: 1.5;
}

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

/* ===== VISTA GRID ===== */
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.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;
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.asw-stop-animations) .curso-card {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInCard 0.6s ease-out forwards;
  }

  html:not(.asw-stop-animations) .curso-card:nth-child(1) {
    animation-delay: 0.1s;
  }

  html:not(.asw-stop-animations) .curso-card:nth-child(2) {
    animation-delay: 0.2s;
  }

  html:not(.asw-stop-animations) .curso-card:nth-child(3) {
    animation-delay: 0.3s;
  }

  html:not(.asw-stop-animations) .curso-card:nth-child(4) {
    animation-delay: 0.4s;
  }

  html:not(.asw-stop-animations) .curso-card:nth-child(5) {
    animation-delay: 0.5s;
  }

  html:not(.asw-stop-animations) .curso-card:nth-child(6) {
    animation-delay: 0.6s;
  }

  html:not(.asw-stop-animations) .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 .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);*/
  width: 100%;
  /*height: 160px;*/
  object-fit: cover;
}

.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;
}

.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 {
  transition: all 0.3s ease;
}

.progress-percentage {
  transform: scale(1.05);
  font-size: 0.75rem !important;
}

.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 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;
}

.barra-badge-completado {
  background-color: var(--success-color500);
}

.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: visible;
  box-shadow: var(--shadow);
  border: 1px solid #e5e7eb;
  transition: var(--transition);
  align-items: stretch;
  padding: 0;
  min-height: 180px;
  position: relative;
  margin-top: 0;
}

.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(--bs-primary);
  text-decoration: none;
  border: 1px solid var(--bs-primary);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.pagination a:hover {
  background-color: var(--bs-primary);
  color: white;
}

.pagination .active span {
  background-color: var(--bs-primary);
  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;
}

.vista-btn.active i,
.vista-btn:active i {
  background: var(--brand-principal-gradient, var(--brand-principal-default));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.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: (var(--brand-principal-default));
  color: var(--neutral-color300);
  padding: 0.4rem 0.4rem;
  border-radius: 50%;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.favorito.active,
.favorito.favorito-activo {
  color: var(--warning-color100);
}

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

.favorito.active:hover,
.favorito.active:focus,
.favorito.favorito-activo:hover,
.favorito.favorito-activo:focus {
  color: var(--neutral-color300);
  transform: scale(1.1);
}

.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: 15/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:hover {
  background: var(--bg-primary-700);
  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 */
/* Botón Regresar */
.retroceso {
  margin-bottom: 24px;
}

.retroceso a {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: #ffffff;
  border: 1px solid var(--bs-primary);
  color: var(--bs-primary);
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  gap: 8px;
  box-shadow: none;
}

.retroceso a:hover {
  background: var(--bs-primary);
  color: #f0f7ff !important;
}

.retroceso a svg {
  display: none; /* Ocultar el SVG antiguo */
}

.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 {
  text-align: left;
  font-weight: 400;
  font-size: 0.85rem;
}

.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 */
.titulo-modulo {
  font-weight: 700;
  font-size: 22px;
  color: var(--brand-principal-activo);
  line-height: 1.3;
  margin-top: 0;
}

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

.porcentaje-progreso {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.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;
}

/* Wrapper del SCORM con botón de fullscreen externo */
.scorm-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.scorm-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scorm-fs-btn:hover {
  opacity: 1;
}

.scorm-frame:fullscreen {
  width: 100vw;
  height: 100vh;
}

/* 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;
}

.title-elemento {
  font-size: clamp(13px, 1.2vw, 16px);
}

.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(--bg-secondary-200);
}

/*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 {
  background-color: #fff;
  border: solid 2px var(--bs-primary);

  transition: all 0.3s ease;
}

.card_programas,
.card_programas:hover {
  background-color: #fff;
  border: solid 1px var(--neutral-color500);
  transition: all 0.3s ease;
}

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

/* Aplica la transición también a los SVGs para que el `fill="currentColor"` funcione */

.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);
}

/* 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;
  margin-top: 18px;
}

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;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.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;
  background: #ffffff;
  border: 1px solid var(--neutral-color700);
  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-color700);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.favorite-btn i {
  color: var(--neutral-color500);
}

.favorite-btn.active i {
  color: #ffffff;
}

.favorite-btn:hover {
  background: #ffffff;
  transform: scale(1.1);
  color: var(--neutral-color700);
  border-color: var(--neutral-color700);
}

.favorite-btn.active {
  background: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  color: #ffffff;
}

.favorite-btn.active:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}

.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;*/
}

/* Cards de comunidad */
.comunidad-card {
  background: #ffffff;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comunidad-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.comunidad-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bg-primary-500);
}

.comunidad-cargo {
  color: #e87f00;
  font-weight: 500;
  font-size: 14px;
}

.comunidad-contactos h5 {
  color: rgb(33, 33, 33);
}

.comunidad-icon-bg {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: rgb(227, 242, 253);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e87f00;
}

.comunidad-icon-bg-green {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: rgb(232, 245, 233);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(76, 175, 80);
}

.comunidad-card .btn-copy {
  background: transparent;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: rgb(158, 158, 158);
  transition: all 0.3s ease;
  border-radius: 4px;
}

.comunidad-card .btn-copy:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--bg-primary-color);
}

.comunidad-card .btn-copy.copied {
  color: rgb(76, 175, 80);
}

/* .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-color700) !important;
  box-shadow: rgb(0 0 0 / 19%) 0px 10px 20px, rgb(0 0 0 / 23%) 0px 6px 6px;
} */

.btn-notification {
  position: relative;
}

.notification-dot {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 0.65rem;
  height: 0.65rem;
  background-color: var(--error-color100);
  border: 1px solid var(--error-color700);
  border-radius: 50%;
  box-shadow: rgb(0 0 0 / 19%) 0px 2px 4px;
}

/* 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: #bec9d3;
  /* color de fondo similar a la imagen */
  border: none;
  padding: 10px;
  font-weight: 600;
  color: #091a4e;
}

/* 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: 95px;
  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;
}

/* ================ INICIO ESTILOS SUBMENU CONFIGURACIÓN ================ */

/* Submenu oculto por defecto */
.contenedor_perfil_usuario_items .submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

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

/* Toggle Configuración - Estado activo */
.contenedor_perfil_usuario_items.active > .toggle-submenu {
  background-color: var(--bg-primary-500);
  border-radius: 8px;
}

/* Toggle Configuración - Texto, icono y flecha blancos cuando activo */
.contenedor_perfil_usuario_items.active > .toggle-submenu .item-name,
.contenedor_perfil_usuario_items.active > .toggle-submenu .icon svg,
.contenedor_perfil_usuario_items.active > .toggle-submenu .chevron {
  color: #fff !important;
}

/* Chevron - rotación y color por defecto */
.chevron {
  color: #6c757d;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

/* Chevron - rotado cuando activo */
.contenedor_perfil_usuario_items.active .chevron {
  transform: rotate(180deg);
}

/* Toggle Configuración - Focus (accesibilidad) */
.contenedor_perfil_usuario_items .toggle-submenu:focus {
  outline: 2px solid var(--iq-primary);
  outline-offset: 2px;
}

/* Subitems - Estado activo */
.contenedor_perfil_usuario_items .submenu .active-subitem > a {
  background-color: var(--bg-primary-500) !important;
  color: #fff !important;
  border-radius: 8px;
}

.contenedor_perfil_usuario_items .submenu .active-subitem .icon svg,
.contenedor_perfil_usuario_items .submenu .active-subitem .item-name {
  color: #fff !important;
  stroke: #fff !important;
}

/* ================ FIN ESTILOS SUBMENU CONFIGURACIÓN ================ */

/* ================ INICIO ESTILOS SUBMENU ROLES ================ */

/* Submenu Roles oculto por defecto */
.roles-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

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

/* Toggle Roles - Estado activo */
.contenedor_perfil_usuario_items.active > .toggle-roles {
  background-color: var(--bg-primary-500);
  border-radius: 8px;
}

/* Toggle Roles - Texto, icono y flecha blancos cuando activo */
.contenedor_perfil_usuario_items.active > .toggle-roles .item-name,
.contenedor_perfil_usuario_items.active > .toggle-roles .icon svg,
.contenedor_perfil_usuario_items.active > .toggle-roles .roles-chevron {
  color: #fff !important;
}

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

/* Chevron Roles rotado cuando activo */
.contenedor_perfil_usuario_items.active > .toggle-roles .roles-chevron {
  transform: rotate(180deg);
}

/* Roles items - Hover */
.roles-submenu .li-roles a:hover {
  color: var(--iq-primary);
}

/* Toggle Roles - Focus (accesibilidad) */
.contenedor_perfil_usuario_items .toggle-roles:focus {
  outline: 2px solid var(--iq-primary);
  outline-offset: 2px;
}

/* ================ FIN ESTILOS SUBMENU 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(--bg-primary-700) !important;
  border: var(--bg-primary-700) !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-color500);
  }

  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);
}

.circle-icon {
  width: 60px;
  height: 60px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h-info-rankin {
  font-weight: 600;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

.fondo-cuadr-img {
  padding: 11px;
  border-radius: 9px;
}

.fondo-cuadr-img2 {
  background-color: var(--neutral-color400);
}

.btn-ver-mas {
  border-radius: 12px;
  height: 44px;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 16px;
  background-color: var(--bs-primary);
  color: #fff;
  border: none;
  transition: all 0.2s ease;
}

.btn-ver-mas:hover,
.btn-ver-mas:active,
.btn-ver-mas:focus {
  background-color: var(--bs-primary);
  color: #fff;
  opacity: 0.85;
}

.btn-ver-mas-pro {
  border-radius: 12px;
  height: 44px;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 16px;
  background-color: #ffffff;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  transition: all 0.2s ease;
}

.btn-ver-mas-pro:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

.progress {
  box-shadow: none;
}

.last-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 14px;
  border-radius: 20px;
  /* forma tipo píldora */

  font-size: 14px;
  color: #6c757d;
  /* gris del texto */
  font-weight: 500;
}

.last-login .dot {
  width: 8px;
  height: 8px;
  background-color: var(--brand-principal-default);
  border-radius: 50%;

  animation: pulse 2s infinite;
}

/* Animación */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.card-home:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  /* shadow-lg */
}

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

.card-home::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* sombra/blanco que nace a la derecha y se desvanece hacia la izquierda */
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.12) 20%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0) 75%
  );
}

/* === Home rediseño 2-tracks === */
.home-track {
  background-color: #f3f4f6;
  border-radius: 16px;
  padding: 1.25rem;
}

.home-card-inner {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.home-card-inner:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.home-card-inner--primary {
  border: 2px solid var(--bs-primary);
}

.home-track-icono {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-ver-contenido {
  border-radius: 10px;
  height: 42px;
  background-color: var(--bs-primary);
  color: #fff;
  border: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-ver-contenido:hover,
.btn-ver-contenido:focus,
.btn-ver-contenido:active {
  background-color: var(--bs-primary);
  color: #fff;
  opacity: 0.88;
}

.home-nota-numero {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
}

.badge-nota {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
}

.badge-nota-excelente {
  background-color: #dbeafe;
  color: var(--primary-500);
}

.badge-nota-bueno {
  background-color: #d1fae5;
  color: #047857;
}

.badge-nota-regular {
  background-color: #fef3c7;
  color: #b45309;
}

.badge-nota-bajo,
.badge-nota-malo {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* Grid responsivo para "Cursos en Progreso" del home: 4 -> 3 -> 2 -> 1 */
#contenedor-cursos-pendientes.cursos-progreso-grid {
  display: grid !important;
  gap: 1rem !important;
  grid-template-columns: 1fr !important;
}

@media (min-width: 576px) {
  #contenedor-cursos-pendientes.cursos-progreso-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) {
  #contenedor-cursos-pendientes.cursos-progreso-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 992px) {
  #contenedor-cursos-pendientes.cursos-progreso-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

#contenedor-cursos-pendientes .badge-estado {
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

/* === Paginador rediseñado (vista cursos) === */
.pagination-wrapper .pagination {
  gap: 0.6rem;
  align-items: center;
}

.pagination-wrapper .pagination li > a,
.pagination-wrapper .pagination li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background-color: #f3f4f6;
  color: #475569;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  text-decoration: none;
}

.pagination-wrapper .pagination li > a:hover {
  background-color: #e5e7eb;
  color: #FFFFFF;
}

.pagination-wrapper .pagination .active > span {
  background-color: var(--bs-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(91, 43, 217, 0.22);
}

.pagination-wrapper .pagination .disabled > span {
  background-color: #f3f4f6;
  color: #cbd5e1;
  cursor: not-allowed;
  box-shadow: none;
}

.pagination-wrapper .pagination svg {
  width: 16px;
  height: 16px;
}

/* Cuando el botón de archivo/actividad está activo, el texto y el check pasan a blanco */
.btn-x.active-document .primary-500,
.btn-x.active-document.primary-500 {
  color: #fff !important;
}

/* Sticky footer + contenido centrado en vistas externas (invitación) */
html:has(.header-front-external),
html:has(.header-front-external) body {
  min-height: 100vh !important;
  height: auto !important;
  margin: 0 !important;
}

html:has(.header-front-external) body {
  display: flex !important;
  flex-direction: column !important;
}

html:has(.header-front-external) body > .content-external {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

html:has(.header-front-external) body > .content-external > .container,
html:has(.header-front-external) body > .content-external > .container-fluid {
  width: 100%;
}

html:has(.header-front-external) body > .footer-external {
  flex-shrink: 0;
  margin-top: auto;
}

/* estilos de las cards de cursos en el home*/

/* Card */
.course-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.course-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  /*transform: translateY(-4px);*/
}

/* Imagen */
.card-img-wrapper {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #f3f4f6;
}

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

/* Boton corazon */
.btn-like {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  border-radius: 50%;
  padding: 8px;
  transition: 0.3s;
}

.btn-like i {
  font-size: 16px;
  color: #555;
}

/* Badge estado */
.badge-status {
  position: absolute;
  top: 12px;
  left: 12px;

  display: flex;
  align-items: center;
  gap: 6px;

  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #f59e0b;

  padding: 4px 10px;
  border-radius: 20px;

  font-size: 12px;
  font-weight: 600;
  color: #f59e0b;
}

/* Punto animado */
.badge-status .dot {
  width: 6px;
  height: 6px;
  background: #f59e0b;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* Animacion pulse */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Texto */
.card-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Boton principal */
.btn-custom {
  border-radius: 12px;
  height: 44px;
  opacity: 0.85;
}

/*fin de las cards de cursos del home*/

.sub-title2 {
  font-size: clamp(1.2rem, 1.5vw + 0.8rem, 2rem) !important;
  font-weight: 600;
}

.btn-hover-opaci:hover {
  background-color: var(--bs-primary) !important;
  opacity: 0.9 !important;
  color: #fff;
}

.ver_todos {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 20px;
  border-radius: 7px;

  border: 1.5px solid var(--bs-primary);
  background: #f8fafc;

  color: var(--bs-primary);
  font-weight: 500;
  font-size: 14px;

  text-decoration: none;

  transition: all 0.25s ease;
}

/* Hover */
.ver_todos:hover {
  background: var(--bs-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.sin-bordes {
  border-radius: 0px !important;
}

.titulo-slider-corto {
  font-weight: var(--hero-bold-font-weight);
  color: #ffffff;
  white-space: normal;
  overflow-wrap: break-word;
  font-size: clamp(0.85rem, 3.2vw, 1.05rem) !important;
  line-height: 1.3;
  margin: 0;
  padding: 0.6rem 1.25rem;
  border-radius: 0.25rem;
  display: -webkit-box;
  max-width: 100%;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .titulo-slider-corto {
    font-size: clamp(0.75rem, 4.2vw, 0.95rem) !important;
    padding: 1.5rem 1rem;
  }
}

/* Contenedor del texto en móvil — centrado vertical sobre la imagen */
.home-slider-corto .home-slider-corto-texto {
  position: absolute !important;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;
  padding: 0 0.5rem;
}

.home-slider-corto-info {
  position: static;
  width: auto;
  max-width: 80%;
  padding: 0 0.75rem;
}

/* En tablet y desktop: alineado izquierda, centrado vertical */
@media (min-width: 768px) {
  .titulo-slider-corto {
    font-size: clamp(1.3rem, 2.6vw, 2.1rem) !important;
    padding: 1rem 2rem;
    background-color: transparent;
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 55%;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    margin: 0;
    line-height: 1.25;
  }

  .home-slider-corto-info {
    position: static;
    width: auto;
    padding: 0 1.5rem;
  }

  .home-slider-corto-texto {
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1rem;
  }
}

/* Pantallas grandes: aún más espacio lateral, texto bien legible */
@media (min-width: 1200px) {
  .titulo-slider-corto {
    font-size: clamp(1.5rem, 2.1vw, 2.3rem) !important;
    padding: 1.25rem 2.5rem;
    max-width: 62%;
  }

  .home-slider-corto-info {
    padding: 0 2.5rem;
  }
}

/* Pantallas extra grandes (≥1440): protagonismo del título */
@media (min-width: 1440px) {
  .titulo-slider-corto {
    font-size: clamp(1.6rem, 1.85vw, 2.4rem) !important;
    padding: 1.5rem 3rem;
    max-width: 62%;
  }

  .home-slider-corto-info {
    padding: 0 3rem;
  }
}

.btn-dia-capacitaciones {
  border-radius: 10px;

  color: #fff;
  border: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Hover */
.btn-dia-capacitaciones:hover {
  transform: translateY(-2px);
  background-color: var(--bg-primary-700);
  color: #fff;
}

/*card de invitaciones por aceptar*/
/* Contenedor */
.inv-card-container {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  overflow: hidden;
}

/* Header */
.inv-card-header {
  background: #f3f4f6;
  padding: 16px 20px;
}

.inv-card-title {
  font-weight: 600;
}

/* Body */
.inv-card-body {
  padding: 20px;
}

/* Item */
.inv-card-item {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Titulo */
.inv-card-item-title {
  font-weight: 600;
  margin-bottom: 8px;
}

/* Descripcion */
.inv-card-item-desc {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}

/* Meta */
.inv-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.inv-card-meta-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inv-card-label {
  font-size: 13px;
  color: #9ca3af;
}

.inv-card-value {
  font-size: 13px;
  color: #374151;
}

/* Badge */
.inv-card-badge {
  background: #e3f2fd;
  color: #1d5bd8;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
}

/* Actions */
.inv-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Botones base */
.inv-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 16px;
  border-radius: 8px;
  font-size: 14px;

  text-decoration: none;
  transition: all 0.2s ease;
}

/* Aceptar */
.inv-card-btn-accept {
  background: #22c55e;
  color: #fff;
}

.inv-card-btn-accept:hover {
  background: #16a34a;
  color: #fff;
}

/* Empty */
.inv-card-empty {
  color: #6b7280;
}

.home-slider-corto {
  position: relative;
}

.home-slider-corto .home-slider-corto-item {
  position: relative;
  overflow: hidden;
  height: 400px; /* Altura fija para evitar que el texto afecte la imagen */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  .home-slider-corto .home-slider-corto-item {
    height: 220px;
  }
}

.home-slider-corto .home-slider-corto-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0) 85%
  );
}

.home-slider-corto .home-slider-corto-texto {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.home-slider-corto .home-slider-corto-info {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1rem 1.5rem;
}

@media (min-width: 768px) {
  .home-slider-corto .home-slider-corto-info {
    padding: 1.5rem 2.5rem;
  }
}

@media (min-width: 1200px) {
  .home-slider-corto .home-slider-corto-info {
    padding: 2rem 3rem;
  }
}

.btn-agrupador {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  margin-right: 10px;
  height: 2.8rem;
}

.bg-info-100 {
  background-color: var(--info-color-100);
}

.text-primary-custom {
  color: var(--bs-primary);
}

.card-modulos {
  border: 1px solid var(--neutral-color300);
}

.texto-modulo-card {
  color: var(--bs-primary);
  font-size: clamp(1rem, 1.2vw, 1.5rem) !important;
  font-weight: 700;
}

.modulos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4.5rem;
  margin-bottom: 2rem;
}

.modulo-summary::marker {
  content: none;
}

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

/* Footer Modernization */
footer {
  /* background: #ffffff !important; */
  padding: 15px 20px !important;
  border-top: none !important;
}

footer .text-wrapper-7 {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}

.img_logo_footer {
  max-height: 50px;
  transition: all 0.3s ease;
}

.img_logo_footer:hover {
  opacity: 0.8;
}

.contenedor_perfil_usuario_header {
  transition: all 0.3s;
  padding: 5px 10px;
  border-radius: 12px;
}

.contenedor_perfil_usuario_header:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Table Styling */
.table-sj {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.table-sj thead th {
  border-bottom: 2px solid #f1f5f9 !important;
  color: var(--sj-gray-text);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 1.25rem 1rem;
  text-transform: none;
  background: transparent !important;
  text-align: left;
}

.table-sj tbody tr {
  background: transparent;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s;
}

.table-sj tbody tr:hover {
  background-color: #fcfdfe;
}

.table-sj tbody tr td {
  padding: 1.75rem 1rem !important;
  vertical-align: middle;
  font-size: 0.9rem;
  color: #4a5568;
  border: none !important;
}

table.dataTable tbody tr td {
  padding: 1.75rem 1rem !important;
}

table.dataTable tbody tr {
  background-color: #ffffff !important;
}

/* Overrides */
.dataTables_paginate .pagination {
  border: none !important;
}

/* ===== ESTILOS PARA MALLAS CARD DESIGN ===== */

/* Badge posicionado en esquina superior izquierda */
.malla-card-design .image-container {
  position: relative;
  overflow: visible;
}

.badge-position-corner {
  position: absolute !important;
  top: 10px;
  left: 10px;
  z-index: 10;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

/* Botón favorito en esquina superior derecha */
.favorite-position-corner {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 11 !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  left: auto !important;
  width: 32px;
  height: 32px;
  border: 1px solid #bfc1c4ff;
}

.favorite-position-corner i {
  font-size: 1.2rem !important;
  color: var(--neutral-color300) !important;
}

/* Chevron rotate en acordeón */
.acordion-contenido .chevron-icon {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

.acordion-contenido.active .chevron-icon {
  transform: rotate(180deg);
}

.favorite-position-corner:hover {
  background-color: white !important;
  transform: scale(1.1) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

.favorite-position-corner.active,
.favorite-position-corner.favorito-activo {
  /*background-color: var(--bs-primary) !important;*/
}

.favorite-position-corner.active i,
.favorite-position-corner.favorito-activo i {
  color: var(--bs-primary) !important;
}

/* Botón azul sólido para mallas */
.btn-malla-ver {
  /*background-color: #3b82f6 !important;*/
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  /*transition: all 0.3s ease !important;*/
  width: 100% !important;
}

.btn-malla-ver:hover {
  /*background-color: #2563eb !important;*/
  color: white !important;
  /*transform: translateY(-2px) !important;*/
  /*box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important;*/
}

.btn-malla-ver.disabled {
  background-color: var(--brand-principal-inactivo) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  transform: none !important;
}

.btn-malla-ver.disabled:hover {
  background-color: #9ca3af !important;
  transform: none !important;
}

/* Ajustes para la tarjeta malla */
.malla-card-design {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.malla-card-design .curso-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.malla-card-design .curso-title {
  font-size: clamp(0.9rem, 1vw, 1.125rem) !important;
  font-weight: 600;
}

.malla-card-design .description-text {
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.4;
  flex-grow: 1;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-general {
  background-color: var(--brand-principal-default);
  color: white;
  border-radius: 12px;
}

.btn-general:hover,
.btn-general:active,
.btn-general:focus {
  background-color: var(--bg-primary-700) !important;
  color: white;
  border-radius: 12px;
}

.border-general {
  border-radius: 12px;
}

.btn-white,
.btn-white:hover,
.btn-white:focus {
  background-color: white !important;
}

.btn-subir-certificado:hover,
.btn-subir-certificado:active,
.btn-subir-certificado:focus {
  color: var(--primary-color);
}

img.logo.logo-marca {
  max-height: 3.5rem;
}

.text-footer {
  font-size: 1rem;
  color: var(--neutral-color200);
  text-align: start;
}

/*espacio entre el banner hero y los demas elementos*/
.container-fluid.content-inner {
  padding-top: 10px;
}

/* Limita el ancho del contenido central en vistas del cliente para evitar
   distorsión en pantallas grandes / zoom out. No afecta sidebar, header ni footer. */
.content-inner-cliente {
  max-width: 1400px;
  margin-inline: auto;
}

/* Utilidad reusable para vistas con tablas en mobile:
   maximiza ancho útil del viewport y mantiene scroll horizontal controlado */
@media (max-width: 767.98px) {
  .mobile-table-fluid {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .mobile-table-fluid .contenedor-tabla {
    padding: 1rem !important;
    border-radius: 14px;
  }

  .mobile-table-fluid .mobile-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-table-fluid .mobile-table-scroll > table {
    min-width: 680px;
  }
}

.descripcion-curso {
  font-size: 0.85rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-detalle-btn {
  color: var(--bs-primary) !important;
}
.info-detalle-btn svg {
  fill: var(--bs-primary);
}
.info-detalle-btn:hover {
  text-decoration: underline;
  text-decoration-color: var(--bs-primary);
}

/*detalle de documento -  detalle saber*/

.progreso-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progreso-label {
  font-size: 13px;
  font-weight: 500;
}

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

.barra-progreso {
  height: 100%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 0.5s ease;
}

.btn-add-delet {
  font-size: 1rem !important;
}

/*estilos del menu del usuario (leftmenu que esta en el header_*/
.profile-menu-panel {
  min-width: 18rem;
  border: 1px solid #d9e1ea;
  border-radius: 16px;
  background: #ffffff;

  overflow: hidden;
}

.profile-menu-header {
  padding: 1rem 1.25rem 0.9rem;
  border-bottom: 1px solid #e6edf5;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.profile-menu-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.profile-menu-meta {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
}

.profile-menu-section {
  padding: 0.45rem 0;
}

.profile-menu-divider {
  border-top: 1px solid #e6edf5;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 1.25rem;
  text-decoration: none;
  background: transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.profile-menu-item:hover,
.profile-menu-item:focus,
.profile-menu-item.is-active {
  background: var(--neutral-color300);
}

.profile-menu-item svg {
  flex-shrink: 0;
}

.profile-menu-label {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
}

.profile-menu-chevron {
  color: #7a8a9c;
}

.profile-menu-roles {
  padding: 0 1.25rem 0.6rem 3.2rem;
  margin: 0;
}

.profile-menu-role-link {
  display: block;
  padding: 0.45rem 0;
  color: #5f6f82;
  text-decoration: none;
  font-size: 0.88rem;
}

.profile-menu-logout:hover,
.profile-menu-logout:focus {
  background: color-mix(in srgb, var(--error-color100) 20%, transparent);
}

/* ===== 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;
  }

  .slider-full-width {
    margin-top: 67px;
  }
}

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

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

  .slider-full-width {
    margin-top: 80px;
  }
}

/* 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;
  }

  .slider-full-width {
    margin-top: 80px;
  }
}

@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;
  }

  .modulos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

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

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

  .form_login {
    margin-bottom: 9px;
  }

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

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

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

/* Hasta 992px */
@media (max-width: 992px) {
  .objetivos-section {
    margin-bottom: 1.5rem;
  }

  .objetivos-section__content {
    gap: 1.5rem;
  }

  .pequeno .login_interno {
    height: 81%;
    vertical-align: middle;
    display: flex;
    align-items: center;
  }

  .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;
  }

  .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;
  }
}

/* === RESPONSIVE: Lista → Grid en rango intermedio (769px – 1469px) ===
 * En este rango la card horizontal pierde proporciones (imagen sin
 * max-width, footer desplazado). Se fuerza grid via CSS usando
 * !important para prevalecer sobre los estilos inline que pone el JS.
 * La preferencia en localStorage NO se modifica: al volver a desktop
 * el usuario recupera su vista de lista seleccionada.
 */

/* Tablet grande (913px – 1469px): grid 2 columnas */
@media (min-width: 913px) and (max-width: 1469px) {
  .cursos-lista {
    display: none !important;
  }
  .cursos-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

/* Tablet pequeña (769px – 912px): grid 1 columna (sidebar ya oculto) */
@media (min-width: 769px) and (max-width: 912px) {
  .cursos-lista {
    display: none !important;
  }
  .cursos-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

/* === FAVORITOS: responsive en rango intermedio (769px – 1469px) ===
 * La vista de Favoritos NO tiene toggle JS: siempre muestra
 * .curso-card-horizontal. En el rango intermedio la imagen crece sin
 * control (sin max-width ni contenedor acotado). Solución: convertir
 * card horizontal → vertical y armar grid de 2/1 columnas.
 */

/* Tablet grande (913px – 1469px): 2 columnas + card vertical */
@media (min-width: 913px) and (max-width: 1469px) {
  #contenedor-favoritos .col-12.mb-4 {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
  #contenedor-favoritos .curso-card-horizontal {
    flex-direction: column;
    max-height: none;
    height: 100%;
  }
  #contenedor-favoritos .curso-card-horizontal > div:first-child {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  #contenedor-favoritos .curso-card-horizontal > div:first-child img {
    width: 100%;
    height: 180px;
    max-height: 180px;
    object-fit: cover;
    display: block;
  }
  #contenedor-favoritos .curso-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #contenedor-favoritos .curso-info-bottom {
    margin-top: auto;
    padding-top: 0.5rem;
  }
}

/* Tablet pequeña (769px – 912px): 1 columna + card vertical */
@media (min-width: 769px) and (max-width: 912px) {
  #contenedor-favoritos .curso-card-horizontal {
    flex-direction: column;
    max-height: none;
    height: auto;
  }
  #contenedor-favoritos .curso-card-horizontal > div:first-child {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  #contenedor-favoritos .curso-card-horizontal > div:first-child img {
    width: 100%;
    height: 180px;
    max-height: 180px;
    object-fit: cover;
    display: block;
  }
  #contenedor-favoritos .curso-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #contenedor-favoritos .curso-info-bottom {
    margin-top: auto;
    padding-top: 0.5rem;
  }
}

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

  .modulos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .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;
    left: 6px;
    right: auto;
    width: auto;
    max-width: calc(100% - 50px);
  }
}

@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) {
  .modulos-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .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 0.125rem 0.25rem rgba(58, 87, 232, 0.1);
    box-shadow: 0 0.125rem 0.25rem rgba(58, 87, 232, 0.1);
  }

  .responsive-table {
    border: 0;
  }

  .tabla-responsive thead {
    display: none;
  }

  .tabla-responsive tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  }

  .tabla-responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border: none;
    position: relative;
    font-size: 0.9rem;
  }

  .tabla-responsive td::before {
    content: attr(data-label);
    font-weight: 500;
    flex-basis: 40%;
    text-align: left;
    color: #64748b;
    font-size: 0.85rem;
  }

  /* Primera celda (nombre) como título de la card, sin label */
  .tabla-responsive td:first-child {
    display: block;
    padding: 0 0 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
  }

  .tabla-responsive td:first-child::before {
    display: none;
  }

  /* Ocultar celdas vacías en mobile para un layout más limpio */
  .tabla-responsive td.td-empty {
    display: none;
  }

  /* Botón "Subir certificado plataforma externa" tiene width: 447px fijo -> se desborda */
  .btn-certificado {
    width: 100% !important;
    white-space: normal;
    padding: 0.6rem 0.9rem;
    font-size: 0.85em !important;
    line-height: 1.3;
  }

  .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: 19rem !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);
  }
}

/* Footer Modernization */
footer {
  /* background: #ffffff !important; */
  padding: 15px 20px !important;
  border-top: none !important;
}

footer .text-wrapper-7 {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}

.img_logo_footer {
  max-height: 25px;
  transition: all 0.3s ease;
}

.img_logo_footer:hover {
  opacity: 0.8;
}

.contenedor_perfil_usuario_header {
  transition: all 0.3s;
  padding: 5px 10px;
  border-radius: 12px;
}

.contenedor_perfil_usuario_header:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Table Styling */
.table-sj {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.table-sj thead th {
  border-bottom: 2px solid #f1f5f9 !important;
  color: var(--sj-gray-text);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 1.25rem 1rem;
  text-transform: none;
  background: transparent !important;
  text-align: left;
}

.table-sj tbody tr {
  background: transparent;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s;
}

.table-sj tbody tr:hover {
  background-color: #fcfdfe;
}

.table-sj tbody tr td {
  padding: 1.75rem 1rem !important;
  vertical-align: middle;
  font-size: 0.9rem;
  color: #4a5568;
  border: none !important;
}

table.dataTable tbody tr td {
  padding: 1.75rem 1rem !important;
}

table.dataTable tbody tr {
  background-color: #ffffff !important;
}

/* Overrides */
.dataTables_paginate .pagination {
  border: none !important;
}

/* Estelos de breadcrumb */
.hero-banner-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 1;
}

.hero-banner-content {
  position: relative;
  z-index: 2;
  color: white;
  padding: calc(var(--bs-gutter-x, 0.75rem) * 1.5)
    calc(var(--bs-gutter-x, 0.75rem) * 3) calc(var(--bs-gutter-x, 0.75rem) * 3);
}

.hero-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.hero-breadcrumb a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity 0.3s;
}

.hero-breadcrumb a:hover {
  opacity: 1;
}

.hero-breadcrumb .separator {
  margin: 0 0.6rem;
  color: rgba(255, 255, 255, 0.6);
}

.hero-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: white;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  margin-bottom: 0;
}

.back-btn-hero {
  background: var(--bs-primary);
  /* Solid bright blue */
  border: none;
  border-radius: 10px;
  /* Squircle appearance */
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.2rem;
  transition: all 0.3s ease;
  text-decoration: none;
  color: white !important;
}

.back-btn-hero:hover {
  background: var(--bg-primary-700);
  color: white;
}

/* ── Estilos locales para rediseño de logros ── */
.card-clean {
  background: #fff;
  border-radius: 0.8rem !important;
  height: 100%;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
  /* Para que el header respete el border-radius */
  border: 1px solid #d6d7daff !important;
}

.card-header-logros {
  background-color: #f8f9fa;
  /* Fondo gris claro para el título */
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f1f1f1;
}

.card-body-logros {
  padding: 1rem;
}

.table thead tr {
  background-color: #fff;
}

.table-title-custom {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--neutral-color900);
  margin-bottom: 0;
  /* Sin margen inferior ya que está dentro del header */
}

.table-clean-logros thead th {
  background-color: transparent !important;
  border-bottom: 2px solid #f3f4f6 !important;
  color: #6c757d !important;
  /* Color gris para headers */
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  /* padding: 1.5rem 0.5rem !important; */
  text-transform: none !important;
  border-top: none !important;
}

.table-clean-logros tbody td {
  border-bottom: 1px solid #f3f4f6 !important;
  padding: 1.25rem 0.5rem !important;
  vertical-align: middle !important;
  color: var(--neutral-color800);
  font-size: 0.95rem;
}

.table-clean-logros tbody tr:last-child td {
  border-bottom: none !important;
}

/* Estrellas */
.star-status-icon {
  color: #ff9800 !important;
  /* Color naranja de la estrella */
  margin-right: 4px;
}

.star-status-text {
  /*font-weight: 600;*/
  color: var(--neutral-color700);
}

/* Badges de ranking simplificados */
.rank-badge-solid {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
}

.rank-badge-1,
.rank-badge-2,
.rank-badge-3 {
  background-color: var(--brand-principal-default) !important;
  opacity: 1 !important;
}

.rank-badge-other {
  background-color: rgb(245, 245, 245);
  color: rgb(97, 97, 97);
  font-weight: 600;
}

/* Filtros tipo pill con scroll horizontal */
.ranking-filters-container {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding: 0.5rem 0.5rem 1rem 0.5rem !important;
  border: none !important;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
}

.ranking-filters-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.ranking-filters-container .d-inline-block {
  flex: 0 0 auto;
  /* Evita que los formularios se encojan */
}

.btn-filter-pill {
  border-radius: 50px !important;
  background-color: #f3f4f6 !important;
  border: none !important;
  color: #6b7280 !important;
  padding: 0.5rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all 0.2s ease;
}

.btn-filter-pill:hover {
  background-color: #e5e7eb !important;
}

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

/* Paginación simulada para estilo */
.pagination-simulated {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.pagination-info {
  color: #6b7280;
  font-size: 0.9rem;
}

.pagination-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.btn-primary:hover {
  background-color: var(--bg-primary-700) !important;
  border-color: var(--bg-primary-700) !important;
}
.btn-primary:focus {
  background-color: var(--bg-primary-700) !important;
  border-color: var(--bg-primary-700) !important;
}
.btn-pagination {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-pagination:hover {
  background: #f9fafb;
}

.btn-pagination.active {
  background-color: var(--brand-principal-default);
  color: #fff;
  border-color: var(--brand-principal-default);
}

.pagination-number {
  color: #6b7280;
  font-size: 0.85rem;
  padding: 0 0.5rem;
  text-decoration: none;
}

.contenedor-tabla {
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f3f5;
}

.top-toolbar-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 15px;
  flex-wrap: wrap;
}

.search-box-custom {
  position: relative;
  flex-grow: 1;
  max-width: 400px;
}

.search-box-custom input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #f8f9fa;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.search-box-custom input:focus {
  background: #fff;
  border-color: #3771ff;
  box-shadow: 0 0 0 4px rgba(55, 113, 255, 0.1);
  outline: none;
}

.search-box-custom i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
}

.rows-config {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fa;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #eee;
  color: #495057;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
}

.table-title-custom {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0 !important;
}

#tableEvaluaciones,
#tableDetalle {
  border-collapse: collapse;
  width: 100%;
}

#tableEvaluaciones thead th,
#tableDetalle thead th {
  background: transparent !important;
  color: #64748b;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  padding: 15px;
  border-bottom: 2px solid #f1f5f9;
  text-align: left !important;
}

#tableEvaluaciones tbody td,
#tableDetalle tbody td {
  padding: 20px 15px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 0.95rem;
  text-align: left !important;
}

.progress-container-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 250px;
}

.progress-bar-custom {
  height: 8px;
  background-color: #f1f5f9;
  border-radius: 10px;
  overflow: hidden;
  flex-grow: 1;
}

.progress-fill-custom {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.progress-text-custom {
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 45px;
  text-align: right;
}

.btn-detalle-custom {
  background: #3b82f6;
  color: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  transition: all 0.2s ease;
}

.btn-detalle-custom:hover {
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.dropdownRows {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 100;
  min-width: 120px;
  padding: 8px 0;
  margin-top: 5px;
}

.dropdown-item-row {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.dropdown-item-row:hover {
  background: #f8f9fa;
  color: #3771ff;
}

.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
}

/* Customizing DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #3b82f6 !important;
  color: white !important;
  border: 1px solid #3b82f6 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #f1f5f9 !important;
  color: #3b82f6 !important;
  border: 1px solid #eee !important;
}

.avatar-circle-custom {
  width: 40px;
  height: 40px;
  background: #eef2ff;
  color: #6366f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.status-badge-custom {
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-badge-custom.status-success {
  background: #f0fdf4;
  color: #22c55e;
  border: 1px solid #dcfce7;
}

.status-badge-custom.status-pending {
  background: #fff7ed;
  color: #f97316;
  border: 1px solid #ffedd5;
}

.boton {
  border-radius: 0rem;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

/* Estilos basados en la imagen proporcionada para el menú lateral */
.sidebar-default {
  background-color: #ffffff;
  border-right: 1px solid #eaeaea;
}

.sidebar-header {
  background-color: transparent !important;
  /* Elimina azul heredado de main.css */
  padding: 0 !important;
  border-bottom: 1px solid #eaeaea !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  margin-top: 5rem;
}

.sidebar .sidebar-header .ocultar-menu-btn {
  position: static !important;
  /* Fuerza flujo, previene absolute placement */
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  margin: 15px 15px !important;
  padding: 11px 15px !important;
  background-color: #fff !important;
  border-radius: 10px !important;
  color: #555555 !important;
  box-shadow: none !important;
  transform: none !important;
  width: auto !important;
  height: 3rem !important;
  cursor: pointer;
  font-weight: 400;
  font-size: 15px;
}

.ocultar-menu-btn .icon {
  margin-right: 15px;
  color: #555555;
  display: flex;
  align-items: center;
}

.ocultar-menu-btn .icon svg {
  width: 20px;
  height: 20px;
}

.sidebar .sidebar-header .ocultar-menu-btn:hover {
  background-color: #e4e8eb !important;
  transition: all 0.2s ease;
}

.ocultar-menu-btn .icon2 {
  display: none !important;
}

/* Ocultar texto y ajustar ícono cuando el menú está colapsado (sidebar-mini) */
.sidebar.sidebar-mini .ocultar-menu-btn .item-name {
  display: none !important;
}

.sidebar.sidebar-mini .ocultar-menu-btn .icon {
  margin-right: 0 !important;
}

.sidebar.sidebar-mini .sidebar-header .ocultar-menu-btn {
  justify-content: center !important;
  padding: 0 !important;
}

.contenedor_perfil_usuario {
  display: none !important;
}

.sidebar-list .nav-item {
  margin-bottom: 5px;
}

.sidebar-list .nav-link {
  display: flex;
  align-items: center;
  padding: 11px 15px;
  margin: 0 15px;
  border-radius: 10px !important;
  color: #555555 !important;
  font-weight: 400;
  font-size: 15px;
  transition: all 0.2s ease;
}

.sidebar-list .nav-link:hover {
  background-color: #f8f9fa;
}

.sidebar-list .nav-link.active {
  background-color: var(--bg-primary-500) !important;
  /* Azul acorde a la 2da imagen */
  color: #ffffff !important;
}

.sidebar-list .nav-link .icon {
  margin-right: 15px;
  display: flex;
  align-items: center;
  color: inherit;
}

.sidebar-list .nav-link .icon svg {
  width: 20px;
  height: 20px;
}

.sidebar-divider {
  height: 1px;
  background-color: #eaeaea;
  margin: 15px 15px;
}

.sidebar-base .nav-item:not(.static-item) {
  padding-left: 0rem !important;
}

.sidebar .sidebar-body {
  padding-right: 0rem !important;
}

.nav-item {
  /*height: 3rem; desalinea los elementos del header*/
}

.nav.nav-pills .nav-link.active,
.nav.nav-pills .show > .nav-link {
  background-color: var(--bg-primary-500) !important;
  border-color: var(--bg-primary-500) !important;
}

.nav-link {
  /* height: 3rem; al hacer hover en el avatar del user se dana */
}

/* ================ Estilos Hover para Submenús de Configuración ================ */

/* Hover para elementos del submenú Configuración */
.contenedor_perfil_usuario_items .submenu .nav-link:hover {
  background-color: #f3f4f6;
  border-radius: 8px;
  color: var(--iq-primary) !important;
}

.contenedor_perfil_usuario_items .submenu .nav-link:hover .item-name,
.contenedor_perfil_usuario_items .submenu .nav-link:hover .icon {
  color: var(--iq-primary) !important;
}

.contenedor_perfil_usuario_items .submenu .nav-link:hover .icon svg {
  stroke: var(--iq-primary) !important;
}

/* Focus para elementos del submenú Configuración (accesibilidad teclado) */
.contenedor_perfil_usuario_items .submenu .nav-link:focus {
  background-color: #f3f4f6;
  border-radius: 8px;
  color: var(--iq-primary) !important;
  outline: 2px solid var(--iq-primary);
  outline-offset: 2px;
}

.contenedor_perfil_usuario_items .submenu .nav-link:focus .item-name,
.contenedor_perfil_usuario_items .submenu .nav-link:focus .icon {
  color: var(--iq-primary) !important;
}

.contenedor_perfil_usuario_items .submenu .nav-link:focus .icon svg {
  stroke: var(--iq-primary) !important;
}

/* Hover para elemento Cerrar sesión */
.contenedor_perfil_usuario_items > .nav-link:hover {
  background-color: #f3f4f6;
  border-radius: 8px;
  color: var(--iq-primary) !important;
}

.contenedor_perfil_usuario_items > .nav-link:hover .item-name,
.contenedor_perfil_usuario_items > .nav-link:hover .icon {
  color: var(--iq-primary) !important;
}

.contenedor_perfil_usuario_items > .nav-link:hover .icon svg {
  stroke: var(--iq-primary) !important;
}

/* Focus para elemento Cerrar sesión (accesibilidad teclado) */
.contenedor_perfil_usuario_items > .nav-link:focus {
  background-color: #f3f4f6;
  border-radius: 8px;
  color: var(--iq-primary) !important;
  outline: 2px solid var(--iq-primary);
  outline-offset: 2px;
}

.contenedor_perfil_usuario_items > .nav-link:focus .item-name,
.contenedor_perfil_usuario_items > .nav-link:focus .icon {
  color: var(--iq-primary) !important;
}

.contenedor_perfil_usuario_items > .nav-link:focus .icon svg {
  stroke: var(--iq-primary) !important;
}

/* Hover para Roles submenu */
.contenedor_perfil_usuario_items .roles-submenu .change_user:hover {
  background-color: #f3f4f6;
  border-radius: 8px;
  color: var(--iq-primary) !important;
}

/* Focus para Roles submenu (accesibilidad teclado) */
.contenedor_perfil_usuario_items .roles-submenu .change_user:focus {
  background-color: #f3f4f6;
  border-radius: 8px;
  color: var(--iq-primary) !important;
  outline: 2px solid var(--iq-primary);
  outline-offset: 2px;
}

/* ================ Fin Estilos Hover para Submenús ================ */

.avatar-50 {
  height: 40px;
  width: 40px;
  min-width: 40px;
}

/* Course Details Card Redesign */
.curso-specs {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2.2rem;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  height: fit-content;
}

.specs-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.8rem;
  color: #0f172a;
  border: none !important;
  padding: 0 !important;
}

.spec-item {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease;
}

.spec-item:hover {
  transform: translateX(4px);
}

.spec-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.1rem;
  flex-shrink: 0;
  font-size: 1.25rem;
  border: none !important;
}

.spec-icon::after {
  display: none !important;
}

/* Icon colors */
.bg-soft-blue {
  background-color: #eef2ff;
  color: #4f46e5;
}

.bg-soft-purple {
  background-color: #f5f3ff;
  color: #7c3aed;
}

.bg-soft-amber {
  background-color: #fffbeb;
  color: #d97706;
}

.bg-soft-green {
  background-color: #f0fdf4;
  color: #16a34a;
}

.bg-soft-red {
  background-color: #fef2f2;
  color: #dc2626;
}

.spec-content {
  display: flex;
  flex-direction: column;
}

.spec-label {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 0.1rem;
  font-weight: 400;
}

.spec-value {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.ver-contenido-btn {
  width: 100%;
  /*background: var(--bs-primary);*/
  color: white !important;
  border: none;
  border-radius: 10px;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 118, 255, 0.15);
  text-transform: none;
  letter-spacing: normal;
}

.ver-contenido-btn:hover {
  /*background: var(--bg-primary-700);*/
  /*transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 118, 255, 0.25);*/
  filter: brightness(0.95);
}

.curso-content {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 2rem;
}

.curso-media img {
  width: 100%;
  border-radius: 1.2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.curso-titulo {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0;
  margin-top: 1.5rem;
}

.descripcion-section {
  margin-top: 3rem;
  background: white;
  padding: 3rem;
  border-radius: 1.5rem;
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
}

.descripcion-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1.5rem;
}

.descripcion-text {
  color: #475569;
  line-height: 1.9;
  font-size: 1.1rem;
  font-weight: 400;
}

@media (max-width: 991px) {
  .curso-content {
    grid-template-columns: 1fr;
  }

  .curso-titulo {
    font-size: 1.8rem;
  }
}

@media (max-width: 767.98px) {
  .descripcion-section {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border-radius: 1rem;
  }

  .descripcion-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
  }

  .descripcion-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #334155;
  }

  /* Cards horizontales -> vertical en mobile */
  .curso-card-horizontal {
    flex-direction: column;
    max-height: none !important;
    min-height: 0;
  }

  .curso-card-horizontal > div:first-child {
    width: 100%;
  }

  .curso-card-horizontal img {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    max-height: 160px !important;
    object-fit: cover;
    display: block;
  }

  .curso-card-horizontal .curso-card-body {
    width: 100%;
    padding: 1rem;
  }

  .curso-card-horizontal .curso-title {
    font-size: 1rem;
    line-height: 1.3;
  }

  .curso-card-horizontal .btn-cursos-carpetas-list {
    white-space: nowrap;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
  }
}

.malla-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.malla-icon-container {
  width: 42px;
  height: 42px;
  background-color: #eff6ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-primary-500);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.malla-info {
  display: flex;
  flex-direction: column;
}

.malla-name {
  font-weight: 700;
  color: #1e293b;
  font-size: 0.95rem;
}

.malla-subitems {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-top: 2px;
}

#tablaCertidicados thead th {
  background: transparent;
  color: #64748b;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 15px;
  border-bottom: 2px solid #f1f5f9;
  text-align: left !important;
}

#tablaCertidicados tbody td {
  padding: 20px 15px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 0.95rem;
  text-align: left !important;
}

.btn-download-malla {
  background: var(--bg-primary-500);
  color: #fff;
  padding: 8px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  transition: all 0.2s ease;
}

.btn-download-malla:hover {
  background: var(--bg-primary-700);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.contenedor-tabla {
  background: #fff;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f3f5;
}

.top-toolbar-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 15px;
  flex-wrap: wrap;
}

.search-box-custom {
  position: relative;
  flex-grow: 1;
  max-width: 400px;
}

.search-box-custom input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #f8f9fa;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.search-box-custom input:focus {
  background: #fff;
  border-color: #3771ff;
  box-shadow: 0 0 0 4px rgba(55, 113, 255, 0.1);
  outline: none;
}

.search-box-custom i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
}

.rows-config {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fa;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #eee;
  color: #495057;
  font-weight: 500;
  font-size: 0.9rem;
}

.table-title-custom {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
}

#tablaNotas,
#tablaExternos {
  border-collapse: collapse;
  width: 100%;
}

#tablaNotas thead th,
#tablaExternos thead th {
  background: transparent;
  color: #64748b;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  padding: 15px;
  border-bottom: 2px solid #f1f5f9;
  text-align: left !important;
}

#tablaNotas tbody td,
#tablaExternos tbody td {
  padding: 20px 15px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 0.95rem;
  text-align: left !important;
}

.evaluation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}

.icon-complete {
  color: #22c55e;
  font-size: 1.1rem;
}

.status-badge {
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-completed {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  padding: 0 0.75rem; /* px-3 */
  height: 2.25rem; /* h-9 */
  border-radius: 9999px;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  border: solid 1px var(--success-color500);

  background-color: white;
  color: var(--success-color500);
}

.status-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  padding: 0 0.75rem; /* px-3 */
  height: 2.25rem; /* h-9 */
  border-radius: 9999px;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  border: solid 1px var(--error-color500);

  background-color: white;
  color: var(--error-color500);
}

.status-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  padding: 0 0.75rem; /* px-3 */
  height: 2.25rem; /* h-9 */
  border-radius: 10px !important;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  border: solid 1px var(--warning-color500);
  background-color: white;
  color: var(--warning-color500);
}

.grade-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  min-width: 45px;
}

.grade-high {
  border: solid 1px var(--success-color500);
  background-color: white;
  color: var(--success-color500);
}

.grade-mid {
  background: #fff7ed;
  color: #f97316;
}

.grade-low {
  border: solid 1px var(--error-color500);
  background-color: white;
  color: var(--error-color500);
}

.btn-cert-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  padding: 0 0.75rem; /* px-3 */
  height: 2.25rem; /* h-9 */
  border: 1px solid #e87f00;
  border-radius: 9999px;
  background-color: transparent;
  color: #e87f00;
  font-size: 0.875rem; /* text-sm */
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  cursor: pointer;
  }

.btn-cert-download:hover {
  background: #f8fafc;
  border-color: #e87f00;
  color: #e87f00;
  text-decoration: none;
}

.btn-action-realizar {
  background: var(--bg-primary-500);
  color: #fff;
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  transition: all 0.2s ease;
}

.btn-action-realizar:hover {
  background: var(--bg-primary-700);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-action-realizar.disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Ajustes específicos para DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px 12px;
  border-radius: 8px;
}

.boton-red-delete-perfil {
  border: 1px solid #f44336;
  background: transparent;
  color: #f44336;
  padding: 1.1rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  margin-left: 0.6rem;
}

.boton-red-delete-perfil:hover {
  background: #f44336;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

/* Sidebar nav-link activo: usa gradiente cuando está configurado */
.sidebar.sidebar-default .nav-link:not(.static-item).active,
.sidebar.sidebar-default .nav-link:not(.static-item)[aria-expanded=true] {
  background: var(--brand-principal-gradient, var(--bs-primary)) !important;
  color: #fff !important;
  -webkit-box-shadow: 0 10px 20px -10px rgba(var(--shadow-dark-color), 38%);
  box-shadow: 0 10px 20px -10px rgba(var(--shadow-dark-color), 38%);
}

/* Borde gradiente en home-card-inner--primary */
.home-card-inner--primary {
  border: 2px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--brand-principal-gradient, var(--bs-primary)) border-box !important;
}

/* Botones y paginación: background-color no acepta gradientes, se pisa con background shorthand */
.btn-certificado,
.btn-certificado:hover,
.btn-certificado:focus,
.btn-certificado:active,
.btn-action-realizar,
.ranking-pill-switch .js-ranking-toggle.active,
.rank-badge-1,
.rank-badge-2,
.rank-badge-3,
.view-btn.view-btn-active,
.filter-btn-active,
.bg-primary,
.btn-cursos-carpetas,
.btn-cursos-carpetas-list,
.btn-detail,
.btn-detalle-custom,
.accordion-cursos-button.is-playing .document-type-icon,
.page-item.active .page-link,
.sj-btn-download,
.btn-ver-contenido,
.btn-ver-contenido:hover,
.btn-ver-contenido:focus,
.btn-ver-contenido:active,
.btn-ver-mas,
.btn-ver-mas:hover,
.btn-ver-mas:active,
.btn-ver-mas:focus,
.btn-ver-mas-pro:hover,
.back-btn-hero,
.filters-btn.active,
.filters-btn:active,
.pagination a:hover,
.pagination .active span,
.pagination-wrapper .pagination .active > span {
  background: var(--brand-principal-gradient, var(--bs-primary)) !important;
  background-color: unset !important;
  color: #fff !important;
}

.page-item.active .page-link{
  border-color: transparent !important;
}

.btn-cursos-carpetas,
.btn-cursos-carpetas-list {
  color: #fff !important;
  border-color: transparent !important;
}

/* Borde gradiente en avatar circular */
.comunidad-avatar {
  overflow: visible !important;
  border: 3px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--brand-principal-gradient, linear-gradient(var(--bs-primary), var(--bs-primary))) border-box !important;
}

.comunidad-avatar img,
.comunidad-avatar > * {
  border-radius: 50%;
}

/* Login page: layout flex-column para que el footer quede pegado al fondo */
body.login-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
}

body.login-page .contenido-index-login {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  min-height: unset !important;
  height: unset !important;
}

body.login-page .login {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.login-page footer.footer-landing {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  body.login-page .contenido-index-login {
    background-image: none !important;
  }
  body.login-page .login {
    width: 100% !important;
  }
}