/* Osticket Css Nuevo */

/* Pagina Principal */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
}

/* contenedor principal */
#container{
  background: url('https://www.uniagustiniana.edu.co/wp-content/uploads/2025/05/fondo.png') no-repeat center center fixed;
  background-size: cover;
  width: 100% !important;
}

#newLogo{
  height: 65px;
}

#login-plataform, #footer, #nav, #landing-page, .main-content, .front-page-button, .old-info{
  display: none;
}

/* header  */

#header{
  background-color: #1E2A41;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  padding: 15px 40px;
}

/* nav */

#newNav ul {
  list-style: none;
  display: flex;
}

#newNav ul li {
  margin-left: 35px;
}

#newNav ul li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

#newNav ul li a:hover {
  color: #ffcc00;
}

/* index */

.index{
  background-color: rgba(0,0,0,0.4);
  border-radius: 10px;
  height: 80vh;
}

.hero > p, .hero> h1{
  color: white !important;
}

.hero {
  text-align: center;
  padding: 220px 40px;
}

.hero h1 {
  font-size: 36px;
  font-weight: 600;
}

.hero p {
  font-size: 16px;
}

/* botones pagina  */

.buttons {
  margin-top: 20px;
}

.btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border: none;
  text-decoration: none;
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
  transition: background 0.3s;
}

.btn.primary, input[type="submit"] {
  background: #007bff;
  color: white;
}

.btn.primary:hover, input[type="submit"]:hover {
  background: #0056b3;
}

.btn.secondary, input[type="reset"] {
  background: #28a745;
  color: white;
}

.btn.secondary:hover, input[type="reset"]:hover {
  background: #1c7c30;
}

.btn.tree, input[type="button"]{
  background: #c5301c;
  color: white;
}

.btn.tree:hover, input[type="button"]:hover {
  background: #7a180b;
}

/* resposive index  */

@media (max-width: 768px) {
  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 40px 15px;
  }

  .hero h1 {
    font-size: 22px;
  }

  .hero p {
    font-size: 14px;
  }
}

/* titulo abrir ticket */
#content{
  margin: 0 5px;
  color: white;
  padding: 20px;
}

#content>h1, #content>p{
  color: white;
  text-align: center;
}

/* Ver Ticket */ 
#clientLogin{
  display: flex; 
  background-color: rgba(0,0,0,0.33);
  border: none;
  border-radius: 20px;
  padding: calc(15px + 1.5%);
  height: 60vh;
  align-items: center;
}

/* Logo */
#logo{
  display: flex;
}

#logo img{
  margin: 0px;
}

/* Footer */

#newFooter{
  background: #1E2A41;
  color: white;
  text-align: center;
  padding: 15px;
}

/* enlaces  */

#newFooter a, #clientLogin a{
  color: #66ccff;
}

/* error */
#msg_error{
  color: black;
}
/* inputs formulario */

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

/* #ticketForm */

#ticketForm{
  background-color: rgba(0,0,0,0.33);
  color: white;
  padding: 0px calc(50px + 2.5%);
  border-radius: 20px;
}

#ticketForm table{
  margin: 0 auto;
}

#ticketForm td{
  padding: 10px calc(10px + 2.5%);
}

#ticketForm h3, #ticketForm em, em>p, .dropzone{
  color: white !important;
}

.thread-body{
  background-color: transparent !important;
  color: white;
}

#ticketForm input[type="text"],
#ticketForm input[type="email"],
#ticketForm select,
#clientLogin input[type="text"]
{
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background-color: #2e3d4f;
  color: white;
  font-size: 14px;
  box-sizing: border-box;
}

.redactor-box, .redactor-toolbar{
  border-radius: 15px !important;
}

.redactor-statusbar{
  background-color: transparent;
}

.manual{
  color: cyan !important;
}

/* formulario vista ticket */
#clientLogin input[type="text"]{
  margin-top: 15px;
  margin-bottom: 15px;
}

#clientLogin input[type="submit"]{
  width: 400px;
  height: 30px;
  background-color: #007bff;
  border: none;
  font-weight: 600;
  margin: 0px;
  transition: background-color ease 0.5s;
}

#clientLogin input[type="submit"]:hover{
  background-color: #0056b3;
}

small {
  display: block;
  margin-top: 6px;
  margin-bottom: 6px;
  color: #aaa;
  font-size: 12px;
  text-align: justify;
}

.captcha-container {
  display: flex;
  align-items: center;
  gap: 50px;
}

.captcha-container img {
  height: 40px;
  border-radius: 6px;
}

@media (max-width: 480px){
  #ticketForm{
    padding: 5px;
  }

  #ticketForm em{
    font-size: 12px !important;
  }

  #newNav ul li a{
    font-size: 12px;
    text-align: center;
  }

  #newNav ul li{
    margin-left: 5px;
  }

  #logo{
    display: none;
  }
#clientLogin input[type="submit"]{
width: 200px;
}
}