/* CSI SERVITEC · Tema del portal de clientes (osTicket)
   Archivo en el servidor: soporte.csiservitec.com/assets/csi/tema.css
   Se carga desde include/client/header.inc.php despues de theme.css.
   Si una actualizacion de osTicket borra esa linea, hay que volver a agregarla. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --csi-ink: #0e0f11;
  --csi-ink-2: #17191c;
  --csi-paper: #f5f4f0;
  --csi-paper-2: #e8e6df;
  --csi-line: #d3d0c7;
  --csi-signal: #ff6a1a;
  --csi-deep: #b93c06;
  --csi-soft: #50535a;
}

body {
  background: var(--csi-paper);
  color: var(--csi-ink);
}
body, input, select, textarea, button {
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--csi-ink);
}
a, a:visited { color: var(--csi-deep); }
a:hover { color: var(--csi-signal); }
:focus-visible { outline: 3px solid var(--csi-signal); outline-offset: 2px; }

/* Contenedor */
#container {
  width: auto;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  box-shadow: none;
  border-left: 1px solid var(--csi-line);
  border-right: 1px solid var(--csi-line);
}

/* Encabezado */
#header {
  height: auto;
  min-height: 0;
  padding: 18px 28px;
  background: var(--csi-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
#header #logo { order: 1; float: none; }
#header #logo img { max-height: 54px; max-width: 260px; filter: brightness(0) invert(1); }
#header .valign-helper { display: none; }
#header .pull-right, #header .flush-right { order: 2; float: none; text-align: right; }
#header p { width: auto; padding: 0; color: #c9c6bd; font-size: 14px; }
#header p a, #header p a:visited { color: #fff; font-weight: 600; text-decoration: none; }
#header p a:hover { color: var(--csi-signal); }
#header select { color: var(--csi-ink); }

/* Menu */
#nav {
  margin: 0;
  padding: 0 18px;
  height: auto;
  background: var(--csi-ink-2);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
}
#nav li { display: block; }
#nav li a, #nav li a:visited {
  height: auto;
  line-height: 1.2;
  margin: 0;
  padding: 14px 12px 12px;
  border-radius: 0;
  background: none !important;
  color: #e9e7e1;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 3px solid transparent;
}
#nav li a.active, #nav li a:hover {
  background: none !important;
  color: #fff;
  border-bottom-color: var(--csi-signal);
}

/* Contenido */
#content { margin: 0 28px; padding: 28px 0 36px; }
h1 {
  color: var(--csi-ink);
  font-size: 26px;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.01em;
  line-height: 1.15;
}
h2, h3 { color: var(--csi-ink); }
#content h1, #content h2, #content h3 {
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color: var(--csi-ink) !important;
}
#content h1 { font-size: 28px !important; font-weight: 800 !important; font-stretch: 112%; }
#content p, #content li, #content td, #content th, #content label, #content a, #content strong, #content em {
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
#content p { line-height: 1.6; color: var(--csi-soft); }
#content a, #content a:visited { color: var(--csi-deep); }
#content a:not(.button), #content a:not(.button):visited { color: var(--csi-deep) !important; }
#content a:not(.button):hover { color: var(--csi-signal) !important; }
#content a.button, #content a.button:visited { color: var(--csi-ink); }
#content a.blue.button, #content a.blue.button:visited { color: #fff; }

/* Botones */
.button, .button:visited,
.green.button, .green.button:visited,
.blue.button, .blue.button:visited,
input[type="submit"], input[type="button"], input[type="reset"], button {
  background: var(--csi-signal);
  color: var(--csi-ink) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 700;
  text-shadow: none;
}
.button:hover, .green.button:hover, .blue.button:hover,
input[type="submit"]:hover, input[type="button"]:hover, button:hover {
  background: var(--csi-ink);
  color: #fff !important;
}
input[type="reset"], input[type="button"].secondary, .blue.button, .blue.button:visited {
  background: var(--csi-ink);
  color: #fff !important;
}
.blue.button:hover { background: var(--csi-signal); color: var(--csi-ink) !important; }
input[type="submit"], input[type="button"], input[type="reset"] { padding: 9px 18px !important; }

/* Campos */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], select, textarea {
  border: 1px solid var(--csi-line) !important;
  border-radius: 0 !important;
  background: #fff;
  padding: 8px 10px;
}
input:focus, select:focus, textarea:focus { border-color: var(--csi-signal) !important; outline: none; }

/* Inicio de sesion */
#clientLogin {
  background: var(--csi-paper) !important;
  border: 1px solid var(--csi-line);
  border-radius: 0;
  box-shadow: none;
}
#clientLogin input[type=text], #clientLogin input[type=password] { border-radius: 0; width: 100%; box-sizing: border-box; }
#clientLogin input[type=submit], #clientLogin .btn, .btn {
  border-radius: 0 !important;
  background: var(--csi-signal) !important;
  background-image: none !important;
  color: var(--csi-ink) !important;
  border: 0 !important;
  font-weight: 700;
  text-shadow: none !important;
  box-shadow: none !important;
}
#clientLogin input[type=submit]:hover, .btn:hover { background: var(--csi-ink) !important; color: #fff !important; }
.login-box { box-shadow: none; border-right: 1px solid var(--csi-line); }

/* Portada */
.front-page-button, #landing_page #new_ticket, #landing_page #check_status { background-image: none; padding-left: 0; }
.sidebar .content { background: var(--csi-paper); border: 1px solid var(--csi-line); }

/* Tickets */
table.list thead th, .list thead th { background: var(--csi-paper-2); color: var(--csi-ink); }
.thread-body .attachments { background-color: var(--csi-paper); }

/* Pie */
#footer { color: var(--csi-soft); padding: 18px 16px 28px; }
#footer a { color: var(--csi-soft); }
#footer #poweredBy { opacity: .55; filter: grayscale(1); }

/* Celular */
@media (max-width: 760px) {
  #header { padding: 14px 16px; }
  #header #logo img { max-height: 42px; max-width: 200px; }
  #nav { padding: 0 6px; }
  #nav li a { padding: 12px 10px 10px; font-size: 13px; }
  #content { margin: 0 16px; }
  #clientLogin, .login-box, #clientLogin .instructions { display: block; width: auto; padding: 14px; border-right: 0; }
  #ticketForm td textarea, #ticketForm div textarea { width: 100%; box-sizing: border-box; }
}