/* Root variables for theme colors and sizing */
:root {
 --primary-color: #9CC3C0; /* Primary color, used for user messages */
 --secondary-color: #FEFDFB; /* Secondary color, used for bot messages and background elements */
 --background-color: #FBF8F3; /* Main background color */
 --text-color: #333333; /* Default text color */
 --accent-color: #2f8a80; /* Accent color, used for blockquotes */
 --code-background: #f8f9fa; /* Background color for code blocks */
 --button-primary-color: #5D9495; /* Color for the send button */
 --button-secondary-color: #888888; /* Color for the upload button (note: this variable is defined but not used in the provided CSS) */
 --button-inactive-color: #D3D3D3; /* Color for inactive buttons (note: this variable is defined but not used) */
 --highlight-color: #DAA691; /* Highlight color, used for input focus */
 --header-icon-height: 32px; /* Puedes ajustar este valor */
 --session-separator-text-color: #7f8d86;
 --session-separator-wave-opacity: 0.72;
 --session-separator-wave-height: 10px;
 --session-separator-wave-tile-width: 48px;
 --session-separator-wave-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8' preserveAspectRatio='none'%3E%3Cpath d='M-12 4 C -9 1 -3 1 0 4 S 9 7 12 4 S 21 1 24 4 S 33 7 36 4 S 45 1 48 4 S 57 7 60 4' fill='none' stroke='%2397a59f' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Basic reset and full height for html and body */
html, body {
    height: 100%; /* Make html and body take full viewport height */
    margin: 0; /* Remove default margin */
    /* overflow: hidden;  Prevent unwanted scrollbars on the body */
}

/* Body styles */
body {
 font-family: 'Roboto', sans-serif; /* Set the font family */
 background-color: var(--background-color); /* Use background color from variables */
 color: var(--text-color); /* Use text color from variables */
 line-height: 1.6; /* Set line height for readability */
 display: flex; /* Use flexbox for centering content */
 justify-content: center; /* Center content horizontally */
 align-items: center; /* Center content vertically */
}

/* Container for the chat application */
.container {
 width: 100%; /* Take full width */
 height: 100%; /* Take full height */
}

/* Main chat container */
.chat-container {
 max-width: 800px; /* Maximum width for larger screens */
 width: 100%; /* Take full width on smaller screens */
 height: 100%; /* Take full height */
 background-color: var(--background-color); /* Use background color from variables */
 display: flex; /* Use flexbox */
 flex-direction: column; /* Stack children vertically */
 box-sizing: border-box; /* Include padding and border in the element's total width and height */
 position: relative; /* Needed for sticky positioning of title and input */
 margin: 0 auto; /* Centra el contenedor del chat en el body */

/*
  Añadimos un padding en la parte inferior para dejar espacio
  a la barra amarilla del emulador de Firebase.  Descomentar para usar emulador
 padding-bottom: 50px;
 */

}
/* --- INICIO: Estilos para la nueva cabecera personalizada --- */
.chat-header-custom {
    display: flex;
    justify-content: space-between; /* Logo a la izquierda, icono de usuario a la derecha */
    align-items: center; /* Alineación vertical */
    padding: 0.75rem 1rem; /* Ajusta el padding según necesites */
    background-color: var(--background-color); /* Para que tape el scroll */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra sutil, similar al título anterior */
    position: sticky;
    top: 0;
    z-index: 10; /* Asegurar que esté por encima de los mensajes */
    width: 100%;
    box-sizing: border-box;
}

.header-logo,
.header-user-icon {
    height: var(--header-icon-height); /* Controla la altura aquí */
    width: auto;                       /* Mantiene la proporción de la imagen */
    display: block;                    /* Buena práctica para imágenes */
}

.header-logo {
    /* Puedes añadir márgenes específicos si es necesario */
    /* margin-right: auto; */ /* Esto no es necesario con space-between */
}

.header-user-icon {
    /* Puedes añadir márgenes específicos si es necesario */
    /* margin-left: auto; */ /* Esto no es necesario con space-between */
    border-radius: 50%; /* Opcional: para hacer el icono de usuario redondo si la imagen es cuadrada */
    /* object-fit: cover; */ /* Opcional: si la imagen de usuario no es cuadrada y quieres que llene el círculo */
}
/* --- FIN: Estilos para la nueva cabecera personalizada --- */

/* Container for chat messages */
.chat-messages {
    flex-grow: 1; /* Ocupa todo el espacio vertical disponible */
    overflow-y: auto; /* Permite el scroll cuando sea necesario */
    padding: 1rem; /* Mantiene un espacio interno */
    display: flex; /* Lo convertimos en contenedor flex */
    flex-direction: column; /* Apilamos los mensajes verticalmente */
}

/* Individual message styles */
.message {
 /* margin-bottom: 0.5rem; /* Space between messages */
 padding: 0.75rem 1.2rem; /* Padding inside messages */
 max-width: 100%; /* Maximum width for messages */
 font-size: 14px; /* Set font size */
 line-height: 1.4; /* Set line height */
 min-height: 20px; /* Minimum height for messages */
 width: fit-content; /* Adjust width to content */
 min-width: 40%; /* Minimum width for messages */
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* Add a subtle shadow */
 overflow: hidden; /* Hide overflowing content */
}

/* Styles for bot messages */
.bot-message {
 background-color: var(--secondary-color); /* Use secondary color from variables */
 color: var(--text-color); /* Use text color from variables */
 margin-left: 0; /* Resetea el margen si está dentro de .bot-wrapper */
 margin-right: 0;
 /* Adjusted border radius for bubble shape - Peak at bottom-left */
 border-top-left-radius: 12px;
 border-top-right-radius: 12px;
 border-bottom-left-radius: 0; /* Sharp corner at bottom-left */
 border-bottom-right-radius: 12px;
 max-width: 80%; /* Maximum width for bot messages */
}

/* Styles for user messages */
.user-message {
 background-color: var(--primary-color); /* Use primary color from variables */
 color: white; /* Set text color to white */
 margin-left: 0; /* Resetea el margen si está dentro de .user-wrapper */
 margin-right: 0;
 border-top-left-radius: 12px; /* Adjust border radius for bubble shape */
 border-top-right-radius: 12px;
 border-bottom-left-radius: 12px;
 border-bottom-right-radius: 0px;
 max-width: 80%; /* Maximum width for user messages */
}

.message-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%; /* Para que los contenedores de botones se puedan alinear correctamente */
    /* margin-bottom: 0.5rem; /* Movido de .message a aquí para espaciar wrappers completos */
}

.chat-buttons-container {
    display: flex;
    flex-wrap: wrap; /* Los botones pueden pasar a la siguiente línea si no caben */
    gap: 0.5rem;     /* Espacio horizontal y vertical entre botones */
    margin-top: 0.75rem; /* Espacio entre el mensaje del bot y sus botones */
    /* align-self: flex-start; /* Asegura que el contenedor de botones se alinee con el inicio del mensaje */
                           /* Esto es si .chat-buttons-container es hermano de .bot-message y ambos están en un flex container */
}

.chat-action-button {
    padding: 0.6em 1em; /* Ajusta el padding para un buen tamaño */
    font-size: 0.85em;   /* Un poco más pequeño que el texto del chat */
    color: var(--button-primary-color);
    background-color: transparent; /* Fondo transparente */
    border: 1px solid var(--button-primary-color);
    border-radius: 15px; /* Bordes redondeados */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    text-align: center;
}

.chat-action-button:hover {
    background-color: var(--button-primary-color);
    color: white;
}

.chat-action-button.disabled {
    background-color: #f0f0f0; /* Un color de fondo más apagado */
    color: #ababab;      /* Color de texto apagado */
    border-color: #d0d0d0;  /* Borde apagado */
    cursor: not-allowed;   /* Cambia el cursor para indicar que está deshabilitado */
}

/* Botón de selección de imagen con miniatura */
.chat-action-button--thumb {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4em 0.75em 0.4em 0.4em; /* Menos padding izq. para acomodar la miniatura */
    max-width: 16rem;
}

.chat-action-button__thumb {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    background-color: #f0f0f0; /* Placeholder mientras carga */
}

.chat-action-button__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Permite que el ellipsis funcione dentro del flex */
}

/* La miniatura no debe heredar el cambio de color de texto en hover */
.chat-action-button--thumb:hover .chat-action-button__thumb {
    opacity: 0.92;
}


.bot-wrapper {
    align-items: flex-start; /* Alinea el contenido del bot (mensaje y botones) a la izquierda */
    margin-left: 0.5rem; /* Empuja todo el wrapper del bot un poco */
    max-width: 80%; /* Consistente con .bot-message */
    margin-bottom: 0.5rem; /* Espacio entre mensajes/grupos de botones */
}

.user-wrapper {
    align-items: flex-end; /* Alinea el contenido del usuario a la derecha */
    margin-right: 0.5rem; /* Empuja todo el wrapper del usuario un poco */
    max-width: 80%; /* Consistente con .user-message */
    margin-left: auto; /* Para empujar a la derecha */
    margin-bottom: 0.5rem;
}

.session-separator {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 1.5rem 0;
    color: var(--session-separator-text-color);
    font-size: 0.8rem;
    line-height: 1.2;
}

.session-separator__wave {
    flex: 1 1 0;
    min-width: 1.75rem;
    height: var(--session-separator-wave-height);
    background-image: var(--session-separator-wave-image);
    background-repeat: repeat-x;
    background-position: left center;
    background-size: var(--session-separator-wave-tile-width) 100%;
    opacity: var(--session-separator-wave-opacity);
}

.session-separator__label {
    flex: 0 1 auto;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.01em;
}

@media (max-width: 480px) {
    .session-separator {
        gap: 0.6rem;
        margin: 1.25rem 0;
        font-size: 0.75rem;
    }

    .session-separator__wave {
        min-width: 1.2rem;
        background-size: 40px 100%;
    }
}

/* Styles for images within messages */
.chat-image {
    max-width: 100%; /* Limit image width to the message container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Prevent extra space below the image */
    border-radius: 8px; /* Add rounded corners to images */
}
/*
 * Esta nueva regla se asegura de que CUALQUIER imagen dentro de una burbuja de mensaje
 * (sea de usuario o de bot) se ajuste correctamente y no se desborde.
 * Hereda los estilos de .chat-image para mantener la consistencia visual.
 */
.message img:not(.artwork-type-icon) {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    /* UX IMPROVEMENT: Espaciado limpio y sin hacks */
    margin-top: 10px;   /* Separación clara del bloque anterior (la imagen/texto previo) */
    margin-bottom: -6px; /* Pequeño hack para corregir visualmente los captions */
}

.message img.artwork-type-icon {
    width: 16px;
    height: 16px;
    max-width: none;
    display: inline-block;
    margin: 0 0 0 4px;
    vertical-align: middle;
    border-radius: 0;
}

/* Compact paragraph spacing within messages */
.bot-message p,
.user-message p {
 margin: 0.4em 0;
}
.bot-message p:first-child,
.user-message p:first-child {
 margin-top: 0;
}
.bot-message p:last-child,
.user-message p:last-child {
 margin-bottom: 0;
}

/* Markdown heading styles within bot messages */
.bot-message h1,
.bot-message h2,
.bot-message h3,
.bot-message h4,
.bot-message h5,
.bot-message h6 {
 margin-top: 0.5em; /* Add top margin to headings */
 margin-bottom: 0.5em; /* Add bottom margin to headings */
 font-weight: 600; /* Set font weight for headings */
}

/* Inline code: styled as highlighted text, not actual code */
.bot-message code {
 background-color: transparent;
 padding: 0;
 font-family: inherit;
 font-size: inherit;
 font-weight: 700;
 color: var(--accent-color);
}

/* Markdown preformatted text (code blocks) within bot messages */
.bot-message pre {
 background-color: var(--code-background); /* Use code background color */
 padding: 1em; /* Add padding around code blocks */
 border-radius: 5px; /* Add rounded corners to code blocks */
 overflow-x: auto; /* Add horizontal scroll if code overflows */
 margin: 0.5em 0; /* Add top and bottom margin to code blocks */
}

/* Style for code within pre blocks to remove background and padding */
.bot-message pre code {
 background-color: transparent; /* Remove background from code inside pre */
 padding: 0; /* Remove padding from code inside pre */
}

/* Markdown list styles within bot messages */
.bot-message ul,
.bot-message ol {
 margin: 0.5em 0; /* Add top and bottom margin to lists */
 padding-left: 1.5em; /* Add left padding to lists */
}

.bot-message li {
 margin-bottom: 0.8em;
}

.bot-message li:last-child {
 margin-bottom: 0;
}

.bot-message li > ul,
.bot-message li > ol {
 margin-top: 0.45em;
 margin-bottom: 0.1em;
 padding-left: 1.2em;
}

.bot-message li::marker {
 color: #6f8f8c;
}

/* Markdown blockquote styles within bot messages */
.bot-message blockquote {
 border-left: 4px solid var(--accent-color); /* Add a left border with accent color */
 margin: 0.5em 0; /* Add top and bottom margin */
 padding-left: 1em; /* Add left padding */
 color: #666; /* Set text color for blockquotes */
}

/* Estilo sutil para cursivas (usado habitualmente en captions y subtítulos) */
.message em {
    display: block;     /* CLAVE: Lo convertimos en bloque para controlar sus márgenes verticalmente */
    color: #777;        /* Gris suave */
    font-size: 0.85em;  /* Tamaño tipográfico de metadato */
    margin-top: 0;      /* Pegado a la imagen (el espacio lo da el margin-bottom de la img) */
    line-height: 1.3;   /* Altura de línea cómoda */
    
    /* Limpieza de hacks anteriores */
    position: static;
    top: auto;
}

/* Link styles within user messages */
.user-message a,
.user-message a[href^="mailto:"] {
 color: white; /* Set link color to white */
 font-weight: bold; /* Make links bold */
 text-decoration: underline; /* Underline links */
}

/* Link styles within bot messages */
.bot-message a,
.bot-message a[href^="mailto:"] {
 color: var(--button-primary-color); /* Use primary button color for links */
 font-weight: bold; /* Make links bold */
 text-decoration: underline; /* Underline links */
}

/* --- Estilos para enlaces de operación interna (Listas de obras) --- */
.bot-message a[href^="#op:"] {
    color: var(--button-primary-color); /* Mismo verde que los botones */
    text-decoration: none; /* Sin subrayado */
    font-weight: 600; /* Negrita para destacar */
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.bot-message a[href^="#op:"]:hover {
    opacity: 0.7; /* Efecto hover sutil */
    text-decoration: none;
}

/* Input container styles */
.input-container {
    display: flex; /* Use flexbox for layout */
    gap: 0.5rem; /* Add space between input elements */
 position: sticky; /* Make the input container sticky */
    bottom: 0; /* Stick to the bottom */
    background: var(--background-color); /* Use background color from variables */
    padding: 0.5rem 1rem; /* Add padding */
    border-top: 1px solid var(--secondary-color); /* Add a top border */
    align-items: center; /* Vertically align items in the center */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    z-index: 2; /* Ensure it's above other elements */
}

/* User input field styles */
#user-input {
 flex-grow: 1; /* Allow the input field to grow and fill space */
 padding: 0.5rem; /* Add padding */
 border: 1px solid var(--secondary-color); /* Add a border */
 border-radius: 12px; /* Add rounded corners */
 font-size: 16px; /* Set font size, prevents zoom on mobile Safari */
}

/* Styles for user input when focused */
#user-input:focus {
 outline: none; /* Remove default outline */
 border: 2px solid var(--highlight-color); /* Change border color and thickness */
 box-shadow: none; /* Remove box shadow */
}

/* Styles for send and upload buttons */
.send-button,
.upload-button {
 padding: 0.5rem; /* Add padding */
 background-color: var(--button-primary-color); /* Use primary button color */
 color: white; /* Set text/icon color to white */
 border: none; /* Remove border */
 border-radius: 50%; /* Make buttons round */
 cursor: pointer; /* Show pointer cursor on hover */
 transition: background-color 0.3s; /* Add a smooth transition for background color */
 width: 40px; /* Set button width */
 height: 40px; /* Set button height */
 display: flex; /* Use flexbox for centering icon */
 align-items: center; /* Center icon vertically */
 justify-content: center; /* Center icon horizontally */
}

/* Hover effect for send and upload buttons */
.send-button:hover,
.upload-button:hover {
 background-color: #6DA5A6; /* Slightly darker background on hover */
}

/* Typing indicator styles */
.typing-indicator {
display: flex; /* <-- CAMBIO CLAVE: Usamos flexbox para el alineamiento */
align-items: center; /* <-- CAMBIO CLAVE: Centramos los puntos verticalmente */
background-color: var(--secondary-color);
padding: 0.75rem 1.2rem;

/* --- CORRECCIÓN DE ESTILO --- */
/* Hacemos que la burbuja sea consistente con los mensajes del bot */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 12px;

margin-bottom: 0.5rem;
max-width: 90%;
margin-right: auto;
margin-left: 0.5rem;
width: fit-content;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
min-height: 20px;
/* La propiedad 'line-height' ya no es necesaria gracias a flexbox */
}

/* Styles for the dots in the typing indicator */
.typing-indicator span {
 display: inline-block; /* Display as inline block */
 animation: typingDot 1.4s infinite; /* Apply typing animation */
 margin: 0 2px; /* Add horizontal margin between dots */
 font-size: 14px; /* Set font size */
 line-height: 1; /* Set line height */
 vertical-align: middle; /* Vertically align dots */
}

/* Animation delay for the second dot */
.typing-indicator span:nth-child(2) {
 animation-delay: 0.2s;
}

/* Animation delay for the third dot */
.typing-indicator span:nth-child(3) {
 animation-delay: 0.4s;
}

/* Keyframes for the typing animation */
@keyframes typingDot {
 0%, 60%, 100% {
 transform: translateY(0); /* Default position */
 opacity: 0.6; /* Slightly transparent */
 }
 30% {
 transform: translateY(-4px); /* Move dot up */
 opacity: 1; /* Fully opaque */
 }
}

/* Media Queries for responsive design */

/* Styles for screens smaller than 768px */
@media (max-width: 768px) {
 .chat-container {
 max-width: 100%; /* Allow chat container to take full width */
 }

 .chat-messages {
    height: auto; /* Allow message area height to adjust based on content */
    min-height: 0; /* Remove minimum height restriction */
    padding: 0.5rem 0; /* Adjust padding */
 }

 .message {
 font-size: 14px; /* Adjust font size */
 padding: 0.5rem 0.8rem; /* Adjust padding */
 max-width: 90%; /* Maintain max width */
 }

 .chat-image {
    max-width: 100%; /* Ensure images don't exceed container width on mobile */
 }

 .input-container {
 padding: 0.5rem; /* Adjust padding */
 }

 .send-button,
 .upload-button {
 width: 36px; /* Adjust button size */
 height: 36px; /* Adjust button size */
 }

 #user-input {
 font-size: 16px; /* Maintain font size to prevent mobile zoom */
 }
}

/* Styles for screens between 769px and 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
 .chat-container {
 max-width: 90%; /* Set max width for medium screens */
 }

 .message {
 font-size: 15px; /* Adjust font size */
 padding: 0.75rem 1rem; /* Adjust padding */
 }
}

/* Styles for screens larger than 1025px */
@media (min-width: 1025px) {
 .chat-container {
 max-width: 800px; /* Set max width for large screens */
 }

 .message {
 font-size: 16px; /* Adjust font size */
 padding: 1rem 1.5rem; /* Adjust padding */
 }

 .chat-image {
    max-width: 100%; /* Ensure images don't exceed container width */
 }
}

/* --- INICIO: Estilos para el Menú Desplegable de Usuario --- */

/* Contenedor principal para el menú y su activador */
.user-menu-container {
    position: relative; /* Necesario para posicionar el menú desplegable */
    display: inline-block;
}

/* El área clickeable (nombre + icono) */
.user-menu-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px; /* Añade un poco de espacio para que sea más fácil hacer clic */
    border-radius: 8px; /* Bordes redondeados sutiles */
    transition: background-color 0.2s ease-in-out;
}

/* Efecto hover para dispositivos con ratón */
.user-menu-trigger:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#user-display-name {
    margin-right: 10px;
    font-weight: 500;
    color: var(--text-color);
}

/* Título de la obra actual en la cabecera */
.artwork-title-display {
    display: none; /* Oculto hasta que haya título */
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.7;
    margin-right: 4px;
    cursor: default;
}
.artwork-title-display.visible {
    display: inline;
}
.artwork-title-display.visible::after {
    content: ' · ';
    opacity: 0.5;
}
.artwork-title-display.artwork-title-fade {
    animation: artworkTitleFadeIn 0.4s ease-out;
}
@keyframes artworkTitleFadeIn {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 0.7; transform: translateY(0); }
}
@media (min-width: 576px) {
    .artwork-title-display {
        max-width: 280px;
    }
}

/* El menú desplegable en sí */
.user-dropdown-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%; /* Justo debajo del activador */
    right: 0;
    background-color: var(--secondary-color);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: 8px;
    overflow: hidden; /* Para que los bordes redondeados se apliquen a los items */
    opacity: 0; /* Para la animación de aparición */
    transform: translateY(10px); /* Para la animación de deslizamiento */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Estilo para los ítems dentro del menú */
.user-dropdown-menu a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9em;
}

/* Efecto hover para los ítems del menú */
.user-dropdown-menu a:hover {
    background-color: #f1f1f1;
}

/* Clase para mostrar el menú (se añade/quita con JS) */
.user-dropdown-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.chat-messages > .message-wrapper:first-child {
    margin-top: auto;
}


/* --- FIN: Estilos para el Menú Desplegable de Usuario --- */

/* ========================================================================
   QR SCANNER MODAL STYLES
   ======================================================================== */

.qr-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.qr-modal-content {
    background-color: var(--secondary-color);
    border-radius: 12px;
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.qr-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.qr-modal-header h3 {
    margin: 0;
    color: var(--text-color);
    font-size: 1.5em;
}

.qr-close-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    color: var(--text-color);
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s;
}

.qr-close-btn:hover {
    color: var(--highlight-color);
}

.qr-modal-footer {
    text-align: center;
    margin-top: 15px;
}

.qr-instruction {
    color: var(--text-color);
    font-size: 0.95em;
    margin: 0;
}

/* Estilos para el lector QR interno */
#qr-reader {
    border-radius: 8px;
    overflow: hidden;
}

#qr-reader__dashboard_section_csr {
    text-align: center !important;
}

/* Ajustes móviles */
@media (max-width: 600px) {
    .qr-modal-content {
        max-width: 95%;
        padding: 15px;
    }
    
    .qr-modal-header h3 {
        font-size: 1.2em;
    }
}