body {
  font-family: "Roboto", sans-serif;
}

.truncate-5-lines {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.truncate-1-lines {
  color: var(--bs-dark) !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.truncate-2-lines {
  color: var(--bs-dark) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.truncate-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.truncate-4-lines {
  color: var(--bs-dark) !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.btn-blue, .btn-secondary {
  color: var(--bs-light) !important;
  background-color: var(--bs-terciary) !important;
  border-color: var(--bs-terciary) !important;
}

.btn-blue:active, .btn-secondary:active {
  color: var(--bs-light) !important;
  background-color: var(--bs-terciary-darker) !important;
}

.btn-primary {
  color: var(--bs-light) !important;
  background-color: var(--bs-primary) !important;;
  border-color: var(--bs-primary) !important;
}

.form-control, .form-control:focus, .form-control:active {
  border-color: var(--bs-primary) !important;
  color: var(--bs-dark) !important;
}

.form-control::placeholder {
  color: var(--bs-primary) !important;
}

.text-primary {
  color: var(--bs-dark) !important;
}

.text-secondary {
  color: var(--bs-light) !important;
}

.border-primary, .border-secondary {
  border-color: var(--bs-primary) !important;
}

.btn-flat {
  border-radius: 0px;
  padding: 6px 12px;
}

.btn-flat-user {
  border-radius: 0px;
  padding: 4px 10px;
}

.btn-clean {
  border: 0;
  border-radius: 0;
  padding: 10px 14px;
  height: 100%;
  outline: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-clean:focus,
.btn-clean:active {
  outline: none;
  box-shadow: none;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 1em;
}

.montserrat-min {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 0.7em;
}

.montserrat-min2 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: .9em;
}

.montserrat-bold{
  font-family: "Montserrat", sans-serif;
  font-size: 1.2em;
  font-weight: 700;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

.roboto-min {
  font-family: "Roboto", sans-serif;
  font-size: 0.8em;
}

.roboto-min2 {
  font-family: "Roboto", sans-serif;
  font-size: 0.9em;
}

.title-gray {
  color: #7F7F7F; 
  font-weight: 600;
}	

:root {

  /* Tema Predeterminado */
  --bs-primary: #33657e;       
  --bs-secondary: #000;   
  --bs-terciary: #666464;   
  
  --bs-primary-rgb: 243, 156, 18;
  --bs-secondary-rgb: 253, 227, 167;
  --bs-terciary-dark: #505050;
  --bs-terciary-darker: #3d3d3d;
  --bs-danger: #E63946;
  --bs-danger-rgb: 230, 57, 70;
  --bs-light: #FFF8E1;
  --bs-light-rgb: 255, 248, 225;
  --bs-dark: #0a0a0a;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-gray: #ADB5BD;
}

.btn-primary {
  --bs-btn-color: var(--bs-light);
  --bs-btn-bg: var(--bs-primary); /* Color primary */
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-light);
  --bs-btn-hover-bg: var(--bs-terciary-dark);
  --bs-btn-hover-border-color: var(--bs-terciary-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: var(--bs-light);
  --bs-btn-active-bg: var(--bs-terciary-dark);
  --bs-btn-active-border-color: var(--bs-terciary-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-light);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: var(--bs-light) !important;
  background-color: var(--bs-primary) !important;
}

input:focus {
  outline: none;
  border-color: var(--bs-terciary-dark);
}

.border-inputs {
  width: 100%;
  height: 2.5em;
  transition: border-color 0.3s ease;
  border-radius: 0;
  border: 1px solid #ccc;
}

.border-inputs:focus {
  border: 1px solid;
  border-color: #21885d;
  outline: none;
}

.border-inputs-small {
  width: 6.2em;
  height: 2.3em;
  transition: border-color 0.3s ease;
  border-radius: 0;
  border: 1px solid #ccc;
}

.border-inputs-small:focus {
  border: 1px solid;
  border-color: #2189df;
  outline: none;
}

/* Estilos diferenciados para category y tag */
.bg-category {
  color: var(--bs-secondary-text);
  background-color: var(--bs-secondary);  /* Category con color secondary */
  border-radius: 0px;
}

.bg-tag {
  border: 0px !important;
  color: var(--bs-tertiary-text);
  background-color: var(--bs-tertiary);  /* Tag con color terciary */
  border-radius: 0px;
}

.box-tag {
  border: 1px, solid, var(--bs-secondary);
  padding: 0px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.theme-square {
    width: 60px;
    height: 40px;
    border: none;
    border-radius: 0px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}



.theme-square:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

.modal-dialog-slideout .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-dialog-slideout .modal-body {
    overflow-y: auto;
    flex: 1; 
}

.primaryBg:hover{
  background-color: white !important;
}