/* =========================================================
   css/tickets.css  —  rilatosolutions.com
   Viste a HESK con los colores del sitio.
   ---------------------------------------------------------
   POR QUE ESTA AQUI Y NO DENTRO DE HESK
   HESK trae dos archivos que invitan a tocarlos,
   theme_overrides.css y core_overrides.css, pero los dos
   viven dentro de theme/hesk3/ y una actualizacion los puede
   pisar. Este vive en el sitio, se carga el ULTIMO de todos
   (desde tickets/head.txt, ya cerrando el <head>) y por eso
   gana sin tener que pelear con la especificidad.
   ---------------------------------------------------------
   COMO FUNCIONA
   HESK 3.7 tiene su tema entero montado sobre variables CSS.
   Asi que no hace falta perseguir sus reglas una por una:
   basta con reapuntar sus variables a las del sitio y el
   help desk se viste solo, botones, enlaces, tablas y avisos
   incluidos.
   El modo oscuro sale gratis: las variables del sitio
   (--papel, --fondo, --tinta...) ya cambian solas cuando
   .dark-mode entra en el <html>, y las de HESK apuntan a
   esas, asi que le siguen.
   ========================================================= */

:root{
  /* --- los tres colores de los que cuelga todo lo demas --- */
  --primary:   #CC3300;            /* el rojo del sitio: botones y acentos */
  --secondary: #0b57a4;            /* el azul de los enlaces */
  --tertiary:  #0b6b5e;            /* el verde de los precios y confirmaciones */

  /* --- superficies y texto --- */
  --surface:         var(--papel);
  --main-background: var(--fondo);
  --foreground:      var(--tinta);
  --font__pri-clr:   var(--tinta);
  --font__sec-clr:   var(--apagado);

  /* --- campos del formulario --- */
  --input-bg:  var(--caja);
  --input-clr: var(--tinta);

  /* --- enlaces: azul, y rojo al pasar por encima, como en el sitio --- */
  --link__pri-clr:       #0b57a4;
  --link__pri-hover-clr: var(--rojo);
  --link__sec-clr:       #0b57a4;
  --link__sec-hover-clr: var(--rojo);
  --breadcrumbs__a-clr:  #0b57a4;

  /* --- tablas (la lista de tickets) --- */
  --table_row__bg:       var(--fondo);
  --table_row__bg-even:  var(--caja);
  --table_row__bg-hover: var(--borde-suave);

  /* --- cajas, vistas previas, ventanas --- */
  --ticket_body__bg:  var(--papel);
  --preview__bg:      var(--caja);
  --modal_body__bg:   var(--papel);
  --radio__bg:        var(--papel);
  --checkbox__bg:     var(--papel);
  --search__input-bg: var(--caja);
  --icon_circle__bg: var(--rojo);   /* el circulo del titulo */
}

/* ---------------------------------------------------------
   LO QUE SOBRA
   HESK pone su propia barra de titulo ("Help Desk") y sus
   propias migas de pan. Las dos cosas ya las da la cabecera
   del sitio que hay justo encima, y dos rastros de migas
   seguidos no ayudan a nadie.
--------------------------------------------------------- */
.wrapper .header,
.wrapper .breadcrumbs{ display:none; }

/* ---------------------------------------------------------
   ENCAJE CON EL SITIO
   El envoltorio de HESK va dentro del nuestro, asi que no
   necesita ni su ancho maximo ni su fondo propio.
--------------------------------------------------------- */
.wrapper{
  max-width:none;
  padding-left:0;
  padding-right:0;
  background:transparent;
  font-family: var(--fuente-texto);
}

/* Los titulos del help desk, con la tipografia de los titulos
   del sitio, para que no canten al lado de la cabecera. */
.wrapper h1, .wrapper h2, .wrapper h3,
.article__heading{ font-family: var(--fuente-titulo); }

/* El boton principal, con el relieve de los botones del sitio */
.wrapper .btn--blue,
.wrapper button[type=submit]{
  font-family: var(--fuente-titulo);
  letter-spacing:.3px;
}

/* ---------------------------------------------------------
   MODO OSCURO
   Casi todo viene solo. Aqui solo quedan los sitios donde
   HESK escribio un blanco fijo que no pasa por variables.
--------------------------------------------------------- */
.dark-mode .wrapper,
.dark-mode .form-control,
.dark-mode input,
.dark-mode textarea,
.dark-mode select{
  color: var(--tinta);
  border-color: var(--borde);
}

.dark-mode .form-control,
.dark-mode input,
.dark-mode textarea,
.dark-mode select{ background: var(--caja); }

/* La imagen del captcha viene con fondo claro fijo, asi que en
   oscuro se queda flotando. Un marco la asienta. */
.dark-mode img[src*="print_sec_img"]{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:2px;
}

/* ---------------------------------------------------------
   LOS CAMPOS
   HESK les pone el borde en --secondary, que aqui es el azul
   de los enlaces: con eso cada campo parecia un enlace. El
   borde de este sitio es el mismo que el de las cajas.
--------------------------------------------------------- */
.wrapper .form-control,
.wrapper input[type=text],
.wrapper input[type=email],
.wrapper input[type=password],
.wrapper textarea,
.wrapper select{
  border-color: var(--borde);
  font-family: var(--fuente-texto);
}

.wrapper .form-control:focus,
.wrapper input:focus,
.wrapper textarea:focus,
.wrapper select:focus{
  border-color: var(--rojo);
}

/* ---------------------------------------------------------
   AFINADO FINAL
   Dos detalles que HESK pinta con reglas mas concretas que
   las de arriba, asi que hay que nombrarlos con mas
   precision para ganarles.
--------------------------------------------------------- */

/* El borde azul del area de texto. HESK lo pone desde dentro
   de .form-group, que es mas especifico que un .wrapper
   textarea a secas. */
.wrapper .form-group .form-control,
.wrapper .form-group textarea,
.wrapper .form-group input{
  border-color: var(--borde);
}
.wrapper .form-group .form-control:focus,
.wrapper .form-group textarea:focus,
.wrapper .form-group input:focus{
  border-color: var(--rojo);
}

/* El titulo de la pagina, del color de los h1 del sitio en vez
   del azul del tema de HESK. */
.wrapper .article__heading,
.wrapper .article__heading--form{
  color: var(--tinta);
  font-family: var(--fuente-titulo);
}

/* ---------------------------------------------------------
   LOS BOTONES
   HESK los pinta con --btn__bg-clr-pri, que por defecto
   apunta a --secondary (el azul) y les pone el borde en
   --primary (el rojo): salia un boton azul con marco rojo.
   Aqui son rojos con relieve, como los del sitio.
--------------------------------------------------------- */
:root{
  --btn__bg-clr-pri:     var(--rojo);
  --btn__clr-pri:        #ffffff;
  --btn__border-clr-pri: var(--rojo-oscuro);
}

.wrapper .btn,
.wrapper button[type=submit]{
  font-family: var(--fuente-titulo);
  letter-spacing:.3px;
}

.wrapper .btn:hover,
.wrapper button[type=submit]:hover{
  background: var(--rojo-oscuro);
  border-color: var(--rojo-oscuro);
  color:#fff;
}

/* Los enlaces en oscuro. El azul de los enlaces claros casi no
   se ve sobre fondo negro; el sitio usa estos dos y HESK los
   toma por sus propias variables. */
.dark-mode{
  --link__pri-clr:       #79b8ff;
  --link__pri-hover-clr: #ff8a5c;
  --link__sec-clr:       #79b8ff;
  --link__sec-hover-clr: #ff8a5c;
  --breadcrumbs__a-clr:  #79b8ff;
  --footer__link-clr:    #79b8ff;
}