#content {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Ensure the app-shell takes full available height */
#content .app-shell {
  width: 60vw;
  max-width: 960px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  margin: 0 auto;
  flex: 1;
}

/* Fix chat container scrolling */
#content .chat-container {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
  border-radius: 8px;
}

/* Ensure proper height for chat shell */
#content .chat-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 0;
  min-height: 0;
}

/* Loading message styles */
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-secondary);
  padding: 20px;
  border-radius: 8px;
  z-index: var(--z-modal);
}

.error, .success {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 20px;
  border-radius: 8px;
  z-index: var(--z-modal);
  max-width: 80%;
  text-align: center;
}

.error {
  background-color: #ff4444;
  color: white;
}

.success {
  background-color: #4CAF50;
  color: white;
}

/* Mobile responsiveness for the content */
@media (max-width: 768px) {
  #content .app-shell {
    width: 100%;
    padding: 0 12px;
  }
  
  #content .chat-container {
    height: 72vh;
  }
}

/* Initial states for hidden/centered UI */
img#logo.centered-logo {
  display: block;
  position: fixed; /* Or absolute, depending on parent */
  left: 50%;
  top: 40%; /* Adjust to center vertically, leaving space for input below */
  transform: translate(-50%, -50%);
  width: clamp(220px, 34vw, 380px);
  max-height: clamp(90px, 14vh, 160px);
  z-index: var(--z-floating); /* Ensure it's above other elements if needed */
  transition: transform 0.2s ease;
  transform-origin: center;
  /* Ensure other logo styles don't interfere with this initial centering */
}

#logo.logo-no-transition {
  transition: none !important;
}

@media (max-width: 600px) {
  img#logo.centered-logo {
    width: clamp(200px, 58vw, 320px);
    max-height: clamp(80px, 18vh, 140px);
  }
}

/* .chat-container.hidden is already defined by the .hidden rule */

.input-container.centered-input {
  position: fixed !important; /* Important to override other positioning */
  left: 50% !important;
  top: 50% !important; /* Position it below the centered logo */
  transform: translateX(-50%) !important;
  width: 80% !important; /* Or a fixed width */
  max-width: 600px !important; /* Example */
  z-index: var(--z-overlay) !important;
  /* Override any flex properties from .message-navbar that might misalign it */
  margin: 0 !important; /* Reset margins */
  /* bottom: auto !important; /* Ensure bottom is not set from .message-navbar */
}

html, body {
  overscroll-behavior-y: contain;
  height: 100%;
  margin: 0;
  padding: 0;
}

#chat-container {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Desktop styles */

.full-screen-section {
height: 100vh; /* 100% of the viewport height */
display: flex;
justify-content: center;
align-items: center;
}



/* CSS variables and theming have been moved to variables.css */

/* Common styles */
body {
font-family: var(--font-family);
margin: 0;
padding: 0;
color: var(--color-text);
background-color: var(--color-background);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100vh;
overflow: hidden;
position: relative;
width: 100%;
}

.app-shell {
  width: 60vw;
  max-width: 960px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  margin: 0 auto;
}

.header-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 1vh;
}

.header-controls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-shell .logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-shell .logo img {
  width: 190px;
  max-height: 70px;
  height: auto !important;
  transition: transform 0.2s ease;
  transform-origin: center;
}

.logo:hover img {
  transform: scale(1.05);
}

.logo:hover #logo.centered-logo {
  transform: translate(-50%, -50%) scale(1.05);
}

.chat-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 0;
  min-height: 0;
}

.chat-container {
/* position: static; */
width: 100%;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
background-color: var(--color-background);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 0;
border-radius: 8px;
}



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

.chat-container::-webkit-scrollbar {
width: 8px;
border-radius: 4px;
}

.chat-container::-webkit-scrollbar-track {
background: var(--color-secondary);
border-radius: 4px;
}

.chat-container::-webkit-scrollbar-thumb {
background: var(--color-primary);
border-radius: 4px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
background: var(--color-primary-dark);
border-radius: 4px;
transform: scale(1.03);
}

.message {
background-color: var(--color-secondary);
padding: 12px 15px;
margin: 10px;
border-radius: 8px;
max-width: 95%;
word-wrap: break-word;
animation: fadeIn 0.5s;
border-bottom-right-radius: 0;
border-top-right-radius: 8px;
margin-left: 5%;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}

.message > span {
display: block;
margin-right: 0;
padding-right: 0;
}

.message-buttons {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 4px;
opacity: 0.7;
transition: opacity 0.2s;
}

.message-buttons button {
background: none;
border: none;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: background-color 0.2s;
}

.message-buttons button:hover {
background-color: rgba(0, 0, 0, 0.1);
opacity: 1;
}

.message.incoming {
background-color: var(--color-secondary);
align-self: flex-end;
margin-right: 2.5%;
margin-left: 1.5%;
}

.message.response {
background-color: var(--color-primary);
color: #fff;
align-self: flex-start;
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-top-left-radius: 8px;
margin-right: 2.5%;
margin-left: 1.5%;
color: #fff;
align-self: flex-start; /* Move response messages to the left */
border-bottom-right-radius: 8px; /* Round the bottom-right corner */
border-top-right-radius: 8px; /* Add a border radius to the top-left corner */
border-bottom-left-radius: 0px; /* Round the bottom-right corner */
border-top-left-radius: 8px; /* Add a border radius to the top-left corner */
margin-right: 2.5%; /* Add a little margin to identify messages */
margin-left: 1.5%; /* Add a little margin to identify messages */
}

.message.search_result {
/*background-color: var(--color-quaternary);*/
background-color: #1e1e2f;
color: #fff;
align-self: flex-start; /* Move response messages to the left */
border-bottom-right-radius: 8px; /* Round the bottom-right corner */
border-top-right-radius: 8px; /* Add a border radius to the top-left corner */
border-bottom-left-radius: 0px; /* Round the bottom-right corner */
border-top-left-radius: 8px; /* Add a border radius to the top-left corner */
margin-right: 2.5%; /* Add a little margin to identify messages */
margin-left: 1.5%; /* Add a little margin to identify messages */
}

.message.related-jurisprudences{
background-color: var(--color-quaternary);
color: #fff;
align-self: flex-start; /* Move response messages to the left */
border-bottom-right-radius: 8px; /* Round the bottom-right corner */
border-top-right-radius: 8px; /* Add a border radius to the top-left corner */
border-bottom-left-radius: 0px; /* Round the bottom-right corner */
border-top-left-radius: 8px; /* Add a border radius to the top-left corner */
margin-right: 2.5%; /* Add a little margin to identify messages */
margin-left: 1.5%; /* Add a little margin to identify messages */
}

.related-jurisprudences-toggle {
  background-color: var(--color-quaternary);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease;
}

.related-jurisprudences-toggle span:last-child {
  font-size: 0.9em;
}

.related-jurisprudences-toggle:hover,
.related-jurisprudences-toggle:focus {
  background-color: var(--color-secondary);
  outline: none;
}

.related-jurisprudences-content {
  margin-top: 12px;
}

.message.error {
background-color: #580505; /* Dark red background for errors */
color: #ffffff; /* White text for better contrast */
align-self: flex-start;
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-top-left-radius: 8px;
margin-right: 2.5%;
margin-left: 1.5%;
padding: 12px 15px;
}

.message.error .retry-button {
background-color: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
padding: 4px 12px;
margin-top: 8px;
cursor: pointer;
transition: background-color 0.2s;
}

.message.error .retry-button:hover {
background-color: rgba(255, 255, 255, 0.3);
}

.message.first-always {
background-color: var(--color-tertiary);
align-self: flex-start;
border-bottom-left-radius: 0;
color: var(--color-text);
border-bottom-right-radius: 8px; /* Round the bottom-right corner */
border-top-right-radius: 8px; /* Add a border radius to the top-left corner */
border-bottom-left-radius: 0px; /* Round the bottom-right corner */
border-top-left-radius: 8px; /* Add a border radius to the top-left corner */
}


.input-container {
display: flex;
margin-top: 1rem;
padding: 5px;
width: 60vw;
background-color: var(--color-input-background);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
min-height: 1rem; /* Adjust this value based on the height of one line of text */
}

.input-container textarea {
background-color: var(--color-input-background);
width: 100%;
border: none;
resize: none;
overflow: hidden;
line-height: 1.5;
padding: 5px;
font-family: inherit;
font-size: inherit;
color: inherit;
min-height: 1.5em; /* Set minimum height to fit one line */
max-height: 4.5em; /* Set maximum height to fit three lines */
transition: height 0.2s ease-in-out;
}

.input-container textarea::-webkit-scrollbar {
width: 8px;
border-radius: 4px;
}

.input-container textarea::-webkit-scrollbar-track {
background: var(--color-secondary);
border-radius: 4px;
}

.input-container textarea::-webkit-scrollbar-thumb {
background: var(--color-primary);
border-radius: 4px;
}

.input-container textarea::-webkit-scrollbar-thumb:hover {
background: var(--color-primary-dark);
border-radius: 4px;
transform: scale(1.03);
}

@media (max-width: 768px) {
.input-container {
width: 90vw;
margin-left: 2vw;
}
}

input[type="text"] {
flex-grow: 1;
padding: 8px;
font-size: 1rem;
border: none;
background-color: transparent;
color: var(--color-text);
font-family: var(--font-family);
width: 97%;
height: auto;
line-height: 1.2em;
}

input[type="text"]:focus {
outline: none;
}

button {
padding: 8px 16px;
font-size: 1rem;
background-color: var(--color-primary);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: var(--font-family);
}

button:hover {
background-color: var(--color-primary-dark);
transform: scale(1.03);
}

  

.nav-menu a, .nav-menu button {
display: block;
width: 100%;
text-align: left;
font-size: 1.1rem;
padding: 0.8rem 1.2rem;
background: none;
border: none;
color: var(--color-text);
border-radius: 4px;
margin-bottom: 0.25rem;
transition: background-color 0.2s, color 0.2s;
}

.nav-menu a:hover, .nav-menu button:hover {
background-color: var(--color-primary);
color: #fff;
}




button#send-button {
background-color: transparent; /* Makes the button background transparent */
border: none;
padding: 5px;
border-radius: 60%; /* Makes the button round */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
align-self: center;
position: relative;
}


button#send-button:hover {
background-color: var(--color-primary-dark); /* Darker shade for hover effect */
transform: scale(1.1); /* Optional: Scale up on hover for added interactivity */
}

button#send-button svg {
fill: var(--color-text); /* Icon color */
}


/* .disclaimer {
  align-self: center;
  position: relative;
  width: 99vw;
  max-width: 99vw;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.75rem;
  padding: 6px 10px;
  background-color: var(--color-secondary);
  color: var(--color-text);
  border-radius: 0;
  margin: 0;
  z-index: var(--z-raised);
} */

.disclaimer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.75rem;
  padding: 6px 10px;
  background-color: var(--color-secondary);
  color: var(--color-text);
  border-radius: 0;
  margin: 0;
  z-index: var(--z-raised);
}

/* Scale adjustment */
.logo {
margin-top: 1vh; /* Ensure padding is set to 0 */
}


@media (max-width: 768px) {
.input-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: var(--z-floating);
padding: 6px 8px;
box-sizing: border-box;
margin-bottom: 10vh; /* Add the input container height plus 20vh */
height: auto; /* Allow the container to size to content */
}

.chat-container {
width: 100%;
margin-top: 2vh;
height: calc(100vh - 0vh); /* Adjust the height to make room for the input container, it defaults to max, but can be changed */
margin-bottom: calc(0px + 15vh); /* Add the input container height plus 20vh */
margin-top: vh;
border-radius: 15px;
}

.logo {
margin-top: 0px;
width: 280px;
height: auto;
}

.logo path {
fill: var(--color-text);


}
}


/* Add styles for Markdown elements */
.message p {
margin: 0;
}

.message h1,
.message h2,
.message h3,
.message h4,
.message h5,
.message h6 {
margin-top: 0.5em;
margin-bottom: 0.5em;
}

.message ul,
.message ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
padding-left: 1.5em;
}

.message pre {
background-color: var(--color-secondary);
padding: 0.5em;
border-radius: 4px;
overflow-x: auto;
}

.message code {
font-family: monospace;
}

.message blockquote {
margin: 0;
padding-left: 1em;
border-left: 4px solid var(--color-primary);
}

.top-bar {
padding-top:1.5vh; /* Agrega espaciado superior */
padding-bottom: 5px; /* Agrega espaciado inferior */
min-height: 5vh;
}


@media (max-width: 768px) {
.top-bar {
padding-top:1.5vh; /* Agrega espaciado superior */
padding-bottom: 5px; /* Agrega espaciado inferior */
}

.logo img {
width: 200px; /* Ajusta el ancho del logo */
height: auto; /* Mantiene la proporción del logo */
}
}

.chat-input-region {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}

.message-navbar {
  position: static;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: none;
}

.message-navbar .input-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  padding: 4px 8px;
}

.message-navbar .input-container textarea {
background-color: var(--color-input-background);
width: 100%;
border: none;
resize: none;
overflow: auto; /* Permite que el textarea crezca verticalmente */
line-height: 1.4;
padding: 8px 10px;
font-family: inherit;
font-size: inherit;
color: inherit;
min-height: 1.8em; /* Set minimum height to fit one line comfortably */
max-height: 3.2em; /* Establece una altura máxima para evitar un crecimiento excesivo */
height: 2.2em;
transition: height 0.2s ease-in-out; /* Animación de transición suave */
}

.message-navbar .input-container button {
background-color: transparent; /* Transparent background */
border: none;
padding: 0;
cursor: pointer;
transition: none; /* Remove the background-color transition */
}

.message-navbar .input-container button svg {
fill: var(--color-text); /* Light icon color */
}

@media (max-width: 768px) {
.app-shell {
  width: 100%;
  padding: 0 12px;
}

/* Input Container */
.chat-shell,
.chat-input-region {
  width: 100%;
}

.header-shell {
  width: 100%;
  margin: 1vh 0 0.8vh;
}

.chat-shell {
  margin-bottom: 16px;
}

.chat-container {
  height: 72vh;
}

.chat-input-region {
  margin: 0;
}

.message-navbar .input-container {
  margin-left: 0;
  width: 100%;
  border-radius: 15px; /* Adjust as needed */
  padding: 6px 10px;
}

.message-navbar .input-container textarea {
  border-radius: 10px; /* Adjust as needed */
  padding: 10px 12px;
  min-height: 2.2em;
  height: 2.4em;

}

.message-navbar .input-container button {
  margin-left: auto;

}
}

textarea:focus {
  outline: none;
}

a {
color: var(--color-text);
}
a:visited {
color: red;
}
a:hover {
color: #a3deec;
}
a:active {
color: #baeca3;
}

.slider-container {
position: fixed;
top: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}

.switch {
position: relative;
display: inline-block;
width: 50px;
height: 28px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}

.slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}

input:checked + .slider {
background-color: var(--color-primary);
}

input:focus + .slider {
box-shadow: 0 0 1px var(--color-primary);
}

input:checked + .slider:before {
-webkit-transform: translateX(22px);
-ms-transform: translateX(22px);
transform: translateX(22px);
}

.slider.round {
border-radius: 28px;
}

.slider.round:before {
border-radius: 50%;
}

.switch-label {
font-size: 14px;
font-weight: bold;
margin-top: 8px;
}

/* Nuevos estilos para la caja de etiquetas */
.tag-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px 10px;
 background-color: var(--color-secondary);
z-index: var(--z-overlay);
display: none;
border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tag-container.show {
display: flex;
align-items: center;
}

.tag-container input[type="text"] {
flex-grow: 1;
padding: 8px;
border: none;
background-color: transparent;
color: var(--color-text);
font-family: inherit;
font-size: inherit;
}

.tag-container input[type="text"]:focus {
outline: none;
}

.tag-container button {
padding: 8px 16px;
background-color: var(--color-primary);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: inherit;
border-radius: 20%;
}

.tag-container button:hover {
background-color: var(--color-primary-dark);

}
.tag-display {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding: 5px;
}

.tag {
background-color: var(--color-primary);
color: #fff;
padding: 5px 10px;
border-radius: 20px;
margin-right: 50px;
display: flex;
align-items: center;
white-space: nowrap;
}



.tag-text {
margin-right: 5px;
}

.tag-close {
cursor: pointer;
font-size: 12px;
}


.suggestions {
position: absolute;
bottom: 100%;
left: 0;
list-style-type: none;
padding: 0;
margin: 0;
background-color: var(--color-border);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
max-height: 200px;
overflow-y: auto;
width: 100%;
border-radius: 4px;
z-index: var(--z-overlay);
}

.suggestions li {
padding: 10px;
cursor: pointer;
}

.suggestions li:hover {
background-color: var(--color-primary);
}

.suggestions li:last-child {
border-bottom: none;
}

/* Nuevos estilos para la caja de etiquetas */
.tag-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 5px 10px;
background-color: var(--color-secondary);
z-index: var(--z-overlay);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


#scrollToTopBtn {
position: fixed; /* Fixed position relative to the viewport */
bottom: 160px; /* Moved up by two button heights */
right: 40px; /* Moved left by one button width */
/* Removed left, transform, and bottom media queries as fixed position is better */
padding: 6px; /* Further reduced padding for a smaller button */
background-color: var(--color-primary); /* Using primary color for better visibility */
color: #fff; /* White icon color */
border: none;
border-radius: 50%; /* Make it round */
cursor: pointer;
z-index: var(--z-floating); /* Ensure it's above most elements */
font-size: 14px; /* Further reduced icon size */
line-height: 1; /* Adjusted line height */
display: flex;
align-items: center;
justify-content: center;
opacity: 0; /* Initially hidden */
visibility: hidden; /* Also hidden for accessibility */
transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition for fading */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
width: 27px; /* Explicit width for consistent sizing (approx 25% smaller) */
height: 27px; /* Explicit height for consistent sizing (approx 25% smaller) */
}

#scrollToTopBtn:hover {
background-color: var(--color-primary-dark); /* Darker shade on hover */
}

/* Consider adding a small icon inside the button using an SVG or font icon */
#scrollToTopBtn::after {
content: '\2191'; /* Up arrow character - replace with SVG for better styling/control */
}


/* Updated styles for the 5-10 slider */
.slider-container {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.range-slider {
  width: 100%;
  margin-top: 0.5rem;
  position: relative;
}

.range-slider input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-secondary);
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  border-radius: 2px;
  height: 4px; /* Thinner slider track */
}

.range-slider input:hover {
  opacity: 1;
  transform: scale(1.03);
}

.range-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; /* Thinner thumb */
  height: 12px; /* Thinner thumb */
  background: var(--color-primary);
  cursor: pointer;
  border-radius: 50%;
}

.range-slider input::-moz-range-thumb {
  width: 12px; /* Thinner thumb */
  height: 12px;
  background: var(--color-primary);
  cursor: pointer;
  border-radius: 50%;
}

.range-value {
  text-align: center;
  margin-top: 0.5rem;
  font-weight: bold;
}

.range-ticks {
  display: flex;
  padding: 0 6px;
  margin-top: 5px;
  justify-content: space-between;
  width: 100%;
}

.range-ticks span {
  font-size: 10px;
  color: var(--color-text);
}


/* TUTORIAL STYLES */

#tutorial-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-modal);
display: flex;
justify-content: center;
align-items: center;
}

#tutorial-highlight {
position: absolute;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
border-radius: 4px;
transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
z-index: calc(var(--z-modal) + 1);
}


#tutorial-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: color-mix(in srgb, var(--color-secondary) 70%, transparent);
padding: 20px;
border-radius: 8px;
text-align: center;
z-index: calc(var(--z-modal) + 2);
max-width: 80%;
width: 400px;
}
#tutorial-text {
margin-bottom: 15px;
}

#tutorial-continue {
margin-top: 10px;
padding: 8px 16px;
background-color: var(--color-primary);
color: var(--color-text);
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

#tutorial-continue:hover {
background-color: var(--color-primary-dark);
}

.hidden {
display: none !important;
}
/* Message Styles */
/* Ver más button styles */
.see-more-button {
background-color: transparent;
color: var(--color-see-more);
border: 1px solid var(--color-see-more);
border-radius: 4px;
padding: 2px 8px !important;
font-size: 0.7em !important;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin: 0 0 0 6px !important;
text-transform: none;
letter-spacing: normal;
display: inline;
position: relative;
top: -1px;
white-space: nowrap;
text-decoration: none;
}

.see-more-button:hover {
background-color: var(--color-see-more);
color: white;
text-decoration: none;
}

.see-more-button:active {
transform: scale(0.98);
}

/* Container for text with 'ver más' button */
.text-with-more {
display: inline;
position: relative;
}


/* For search result items */
.search-result-content {
position: relative;
padding-right: 0;
}


/* Button styles have been moved to buttons.css */

/* Add message padding */
.message {
  position: relative;
}

/* Update loading spinner */
.loading-spinner {
  border: 4px solid var(--color-background);
  border-left-color: var(--color-text);
}

/* Search Result Header */
.search-result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
padding-bottom: 0;
}

.search-result-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 24px;
height: 28px;
margin: 0 8px 0 0;
position: relative;
cursor: pointer;
outline: none;
background: none;
border: none;
padding: 0;
}

.search-result-checkbox::before {
content: '📎';
font-size: 20px;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
transition: all 0.2s ease;
}

.search-result-checkbox:checked::before {
content: '📎';
color: #ff4444;
opacity: 1;
transform: rotate(-45deg) scale(1.3);
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1.5);
}

.search-result-checkbox:hover::before {
opacity: 1;
transform: scale(1.2);
}

.search-result-checkbox:checked:hover::before {
transform: rotate(-45deg) scale(1.4);
}

.search-result-checkbox::after {
content: 'Guardar documento';
top: -35px;
/* Tooltip styles */
position: absolute;
left: 50%;
transform: translateX(-50%) scale(0.95);
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: white;
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: var(--z-tooltip);
transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}

.search-result-checkbox::after::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
border-width: 5px 5px 0;
border-style: solid;
border-color: rgba(0, 0, 0, 0.7) transparent transparent;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.search-result-checkbox:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scale(1);
}

/* Search Result Details Button */
.search-result-details-button {
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
width: 24px;
height: 24px;
opacity: 0.7;
position: absolute;
top: 6px;
right: 8px;
}

.search-result-details-button:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.08);
transform: scale(1.1);
}

.search-result-details-button:active {
transform: scale(0.95);
}

.search-result-details-button svg {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}

.search-result-details-button:hover svg {
transform: rotate(90deg);
}

/* Search Result Message */
.search_result {
position: relative;
padding-top: 8px;
}

/* Style for the Load Data button in the modal */
.modal-load-data-button {
/* General button styles are applied by the 'button' tag */
margin-right: 10px; /* Space it from the close button */
/* Specific styling if needed, otherwise defaults to 'button' styles */
}