/* ============================= */
/* FORMULARIO DE CREAR TICKET*/
/* ============================= */
/* Limpiamos padding horizontal que viene del form */
#ticketForm form {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
/* Tarjeta moderna para el formulario */
#ticketForm {
    background: #ffffff;
    max-width: 100% !important;
    margin: 40px auto;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    box-sizing: border-box;
    overflow: hidden; /* Evita desbordamiento */
    margin-top: 0px; 
}

/* Inputs, selects y textarea */
#ticketForm input,
#ticketForm select,
#ticketForm textarea {
    width: 65% !important;                  /* ocupa todo el td */
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 8px 12px;
    line-height: 1.1;
    font-size: 14px;
    margin-top: 5px; 
    margin-bottom: 12px;          /* separación vertical entre inputs */
    display: block;
}
/* Focus estilo verde */
#ticketForm input:focus,
#ticketForm select:focus,
#ticketForm textarea:focus {
    border-color: #43a047; /* verde fuerte */
    box-shadow: 0 0 5px rgba(67, 160, 71, 0.5); /* resplandor verde suave */
    outline: none; /* quita el outline por defecto */
}
/* Estilo para el título del formulario de crear ticket */
h1.form-header {
    color: #064E3B;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

#ticketForm table {
    width: 100% !important;       /* que ocupe todo el contenedor */
    border-collapse: collapse;    /* quita espacios extra de tabla */
}
/* Celdas de la tabla */
#ticketForm table td {
    padding: 2px 14px;           /* espacio interno alrededor del input */
}

/* Contenedor de botones en línea */
#ticketForm .buttons,
#ticketForm .button-group,
#ticketForm div:has(button),
#ticketForm p.buttons {
    display: flex !important;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Botones compactos y en línea */
#ticketForm button,
#ticketForm input[type="submit"],
#ticketForm input[type="button"],
#ticketForm input[type="reset"] {
    display: inline-block !important;
    width: auto !important;
    min-width: 120px;
    max-width: 200px;
    padding: 10px 24px !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 !important;

}
/* porque al seleccionar  */
button[type="submit"],
input[type="submit"] {
    color: #fff !important;
}

/* Botón principal (Create Ticket) - Verde fuerte */
#ticketForm button[type="submit"],
#ticketForm input[type="submit"] {
    background: linear-gradient(135deg, #1b5e20, #43a047); /* verde muy oscuro a verde fuerte */
    border: none;
    color: white;
    transition: background 0.3s ease;
}

/* Botones secundarios (Reset, Cancel) */
#ticketForm button[type="reset"],
#ticketForm button[type="button"],
#ticketForm input[type="reset"],
#ticketForm input[type="button"] {
    background: #e0e0e0;
    border: 1px solid #ccc;
    color: #333;
}

/* Efecto hover */
#ticketForm button[type="submit"]:hover,
#ticketForm input[type="submit"]:hover {
    background: linear-gradient(135deg, #145214, #388e3c); /* verde más intenso al pasar el mouse */
    cursor: pointer;
}
/* Cabecera informativa en los formularios de Abrir un nuevo ticket y ver estado de ticket*/
.ticket-header {
    background: #f8f9fa;
    padding: 20px 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    border-left: 5px solid #005c2e;
    text-align: center;
}

.ticket-header h1 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f1f1f;
}

.ticket-header p {
    margin: 0;
    font-size: 13px;
    color: #555;
}
/* Línea divisoria del ticket form centrada */
#ticketForm hr { 
    border: none; /* quitar estilo default */ 
    height: 3px; /* grosor */ 
    width: 250px; /* largo corto elegante */ 
    background: #005c2e; /* verde oscuro institucional */ 
    margin: 10px 0; /* espacio arriba y abajo */ 
    border-radius: 3px; 
}
/* ============================= */
/* NAV CENTRO DE SOPORTE */
/* ============================= */

ul#nav {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 35px 0 30px 0 !important;
    background: none !important;
    border: none !important;    
}

ul#nav li {
    margin: 0 !important;
}

ul#nav li a {
    height: auto !important;
    display: block !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    background: #f3f3f3 !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

/* Hover */
ul#nav li a:hover {
    background: #005c2e !important;
    color: #fff !important;
}

/* Activo (nota: active está en el <a>, no en el <li>) */
ul#nav li a.active {
    background: #005c2e !important;
    color: #fff !important;
}

/* Quitar espacio del sidebar en home */
#landing_page .main-content {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Asegurar que no haya flotados */
#landing_page {
    display: block !important;
}

/* ============================= */
/* LOGIN DEL CLIENTE */
/* ============================= */
/* Contenedor principal del login */
#clientLogin {
    max-width: 800px;           /* ancho máximo */
    margin: 30px auto;          /* centrado */
    padding: 20px;
    background: #f4f6f9;        /* fondo suave */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
}

/* Errores */
#clientLogin .login-box strong {
    color: #d32f2f;             /* rojo para errores */
    display: block;
    margin-bottom: 12px;
}

/* Inputs */
#clientLogin input[type="text"],
#clientLogin input[type="password"] {
    width: 100%;
    padding: 8px 10px; 
    margin-bottom: 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 14px;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    margin-top: 6px; 
}

/* Focus verde como login */
#clientLogin input[type="text"]:focus,
#clientLogin input[type="password"]:focus {
    border-color: #43a047;
    box-shadow: 0 0 5px rgba(67,160,71,0.5);
    outline: none;
}

/* Botón Sign In */
#clientLogin .btn {
    width: 100%;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    background: linear-gradient(135deg, #1b5e20, #43a047); /* verde fuerte */
    cursor: pointer;
    transition: background 0.3s ease;
    padding: 8px 20px !important;
}

/* Hover del botón */
#clientLogin .btn:hover {
    background: linear-gradient(135deg, #145214, #388e3c);
}

/* Links secundarios */
#clientLogin a {
    color: #43a047;
    text-decoration: none;
}

#clientLogin a:hover {
    text-decoration: underline;
}

/* Separación de textos secundarios */
#clientLogin p,
#clientLogin .external-auth,
#clientLogin div > b {
    margin-bottom: 10px;
}

/* Contenedor de dos columnas (opcional para extensiones externas) */
#clientLogin > div[style*="display:table-cell"] {
    vertical-align: top;
    padding-left: 15px;
}

/* External auth buttons */
#clientLogin .external-auth {
    margin-bottom: 8px;
}


/* Link de iniciar sesion en el header del cliente*/
#header a {
    color: #43a047;
    text-decoration: none;
}

#header a:hover {
    text-decoration: underline;
}
/* ============================= */
/* REGISTRO DEL CLIENTE*/
/* ============================= */

#content {
    background: #ffffff;
    max-width: 900px;
    margin: 40px auto;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    box-sizing: border-box;
    overflow: hidden; /* Evita desbordamiento */
    margin-top: 0px;  
}

#ticketForm select {
  width: 65% !important;
  box-sizing: border-box;
  display: block;
}

/* Gana a reglas globales (register-wrapper, genéricas, etc.) */
#ticketForm .select2,
#ticketForm .select2-container,
#ticketForm td .select2-container {
  width: 65% !important;
  display: block !important;
  box-sizing: border-box;
  min-width: 0 !important;
}

/* Misma estética redondeada y foco (ajústalo si ya lo tienes) */
#ticketForm .select2-container .select2-selection--single {
  border: 1px solid #ddd !important;
  border-radius: 14px !important;
  min-height: 40px;
  padding: 8px 40px 8px 12px;
  display: flex; align-items: center;
  background: #fff;
  box-sizing: border-box;
}
#ticketForm .select2-dropdown {
  border: 1px solid #ddd !important;
  border-radius: 14px !important;
  overflow: hidden;
}
#ticketForm .select2-selection__arrow { right: 10px; height: 100%; }
/* ====== Input interno del buscador (dropdown de Select2) ====== */
#ticketForm .select2-search--dropdown {
  padding: 8px 12px;              /* separa el buscador de los bordes del panel */
}

#ticketForm .select2-search--dropdown .select2-search__field {
  width: 100% !important;         /* ocupa todo el ancho del dropdown */
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 10px;            /* igual a tus inputs (puedes usar 14px si prefieres) */
  padding: 8px 12px;              /* mismo padding que los inputs */
  font-size: 14px;
  line-height: 1.1;
  color: #000;
  background: #fff;
  outline: none;
}

/* Foco verde como tus inputs */
#ticketForm .select2-search--dropdown .select2-search__field:focus {
  border-color: #43a047;
  box-shadow: 0 0 5px rgba(67,160,71,0.5);
  outline: none;
}

/* Placeholder del buscador */
#ticketForm .select2-search--dropdown .select2-search__field::placeholder {
  color: #888;
  opacity: 1;
}

/* Si ves que el input queda muy pegado arriba/abajo, ajusta el padding del contenedor: */
#ticketForm .select2-dropdown {
  border: 1px solid #ddd !important;
  border-radius: 14px !important;
  overflow: hidden;               /* respeta el borde redondeado */
}

/* ============================= */
/* VISUALIZACION DE TICKETS COMO CLIENTE*/
/* ============================= */

#ticketSearchForm {
    display: flex;
    align-items: flex-start; /* IMPORTANTE */
    background: #e9e9e9;
    padding: 18px 25px;
    border-radius: 10px;
    gap: 20px;
}

/* Ambos lados en columna */
.search-left,
.search-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Label estilo */
#ticketSearchForm label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

/* Grupo input + botón */
.input-group {
    display: flex;
    gap: 10px;
}

/* Input */
.search-left input {
    width: 350px;
    padding: 8px 18px;
    border-radius: 25px;
    border: 1px solid #ccc;
}
/* Botón */
.search-left button {
    padding: 8px 25px;
    border-radius: 25px;
    border: none;
    background: #2e7d32;
    color: white;
    font-weight: 600;
}
.search-right {
    display: flex;
    flex-direction: column;
    flex: 1;            
    max-width: 400px;         
}

.search-right select {
    width: 100%;
    align-self: flex-end; 
}


#ticketSearchForm .select2,
#ticketSearchForm .select2-container,
#ticketSearchForm td .select2-container {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box;
  min-width: 0 !important;
}

/* Misma estética redondeada y foco (ajústalo si ya lo tienes) */
#ticketSearchForm .select2-container .select2-selection--single {
  border: 1px solid #ddd !important;
  border-radius: 14px !important;
  min-height: 35px;
  padding: 4px 30px 4px 8px !important;
  display: flex; 
  align-items: center;
  background: #fff;
  box-sizing: border-box;
}
#ticketSearchForm .select2-dropdown {
  border: 1px solid #ddd !important;
  border-radius: 14px !important;
  overflow: hidden;
}
#ticketSearchForm .select2-selection__arrow { right: 10px; height: 100%; }
/* ====== Input interno del buscador (dropdown de Select2) ====== */
#ticketSearchForm .select2-search--dropdown {
  padding: 8px 12px;              /* separa el buscador de los bordes del panel */
}

#ticketSearchForm .select2-search--dropdown .select2-search__field {
  width: 100% !important;         /* ocupa todo el ancho del dropdown */
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 10px;            /* igual a tus inputs (puedes usar 14px si prefieres) */
  padding: 8px 12px;              /* mismo padding que los inputs */
  font-size: 14px;
  line-height: 1.1;
  color: #000;
  background: #fff;
  outline: none;
}

/* Foco verde como tus inputs */
#ticketSearchForm .select2-search--dropdown .select2-search__field:focus {
  border-color: #43a047;
  box-shadow: 0 0 5px rgba(67,160,71,0.5);
  outline: none;
}

/* Placeholder del buscador */
#ticketSearchForm .select2-search--dropdown .select2-search__field::placeholder {
  color: #888;
  opacity: 1;
}

/* Si ves que el input queda muy pegado arriba/abajo, ajusta el padding del contenedor: */
#ticketSearchForm .select2-dropdown {
  border: 1px solid #ddd !important;
  border-radius: 14px !important;
  overflow: hidden;               /* respeta el borde redondeado */
}

.pull-right {
  margin-right: 40px;
}

/* Estilo para la tabla */
#ticketTable {
    background: white;
    border-radius: 8px;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
    font-size: 12px;  /* Texto pequeño para que quepa mejor */
}
#ticketTable,
#ticketTable td,
#ticketTable th {
    border: 1px solid #fff !important;
    box-shadow: none !important;
}

#ticketTable caption {
    border: none !important; /* Eliminar el borde del caption */
}
/* Estilo para los encabezados */
#ticketTable th {
    background: #e8f5f1;
    font-weight: 600;
    color: #0b6b4f;
}

/* Hover sobre las filas */
#ticketTable tr:hover {
    background-color: #f1f9f6;
}

/* Estilo de celdas */
#ticketTable td,
#ticketTable th {
    white-space: nowrap;  /* Evita que el texto se desborde */
    padding: 4px 6px;      /* Padding ajustado */
}

/* Quitar los ::before de data-label que ya no aplican */
#ticketTable td::before {
    display: none !important;
}
/* ============================================================
MÓVIL  (max 480px)
============================================================ */
@media (max-width: 480px) {

    body {
      overflow-x: hidden; /* ← esto puede estar cortando el nav */
    }
  #header {
    display: flex;
    justify-content: space-between; /* logo izquierda, usuario derecha */
    align-items: center;
    padding: 8px 10px;
  }

  /* Quitamos floats en móvil */
  #header .pull-left,
  #header .pull-right {
    float: none !important;
  }

  /* Logo siempre pegado a la izquierda */
  #logo {
    order: 1;
  }

  /* Usuario a la derecha */
  .flush-right {
    order: 2;
    text-align: right;
  }

  #logo img {
    max-width: 160px;
    height: auto;
    display: block;
  }
ul#nav {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 35px 0 30px 0 !important;
    background: none !important;
    border: none !important;    
}

ul#nav li {
    margin: 0 !important;
}

ul#nav li a {
    height: auto !important;
    display: block !important;
    padding: 6px 13px !important;
    border-radius: 25px !important;
    background: #f3f3f3 !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

  /* Contenido */
  #content {
    margin: 0 8px !important;
    padding: 12px 0 !important;
  }


  /* Thread más angosto */
  .thread-entry.avatar {
    margin-left: 10px;
  }
  .thread-entry.response.avatar {
    margin-right: 10px;
  }
  .thread-event {
    margin-left: 10px;
  }
  .thread-event .description {
    width: calc(100% - 40px);
    margin-left: -20px;
    padding-left: 20px;
  }

  /* Attachment info */
  .thread-body .attachment-info {
    width: 100%;
    margin-right: 0;
  }

  /* Freetext files */
  .freetext-files .file {
    width: 100%;
    margin-right: 0;
  }

  /* Botón buscar */
  #kb-search #searchSubmit {
    width: 100%;
  }

  /* Reply section */
  #reply {
    padding: 8px;
  }
  #reply > table {
    width: 100%;
  }

  /* Formulario login */
  #clientLogin {
    padding: 12px;
    background-image: none; /* ocultar ícono candado en pantalla muy pequeña */
  }

  /* Selects */
  .select2-container {
    width: 100% !important;
  }

  h1 { font-size: 17px; }
  h2, .subject { font-size: 14px; }
  h3 { font-size: 14px; }


  .table-responsive {
    overflow-x: auto;       /* permite scrollear tablas largas */
  }

  .table th, .table td {
    font-size: 12px;        /* tamaño de texto más pequeño */
    padding: 4px 6px;
  }
  .register-wrapper {
    padding: 10px !important;
    box-shadow: none !important;
  }
  .register-wrapper table[width="800"],
  .register-wrapper table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .register-wrapper input,
  .register-wrapper select,
  .register-wrapper textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .register-wrapper .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  #ticketTable,
  #ticketTable thead,
  #ticketTable tbody,
  #ticketTable tr,
  #ticketTable td,
  #ticketTable th {
    display: revert !important; /* cancela el card-style anterior */
  }

  #ticketTable {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    font-size: 12px; /* texto más pequeño para que quepa mejor */
  }

  #ticketTable td,
  #ticketTable th {
    white-space: nowrap; /* evita que el texto salte de línea */
    padding: 4px 6px;
  }

  /* Quitar los ::before de data-label que ya no aplican */
  #ticketTable td::before {
    display: none !important;
  }

    #ticketSearchForm {
    flex-direction: column;
  }

  .search-left,
  .search-right {
    flex: 1 1 100%;
    width: 100%;
  }

  .search-right select,
  .search-right .select2-container {
    width: 100% !important;
  }


  #ticketSearchForm input,
  #ticketSearchForm select,
  #ticketSearchForm textarea {
    font-size: 14px;        /* texto más legible */
    padding: 6px 8px;       /* un poco más cómodo para tocar */
    box-sizing: border-box !important;
    width: 100% !important;
  }

  #ticketSearchForm .form-row {
    flex-direction: column; /* campos uno debajo del otro */
    gap: 8px;
  }
  #ticketForm {
    width: 100% !important; /* Asegúrate de que ocupe todo el ancho disponible */
    padding: 10px !important;
  }

  #ticketForm input,
  #ticketForm select,
  #ticketForm textarea {
    width: 100% !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    margin-bottom: 12px !important; /* Ajuste de márgenes */
    box-sizing: border-box !important; /* Asegúrate de que el padding no afecte el ancho total */
    max-width: 100% !important;
  }

  /* Ajuste de los botones */
  #ticketForm button,
  #ticketForm input[type="submit"],
  #ticketForm input[type="button"],
  #ticketForm input[type="reset"] {
    width: 100% !important; /* Los botones ahora ocuparán todo el ancho */
    padding: 10px 14px !important;
    font-size: 12px !important;
    min-width: 80px !important;
    max-width: 120px !important;
  }

/* ============================= */
/* Ajustes para el select2 */

    #ticketForm .select2,
    #ticketForm .select2-container,
    #ticketForm td .select2-container {
      width: 100% !important;
      display: block !important;
      box-sizing: border-box !important;
      min-width: 0 !important ;
    }


    /* Selección de un solo elemento (el seleccionado) */
    #ticketForm .select2-selection--single {
      width: 100% !important; /* Asegura que la selección ocupe todo el ancho disponible */
      box-sizing: border-box !important;
      border: 1px solid #ddd !important;
      border-radius: 14px !important;
      min-height: 40px;
      padding: 8px 40px 8px 12px;
      display: flex;
      align-items: center;
      background: #fff;
    }

    /* Asegura que la flecha del select también se alinee bien */
    #ticketForm .select2-selection__arrow {
      right: 10px;
      height: 100%;
    }

    /* El contenedor dropdown de las opciones */
    #ticketForm .select2-dropdown {
        max-width: 100% !important; /* Ajusta el dropdown para que se ajuste al contenedor */
        overflow: hidden !important; /* Evita que se desborde */
        position: relative !important; /* Establece la posición para que el dropdown quede dentro de los límites */
        box-sizing: border-box !important;
    }

    /* Si el select2 se sigue desbordando, se puede limitar el dropdown en y */
    #ticketForm .select2-container--open .select2-dropdown {
        max-height: 250px; /* Ajusta la altura máxima del dropdown */
        overflow-y: auto; /* Asegura que el dropdown sea desplazable si es muy largo */
    }

    /* Para el campo de búsqueda dentro del dropdown */
    #ticketForm .select2-search--dropdown .select2-search__field {
      width: 100% !important; /* Ocupa todo el ancho disponible */
      box-sizing: border-box;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 14px;
      line-height: 1.1;
      color: #000;
      background: #fff;
      outline: none;
    }

    /* Foco verde */
    #ticketForm .select2-search--dropdown .select2-search__field:focus {
      border-color: #43a047;
      box-shadow: 0 0 5px rgba(67,160,71,0.5);
      outline: none;
    }

      #ticketForm > table td {
        display: block !important;
        width: 100% !important;
        padding: 2px 6px !important;
      }

      /* Contenedor principal del login */
      #clientLogin > div[style*="display:table-row"],
      #clientLogin > div[style*="display: table-row"] {
        display: flex !important;
        flex-direction: column !important;
      }

      /* Login box (formulario izquierdo) */
      #clientLogin .login-box {
        width: 100% !important;
        display: block !important;
        box-shadow: none !important;
      }

      /* Div de Microsoft (derecho) */
      #clientLogin > div[style*="table-row"] > div[style*="table-cell"] {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
      }

    table[width="800"] {
        width: 100% !important;
      }
    #dynamic-form input,
      #dynamic-form select,
      #dynamic-form textarea {
        width: 100% !important;
        box-sizing: border-box !important;
      }

      /* Tabla principal del ticket */
      table#ticketInfo,
      table#ticketInfo tbody,
      table#ticketInfo tr {
        display: block !important;
        width: 100% !important;
      }

      /* Las dos columnas se apilan */
      table#ticketInfo tr > td[width="50%"],
      table#ticketInfo tr > td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      /* Tablas internas también al 100% */
      table#ticketInfo .infoTable {
        width: 100% !important;
      }
}

/* ── ticketForm: bien en escritorio bien en movil ── */
@media (min-width: 601px) {
  /* Cancelar todo lo que agregamos antes que pisaba custom.css */
  #ticketForm > table {
    table-layout: auto !important;
    width: 100% !important;
  }

  #ticketForm > table td {
    display: table-cell !important;
    width: auto !important;
  }

  #ticketForm input,
  #ticketForm select,
  #ticketForm textarea {
    width: 65% !important; /* igual que tu custom.css */
  }

  #ticketForm .select2-container {
    width: 65% !important;
  }

  #ticketForm td textarea,
  #ticketForm div textarea {
    width: 65% !important;
  }


}