/* =========================================================
   1. CORRECCIÓN DEFINITIVA DEL MENÚ SUPERIOR
   ========================================================= */

/* Eliminar líneas grises y bordes residuales del contenedor superior */
#header, ul#nav, #content {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

ul#nav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 15px;
    background: transparent !important;
    padding: 0 !important;
    margin: 20px 0 30px 0 !important;
    list-style: none !important;
}

ul#nav li {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Forzar el diseño de botón y eliminar la imagen de fondo antigua */
ul#nav li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #4B5563 !important;
    background: #F3F4F6 !important; /* background sólido para sobreescribir imágenes */
    background-image: none !important; /* Obligatorio para matar el degradado viejo */
    padding: 10px 24px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
}

/* Efecto Hover del menú */
ul#nav li a:hover {
    background: #0056b3 !important;
    color: #ffffff !important;
    border-color: #0056b3 !important;
    transform: translateY(-2px);
}

/* Botón Activo (Página actual) */
ul#nav li a.active {
    background: #0F172A !important;
    color: #ffffff !important;
    border-color: #0F172A !important;
}

/* =========================================================
   2. REPARACIÓN DE LA PÁGINA DE INICIO (Layout Limpio)
   ========================================================= */

#content hr {
    display: none !important;
}

/* Ocultar completamente los botones laterales redundantes y deformados */
.front-page-button,
#landing_page .front-page-button {
    display: none !important;
}

/* Asegurar que el texto de bienvenida tenga buen espaciado y ocupe el 100% */
#landing_page {
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
}

/* Ocultar posibles contenedores flotantes que osTicket genera para esos botones */
#landing_page > div[style*="float"] {
    display: none !important;
}
/* =========================================================
   3. MODERNIZACIÓN DEL FORMULARIO Y BOTONES (Unificado)
   ========================================================= */

/* Limpiar y modernizar la estructura de tablas nativa */
#ticketForm table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}

#ticketForm table td {
    padding: 8px 10px 8px 0 !important;
    vertical-align: middle !important;
    font-family: 'Inter', sans-serif !important;
    color: #374151 !important;
}

/* Títulos de sección dentro del formulario (ej. "Detalles del Ticket") */
#ticketForm h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    color: #111827 !important;
    border-bottom: 2px solid #E5E7EB !important;
    padding-bottom: 10px !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
}

/* Estilizar los campos de entrada: Inputs, Selects y Textareas */
#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm select,
#ticketForm textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #1F2937 !important;
    background-color: #F9FAFB !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* Efecto Focus (cuando el cliente hace clic para escribir) */
#ticketForm input[type="text"]:focus,
#ticketForm input[type="email"]:focus,
#ticketForm select:focus,
#ticketForm textarea:focus {
    border-color: #0056b3 !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
}

/* Contenedor de los botones de acción */
#ticketForm p,
#ticketForm > p {
    display: flex !important;
    gap: 15px !important;
    margin-top: 30px !important;
    justify-content: center !important;
}

/* Forzar la apariencia del botón principal "Crear Ticket" / "Submit" */
input[type="submit"], 
.button, 
input.button,
#ticketForm input[type="submit"] {
    background: #0056b3 !important; 
    background-color: #0056b3 !important; 
    color: #ffffff !important;
    padding: 12px 28px !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px -1px rgba(0, 86, 179, 0.2) !important;
    background-image: none !important; /* Elimina gradientes grises de osTicket */
}

/* Hover del botón principal */
input[type="submit"]:hover, 
.button:hover, 
input.button:hover,
#ticketForm input[type="submit"]:hover {
    background: #004494 !important;
    background-color: #004494 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px -2px rgba(0, 86, 179, 0.3) !important;
}

/* Forzar el estilo del botón secundario "Restablecer" / "Reset" */
input[type="reset"],
input[type="button"],
#ticketForm input[type="reset"],
#ticketForm input[type="button"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #4B5563 !important;
    padding: 12px 28px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background-image: none !important;
}

/* Hover del botón secundario */
input[type="reset"]:hover,
input[type="button"]:hover,
#ticketForm input[type="reset"]:hover,
#ticketForm input[type="button"]:hover {
    background: #F3F4F6 !important;
    background-color: #F3F4F6 !important;
    color: #111827 !important;
    border-color: #9CA3AF !important;
}
/* =========================================================
   4. CORRECCIÓN AGRESIVA PARA TELÉFONOS Y CAMPOS CORTOS
   ========================================================= */

/* Atrapar TODOS los inputs de texto dentro del formulario que no hayan sido estilizados */
#ticketForm input[type="text"],
#ticketForm input[type="tel"], /* Por si usa input type="tel" */
#ticketForm td > input {
    padding: 12px 16px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important; /* Bordes suaves modernos obligatorios */
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #1F2937 !important;
    background-color: #F9FAFB !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    height: 44px !important; /* Forzar altura */
}

/* Forzar Focus a todos los inputs */
#ticketForm input[type="text"]:focus,
#ticketForm input[type="tel"]:focus,
#ticketForm td > input:focus {
    border-color: #0056b3 !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
}

/* Arreglar específicamente el comportamiento de campos en línea (como Teléfono + Extensión) */
#ticketForm td {
    /* Si hay múltiples inputs en una misma celda (como el teléfono y la ext), forzamos flexbox */
}

/* Hacer que los inputs que están pegados compartan el espacio sin romperse */
#ticketForm td input[size="20"],
#ticketForm td input[size="16"] {
    width: 60% !important; /* El teléfono principal */
    display: inline-block !important;
    margin-right: 5px !important;
}

#ticketForm td input[size="5"],
#ticketForm td input[size="4"] {
    width: 30% !important; /* La extensión */
    display: inline-block !important;
}
/* =========================================================
   5. EXPANSIÓN DEL ESPACIO ÚTIL (Ancho de la Plataforma)
   ========================================================= */

/* Expandir el contenedor global de la plataforma */
#container {
    width: 90% !important;        /* Ocupa el 90% del ancho de la pantalla */
    max-width: 1200px !important; /* Límite máximo para que no se desborde en monitores muy grandes */
    min-width: 320px !important;  /* Para que no se rompa en celulares */
    margin: 0 auto !important;    /* Centra el contenedor en la pantalla */
    padding: 20px !important;
}

/* Asegurar que la cabecera (Logo y Menú de Idiomas) respete el nuevo ancho */
#header {
    width: 100% !important;
    padding: 10px 0 !important;
    margin-bottom: 20px !important;
}

/* Expandir el área de contenido principal (Donde están los formularios y tarjetas) */
#content {
    width: 100% !important;
    padding: 30px !important;
    background-color: #ffffff !important; /* Fondo blanco limpio para el área útil */
    border-radius: 12px !important;       /* Bordes redondeados modernos para el bloque principal */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; /* Sombra suave para separarlo del fondo */
    box-sizing: border-box !important;
}

/* Ajuste específico para que las tablas del formulario aprovechen el nuevo espacio */
#ticketForm {
    width: 100% !important;
    max-width: 900px !important; /* Limitamos el formulario a 900px para que las líneas de texto no sean demasiado largas de leer */
    margin: 0 auto !important;   /* Centra el formulario dentro del contenedor expandido */
}

/* Eliminar el fondo por defecto del body para que el contenedor blanco resalte */
body {
    background-color: #F3F4F6 !important; /* Fondo general gris muy claro */
}
/* =========================================================
   OPCIÓN 1: FONDO CON GRADIENTE SUAVE
   ========================================================= */
body {
    /* Gradiente que va de un gris muy claro a un tono sutil del azul corporativo */
    background: linear-gradient(155deg, #F3F4F6 0%, #e0e7ff 100%) !important;
    background-attachment: fixed !important; /* Evita que el fondo se mueva al hacer scroll */
    margin: 0 !important;
}
/* =========================================================
   6. MODERNIZACIÓN DE ALERTAS Y MENSAJES (Éxito, Error)
   ========================================================= */

/* Estructura base para todos los mensajes (Éxito, Error, Advertencia) */
#msg_notice, 
#msg_warning, 
#msg_error {
    padding: 16px 20px !important;
    border-radius: 8px !important; /* Adiós a las esquinas cuadradas */
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 25px !important;
    border: none !important; /* Quitamos el borde perimetral rígido */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    background-image: none !important; /* Evitamos iconos o fondos viejos */
}

/* Estilo específico para el mensaje de Éxito (El verde que ves en la imagen) */
#msg_notice {
    background-color: #ecfdf5 !important; /* Fondo verde muy suave y moderno */
    color: #065f46 !important; /* Texto en verde oscuro para contraste */
    border-left: 5px solid #10b981 !important; /* Detalle de color sólido solo a la izquierda */
}

/* Estilo para Errores (Rojo) - Para cuando el usuario se equivoca al llenar el ticket */
#msg_error {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border-left: 5px solid #ef4444 !important;
}

/* Estilo para Advertencias (Amarillo/Naranja) */
#msg_warning {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border-left: 5px solid #f59e0b !important;
}

/* =========================================================
   7. MODERNIZACIÓN DE LA PANTALLA DE CARGA (Loading / Espere...)
   ========================================================= */

/* Contenedor central de la animación de espera */
#loading, 
.dialog {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important; /* Bordes redondeados suaves */
    padding: 25px 40px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; /* Sombra profunda para destacar */
    font-family: 'Inter', sans-serif !important;
    color: #1F2937 !important;
    font-weight: 500 !important;
}

/* Oscurecer y suavizar el fondo bloqueado mientras carga */
#overlay {
    background-color: rgba(15, 23, 42, 0.6) !important; /* Tono azul/gris oscuro con transparencia */
/* 6. Liberar el texto atrapado en la página de bienvenida */
    #landing_page,
    #content > div {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    #landing_page * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #landing_page div, 
    #landing_page p,
    #landing_page ul,
    #landing_page li,
    #landing_page span,
    #landing_page table, 
    #landing_page td {
        width: 100% !important;
        min-width: 100% !important;
        float: none !important;
        display: block !important;
        clear: both !important;
        word-wrap: break-word !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* =========================================================
   8. RESPONSIVIDAD (Corrección Definitiva Móvil)
   ========================================================= */

@media screen and (max-width: 768px) {
    /* 1. Arreglar el contenedor global */
    #container, #content {
        width: 100% !important;
        min-width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* 2. SOLUCIÓN AL MENÚ MONTADO (Overlap) */
    ul#nav {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important; /* ¡Crucial! Evita que los botones se salgan del menú */
        min-height: auto !important;
        margin-bottom: 40px !important; /* Empuja el texto hacia abajo */
        padding: 0 !important;
        gap: 10px !important;
    }

    ul#nav li {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }

    /* --- REEMPLAZA ESTO EN TU BLOQUE MÓVIL --- */
    ul#nav li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Centra el texto perfectamente */
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 15px !important;
        line-height: normal !important; /* Evita que el texto se hunda al fondo */
        height: auto !important;
        min-height: 48px !important; /* Altura ideal recomendada para pantallas táctiles */
    }

    /* --- AGREGA ESTO PARA ELIMINAR EL RECTÁNGULO FANTASMA --- */
    #landing_page .search-form,
    #landing_page .search-well,
    #content .search-well,
    #landing_page > div[style*="border"],
    #landing_page > div:first-child:empty {
        display: none !important;
        border: none !important;
    }

    /* 3. SOLUCIÓN AL TEXTO APLASTADO (Liberar las columnas) */
    #landing_page {
        display: block !important;
        width: 100% !important;
        clear: both !important;
    }

    /* Forzamos a cualquier contenedor de texto (div, p, span, tablas) a usar todo el ancho */
    #landing_page div,
    #landing_page p,
    #landing_page table,
    #landing_page tbody,
    #landing_page tr,
    #landing_page td {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        float: none !important; /* Quita alineaciones a la izquierda/derecha */
        display: block !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        white-space: normal !important;
    }

    /* 4. Cabecera alineada y centrada */
    #header {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: center !important;
        text-align: center !important;
        height: auto !important;
    }
    
    #header .pull-right {
        float: none !important;
        margin-bottom: 15px !important;
    }
    
    #header img {
        max-width: 100% !important;
        height: auto !important;
    }
}
/* =========================================================
   9. CORRECCIÓN DEFINITIVA PARA SMARTPHONES
   ========================================================= */

@media screen and (max-width: 600px) {
    /* Atacar directamente los estilos en línea ocultos del editor de osTicket */
    #landing_page,
    #landing_page *[style],
    #content *[style],
    .front-page *[style] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        float: none !important;
        display: block !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Asegurar que el contenedor padre no intente hacer flexbox en filas */
    #content {
        display: block !important;
        padding: 10px !important;
    }

    #landing_page {
        display: block !important;
    }
	/* 5. Eliminar contenedores vacíos o líneas residuales arriba del título */
    #landing_page > div:empty,
    #landing_page hr,
    #content > hr {
        display: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
/* =========================================================
   10. ELIMINACIÓN EXTREMA DEL RECTÁNGULO DE BÚSQUEDA
   ========================================================= */

/* Buscar y destruir las clases nativas de búsqueda de osTicket */
.search-well,
.search-form,
#front-page-search,
form[action="faq.php"],
form[action="kb/faq.php"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important; /* Lo saca del flujo de la pantalla para que no ocupe espacio */
}

/* Quitar bordes residuales a cualquier contenedor dentro de la página de inicio */
#landing_page > div {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Ocultar inputs de texto huérfanos en la bienvenida */
#landing_page input,
#landing_page button {
    display: none !important;
}
/* =========================================================
   11. AJUSTES EXTREMOS PARA PANTALLAS PEQUEÑAS (iPhone SE)
   ========================================================= */

/* 1. Bloquear el desbordamiento horizontal en toda la página */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important; 
    margin: 0 !important;
    padding: 0 !important;
}

#container, #content {
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* 2. Reglas específicas para pantallas de menos de 480px (iPhone SE, etc.) */
@media screen and (max-width: 480px) {
    /* Reducir el texto de sesión para que quepa y obligarlo a centrarse */
    #header .pull-right {
        font-size: 13px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* Acomodar las banderas debajo del texto si no caben */
    #header .pull-right img,
    #header .pull-right a {
        display: inline-block !important;
        margin-top: 5px !important;
    }

    /* Reducir el padding general para aprovechar el espacio en pantallas pequeñas */
    #container {
        padding: 10px 5px !important; 
    }
}

/* =========================================================
   12. ANIQUILACIÓN DEL RECUADRO FANTASMA
   ========================================================= */

/* Le quitamos el borde y el fondo a TODO div directo dentro de la bienvenida.
   Como tu texto no necesita bordes, esto matará al recuadro celeste sin afectar el texto. */
#landing_page > div {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* Si el div está vacío o solo tiene un espacio ( ) lo colapsamos a 0 */
#landing_page > div:empty,
#landing_page > div:not(:has(*)) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* =========================================================
   13. CORRECCIÓN ABSOLUTA DE DESBORDAMIENTO (iPhone / Android)
   ========================================================= */

@media screen and (max-width: 768px) {
    /* 1. Forzar a la cabecera a ser una columna centrada estricta */
    #header {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 10px !important;
    }

    /* 2. Liberar el texto de sesión para que pueda bajar a una segunda línea */
    #header .pull-right,
    #header p {
        position: static !important;
        float: none !important;
        text-align: center !important;
        width: 100% !important;
        margin: 15px 0 5px 0 !important;
        padding: 0 !important;
        white-space: normal !important; /* Rompe la prohibición de saltar de línea */
        line-height: 1.6 !important;
        box-sizing: border-box !important;
    }

    /* 3. Acomodar las banderas suavemente */
    #header .pull-right img {
        display: inline-block !important;
        margin: 5px 3px 0 3px !important;
    }
}

/* =========================================================
   14. DESTRUCCIÓN VISUAL DEL RECUADRO FANTASMA
   ========================================================= */

/* Ocultar cualquier formulario residual de la base de conocimientos */
#landing_page .search-well,
#landing_page form,
#front-page-search,
#landing_page form[action*="faq"] {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Quitarle los bordes a cualquier caja divisoria (<div>) en la zona de bienvenida */
#landing_page > div {
    border: none !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* =========================================================
   15. OPTIMIZACIÓN DE LECTURA Y SIMETRÍA PARA ESCRITORIO (PC)
   ========================================================= */

/* Solo se aplica en pantallas más grandes que una tablet */
@media screen and (min-width: 769px) {
    
    /* 1. Centrar el menú de botones principales */
    ul#nav {
        display: flex !important;
        justify-content: center !important; /* Centra los botones horizontalmente */
        align-items: center !important;
        gap: 15px !important; /* Espacio limpio entre cada botón */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto 30px auto !important; /* Margen inferior para separarlo del texto */
    }

    ul#nav li {
        float: none !important; /* Evita que osTicket los tire hacia la izquierda */
        margin: 0 !important;
    }

    /* 2. Centrar y limitar el ancho del texto de bienvenida */
    #landing_page {
        max-width: 850px !important; 
        margin: 0 auto !important;   
        padding-top: 10px !important;
    }
    
    /* Mejorar la legibilidad de la fuente en monitores grandes */
    #landing_page p, 
    #landing_page ul {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
}
/* =========================================================
   16. ESTILOS PARA LA PÁGINA "VER ESTADO DE UN TICKET"
   ========================================================= */

/* 1. Limitar el ancho y centrar toda la sección para mantener simetría */
#content {
    max-width: 850px !important;
    margin: 0 auto !important;
}

/* 2. Modernizar la caja gris que envuelve el formulario */
form#clientLogin {
    margin: 20px 0 !important;
}

form#clientLogin > div, 
form#clientLogin table,
form#clientLogin tbody,
form#clientLogin tr {
    display: flex !important;
    flex-wrap: wrap !important; /* Permite que las columnas se apilen en móviles */
    background: #f9fafb !important; /* Gris muy suave y moderno */
    border: 1px solid #e5e7eb !important; /* Borde sutil */
    border-radius: 8px !important;
    padding: 15px !important;
    gap: 20px !important; /* Espacio entre las dos columnas */
    box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Ajustar las columnas internas para que crezcan y se encojan de forma inteligente */
form#clientLogin > div > div,
form#clientLogin td {
    display: block !important;
    flex: 1 1 300px !important; /* Mínimo 300px, si hay menos espacio (celular), se apilan */
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}

/* 4. Estilizar los campos de texto (Email y Número de Ticket) */
form#clientLogin input[type="text"] {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    font-family: inherit !important;
}

/* 5. Modernizar el botón azul para que coincida con el menú oscuro de navegación */
form#clientLogin input[type="submit"],
form#clientLogin .btn {
    background-color: #0f172a !important; /* Azul oscuro corporativo */
    color: #ffffff !important;
    padding: 12px 20px !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    width: 100% !important; /* Botón de ancho completo */
    transition: background-color 0.3s ease !important;
}

form#clientLogin input[type="submit"]:hover,
form#clientLogin .btn:hover {
    background-color: #1e293b !important; /* Un poco más claro al pasar el mouse */
}

/* 6. Ocultar el candado antiguo de osTicket */
form#clientLogin img[src*="lock"],
form#clientLogin i.icon-lock {
    display: none !important;
}
/* =========================================================
   17. REPARACIÓN EXTREMA DEL FORMULARIO Y EDITOR EN MÓVILES
   ========================================================= */

@media screen and (max-width: 768px) {
    /* 1. Destruir la jaula: Convertir la tabla en bloques apilables */
    #ticketForm table,
    #ticketForm tbody,
    #ticketForm tr,
    #ticketForm td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        clear: both !important;
    }

    /* 2. Quitar los márgenes internos de las celdas que aplastan el contenido */
    #ticketForm td {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 15px !important;
        text-align: left !important;
    }

    /* 3. El golpe de gracia: Forzar anchos mínimos y máximos a todos los campos */
    #ticketForm input[type="text"],
    #ticketForm select,
    #ticketForm textarea,
    .redactor-box,
    .redactor-editor,
    .filedrop,
    .dp {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important; /* Obliga a ignorar a su contenedor padre */
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 4. Arreglar la barra de herramientas para que los iconos no se aplasten */
    ul.redactor-toolbar {
        display: flex !important;
        flex-wrap: wrap !important; 
        width: 100% !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    
    ul.redactor-toolbar li {
        flex: 0 0 auto !important;
        display: inline-block !important;
    }
    
    /* 5. Alinear la imagen del CAPTCHA */
    img[alt*="captcha"],
    img[src*="captcha"] {
        display: block !important;
        margin-bottom: 10px !important;
        max-width: 100% !important;
    }
}