body {
    margin: 0;
    padding: 0;
}

/* la capa principal del catalogo */
#bodegon {
    position:relative;
    width: 50%;
    margin: 0 auto;
    border: 5px solid #FFF;
    display: block;
    height: auto;
}

/* la capa de cada bodegon */
.bodegon {
    position: relative;
    /*width: 100%;*/
    /*width: 17%;*/
    /*margin: 1%;*/
    border: 5px solid #FFF;
    /*float: left;*/
   background-color: #FFFFFF;
}

/* la <img> dentro de la capa del bodegon */
.bodegon-imagen {
    /*position: relative;*/
    /*float: left;*/
    width: auto;
    max-width: 100%;
    
    height:100%;
    /*max-height:auto;*/
    display: block;
}

/* la clase de la etiqueta <svg> */
.bodegon-svg_OLD {
    position: absolute;
    top:0px;
    left:0px;
    /*float: left;*/

    /*width: 100%;*/
    /*height: 100%;*/
    /*width: 500px;
    height: 500px;*/
    border: 1px solid lightgray;
    /*background-color: rgba(200,180,220,0.5);*/
}

.bodegon-svg {
    width: 100%;
    height: 100%;
    /*float: left;*/
    border: 0px solid red;
    margin: 0 auto;
    display: block;
}
/* se sobreescribirán en php para poner las opciones personalizadas */
._bodegon-area {
    stroke: #95b7ff;
    stroke-width: 4px;
    fill: #3388CC;
    fill-opacity: 0.7;
    /*stroke-dasharray: 10 5;*/
}

/* oculta las areas inicialmente */
.bodegon-areas {
    /*display:block;*/
}

/* muestra las areas al entrar en el svg del bodegon */
/*.bodegon-svg:hover .bodegon-areas {
    display:block;
}*/

.bodegon-areas:hover {
    /*display:block;*/
}

/*.bodegon-area:hover {
    display:block;
}*/

.bodegon-cantidad {
    stroke: #95b7ff;
    stroke-width: 1px;
    fill: #FF0000;
    fill-opacity: 1;
    /*stroke-dasharray: 10 5;*/
}

.bodegon-numero {
    stroke: none;
    stroke-width: none;
    fill: #FFFFFF;
    fill-opacity: 1;
    /*font-size: 40px;*/
    /*font-size: 1.5rem;*/
    font-weight: bold;
}

.bodegon-descripcion {
    stroke: #AA3333;
    stroke-width: 1px;
    fill: #AA3333;
    fill-opacity: 1;
    font-size: 1.5rem;
    font-weight: bold;
}

.bodegon-tooltip {
    /*
    stroke: #95b7ff;
    stroke-width: 1px;
    fill: #95b7ff;
    fill-opacity: 1;
    */
    stroke: #000000;
    stroke-width: 1px;
    fill: #e5ebff;
    fill-opacity: 1;
}

.ocultar {
    display: none;
}

.clear {
    float: left;
    clear: both;
}








.bodegon-svg {
    float: none;
}

.bodegones-popup-falsobodegon {
    z-index: 99;
    background-color: #0d3349; /* fallback */
    background-color: rgba(0,0,0,0.3);
    color: #FF9999;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    background-clip: padding-box;
}
.bodegones-popup-falsobodegon > * {margin:0px 6px -6px 0px; display:inline-block; cursor: pointer;}
.bodegones-popup-falsobodegon .pedir,
.bodegones-popup-falsobodegon .boton-articulo-detalle{
    width:34px;
    height:34px;
    line-height:34px;
    border-radius:3px;
    position:relative;
    overflow:hidden;
    display:inline-block;
    box-sizing: border-box;
    text-align: center;
}
.bodegones-icon-add, .bodegones-icon-zoom_in {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding: 7px;
    margin:0;
    background-color: #fff;
    color: #333;
    font-size: 1.3em;
    line-height:20px;
}


.bodegones-popup-falsobodegon .fa-plus:hover,
.bodegones-popup-falsobodegon .fa-search-plus:hover{
    color:#fff; background:#6db742; /* verd defecte */
}
.bodegones-popup-falsobodegon .info-cantidad{position:absolute; top:-10px; right:-24px; display:block;
    width:32px; height:32px;line-height:32px; text-align:center; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
    background-color: red; opacity: 1; color: #FFF; font-weight: bold;
}


#tooltip span[id^="titulo_"] {
     float:left;
     clear: both;
}

#tooltip span[id^="valor_"] {
    float:left;
}