body { background-color: #F0EEEB; color: #352E2E; max-width:1300px; margin:0 auto;}
h2 { position:relative; float:left; }
nu { text-decoration:none; }
header {   display:flex;   flex-direction:column;   justify-content:space-between;   width:100%;  
           color:#C20F2F;  margin-top:70px;  }
header fila {   justify-content:space-between;   }
a { text-decoration:none; color:inherit; }
.modal-body {  padding:24px !important;  }
.novetats {  color:white;  background-color:#C20F2F;  border-radius:20px;  width:100%;  height:500px;  }
.novetats section {  display:flex;  flex-direction:column;  align-items:center;  justify-content:center;
                     width:100%;    height:85%;   }
.info,.logo,.menu {  cursor:pointer;  }
.fila { display:flex;  flex-direction:row;  }
.centra {  justify-content:center;   align-content:center;   }
.centrafila { justify-content:center;  }
.centracol,.subtitol,.titol {  align-content:center; text-align:center; align-items:center; }
.justcenter { display:flex; justify-content:center; align-items:center; }
.titols   {  display:flex;   flex-direction:column;   justify-content:center;   align-content:center;  cursor:pointer; align-items:center; }
.amagat {  display:none; visibility:hidden;  }
.litcard {  font-size:1.2em;  }
#litciste {  background-color:#C20F2f;color:white; border-radius:50%; padding:1px; display:inline-block;
             text-align:center;  position:relative; left:-5px;  }
.titolCistella { color:#C20F2F; font-size:1.4em; font-weight:600; }             
.titolResum {  font-size:1.4em; font-weight:600; }

input:focus, input[type]:focus, input:active, input[type]:active, textarea {
    color:#352E2E;   border:solid 1px #352E2E;
}
textarea {   width:100%;   height:150px;  padding:10px;  border-radius:14px;  margin-top:5px;  resize:none;  border:solid 1px rgb(139,128,128);  }
input[type="checkbox"] {  margin:0; padding:0;  height:28px;  }
input[type="submit"]   {  height:100%;  margin:0;  }
input,input[type="text"],input[type="time"],input[type="date"],input[type="file"],.selectinput {  height:36px;  }
input,input[type="text"],input[type="time"],input[type="date"],input[type="file"],.selectinput {
   width:100%;   margin-top:5px;   padding: 15px;   color:#8B8080;   font-size: 1.1em;
   font-weight: 550;   padding:3px 10px;      border:1px solid rgb(139,128,128);
   border-radius:14px;   -moz-border-radius:14px;   -webkit-border-radius:14px;
   transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
   background-color:#fff; padding-left:10px; padding-right: 10px;
}
input::placeholder,.inputF::placeholder,.pch {  font-weight:400 !important;  color:#8B8080 !important;  }

.logo {  position:relative; float:left; margin-right: 5%;  }
.menu {  color: #cd6155;  }
.resalt { background-color:#C30D2E; color:white; text-decoration:none; padding:3px 5px; }
.pagaCompra { background-color: #f3f0f3;  color:#C30D2E; padding:20px; border-radius:15px;  margin-top: 7px;  text-align:center;   }
.compra,.comprall { color: red; height:40px; cursor:pointer;  }
.compra { position:relative; float:right; }
.comprall {  position:relative; display:inline-block; }
.barrasup { border-bottom: 2px solid white; width:100%; padding: 0 0 15px 0; margin: 0; }
.barrainf { border-top: 2px solid white; width:100%; padding: 15px 0; min-height: 20px; }
.miss { color: #8e44ad ; padding: 5px; margin: 0; width:100%; text-align:center; }
.llibres { background-color:#F0EEEB; border-radius: 15px; margin-bottom: 1%; }
.inputStock { width:40px;text-align:center; }
.butmm {   position:relative;  top:-2px;   }

.botcat,.botcatpol {  border-radius:20px;  border:solid 1px #D2C6BD;  padding:3px 10px; }
.litcat            {  color:#C20F2F;  font-weight:550;         margin-bottom:11px; 
                      display:flex;     justify-content:start;   align-items:center;  }
.botcat            {  color:#352E2E;  background-color:white;  }
.botcat:hover      {  border-color:#C20F2F;  }
.botcat:active     {  color:#C20F2F;  background-color:white;  }
.botcatpol         {  border-radius:25px;  color:white;  background-color:#C20F2F;  }

.llibres           {  display:flex;     flex-wrap:wrap;      justify-content:center;    gap:24px;  }
.cardllibre        {  display:flex;     flex-direction:column;   align-items:center;    justify-content:space-between;
                      min-width:250px;  width:250px;         min-height:400px;          height:400px;
                      padding:24px;     border-radius:20px;  background-color:white;  
                      font-size:1.1em;  font-weight:500;
                   }

.cardLlibreow,.cardLlibreowadm  {  overflow:auto;  display:flex;  flex-direction:column;  align-items:center;  justify-content:start;  }                   
.cardLlibreow      {  width:100%; }
.cardLlibreowadm   {  height:70%;  }                   

.gridCistella span {  height:100%;  }    
.gridCistella label {  font-size:0.9em;  font-weight:550;  }               
.card-body img      {  height:140px;     width:90px;    }
div.cardllibre img                               {  height:180px;     width:130px;    }     
div.cardllibre img,.gridCistella img,.ediLlibreEsquerre img
{  object-fit:cover;  border-radius:7px;  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);   }

div.cardllibre img,.carro,.carrople,.carrodalt,.carrodaltple,.botcat,.botcatpol,.ico,
.icoanib {  &:hover { transform:translateY(3px); }  }
.icoani,.gridCistella img,.gridCistella span,.ediLlibreEsquerre img,.filamenu img {
    &:hover {  transform:translateY(-3px);  }
}
.icoani,.icoanib,.gridCistella img,.gridCistella span,.ediLlibreEsquerre img,.filamenu img {
    transition:transform 0.2s ease-in-out;
    cursor:pointer;
}

.boticoroig,.boticowh  {  border-radius:20px;  display:flex;   align-items:center;  font-weight:550;  padding:4px 10px;  max-height:35px;  }
.boticowh              {  background-color:white;            border:solid 2px #C20F2F;   color:#C20F2F;
                          &:hover {  background-color:#C20F2F;    color:white;    border:solid 1px #C20F2F;   }  }
.boticowh:hover span   {  color:white;   }
.boticowh span         {  font-weight:550; color:#C20F2F;  display:flex;  align-items:center;  padding-right:10px;   }
.boticowh i            {  display:inline-block; padding:0px 0px; margin:0px 0px; 
                          background-size: cover; background-position:center center; background-size:50% auto; background-repeat: no-repeat; }

.boticoroig            {  background-color:#C20F2F; 
                          &:hover {  background-color:white;    color:#C20F2F;    border:solid 1px #C20F2F;   }  }
.boticoroig:hover span {  color:#C20F2F;   }
.boticoroig span       {  font-weight:550; color:white;  display:flex;  align-items:center;  padding-right:10px;   }
.boticoroig i          {  display:inline-block;padding:0px 0px; margin:0px 0px; 
                          background-size: cover; background-position:center center; background-size:50% auto; background-repeat: no-repeat; }
.pngmail i             {  background-image: url('/Intranet/Imatges/mailSend24wh.png');  }
.pngmail:hover i       {  background-image: url('/Intranet/Imatges/mailSend24rg.png');  }

.pnginfo i             {  background-image: url('/Intranet/Imatges/24x24/infowh.svg');  }
.pnginfo:hover i       {  background-image: url('/Intranet/Imatges/24x24/infor.svg');  }

.pngcistewh i          {  background-image: url('/Intranet/Imatges/carroCompra.png');  }
.pngcistewh:hover i    {  background-image: url('/Intranet/Imatges/carroCompraPle.png');  }

.pngsupr i             {  background-image: url('/Intranet/Imatges/paperera.svg');  }
.pngsupr:hover i       {  background-image: url('/Intranet/Imatges/papererawh.svg');  }

.pngsuprrg i           {  background-image: url('/Intranet/Imatges/papererawh.svg');  }
.pngsuprrg:hover i     {  background-image: url('/Intranet/Imatges/paperera.svg');  }


.ediLlibreEsquerre img {  width:100%;   height:100%;  }

.titolllibre { font-size:1.1em !important; font-weight:600; }
.subtitolllibre { font-size:0.8em !important; font-weight:400; }
.cardico           {  display:flex;   justify-content:space-between;   align-items:center;  width:100%; }                   

.carro,.carrople,.carrodalt,.carrodaltple   {
    padding:7px;
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    border:solid 1px #C20F2F;
}
.carro                    {  background-color:white;   }
.carro,.carrodalt         {  background-image: url('/Intranet/Imatges/carroCompra.png');    }
.carrople,.carrodaltple   {  background-image: url('/Intranet/Imatges/carroCompraPle.png');  background-color:#C20F2F;   }

.carrodalt,.carrodaltple  {  width:60px;   height:40px;  }

.enllac { color:blue; text-decoration:underline; cursor:pointer; }
.ediLlibre { padding:16px; }
.ediLlibre,.ediLlibreM {  background-color:white;  color:#352E2E;  z-index:100;  border-radius:15px;  } 
.ediLlibre label { font-size:1.1em;  font-weight:550;  }
.ediLlibre  { height:650px;  }
.ediLlibreM { top:1%; left:2%;   }
.ediLlibreEsquerre {   height:100%;  width:45%;   position:relative;   float: left;   }
.ediLlibreDreta {   height:90%;   position:relative;  float: right;  overflow-y:auto;  overflow-x:hidden; }
.preu { width:50px; }
.preu,.inputStock,.butmm {   height:40px;  }

#pbarcsem     {  background-color:rgb(186,93,106); }   /* #BA5D6A */
#pbarcsem2    {  background-color:white;   }

td {  padding:3px; }
.seldir2 { height:38px; }
.cpujaFoto { display:none; }
.wd15 { width:15%; }
.wd20 { width:20%; }
.wd30 { width:30%; }
.wd50 { width:50%; }
.wd60 { width:60%; }
.wd65 { width:65%; }
.wd70 { width:70%; }
.mwd70 { min-width:70%; }
.wd80 { width:80%; }
.wd85 { width:85%; }
.wd90 { width:90%; }
.wd96 { width:96%; }
.wd98 { width:98%; }
.h40 { height:40px; }
.hd20 { height:20%; }
.hd80 { height:80%; }
.hd100 { height:100%; }
.wd100 { width:100%; }
.hd100 { height:100%; }
.w100 { width:100px; }
.w125 { width:125px; }
.w150 { width:150px; }
.w200 { width:200px; }
.fw550 { font-weight:550; }
.fw600 { font-weight:600; }
.fs1  { font-size:1em; }
.fs05 { font-size:0.5em; }
.fs06 { font-size:0.6em; }
.fs07 { font-size:0.7em; }
.fs08 { font-size:0.8em; }
.fs09 { font-size:0.9em; }
.fs11 { font-size:1.1em; }
.fs12 { font-size:1.2em; }
.fs15 { font-size:1.5em; }
.fs17 { font-size:1.7em; }
.fs19 { font-size:1.9em; }
.fs22 { font-size:2.2em; }

.tabinfo td { vertical-align:top; }
.tabinfo a { text-decoration:underline; text-decoration-color:black;  }

.padd0 { padding:0px !important; }
.filamenu {  position:fixed;  padding-bottom:7px; max-width:1300px;  width:100%;  top:0;  background-color:#F0EEEB;  
             z-index:1000;  background-color:#f0eeeb;  }

.carousel, .carousel-inner,.carousel-item,.card,.card-body { height:100%; width:100%; } 
.carouselNovetats {  width:100%;  } 
.cardLlibreow {  height:90%; }

@media (max-width: 768px) {  /* Estil per a mòbils (o tablets xocotetes) */

.cardLlibreow {  height:87%; }
.carro,.carrople   {  width:40px !important;   height:30px !important;   }
#frmllibre input { background-color:white !important; } 
#frmllibre #preu { border-color:none !important; }    
#imgllibre {  width:160px;  height:220px;  }
.gridLlibres { min-height:352px; }
.novetats section { padding:16px 0 0 0; }
.novetats { padding:16px; }
.cos { padding:0 16px 0 16px; }
.filamenu {  padding-top:12px;  padding-right:32px; }
.subtitol { font-size:1.4em; font-weight:600; }
.titol { font-size:2.5em; font-weight:600; }
.hico,.ico,.boticoroig,.boticoroig i { height:35px; }    
.ico,.boticoroig i { width:35px; }    
.logo { width:125px; }
.litcat { font-size:1.5em; }
#litciste { min-width:25px; top:3px; }
.menu { font-size:1em; margin-top:15px }
.llibres { margin-top:2%; }
.ediLlibreDreta { width:100%; }
.grid-item img { height:152px; }
#tagscat {
    height: 0;   opacity: 0;   max-height:0;   overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, transform 0.5s ease-out;
}
#tagscat.tags-visible {  height: auto;   opacity: 1;   transform: translateY(0);   max-height:100%;   }
#tagscat.d-none {  display: none;   }
.perfil-foto-container {  width:90px;  height:90px;  }
}

@media (min-width: 769px) {  /* Estil per escriptori */

body { padding:0 24px 24px 24px;  }    
.carro,.carrople   {  width:50px !important;   height:35px !important;   }
.cardLlibreow {  height:90%; }
.filamenu {  padding-top:24px;  padding-right:64px;  }
.subtitol { font-size:1.8em; font-weight:600; }
.titol { font-size:3em; font-weight:700; }
.gridLlibres { min-height:568px; }
#litciste { min-width:30px; top:6px; }
.litcat { font-size:2.7em; }
.hico,.ico,.boticoroig { height:40px; }
.ico,.boticoroig i { width:40px; }    
.menu { font-size:1.7em; margin-left: 15px; }
.llibres { margin-top:1%; }
.ediLlibreDreta { width:50%; }
.grid-item img { height:344px; }

.perfil-foto-container {  width:110px;  height:110px;  }
.novetats section { padding:16px;}
.novetats { padding:16px; }
} 

/* --- CSS per al control de la foto en editar llibre --- */

/* --- NUEVO CSS: Contenedor del banner y la foto de perfil --- */
.banner-area {
    overflow: hidden; /* Recorta cualquier parte de la imagen de fondo que desborde */
    display: flex; /* Para centrar la foto de perfil dentro de esta área */
    justify-content: center; /* Centra horizontalmente el perfil-foto-container */
    align-items: center; /* Centra verticalmente el perfil-foto-container */
    margin-bottom: 25px; /* Espacio debajo del banner */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para el banner */
}

.background-img {
    position: absolute; /* Posiciona la imagen de fondo sobre .banner-area */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra toda el área, recortando si es necesario */
    z-index: 1; /* Coloca la imagen de fondo por debajo de la foto de perfil */
}

/* --- Ajuste CSS: Perfil de foto --- */
.perfil-foto-container {
    /* Mantenemos 'position: relative' para el overlay interno */
    /* Quitamos margin:auto ya que ahora lo centraremos con flexbox en .banner-area */
    position: relative;
    z-index: 2; /* Coloca la foto de perfil por encima de la imagen de fondo */
    border-radius: 50%; /* Para hacerla circular */
    overflow: hidden; /* Oculta partes de la imagen que desborden los bordes */
    cursor: pointer; /* Indica que es clickeable */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra suave */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
    border: 4px solid #ffffff; /* Borde blanco alrededor de la foto */
}

.perfil-foto-container:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); /* Sombra más pronunciada al hover */
    transform: translateY(-3px); /* Pequeño levantamiento al hover */
}

.perfil-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
    text-align: center;
}

.perfil-foto-container:hover .overlay {
    opacity: 1;
}

.overlay-text {
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.overlay i {
    font-size: 2.2em;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Estilos para el botón de guardar */
.btn-guardar {
    display: none;
    margin-top: 25px; /* Espacio superior */
    padding: 12px 28px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-guardar:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-guardar:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}