/* --- Variables CSS --- */
:root {
          --azul-primario: #0056b3;         /* Azul para elementos interactivos principales */
          --azul-primario-hover: #00428a;   /* Un tono más oscuro para hover */
          --azul-cabecera: #007bff;         /* Azul para la cabecera */
          --gris-fondo-cuerpo: #f8f9fa;     /* Gris muy claro para el fondo general */
          --blanco-fondo-elementos: #ffffff; /* Blanco para 'tarjetas' o secciones principales */
          --celeste-respuesta-fondo: #e0f7fa; /* Tu color original para fondo de respuesta */
          --celeste-ayuda-fondo: #f0f8ff;   /* Tu color original para fondo de ayuda */
          --texto-principal: #212529;       /* Gris oscuro para texto general */
          --texto-secundario: #495057;      /* Un gris un poco más claro */
          --texto-claro: #ffffff;           /* Blanco para texto sobre fondos oscuros */
          --borde-elementos: #dee2e6;       /* Gris claro para bordes */
          --radio-borde: 6px;                 /* Radio de borde para consistencia */
          --sombra-suave: 0 2px 5px rgba(0, 0, 0, 0.075); /* Sombra discreta */
          --font-principal: 'Open Sans', Arial, sans-serif; /* Fuente sugerida, fallback a Arial */
        }
        
        /* --- Estilos Base --- */
        body {
          font-family: var(--font-principal);
          margin: 0;
          padding: 0;
          background-color: var(--gris-fondo-cuerpo);
          color: var(--texto-principal);
          line-height: 1.5; /* Mejora la legibilidad */
        }
        
        /* --- Cabecera --- */
        header {
          background-color: var(--azul-cabecera);
          color: var(--texto-claro);
          padding: 12px 20px; /* Ligero ajuste de padding */
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra para la cabecera */
        }
        
        header img { /* Estilo para tu logo en la cabecera */
          max-height: 40px; /* Ajusta según el tamaño de tu logo */
          width: auto;      /* Mantiene la proporción */
        }
        
        nav {
          display: flex;
          gap: 8px; /* Espacio entre botones de navegación */
          flex-wrap: wrap;
        }
        
        /* Botones de Navegación en Cabecera */
        nav button {
          margin-right: 6px;
          font-size: 16px;
          vertical-align: middle;


          background: rgba(255, 255, 255, 0.1); /* Tu estilo original, funciona bien */
          border: 1px solid rgba(255, 255, 255, 0.25); /* Borde ligeramente más visible */
          color: var(--texto-claro);
          font-size: 14px; /* Un poco más grande */
          padding: 8px 12px; /* Más padding */
          border-radius: var(--radio-borde);
          cursor: pointer;
          white-space: nowrap;
          transition: background-color 0.2s ease, border-color 0.2s ease;
        }
        
        nav button:hover {
          background: rgba(255, 255, 255, 0.2);
          border-color: rgba(255, 255, 255, 0.5);
        }
        
        /* --- Contenido Principal --- */
        main {
          padding: 25px;
          max-width: 650px; /* Un ancho máximo para mejor lectura en pantallas grandes */
          margin: 25px auto; /* Centrar y dar espacio arriba/abajo */
          background-color: var(--blanco-fondo-elementos);
          border-radius: var(--radio-borde);
          box-shadow: var(--sombra-suave);
        }
        
        /* Inputs y Botones Generales (dentro de main) */
        input[type="text"],
        input[type="password"],
        /* Selector general para botones que no son de nav ni de modal específico */
        main > button, main > .botones-dobles > button {
          width: 100%; /* Ocupar todo el ancho del contenedor padre */
          padding: 12px 15px; /* Padding más generoso */
          margin: 8px 0 12px 0; /* Margen (más abajo para separar del siguiente elemento) */
          font-size: 16px;
          border-radius: var(--radio-borde);
          box-sizing: border-box; /* Importante para que el padding no desborde el width */
        }
        
        input[type="text"],
        input[type="password"] {
          border: 1px solid var(--borde-elementos);
          background-color: var(--blanco-fondo-elementos); /* Asegurar fondo blanco */
          color: var(--texto-principal);
          transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        
        input[type="text"]:focus,
        input[type="password"]:focus {
          border-color: var(--azul-primario);
          box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2); /* Sombra de foco azul */
          outline: none;
        }
        
        /* --- Estilos Específicos para Botones en .botones-dobles --- */
        .botones-dobles {
          display: flex;
          gap: 15px; /* Espacio entre los dos botones */
        }
        
        .botones-dobles button {
          flex: 1; /* Para que ambos botones ocupen el mismo espacio */
          font-weight: bold;
          transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
        }
        
        /* Botón Primario (Enviar Consulta) */
        .botones-dobles button:last-child { /* Asumiendo que Enviar es el último */
          background-color: var(--azul-cabecera); 
          color: var(--texto-claro);
          border: 1px solid var(--azul-primario);
        }
        
        .botones-dobles button:last-child:hover {
          background-color: var(--azul-primario-hover);
          border-color: var(--azul-primario-hover);
          transform: translateY(-1px); /* Ligero efecto al pasar el mouse */
        }
        
        /* Botón Secundario (Nueva Consulta - Estilo Outline) */
        .botones-dobles button:first-child { /* Asumiendo que Nueva Consulta es el primero */
          background-color: var(--blanco-fondo-elementos);
          color: var(--azul-primario);
          border: 2px solid var(--azul-primario); /* Borde más pronunciado para outline */
        }
        
        .botones-dobles button:first-child:hover {
          background-color: rgba(0, 86, 179, 0.05); /* Fondo azul muy sutil */
          color: var(--azul-primario-hover);
          border-color: var(--azul-primario-hover);
        }
        
        /* --- Área de Respuesta y Ayuda --- */
        #respuesta {
          margin-top: 20px;
          padding: 15px;
          background-color: var(--celeste-respuesta-fondo); /* Tu color original */
          border-radius: var(--radio-borde);
          white-space: pre-wrap;
          word-wrap: break-word;
          border: 1px solid #b8e0e8; /* Un borde que combine con el fondo */
          color: var(--texto-secundario);
        }
        
        #mensajeToken {
          color: #721c24; /* Rojo oscuro para texto de error */
          background-color: #f8d7da; /* Fondo rosa claro para error */
          border: 1px solid #f5c6cb; /* Borde rosa para error */
          padding: 10px;
          margin-top: 10px; /* Espacio antes del mensaje */
          border-radius: var(--radio-borde);
          display: none; /* Mantenido de tu original */
        }
        
        #ayuda {
          font-family: Arial, sans-serif;
          line-height: 1.6;
          margin-top: 20px;
          background-color: var(--celeste-fondo); /* Tu color original */
          padding: 15px;
          border-radius: var(--radio-borde);
          font-size: 14px;
          color: var(--texto-secundario);
          border: 1px solid #cce7f5; /* Un borde que combine con el fondo */
        }
        #ayuda strong { /* Para el título "Comandos disponibles" */
          color: var(--azul-primario);
        }

        #ayuda i {
          font-size: 16px; /* Tamaño adecuado para los iconos */
          margin-right: 8px; /* Separación entre icono y texto */
          vertical-align: middle; /* Alineación de los iconos con el texto */
        }
        
        /* --- CÓDIGOS CLICKEABLES - MANTENIENDO TU ESTILO ORIGINAL FUNCIONAL --- */
        .clickable-code {
            cursor: pointer;
            color: var(--azul-primario); /* Usamos la variable para el azul primario */
            text-decoration: underline;
            font-weight: bold;
        }
        .clickable-code:hover {
            color: var(--azul-primario-hover); /* Usamos la variable para el azul más oscuro en hover */
        }
        /* --- FIN CÓDIGOS CLICKEABLES --- */
        
        
        /* --- Modal "Acerca de" --- */
        #acercaModal {
          display: none;
          position: fixed; /* Mejor para superposiciones */
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); /* Centrado perfecto */
          width: 90%;
          max-width: 450px; /* Ancho máximo */
          background: var(--blanco-fondo-elementos);
          border: 1px solid var(--borde-elementos);
          padding: 20px 25px; /* Más padding */
          z-index: 1050;
          box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Sombra más pronunciada para modales */
          border-radius: var(--radio-borde);
        }
        #acercaModal strong {
            color: var(--azul-primario);
            font-size: 1.1em;
            display: block;
            margin-bottom: 10px;
        }

          /* Nueva clase para el copyright */
         #acercaModal .copyright {
             font-size: 0.8em; /* Tamaño más pequeño para el copyright */
             color: rgba(0, 0, 0, 0.6); /* Color gris claro */
             margin-top: 15px; /* Un poco de espacio arriba */
             display: block;
        }

        /* Botones dentro del Modal Acerca de */
        #acercaModal button {
            width: calc(50% - 5px); /* Dos botones por línea, ajustando por el gap */
            margin: 5px 0; /* Espacio vertical */
            padding: 10px;
            font-size: 14px;
            font-weight: normal; /* Pueden ser menos pesados que los principales */
            background-color: #6c757d; /* Gris para botones de modal por defecto */
            color: var(--texto-claro);
            border: 1px solid #6c757d;
            border-radius: var(--radio-borde);
        }
        #acercaModal button:hover {
            background-color: #5a6268;
            border-color: #545b62;
        }
        /* Específicamente el botón de cerrar si es el último */
        #acercaModal button:last-child {
            background-color: var(--azul-primario); /* Cerrar con el color primario */
            border-color: var(--azul-primario);
        }
        #acercaModal button:last-child:hover {
            background-color: var(--azul-primario-hover);
            border-color: var(--azul-primario-hover);
        }
        
        
        /* --- Pantalla de Carga y Spinner --- */
        #pantallaCarga {
          position: fixed;
          top: 0; left: 0; right: 0; bottom: 0;
          background-color: var(--blanco-fondo-elementos); /* Fondo blanco */
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          z-index: 9999;
        }
        #pantallaCarga img {
          max-width: 100px;
          margin-bottom: 15px; /* Más espacio */
        }
        #pantallaCarga p {
          font-size: 1.1em;
          color: var(--texto-secundario);
        }
        
        .loader {
          border: 5px solid #e9ecef; /* Gris claro para la base del spinner */
          border-top: 5px solid var(--azul-primario); /* Azul primario para la animación */
          border-radius: 50%;
          width: 36px;
          height: 36px;
          animation: spin 1s linear infinite;
          margin: 0 auto;
        }
        #spinner p { /* Texto debajo del spinner */
            color: var(--texto-secundario);
            margin-top: 10px;
        }
        
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        
        /* --- Contenedor Flotante para Imagen Grande --- */
        #imagenFlotante {
          display: none;
          position: fixed;
          top: 0; left: 0;
          width: 100%; height: 100%;
          background: rgba(0,0,0,0.75); /* Fondo oscuro semi-transparente más opaco */
          z-index: 1060; /* Por encima del modal de "Acerca de" */
          justify-content: center;
          align-items: center;
          padding: 15px; /* Espacio alrededor por si la imagen es grande */
          box-sizing: border-box;
        }
        
        #imagenFlotante div { /* Contenedor de la imagen */
          position: relative;
          max-width: 95%;
          max-height: 95%;
          background: var(--blanco-fondo-elementos);
          padding: 5px; /* Un pequeño borde blanco alrededor de la imagen */
          border-radius: var(--radio-borde);
          box-shadow: 0 0 20px rgba(0,0,0,0.3);
        }
        
        #imgGrande {
          display: block;
          max-width: 100%;
          max-height: calc(95vh - 30px); /* Ajusta la altura máxima de la imagen */
          height: auto; /* Mantiene la proporción */
          border-radius: calc(var(--radio-borde) - 2px); /* Radio de borde interno */
        }
        
        /* Botón de cerrar imagen flotante */
        #imagenFlotante button {
          position: absolute;
          top: -15px; /* Ligeramente fuera del contenedor de la imagen */
          right: -15px;
          background: #dc3545; /* Rojo para el botón de cerrar */
          color: var(--texto-claro);
          border: 2px solid var(--texto-claro); /* Borde blanco para destacar */
          border-radius: 50%; /* Redondo */
          width: 32px;
          height: 32px;
          font-size: 16px;
          line-height: 1; /* Ajustar para centrar la X */
          padding: 0;
          font-weight: bold;
          cursor: pointer;
          box-shadow: var(--sombra-suave);
          display: flex; /* Para centrar la X fácilmente */
          align-items: center;
          justify-content: center;
        }
        #imagenFlotante button:hover {
            background-color: #c82333; /* Rojo más oscuro al pasar el mouse */
            transform: scale(1.1); /* Efecto de zoom ligero */
        }