/*
 * Estilos propios de Atlantis (no son del tema Prestige).
 * Se carga desde WEB-INF/template.xhtml DESPUES del layout-*.css activo, porque el usuario puede
 * cambiar de layout (~36 variantes) y estos estilos no deben depender de cual este elegido.
 */

/* Logo institucional (emblema Policia Nacional + ATD) en las tarjetas de usuario.
   Los layout-*.css tratan la imagen de la tarjeta como avatar circular de 50x50
   (border-radius:100%, margin negativo); este logo es apaisado, asi que se fija altura y
   ancho proporcional y se quita el recorte circular. */
.user-card img.card-logo {
  height: 34px;
  width: auto;
  max-width: none; }

.layout-dashboard .user-card .user-card-content img.card-logo {
  height: 34px;
  width: auto;
  max-width: none;
  border-radius: 0; }

/* Fondo institucional (Policia Nacional / ATD) en TODAS las paginas autenticadas (Inicio, Mis
   turnos, Estado Tramite, Historial RTV, Perfil), sin importar cual de los ~36 layouts del tema
   este activo: esta hoja se carga siempre despues del layout-*.css, asi que gana por orden. Se
   replica el mismo bloque @media del tema para que el fondo tambien se vea bien en movil. */
body {
  /* cover: la imagen siempre llena el fondo sin dejar franjas del degrade de respaldo
     (contain dejaba bandas visibles cuando la proporcion de la ventana no coincidia con la
     imagen). Con cover se recorta un poco el sobrante, pero no quedan huecos. */
  background-image: url("/javax.faces.resource/images/layout/bg-atlantis-v3.jpg.xhtml?ln=prestige-layout");
  background-size: cover;
  background-repeat: no-repeat;
  /* left -55px: ancla el logo INTERVENCION/ATD (esquina superior izquierda de la imagen) un poco
     mas arriba, para que no quede pegado/recortado por la barra de pestanas del topbar. */
  background-position: left -25px;
  background-attachment: fixed; }

@media screen and (max-width: 991px) {
  body:before {
    background-image: url("/javax.faces.resource/images/layout/bg-atlantis-v3.jpg.xhtml?ln=prestige-layout");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left -25px; } }

/* Iconos sociales del pie de pagina como SVG (X/Twitter y TikTok no existen en Font Awesome 4.7,
   la version que trae PrimeFaces). fill="currentColor" en el SVG hereda el color/hover ya
   definidos por el tema para ".icon" (blanco, con su transicion al pasar el mouse). */
.layout-footer ul.social li .icon-link .icon-svg {
  width: 22px;
  height: 22px;
  vertical-align: middle; }

.layout-footer ul.social li .icon-link .icon-svg-lg {
  width: 30px;
  height: 30px; }

/* Encabezado (insignia INTERVENCION + logo) para las tarjetas de login/registro/recuperacion,
   centrado arriba de los campos del formulario. Antes vivia solo en el <style> de login.xhtml;
   centralizado aca para reusarlo en registro/forgot/cambioClave/activarUsuario. */
.login-brand {
  text-align: center;
  margin-bottom: 24px; }

.login-brand .login-badge {
  display: inline-block;
  background: #173E8B;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 5px 16px;
  border-radius: 6px;
  margin-bottom: 14px; }

.login-brand img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 260px;
  height: auto; }

/* Encabezado reutilizable de pagina/tarjeta: insignia INTERVENCION + logo a la izquierda, titulo
   centrado, icono a la derecha. Ver WEB-INF/_pageBanner.xhtml. */
.atd-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: #ffffff;
  border-radius: 3ex 3ex 0 0;
  padding: 16px 24px; }

.atd-banner-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto; }

.atd-banner-brand .atd-banner-badge {
  display: inline-block;
  background: #173E8B;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  white-space: nowrap; }

.atd-banner-brand .atd-banner-logo {
  height: 34px;
  width: auto;
  max-width: none;
  border-radius: 0; }

.atd-banner-title {
  flex: 1 1 120px;
  min-width: 0;
  text-align: center;
  color: #0d2c6b;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .3px; }

.atd-banner-icon {
  flex: 0 0 auto;
  margin-left: auto; }

.atd-banner-icon img {
  display: block;
  height: 64px;
  width: auto; }

/* Banner a todo el ancho (ej. titulo de pagina como "Mis turnos"), fuera del grid de tarjetas:
   se le agrega la clase atd-banner-wide desde la pagina que lo use asi. */
.atd-banner-wide .atd-banner-title {
  font-size: 26px; }

.atd-banner-wide .atd-banner-icon img {
  height: 100px; }

@media screen and (max-width: 640px) {
  .atd-banner {
    justify-content: center; }
  .atd-banner-title {
    order: 3;
    flex-basis: 100%; }
  .atd-banner-icon {
    margin-left: 0; } }