/*
 * osTicket 1.18 — Portal de clientes responsivo
 *
 * Se carga DESPUÉS de theme.css (ver include/client/header.inc.php).
 * No modifica los estilos de escritorio: todo está dentro de media queries.
 *
 *   ≤ 880px  tablet / ventana estrecha
 *   ≤ 600px  celular
 */

/* Botón de menú (lo inserta js/responsive.js). Oculto en escritorio. */
.nav-toggle {
    display: none;
}

/* ===================================================================
   TABLET  (≤ 880px)
   =================================================================== */
@media screen and (max-width: 880px) {

    html, body {
        overflow-x: hidden;
    }
    body {
        -webkit-text-size-adjust: 100%;
        background: #fff;
    }

    *, *::before, *::after {
        box-sizing: border-box;
    }

    /* --- Contenedor principal: de 840px fijo a fluido --- */
    #container {
        width: auto;
        margin: 0;
        box-shadow: none;
    }

    img, video, iframe {
        max-width: 100%;
        height: auto;
    }

    /* --- Cabecera --- */
    #header {
        height: auto;
        min-height: 71px;
        padding: 0 16px;
        overflow: hidden;
    }
    #header p {
        width: auto;
    }
    #header #logo img {
        max-width: 60vw;
    }

    /* --- Navegación: se permite que los elementos bajen de línea --- */
    #nav {
        margin: 0 16px;
        height: auto;
        white-space: normal;
        padding: 4px 6px;
    }
    #nav li a {
        margin: 2px 4px;
        height: auto;
        line-height: 28px;
    }

    #content {
        margin: 0 16px;
        min-height: 0;
    }

    /* --- Tablas con width="800" en el HTML --- */
    #content table[width="800"],
    #ticketForm > table,
    #ticketInfo,
    #ticketTable {
        width: 100% !important;
    }

    /* --- Formularios: nada más ancho que la pantalla --- */
    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea {
        max-width: 100%;
    }
    #ticketForm td textarea,
    #clientLogin td textarea,
    #ticketForm div textarea,
    #clientLogin div textarea,
    #reply textarea {
        width: 100% !important;
    }
    #ticketForm > table td {
        width: auto;
    }
    .redactor-box,
    .redactor-box .redactor-layer,
    .redactor-toolbar {
        max-width: 100%;
    }
    .redactor-toolbar {
        white-space: normal;
        height: auto;
    }
    .select2-container {
        max-width: 100%;
    }

    /* --- Página de inicio: contenido + barra lateral --- */
    .main-content {
        width: auto;
        overflow: hidden;
    }
    #landing_page #new_ticket,
    #landing_page #check_status {
        width: auto;
    }
    .search-form .search {
        width: calc(100% - 110px);
        max-width: 400px;
    }

    /* Lista de tickets: desplazamiento horizontal en lugar de desbordar */
    #ticketTable {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Vista de ticket */
    .thread-entry .header .title {
        max-width: 100%;
    }
    .thread-body {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    .thread-body img {
        max-width: 100% !important;
        height: auto !important;
    }
    .thread-body table {
        max-width: 100%;
    }
    .thread-body pre {
        white-space: pre-wrap;
    }

    /* Base de conocimientos */
    .span8 {
        width: 62%;
    }
    .span4 {
        width: 33%;
    }
    /* Solo la barra lateral de la base de conocimiento (dentro de .span4).
       La de la portada sigue flotando a la derecha con su ancho fijo: si
       ocupara el 100%, el contenido principal quedaría con 0px de ancho. */
    .span4 .sidebar {
        width: 100%;
        margin-left: 0;
    }
    .rtl .span4 .sidebar {
        margin-right: 0;
    }
    #kb-search #query,
    #kb-search #cid,
    #kb-search #topic-id {
        width: 100%;
        max-width: 100%;
    }

    /* Perfil y registro */
    table.padded {
        width: 100% !important;
    }
}

/* ===================================================================
   CELULAR  (≤ 600px)
   =================================================================== */
@media screen and (max-width: 600px) {

    body {
        font-size: 14px;
    }

    /* --- Cabecera: logo arriba, enlaces de usuario debajo --- */
    #header {
        padding: 8px 12px;
        text-align: center;
    }
    #header .pull-right,
    #header .pull-left {
        float: none !important;
    }
    #header .flush-right {
        text-align: center;
    }
    #header #logo {
        display: block;
        height: auto;
    }
    #header #logo .valign-helper {
        display: none;
    }
    #header #logo img {
        max-height: 50px;
        max-width: 80%;
    }
    /* Logo arriba, enlaces de usuario e idiomas debajo */
    #header {
        display: flex;
        flex-direction: column-reverse;
    }
    #header > .pull-right > p {
        padding: 6px 0 0;
        line-height: 1.8;
    }

    /* --- Menú hamburguesa --- */
    .nav-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: calc(100% - 24px);
        margin: 0 12px;
        padding: 10px 14px;
        font: inherit;
        font-weight: bold;
        color: #333;
        background: #f2f2f2;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        text-align: left;
    }
    .nav-toggle .bars {
        display: inline-block;
        width: 18px;
        height: 2px;
        background: #333;
        position: relative;
    }
    .nav-toggle .bars::before,
    .nav-toggle .bars::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: #333;
    }
    .nav-toggle .bars::before { top: -6px; }
    .nav-toggle .bars::after  { top: 6px; }

    #nav {
        display: none;
        margin: 0 12px;
        padding: 4px 0;
        background: #f8f8f8;
        border: 1px solid #ccc;
        border-top: none;
        box-shadow: none;
    }
    .nav-open #nav {
        display: block;
    }
    #nav li {
        display: block;
    }
    #nav li a,
    .rtl #nav li a {
        display: block;
        text-align: left;
        margin: 0;
        border-radius: 0;
        line-height: 40px;
        background-position: 12px 50%;
        padding: 0 12px 0 38px;
    }
    .rtl #nav li a {
        text-align: right;
        background-position: calc(100% - 12px) 50%;
        padding: 0 38px 0 12px;
    }
    #nav li + li a {
        border-top: 1px solid #e4e4e4;
    }

    #content {
        margin: 0 12px;
        padding: 14px 0;
    }

    h1 { font-size: 1.4em; }
    h2 { font-size: 1.2em; }

    /* --- Botones y campos táctiles (≥ 40px de alto) --- */
    input[type=text],
    input[type=email],
    input[type=password],
    input[type=tel],
    input[type=number],
    input[type=search],
    input[type=url],
    select,
    textarea {
        font-size: 16px; /* evita el zoom automático de iOS */
        min-height: 40px;
        width: 100%;
    }
    input[type=text][size],
    input[type=email][size],
    input[type=password][size] {
        width: 100%;
    }
    #ticketForm div select,
    #clientLogin div select {
        float: none;
    }
    input[type=submit],
    input[type=reset],
    input[type=button],
    button,
    .button,
    .action-button,
    .btn {
        min-height: 40px;
    }
    #ticketForm p.buttons input,
    #reply p input[type=submit],
    #reply p input[type=reset],
    #reply p input[type=button] {
        margin: 4px 0;
    }

    /* Perfil y registro: etiqueta encima del campo */
    table.padded,
    table.padded > tbody,
    table.padded > tbody > tr,
    table.padded > tbody > tr > td {
        display: block;
        width: 100% !important;
    }
    table.padded > tbody > tr > td:first-child:not([colspan]) {
        padding-bottom: 0;
    }
    .select2-container {
        width: 100% !important;
    }

    /* --- Barra lateral y contenido apilados --- */
    .sidebar,
    .sidebar.pull-right,
    .span4.pull-right {
        float: none !important;
        width: 100%;
        margin: 0 0 16px 0;
    }
    .main-content {
        width: 100%;
    }
    .span4,
    .span8 {
        display: block;
        width: 100%;
        margin: 0 0 16px 0;
    }
    .search-form .search {
        width: 100%;
        max-width: none;
        margin-bottom: 8px;
    }
    /* theme.css limita .button a 220px */
    .search-form .button,
    .front-page-button .button {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        text-align: center;
    }

    /* --- Inicio de sesión: columnas apiladas --- */
    #clientLogin {
        padding: 12px;
        background-image: none;
    }
    #clientLogin > div[style*="table-row"],
    #clientLogin .login-box,
    #clientLogin .login-box + div {
        display: block !important;
        width: auto !important;
        padding: 12px 0 !important;
        box-shadow: none;
    }
    #clientLogin .login-box + div {
        border-top: 1px solid #ddd;
    }
    /* Centrado y con campos y botón del mismo ancho (theme.css fija
       "#clientLogin div input { width: auto }", que respeta size="30"). */
    #clientLogin,
    #clientLogin .login-box,
    #clientLogin .login-box + div {
        text-align: center;
    }
    #clientLogin .login-box {
        max-width: 360px;
        margin: 0 auto;
    }
    #clientLogin div input[type=text],
    #clientLogin div input[type=email],
    #clientLogin div input[type=password],
    #clientLogin input[type=submit] {
        display: block;
        width: 100%;
        margin: 0 auto 10px;
        box-sizing: border-box;
    }
    #clientLogin .login-box p {
        margin: 0;
    }
    #clientLogin .login-box p a {
        display: inline-block;
        margin-top: 6px;
    }

    /* --- Lista de tickets --- */
    #ticketSearchForm input[type=text],
    #ticketSearchForm select {
        width: 100%;
        margin-bottom: 6px;
    }
    #content .search.well .pull-right,
    #content h1 .pull-right.states {
        float: none !important;
        display: block;
        margin: 6px 0;
    }
    #ticketTable th,
    #ticketTable td {
        white-space: nowrap;
        padding: 8px 6px;
    }

    /* --- Vista de ticket: tablas de información apiladas --- */
    #ticketInfo,
    #ticketInfo > tbody,
    #ticketInfo > tbody > tr,
    #ticketInfo > tbody > tr > td {
        display: block;
        width: 100% !important;
    }
    #ticketInfo h1 .pull-right {
        float: none !important;
        display: block;
        margin-top: 8px;
    }
    #ticketInfo h1 .action-button {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0 14px;
        font-size: 14px;
    }
    #ticketInfo .infoTable th {
        width: 40%;
    }
    #ticketInfo .infoTable td,
    #ticketInfo .custom-data td {
        word-break: break-word;
    }

    /* Hilo de conversación: sin avatares ni línea de tiempo lateral */
    .thread-entry.avatar,
    .thread-entry.response.avatar {
        margin-left: 0;
        margin-right: 0;
    }
    .thread-entry > .avatar,
    .thread-entry.avatar .header::before,
    .thread-entry.avatar .header::after {
        display: none;
    }
    #ticketThread::before {
        display: none;
    }
    .thread-entry .header .pull-right {
        float: none !important;
        display: block;
    }
    .thread-entry .header .title {
        display: block;
        margin-left: 0;
    }
    .thread-event .description {
        width: auto;
    }

    /* Responder */
    #reply {
        padding: 8px;
    }
    #reply > table,
    #reply > table > tbody,
    #reply > table > tbody > tr,
    #reply > table > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    /* --- Pie de página --- */
    #footer {
        padding: 10px 12px;
    }
}