/* =========================================================
   osTicket - Estilo Facultad de Ingeniería
   Layout tipo sitio institucional UCR
   ========================================================= */

/* Paleta */
:root {
    --color-header: #005da4;
    --color-menu: #0c344e;
    --color-menu-hover: #14506f;
    --color-fondo: #f4f6f8;
    --color-card: #ffffff;
    --color-footer: #323232;
    --color-texto: #1f2937;
    --color-blanco: #ffffff;
    --ancho-contenido: 1120px;
}

/* =========================================================
   Base general
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    background: var(--color-fondo) !important;
    color: var(--color-texto);
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px;
}

/* osTicket trae un contenedor fijo. Lo liberamos. */
#container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--color-fondo) !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================
   Header institucional
   ========================================================= */

#header {
    width: 100% !important;
    max-width: none !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 0 calc((100% - var(--ancho-contenido)) / 2) !important;
    background: var(--color-header) !important;
    background-image: none !important;
    border: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

/* Oculta "Usuario Invitado | Inicia Sesión" */
#header .pull-right.flush-right {
    display: none !important;
}

/* Logo */
#logo {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    height: 92px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

#logo img {
    max-height: 58px !important;
    width: auto !important;
    display: block !important;
}

/* Título en el header */
#header-title {
    float: none !important;
    margin-left: 34px !important;
    color: var(--color-blanco) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    text-shadow: none !important;
}

/* Quitar clear innecesario que puede empujar cosas */
#header + .clear {
    display: none !important;
}

/* =========================================================
   Menú principal
   ========================================================= */

#nav {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 calc((100% - var(--ancho-contenido)) / 2) !important;
    background: var(--color-menu) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* osTicket usa ul#nav directamente */
ul#nav,
#nav ul {
    background: var(--color-menu) !important;
    background-image: none !important;
    border: none !important;
}

/* Elementos del menú */
#nav li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#nav li a {
    display: inline-block !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 18px !important;
    color: var(--color-blanco) !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

#nav li a:hover,
#nav li a.active {
    background: var(--color-menu-hover) !important;
    background-image: none !important;
    color: var(--color-blanco) !important;
}

/* Íconos del menú */
#nav li a img {
    vertical-align: middle !important;
    margin-right: 5px !important;
}

/* =========================================================
   Área principal
   ========================================================= */

#content {
    width: 100% !important;
    max-width: var(--ancho-contenido) !important;
    min-height: 470px !important;
    margin: 24px auto !important;
    padding: 36px 40px !important;
    background: var(--color-card) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}

/* Página inicial */
#landing_page {
    width: 100% !important;
}

/* Contenido textual */
#content h1,
#content h2 {
    color: #111827 !important;
    margin-top: 0 !important;
}

#content p {
    color: #374151 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

/* Si la página tiene división principal/lateral */
#content .main-content {
    max-width: 680px;
}

/* =========================================================
   Botones
   ========================================================= */

#landing_page .sidebar {
    width: 250px !important;
}

#landing_page .sidebar .button {
    display: block !important;
    width: 100% !important;
    max-width: 230px !important;
    padding: 12px 18px !important;
    margin-bottom: 14px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* Crear solicitud */
#landing_page .sidebar .blue.button {
    background: #005da4 !important;
    color: #ffffff !important;
}

/* Consultar solicitud */
#landing_page .sidebar .green.button {
    background: #005da4 !important;
    color: #ffffff !important;
}

/* Hover */
#landing_page .sidebar .blue.button:hover {
    background: #004b84 !important;
    color: #ffffff !important;
}

#landing_page .sidebar .green.button:hover {
    background: #004b84 !important;
    color: #ffffff !important;
}

/* =========================================================
   Footer
   ========================================================= */

#footer {
    width: 100% !important;
    max-width: none !important;
    margin: 32px 0 0 0 !important;
    padding: 32px 20px !important;
    background: var(--color-footer) !important;
    color: var(--color-blanco) !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border: none !important;
}

#footer .footer-inner {
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    text-align: center;
}

#footer .ucr-footer-logo {
    display: inline-block;
    margin-bottom: 14px;
    text-decoration: none;
}

#footer .ucr-footer-logo img {
    max-height: 58px;
    width: auto;
    display: block;
    margin: 0 auto;
}

#footer .footer-text {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

/* =========================================================
   Responsive básico
   ========================================================= */

@media (max-width: 1180px) {
    #header,
    #nav {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    #content {
        width: calc(100% - 64px) !important;
        margin-left: 32px !important;
        margin-right: 32px !important;
    }
}

@media (max-width: 700px) {
    #header {
        min-height: auto !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #logo {
        height: auto !important;
    }

    #logo img {
        max-height: 50px !important;
    }

    #header-title {
        margin-left: 0 !important;
        margin-top: 12px !important;
        font-size: 22px !important;
    }

    #nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: auto !important;
    }

    #content {
        width: calc(100% - 32px) !important;
        margin: 16px !important;
        padding: 26px 22px !important;
    }
}

/* =========================================================
   Página consultar solicitud
   ========================================================= */

#ticketForm,
#clientLogin {
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#clientLogin .instructions,
#clientLogin .warning-banner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ocultar candado decorativo */
#clientLogin img,
#clientLogin .lock {
    display: none !important;
}

/* Inputs */
#clientLogin input[type="text"],
#clientLogin input[type="email"] {
    border-radius: 5px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 10px !important;
}

/* Botón del formulario */
#clientLogin input[type="submit"],
#clientLogin button,
#clientLogin .button {
    background: #005da4 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
}

/* =========================================================
   Formulario Crear solicitud
   ========================================================= */

/* Caja general del formulario */
#ticketForm {
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 28px 34px !important;
    box-sizing: border-box !important;
}

/* Quitar líneas y separadores viejos */
#ticketForm hr {
    display: none !important;
}

#ticketForm fieldset,
#ticketForm table,
#ticketForm .form_table,
#ticketForm table.form_table,
#ticketForm .form_table th,
#ticketForm .form_table td,
#ticketForm table.form_table th,
#ticketForm table.form_table td {
    border-top: none !important;
}

/* Reducir espacios verticales generales */
#ticketForm td,
#ticketForm th {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Títulos de sección */
#ticketForm h3,
#ticketForm .form-header,
#ticketForm .section-title {
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 22px 0 12px 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Primer título */
#ticketForm h3:first-child {
    margin-top: 0 !important;
}

/* Etiquetas: siempre gris, nunca rojo */
#ticketForm label,
#ticketForm label *,
#ticketForm label.error,
#ticketForm label.required,
#ticketForm td,
#ticketForm td *,
#ticketForm th,
#ticketForm th *,
#ticketForm .label,
#ticketForm .label *,
#ticketForm .error,
#ticketForm .required,
#ticketForm span.error,
#ticketForm span.required {
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Títulos internos más fuertes */
#ticketForm h3,
#ticketForm h3 *,
#ticketForm .section-title,
#ticketForm .section-title * {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* Campos principales del mismo tamaño */
#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm select {
    width: 360px !important;
    max-width: 100% !important;
    height: 36px !important;
    border-radius: 5px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    color: #111827 !important;
}

/* Campo enfocado */
#ticketForm input[type="text"]:focus,
#ticketForm input[type="email"]:focus,
#ticketForm select:focus,
#ticketForm textarea:focus {
    border-color: #005da4 !important;
    outline: none !important;
}

/* Separación más equilibrada entre secciones */
#ticketForm select {
    margin-bottom: 12px !important;
}

/* Detalles de la solicitud */
#ticketForm textarea,
#ticketForm .redactor-box,
#ticketForm .redactor-editor {
    width: 720px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Editor visual */
#ticketForm .redactor-box {
    margin-top: 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}

/* Área editable */
#ticketForm .redactor-editor {
    min-height: 150px !important;
}

/* Adjuntos */
#ticketForm .dropzone,
#ticketForm .filedrop,
#ticketForm [class*="drop"] {
    max-width: 720px !important;
}

/* CAPTCHA: contenedor más compacto */
#ticketForm input[name="captcha"],
#ticketForm input[id*="captcha"] {
    width: 90px !important;
    height: 36px !important;
    text-align: center !important;
    display: inline-block !important;
    margin-left: 14px !important;
    vertical-align: middle !important;
}

/* Texto de ayuda del CAPTCHA debajo y centrado */
#ticketForm input[name="captcha"] + em,
#ticketForm input[id*="captcha"] + em,
#ticketForm input[name="captcha"] ~ em,
#ticketForm input[id*="captcha"] ~ em {
    display: block !important;
    width: 260px !important;
    margin: 6px 0 0 130px !important;
    text-align: center !important;
    color: #374151 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Evitar que el asterisco del CAPTCHA quede suelto raro */
#ticketForm input[name="captcha"] ~ span,
#ticketForm input[id*="captcha"] ~ span {
    color: #374151 !important;
}

/* Botón principal */
#ticketForm input[type="submit"],
#ticketForm button[type="submit"] {
    background: #005da4 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#ticketForm input[type="submit"]:hover,
#ticketForm button[type="submit"]:hover {
    background: #004b84 !important;
}

/* Ocultar Restablecer */
#ticketForm input[type="reset"] {
    display: none !important;
}

/* Botón Cancelar */
#ticketForm input[type="button"],
#ticketForm button {
    border-radius: 6px !important;
    padding: 9px 18px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* =========================================================
   Información de contacto en página principal
   ========================================================= */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid #e5e7eb;
}

.contact-item {
    text-align: center;
}

.contact-item a {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
}

.contact-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px auto;
    color: #005da4;
}

.contact-icon svg {
    width: 48px;
    height: 48px;
    display: block;
    fill: currentColor;
}

.contact-value {
    color: #005da4;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 6px;
}

.contact-label {
    color: #4b5563;
    font-size: 13px;
}

.contact-item a:hover .contact-value {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 520px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Ajustes responsive para móviles
   ========================================================= */

@media (max-width: 700px) {

    html,
    body {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        font-size: 15px !important;
    }

    /* Contenedor general */
    #container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Header */
    #header {
        width: 100% !important;
        min-height: auto !important;
        padding: 18px 22px !important;
        display: block !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    #logo {
        float: none !important;
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #logo img {
        max-width: 210px !important;
        max-height: 64px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    #header-title {
        float: none !important;
        display: block !important;
        margin: 12px 0 0 0 !important;
        font-size: 22px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        clear: both !important;
    }

    /* Menú principal */
    #nav {
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        white-space: normal !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #nav li {
        float: none !important;
        display: block !important;
        margin: 0 !important;
    }

    #nav li a {
        height: auto !important;
        line-height: 1.2 !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        display: block !important;
        white-space: nowrap !important;
        border-radius: 22px !important;
    }

    /* Caja principal */
    #content {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        min-height: auto !important;
        margin: 14px 12px 24px 12px !important;
        padding: 28px 24px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    #content h1 {
        font-size: 28px !important;
        line-height: 1.15 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #content p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Página principal */
    #landing_page,
    #landing_page .main-content,
    #landing_page .sidebar {
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        clear: both !important;
    }

    #landing_page .sidebar {
        margin: 24px 0 0 0 !important;
        padding: 0 !important;
    }

    #landing_page .sidebar .button {
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        margin: 0 0 12px 0 !important;
        padding: 14px 18px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    /* Contactos página principal */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        margin-top: 26px !important;
        padding-top: 24px !important;
    }

    .contact-icon,
    .contact-icon svg {
        width: 42px !important;
        height: 42px !important;
    }

    .contact-value {
        font-size: 16px !important;
    }

    /* Consultar solicitud */
    #clientLogin,
    #ticketForm {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        padding: 24px 22px !important;
        overflow-x: hidden !important;
    }

    #clientLogin table,
    #clientLogin tbody,
    #clientLogin tr,
    #clientLogin td,
    #clientLogin th,
    #ticketForm table,
    #ticketForm tbody,
    #ticketForm tr,
    #ticketForm td,
    #ticketForm th {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    #clientLogin td,
    #ticketForm td {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #clientLogin .instructions {
        width: 100% !important;
        max-width: none !important;
        margin: 24px 0 0 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-left: none !important;
    }

    /* Formularios */
    #ticketForm input[type="text"],
    #ticketForm input[type="email"],
    #ticketForm select,
    #ticketForm textarea,
    #clientLogin input[type="text"],
    #clientLogin input[type="email"] {
        width: 100% !important;
        max-width: none !important;
        height: 40px !important;
        box-sizing: border-box !important;
    }

    #ticketForm select {
        min-width: 0 !important;
    }

    #ticketForm .redactor-box,
    #ticketForm .redactor-editor,
    #ticketForm textarea {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    #ticketForm .redactor-editor {
        min-height: 160px !important;
    }

    #ticketForm .dropzone,
    #ticketForm .filedrop,
    #ticketForm [class*="drop"] {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* CAPTCHA en móvil */
    #ticketForm input[name="captcha"],
    #ticketForm input[id*="captcha"] {
        width: 110px !important;
        display: block !important;
        margin: 10px 0 6px 0 !important;
        text-align: center !important;
    }

    #ticketForm input[name="captcha"] + em,
    #ticketForm input[id*="captcha"] + em,
    #ticketForm input[name="captcha"] ~ em,
    #ticketForm input[id*="captcha"] ~ em {
        width: 100% !important;
        margin: 6px 0 0 0 !important;
        text-align: left !important;
        display: block !important;
    }

    /* Botones formulario */
    #ticketForm input[type="submit"],
    #ticketForm input[type="button"],
    #ticketForm button,
    #clientLogin input[type="submit"],
    #clientLogin button {
        width: 100% !important;
        max-width: none !important;
        margin: 8px 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        font-size: 15px !important;
    }

    /* Footer */
    #footer {
        margin-top: 24px !important;
        padding: 28px 18px !important;
    }

    #footer img {
        max-width: 140px !important;
        height: auto !important;
    }
}

/* =========================================================
   Corrección móvil: header y consultar solicitud
   ========================================================= */

@media (max-width: 700px) {

    /* Header móvil */
    #header {
        display: block !important;
        height: auto !important;
        min-height: 118px !important;
        padding: 20px 24px 18px 24px !important;
        position: relative !important;
        overflow: visible !important;
    }

    #logo {
        display: block !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #logo img {
        display: block !important;
        max-width: 220px !important;
        max-height: 70px !important;
        width: auto !important;
        height: auto !important;
    }

    #header-title {
        display: block !important;
        float: none !important;
        clear: both !important;
        margin: 16px 0 0 0 !important;
        padding: 0 !important;
        font-size: 23px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        color: #ffffff !important;
    }

    /* Menú móvil: debajo del header, no encima */
    #nav {
        clear: both !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 10px 18px !important;
        background: #0c344e !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

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

    #nav li a {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 12px 14px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        border-radius: 8px !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Consultar solicitud: una sola columna */
    #clientLogin,
    #clientLogin table,
    #clientLogin tbody,
    #clientLogin tr,
    #clientLogin td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #clientLogin {
        padding: 24px 20px !important;
        overflow: hidden !important;
    }

    #clientLogin td {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #clientLogin input[type="text"],
    #clientLogin input[type="email"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
        box-sizing: border-box !important;
    }

    #clientLogin input[type="submit"],
    #clientLogin button {
        width: 100% !important;
        display: block !important;
        margin-top: 12px !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }

    /* Texto lateral de consultar solicitud */
    #clientLogin .instructions,
    #clientLogin .pull-right,
    #clientLogin .right,
    #clientLogin td:last-child {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 22px !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
        box-shadow: none !important;
        border-left: none !important;
        text-align: left !important;
    }

    #clientLogin .instructions p,
    #clientLogin td:last-child p {
        font-size: 15px !important;
        line-height: 1.55 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}