/* ==========================================================================
   Metalex - restyle de Mesa de Servicio (osTicket, panel de agentes / scp)
   Se carga DESPUES de scp.css/login.css, a proposito, para sobrescribir
   sin tocar los archivos originales de osTicket.
   Paleta identica a MetOne / consulta-hcm / portal de clientes.
   ========================================================================== */

/* Roboto alojada localmente (self-hosted) -- el CSP del sitio bloquea
   hojas de estilo/fuentes externas (fonts.googleapis.com). */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/default/fonts/roboto-400.woff2") format("woff2"),
       url("../../assets/default/fonts/roboto-400.woff") format("woff");
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/default/fonts/roboto-500.woff2") format("woff2"),
       url("../../assets/default/fonts/roboto-500.woff") format("woff");
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/default/fonts/roboto-700.woff2") format("woff2"),
       url("../../assets/default/fonts/roboto-700.woff") format("woff");
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../../assets/default/fonts/roboto-900.woff2") format("woff2"),
       url("../../assets/default/fonts/roboto-900.woff") format("woff");
}

:root {
  --mx-verde-oscuro: #00573D;
  --mx-verde-oscuro-2: #003d2a;
  --mx-verde: #53af32;
  --mx-verde-acento: #96bc2f;
  --mx-verde-acento-hover: #85a72a;
  --mx-gris-boton: #d3d7d9;
  --mx-gris-boton-hover: #c3c8cb;
  --mx-gris-texto: #353b3f;
  --mx-tabla-header: #d9dfe2;
  --mx-tabla-header-borde: #aab2b6;
  --mx-borde-input: #cdd9e2;
  --mx-tabla-fila-par: #f5f8f9;
  --mx-tabla-hover: #e6ebed;
}

body, input, select, textarea, button {
  font-family: 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Tablas viejas con width= fijo por HTML -> 100% */
#content table[width] {
  width: 100% !important;
}

/* ---- Contenedor: de 960px fijo a fluido ---- */
#container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 20px auto;
}

/* ---- Header / topbar ---- */
#header {
  border-left: none;
  border-right: none;
  background-color: #fff;
  border-bottom: 3px solid var(--mx-verde-oscuro);
  box-shadow: none;
  height: auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 8px 20px;
}
/* float ya no aplica dentro de un contenedor flex: usamos order explicito
   para que el logo quede a la derecha y el texto de bienvenida a la
   izquierda, igual que antes. */
#header #logo {
  order: 1;
}
#header #info {
  order: 2;
}
#logo img {
  max-height: 48px;
  max-width: 240px;
}

/* ---- Navegacion principal ---- */
#nav, #sub_nav {
  border-left: none;
  border-right: none;
  white-space: normal;
}
#nav {
  background: #f5f8f7;
  border-top: none;
  border-bottom: 2px solid var(--mx-tabla-borde);
  padding-top: 4px;
  display: flex;
  flex-wrap: wrap;
  height: auto;
}
#nav .active,
#nav .inactive {
  min-width: 0;
  margin-bottom: 4px;
}
#nav .inactive a {
  color: var(--mx-verde-oscuro);
}
#nav .active a {
  color: #002f1f;
  font-weight: bold;
}
#nav .active {
  background-color: var(--mx-verde-acento);
  border-color: var(--mx-verde-acento);
}
#nav .inactive:hover {
  background-color: rgba(0, 87, 61, 0.08);
  border-color: transparent;
}

/* ---- Botones ---- */
input[type="button"],
.action-button,
.button {
  background-color: var(--mx-verde-acento);
  border-color: var(--mx-verde-acento-hover);
  color: #fff;
}
input[type="button"]:hover,
.action-button:hover,
.button:hover {
  background-color: var(--mx-verde-acento-hover);
}
.dark.button,
.dark.button:visited {
  background-color: var(--mx-verde-oscuro);
}
.dark.button:hover {
  background-color: var(--mx-verde-oscuro-2);
}

/* ---- Inputs ---- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  border-color: var(--mx-borde-input);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: var(--mx-verde-oscuro) !important;
  box-shadow: 0 0 3px rgba(0, 87, 61, 0.4) !important;
  outline: none;
}

/* ---- Tablas ---- */
.settings_table th,
table.list th {
  background: var(--mx-tabla-header);
}
.settings_table tr:nth-child(even),
table.list tr:nth-child(even) {
  background: var(--mx-tabla-fila-par);
}
.settings_table tr:hover,
table.list tr:hover {
  background: var(--mx-tabla-hover);
}

/* ---- Login del panel de agentes ---- */
#background-compat {
  background-color: rgba(0, 87, 61, 0.55);
}
input:focus {
  border: 1px solid var(--mx-verde-oscuro);
  box-shadow: 0 0 4px rgba(0, 87, 61, 0.5);
}
#loginBox input[type="submit"],
#loginBox .button {
  background-color: var(--mx-verde-acento) !important;
}
#loginBox input[type="submit"]:hover,
#loginBox .button:hover {
  background-color: var(--mx-verde-acento-hover) !important;
}

/* ==========================================================================
   Responsive - scp.css original tambien era 100% fijo, sin @media.
   ========================================================================== */
@media (max-width: 900px) {
  #container {
    width: 100%;
    margin: 0;
  }
  #header {
    padding: 8px 12px;
  }
  #header p {
    display: none;
  }
  #content {
    padding: 12px !important;
  }
  .settings_table,
  table.list {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  #loginBox {
    width: 90% !important;
    max-width: 340px;
  }
}

/* ---- Evitar scroll horizontal de toda la pagina ---- */
html, body {
  overflow-x: hidden;
  width: 100%;
}
#content, #content * {
  max-width: 100%;
}

/* ---- Login de agentes: la imagen de fondo (logo.php?backdrop) se recorta
   distinto segun el tamano de pantalla; centramos el recorte para no perder
   el contenido importante, y evitamos que el cuadro de login se salga. ---- */
#background,
#brickwall {
  background-position: center center !important;
}
#loginBox {
  max-width: 92vw;
  box-sizing: border-box;
}
.banner img {
  max-width: 100%;
  height: auto;
}