/* ==========================================================================
   visual-refresh.css
   tienda.dreamers.es - lavado de cara: quita los degradados multi-stop de
   las barras de navegacion (y de .pod, que usa la misma receta de color)
   y arregla que la cinta "novedad" tape el titulo en las tarjetas de
   producto.

   Se carga DESPUES de shop2014.css. Mismos selectores, misma especificidad:
   al ir despues en la cascada, cada "background" de aqui sustituye entero
   al ultimo "background" declarado en shop2014.css para ese selector (no
   se fusionan). No se toca ningun fichero existente ni el motor de
   plantillas.

   Paleta: se mantiene la identidad de color original (azul / amarillo-
   verde / oscuro), solo se aplana cada degradado a un tono representativo.
   ========================================================================== */

/* -- barra de busqueda: el "degradado" es una sola imagen de fondo
   (globalbar-bg.gif) detras de todo el #global-search; el boton BUSCAR
   no tiene grafico propio, es texto en negrita encima de esa imagen -- */
#global-search {
  background: #dceaf6;
}

/* -- barra "Tienda: / Comic / Manga / ..." y su hover/activo -- */
#header .globalbar,
#header .globalbar .menucolgante.abierto li {
  background: #dceaf6;
}
#header .globalbar a:hover {
  background: #e2e08a;
}
#header .globalbar a.on {
  background: #242424;
}

/* -- barra amarilla "Tienda:" (subnav) y su hover/activo -- */
#header .globalbartienda,
#header .globalbartienda .menucolgante.abierto li {
  background: #e2e08a;
}
#header .globalbartienda a:hover {
  background: #dceaf6;
}
#header .globalbartienda a.on {
  background: #242424;
}

/* -- barra oscura "Novedades / FAQ / ..." y su hover/activo -- */
#header .genrebar,
#header .genrebar .menucolgante.abierto li {
  background: #1f1f1f;
}
#header .genrebar a:hover {
  background: #3a3a3a;
}
#header .genrebar a.on {
  background: #151515;
}

/* -- cabeceras de panel (.pod), misma receta de color que globalbar -- */
.pod .head {
  background: #dceaf6;
}
.pod .head h2 a:hover {
  background: #e2e08a;
}

/* --------------------------------------------------------------------------
   Tarjeta de producto: la cinta "novedad" (85x88px, esquina superior
   derecha, ver .ribbon-wrapper-novedad en shop2014.css) tapaba el titulo
   porque .entry-head no reservaba hueco a la derecha. No cambia la cinta,
   solo deja de invadirla el texto.
   -------------------------------------------------------------------------- */
.entry .entry-head {
  padding-right: 65px;
}

/* --------------------------------------------------------------------------
   Desplegable de editoriales (flechitas ">" junto a cada categoria del
   .globalbartienda). La funcion JS `desplegar()` fija
   subobj.style.backgroundColor = "LemonChiffon" como estilo INLINE en cada
   apertura -> gana a cualquier regla de hoja de estilos salvo !important
   (no se toca el JS, solo se le gana con la misma herramienta que ya usa
   .cajainfo1 en shop2014.css). El enlace real de cada fila es .cajainfo1
   (dos <a> por fila: nombre + flecha), no un <a> generico, asi que el
   hover se aplica ahi y sin display:block para no romper que ambos <a>
   compartan linea.
   -------------------------------------------------------------------------- */
.cajainfo {
  background-color: #ffffff !important;
  border: 1px solid #d8dee6;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(20, 30, 50, 0.18);
  padding: 6px 4px;
}
.cajainfo1:hover {
  background-color: #eef4fb !important;
  color: #003399 !important;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Pestanas de categoria/pagina (COMIC | Novedades | Top | Foro, tabs.html
   -> #content-head/#content-tabs). No son un linear-gradient CSS, son
   sprites de imagen (show-tabs-bg.gif, show-tabs-ends-bg.gif) con
   background-position distinto por estado -- de ahi el aspecto degradado.
   Se sustituyen por color plano; el redondeado de las puntas (antes via
   sprite) pasa a border-radius.
   -------------------------------------------------------------------------- */
#content-tabs a,
#fcontent-tabs a,
#content-tabs a.first,
#fcontent-tabs a.first,
#content-tabs a.last,
#fcontent-tabs a.last {
  background: #3a3a3a;
  color: #f0f0f0;
  border-radius: 5px 5px 0 0;
}
#content-tabs a.off,
#fcontent-tabs a.off {
  background: #3a3a3a;
  color: #cfcfcf;
}
#content-tabs .on a,
#content-tabs .on a:hover,
#content-tabs .on a.last:hover,
#content-tabs .on a.first,
#content-tabs .on a.first:hover,
#fcontent-tabs .on a,
#fcontent-tabs .on a:hover,
#fcontent-tabs .on a.last:hover,
#fcontent-tabs .on a.first,
#fcontent-tabs .on a.first:hover {
  background: #ffffff;
  color: #151515;
}

/* --------------------------------------------------------------------------
   Senales de disponibilidad en la tarjeta de producto (entry.html). Antes
   los 4 estados posibles compartian el mismo class="" vacio -- texto plano
   sin color ni jerarquia, indistinguible entre "en stock" y "agotado" a
   simple vista. Se anadio una clase por estado en entry.html (sin tocar
   la logica de los <<condicion:...>> que decide cual se muestra) y aqui
   solo el aspecto visual, en linea con el color ya usado para "OFERTA"
   (ver .precioProducto span, rojo) y con la disponibilidad InStock/
   OutOfStock ya codificada en el JSON-LD (ver tienda-seo).
   -------------------------------------------------------------------------- */
.disp-en-stock,
.disp-disponible,
.disp-preventa,
.disp-agotado {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: 700;
}
.disp-en-stock {
  background: #e3f6e8;
  color: #1a7a34;
}
.disp-disponible {
  background: #e8f1fb;
  color: #1a4d8f;
}
.disp-preventa {
  background: #fdf1de;
  color: #a15c00;
}
.disp-agotado {
  background: #f7e6e6;
  color: #9c2b2b;
}

/* --------------------------------------------------------------------------
   PVP tachado solapado con el precio real en tarjetas "no disponible".
   .pvp flotaba (float:left) confiando en que .disponibilidad (a su lado,
   float:right) tuviera contenido y diera altura a .colPrecio; cuando
   .disponibilidad esta vacia (el caso "no disponible", ver .nodisponible
   mas abajo en shop2014.css) .colPrecio se queda sin apenas altura y .pvp
   cae encima de .precio (position:absolute; bottom:0). Se saca .pvp del
   flujo flotado y se ancla en absoluto igual que .precio, justo encima,
   asi no depende de lo que haya al lado.

   Efecto colateral de ese cambio: al sacar .pvp del flujo, dejo de dar
   altura a .colPrecio (que ya de por si es auto-height, sostenida solo
   por contenido en flujo normal). La caja aliceblue semitransparente que
   sirve de fondo legible se quedaba mas corta que el propio .pvp, que
   asomaba por encima de ella con la portada del producto justo detras
   -- de ahi que se viera mal. Se le da a .colPrecio una altura minima
   que cubra .precio + .pvp con margen, para que el fondo los tape a
   los dos siempre, tengan o no contenido disponibilidad al lado.
   -------------------------------------------------------------------------- */
.entry .colPrecio .pvp {
  position: absolute;
  bottom: 28px;
  left: 10px;
  float: none;
}
.entry .colPrecio {
  min-height: 48px;
}