@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*RESET CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}
*, 
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
/* / RESET CSS */
body{
	font-size: 100%;
    list-style-type: none;
	font-family: 'Roboto', sans-serif;
}
.logo_valbri{
	width: 32px;
}
header{
    position: fixed;
    width: 100%;
    z-index: 1;
}
.navbar{
	border-bottom: 1px solid #f0f0f0;
	background-color: rgba(255, 255, 255, 0.75) !important;
	backdrop-filter: blur(12px);
}
ul.navbar_ov{
	display: flex;
}
ul.navbar_ov li{
	display: flex;
	align-items: center;
}
ul.navbar_ov li a.navbar-brand {
 	padding: 0px;
}
.container-fluid{
	display: block;
	margin: 0px auto;
	max-width: 990px;
	padding: 10px 12px;
}
ul.navbar_ov{
	flex-direction: inherit;
}
ul.navbar_ov li.registrarse{
	margin-right: 10px;
}
.cont_logo{
	margin-right: auto !important;
    position: relative;
}
.cont_logo span{
    background: linear-gradient(#f2cf06, #e7c70e);
    color: #fff;
    padding: 3px 3px 2px 3px;
    border-radius: 4px;
    font-size: 6px;
    font-weight: 500;
    position: absolute;
    top: -5px;
    right: -8px;
    letter-spacing: 0.5px;
}
ul.navbar_ov li.login a{
	color: #000!important;
	background-color: #eaedef;
}
ul.navbar_ov li.registrarse a,
ul.navbar_ov li.login a{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    text-align: center;
    z-index: 10;
    display: block;
    line-height: 23px;
    text-decoration: none;
}
ul.navbar_ov li.registrarse a{
    color: #FF5E8C !important;
    /* background-color: #FF5E8C; */
    border: 1px solid #FF5E8C;
}
main{
	background-color: #f4f4f4;
	padding: 6px;
    min-height: 100vh;
}
a {
    color: inherit;           /* hereda el color del texto del padre */
    text-decoration: none;    /* quita el subrayado por defecto */
}

a:visited {
    color: inherit;           /* evita que se ponga morado después de visitado */
}

a:hover {
    text-decoration: underline; /* subraya solo al pasar el mouse */
}

.cont-width{
	max-width:732px;
	margin: 0px auto;
	
}
.title_filter{
	padding: 5px 15px;
	background-color:#fff ;
	margin-bottom: 2px;
}
.item_off{
    background-color: #fff;
    padding: 17px 16px 12px;
    margin-bottom: 6px;
    position: relative;
    border-bottom: 1px solid #f5f5f5;
    border-radius: 8px;
}

.post_link{
	bottom: 0;
    left: 0;
    pointer-events: all;
    position: absolute;
    right: 0;
    top: 0;
}
.offitem{
    
}
.item_off div{
	position: relative;
}
.item_off.offitem h5{
	font-size: 18px;
    color: #1a1a1b;
    font-weight: 400;
    padding: 8px 0px 2px;
    line-height: 24px;
}
.item_off h5{
	font-size: 15px;
    color: rgb(90, 90, 90);
    font-weight: 500;
    line-height: 1.2;
    padding: 8px 0px 2px;
}
.item_off .btn-primary{
	border: 1px solid #0079d3;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    margin-left: 12px;
    padding: 2px 13px 3px;
    text-decoration: none;
    right: 0px;
}

.user_imgoff{
	width: 24px;
	height: 24px;
	border-radius: 50% 50%;
	vertical-align: middle;
}
.iduser{
    font-weight: 300;
}
.iduser:hover{
    text-decoration: underline;
}
.time{
	color: rgb(83, 100, 113);
    font-weight: 300;
    font-size: 11px;
}
.it-cate a{
	text-decoration: none;
	color: rgb(83, 100, 113);
	font-weight: 300;
}
.primary-ov{
	background: #FA547E;
	border: none !important;
}
.primary-ov:hover{
	background: #ee5680;
}
.login-ov .primary-ov{
	border-radius: 20px;
    width: 100%;
}
.item_details .primary-ov{
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    padding: 4px 15px 6px;
}
.item_details.item_off h5 {
    font-size: 18px;
    font-weight: 400;
}
.comments h5{
	font-weight: normal;
}
.comments .my-1{
	display: inline-block;
}

.btn-flotante {
    text-transform: uppercase;
    font-weight: 300; /* 'light' corregido a valor numérico estándar */
    color: #ffffff;
    border-radius: 50%;
    
    /* SOLUCIÓN AL COLOR: Ajustamos el fondo a un RGBA más saturado 
       y añadimos un degradado interno para que no pierda fuerza sobre fondos blancos */
    background: radial-gradient(circle, rgba(255, 94, 140, 0.85) 0%, rgba(244, 54, 105, 0.9) 100%);
    
    /* El truco del papel cebolla: desenfoque fino sin lavar el color */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    position: fixed;
    bottom: 40px;
    right: 35px;
    
    /* Transición suave para color, sombra y transformación */
    transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
    box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 8px, rgba(101, 119, 134, 0.25) 0px 1px 3px 1px;
    z-index: 99;
    text-decoration: none;
    
    /* Centrado perfecto del SVG con Flexbox */
    height: 55px;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-flotante:hover {
    /* Color vivo al hover (el clásico fucsia/rosa fuerte de Inbox) */
    background: #E91E63;
    box-shadow: rgba(101, 119, 134, 0.35) 0px 4px 12px, rgba(101, 119, 134, 0.4) 0px 2px 4px;
    transform: translateY(-2px);
}

.btn-flotante svg {
    height: 24px;
    width: 24px; /* Nivelado a 24px para evitar desajustes en el eje de rotación */
    fill: #fff;
    stroke: #fff;
    
    /* TRANSICIÓN DE INBOX: 2 vueltas completas (720 grados) al pasar el mouse */
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Al hacer hover en el botón, el SVG de adentro gira las 2 vueltas */
.btn-flotante:hover svg {
    transform: rotate(720deg);
}

.login-ov {
    padding: 0px 7px;
}

/* Contenedor principal del Modal (Fondo oscuro) */
.modal-mejorar {
  display: none; 
  position: fixed; 
  z-index: 9999; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.5); 
  align-items: center; 
  justify-content: center;
}

/* Caja blanca interna */
.modal-mejorar-box {
  background-color: #ffffff; 
  padding: 24px; 
  border-radius: 12px; 
  width: 100%; 
  max-width: 400px; 
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); 
  box-sizing: border-box; 
  margin: 15px;
}

/* Título */
.modal-mejorar-title {
  margin: 0 0 16px 0; 
  font-size: 18px; 
  color: #333; 
  font-weight: 600;
}

/* Grupos de formularios (Inputs y contenedores) */
.modal-mejorar-group {
  margin-bottom: 16px;
}

.modal-enlace-oculto {
  margin-bottom: 20px;
  display: none;
}

.modal-mejorar-label {
  display: block; 
  margin-bottom: 6px; 
  font-size: 13px; 
  color: #555; 
  font-weight: 500;
}

.modal-mejorar-input {
  width: 100%; 
  padding: 10px; 
  border: 1px solid #ccc; 
  border-radius: 6px; 
  box-sizing: border-box; 
  font-size: 14px;
}

/* Mensaje de error */
.modal-mejorar-error {
  color: #e74c3c; 
  font-size: 12px; 
  display: none; 
  margin-top: 4px;
}

/* Grupo del Checkbox */
.modal-mejorar-check-group {
  margin-bottom: 16px; 
  display: flex; 
  align-items: center; 
  gap: 8px;
}

.modal-mejorar-check-group input[type="checkbox"] {
  cursor: pointer;
}

.modal-mejorar-check-group label {
  font-size: 13px; 
  color: #444; 
  cursor: pointer; 
  user-select: none;
}

/* Botones */
.modal-mejorar-buttons {
  display: flex; 
  flex-direction: column; 
  gap: 10px;
}

.btn-mejorar-submit {
  width: 100%; 
  padding: 12px; 
  background: #FA547E; 
  color: #fff; 
  border: none; 
  border-radius: 25px; 
  font-weight: 600; 
  cursor: pointer; 
  font-size: 14px;
  transition: background 0.2s ease;
}

.btn-mejorar-submit:hover {
  background: #e3426b; /* Un tono más oscuro para el hover */
}

.btn-mejorar-cancel {
  width: 100%; 
  padding: 10px; 
  background: transparent; 
  color: #777; 
  border: none; 
  cursor: pointer; 
  font-size: 13px;
}
@media only screen and (max-width: 600px) {
    .btn-flotante {
        bottom: 11px;
        right: 11px;
        height: 48px; /* Cuadrado perfecto para que la rotación no se vea deforme */
        width: 48px;
    }
    .btn-compartir-nativo span{
        display: none;
    }
}
.foot-item{
	display: flex;
}
.sub-reaction{
     z-index: 0;
    transition: background-color 0.6s ease;
}
.sub-reaction svg{
	width: 22px;
}
.like,
.dislike{
	padding: 2px 2px;
}
.dislike button,
.like button{
	background: no-repeat;
    border: none;
    padding: 3px 3px;
    line-height: 5px;
    cursor: pointer;
}
.sub-reaction,
.sub-price{
	display: flex;
   
}
.sub-reaction{
    background: #f4f4f4;
    border-radius: 20px;
    height: 32px;
}
.sub-price{
	border-color:#FF5E8C;
	border: none;
	font-weight: 700;

    margin: 5px 0px 10px;
}

.rightg{
    display: flex;
    margin-right: auto;
}
.sub-price .count-price,
.sub-price{
    color: #595c5e !important;
}
/*ACTION LIKE OR DISLIKE BTN*/
.sub-reaction.likeclick {
    /*background-color: #FF5E8C; *//* Naranja tipo Reddit */
}
.sub-reaction.likeclick svg,
.sub-reaction.dislikeclick svg{
	fill: #fff;

}
.sub-reaction.dislikeclick {
    /*background-color: #7193ff;*/ /* Azul tipo Reddit */
}
.sub-reaction .count-reaction{
	min-width: 14px;
    text-align: center;
}
.sub-reaction.dislikeclick .count-reaction,
.sub-reaction.likeclick .count-reaction{
	color: #fff;
}  

.sub-reaction {
  position: relative;
  overflow: hidden; /* Para que la animación no se salga */
}

/* capa animada */
.sub-reaction::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

/* LIKE */
.sub-reaction.likeclick {
  background-color: #ffb6c8; /* base suave */
}
.sub-reaction.likeclick::before {
  left: 0;
  background-color: #FF5E8C; /* fuerte */
  width: 100%;
}

/* DISLIKE */
.sub-reaction.dislikeclick {
  background-color: #b6c9ff; /* base suave */
}
.sub-reaction.dislikeclick::before {
  right: 0;
  left: auto;
  background-color: #7193ff; /* fuerte */
  width: 100%;
}

/*END ACTION LIKE AND DISLIK*/

.sub-reaction svg,
.sub-price svg,
.ico-price span{
	fill: #787c7e;
	height: 20px;
}
.sub-reaction .count-reaction{
    color: #787c7e;
    font-size: 13px;
    line-height: 2.4;
}
.count-comments{
	margin-left: 2px;
}
.up-more,
.down-minus{
	border-radius: 50%;
	border: none;
	width: 32px;
    background: no-repeat;
    cursor: pointer;
    padding-top: 5px;
}
.sub-price svg{
	width: 15px;
}
.sub-price{
	/*margin-left: 5px;	
	padding: 0px 7px;*/
}
.ico-price span{
 	font-size: 12px;
    font-weight: 500;
    margin-top: 3px;
    display: block;
    margin-right: 3px;
}
.count-price{
	
}
.head-item{
	font-size: 12px;
}
.sub-link{
	display: flex;
    margin-left: 5px;
    margin-right: 7px;
}
.sub-link a{
	position: relative!important;
	display: inline-block;
	color: #fff;
	padding: 10px 13px !important;
}
.more-option{
	right: 0px;
    top: -9px;
    position: absolute;
    border-radius: 20px;
    padding: 2px 4px 0px;
}
.more-option:hover{
	background-color: #f3f3;
}
.more-option:hover svg{
	fill: #FA547E;
}
.more-option svg{
	width: 20px;
	height: 20PX;
	fill: #888;
}
/*PUBLICAR CSS*/
	.slogin .wrapperlogin{
		margin: 40px auto 0px;
		max-width: 700px;
		padding: 10px 20px;
	}
	.slogin .wrapperlogin h4{
		font-size: 24px;
		color: #333D42;
		font-weight: 700;
	}
	.slogin  form{
		margin-top: 25px;
	}
/*PARA TEXTAREA CSS*/
  .slogin .form-group textarea {
    width: 100%;
    padding:26px 0px 0px 14px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 20px;
    resize: none;
    outline: none;
    background: #f9f9f9;
  }
  .slogin .form-group textarea:focus {
	  border-color: #007bff;   /* azul (puedes cambiarlo) */
	  background: #fff;     /* celeste claro */
	}
    .descript textarea{
    width: 100%;
    resize: vertical !important; /* Fuerza a que aparezca el tirador solo hacia abajo */
    overflow: auto !important;   /* Obliga al navegador a mostrar el tirador de cambio de tamaño */
    box-sizing: border-box;
    }

  .slogin .form-group .floating-label {
    position: absolute;
	left: 20px;
    top: 18px;
    color: #999;
    font-size: 13px;
    pointer-events: none; /* <- así no bloquea clics al campo */
    transition: 0.2s ease all;
    display: flex;
    gap: 0.2rem;
    font-weight: 300;
  }

  .slogin .form-group textarea:focus + .floating-label,
  .slogin .form-group textarea:not(:placeholder-shown) + .floating-label {
    top: -0.5rem;
    left: 0.6rem;
    font-size: 0.8rem;
    background: none;
    padding: 0 0.3rem;
    color: #555;
  }
  .slogin .form-group textarea:focus{
  	background: ;
  }
  /*PARA input password CSS*/
  /* --- Estilo general de inputs (correo y password) --- */
.slogin .form-group {
  position: relative;
  margin-bottom:14px;
}

/* input y textarea iguales */
.slogin .form-group input{
  width: 100%;
  padding:14px 14px 6px 14px; /* espacio arriba para que quepa el label */
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
  background: transparent;
  height: 60px;
}
.slogin .form-group input:focus{
	border-color: #999;
}
/* label flotante */
.slogin .form-group .floating-label {
  position: absolute;
  left: 16px;
  top: 24px;
  color: #999;
  font-size: 0.9rem;
  pointer-events: none;
  transition: 0.2s ease all;
  background: none;
  padding: 0 0.3rem;
}

/* cuando hay focus o texto, sube */
.slogin .form-group input:focus + .floating-label,
.slogin .form-group input:not(:placeholder-shown) + .floating-label,
.slogin .form-group textarea:focus + .floating-label,
.slogin .form-group textarea:not(:placeholder-shown) + .floating-label {
  top: 10px;
  left: 12px;
  font-size: 0.75rem;
  color: #555;
}

  /*END PARA INFPUT PASSWORD CSS*/
.btn{
	padding: 15px 20px;
  	border-radius: 30px;
  	
  	font-weight: 700;
  	cursor: pointer;
  	border: none;
}
.btn-primary{
	color: #fff;
	background-color: #FA547E;
 }
 .w100p{
 	width: 100%;
 }
 .alert{
 	width: 100%;
 	font-size: 12px;
 	padding: 0px 10px 7px;
 } 
 .alert-danger{
 	color: red;
 }
 .helogin{
 	font-size: 12px;
    line-height: 35px;
 }
.helogin a{ 
  	color: #222; 
  }
.helogin a:hover{ 
	color: #FA547E;
	text-decoration: underline;
}
.msj-temporal{
    margin: 3px 0px 10px;
    display: inline-block;
    width: 100%;
}
.msj-temporal p{
    font-size: 13px;
    background-color: #f6ecaa;
    padding: 13px;
    border-radius: 8px;
    color: #444;
    line-height: 18px;
    font-weight: 400;
    padding-right: 25px;
}
 a.dvlink { 			/*boton enlace*/
    background-color: #0a449b;
    color: #fff;
    padding: 6px 9px 5px;
    border-radius: 20px;
    font-weight: 800;
    position: absolute;
    right: 35px;
    top: -9px;
    transition: 0.5s;
}
 a.dvlink:hover {
    background: #FA547E;
    color: #fff;
}
.msj-nosesion{
	padding: 5px 10px 15px;
	font-size: 14px;
	text-decoration: none;
}
.msj-nosesion a{
	color: #FA547E;
}

.comments1{
    font-size: 13px;
    color: rgb(15, 20, 25, 0.9);
    margin-top: 8px;
    margin-bottom: 5px;
    line-height: 18px;
    overflow-wrap: break-word;
}
.comments-list1{
	
}
.comments-list2{
    margin-left: 25px;
    margin-top: 0px;
    border-left: 1px solid #e9e9e9;
    padding-left: 10px;
    position: relative;
}
a.btn-responder{
	font-size: 12px;
color: #999;
margin-top: 6px;
display: inline-block;
}
a.btn-responder:hover{
	text-decoration: underline;
	color: #000;
}
.form-responder{
	margin-top: 10px;
}
.comments{
	width: 100%;
}
.form-comment-post{
  display: flex;
  gap: 10px; /* espacio entre input y botón */
  width: 100%;
  box-sizing: border-box;
}
.form-comment-post > div:first-child {
  flex: 1; /* el input ocupa todo el espacio disponible */
}

.form-comment-post > div:last-child {
  flex: 0 0 auto; /* el botón mantiene su ancho natural */
}
.form-comment-post input[type="text"] {
    width: 100%;
    box-sizing: border-box;
	border-radius: 30px;
    padding: 10px 10px;
    border: 1px solid #efefed;
    font-size: 12px;
}
.form-comment-post .btn-primary{
	font-size: 12px;
    font-family: "Roboto";
    padding: 10px;
    margin-left: 4px;
    line-height: 13px;
    font-weight: 500;
    background: no-repeat;
    color: #222;
    border: none;
    flex: 0 0 auto;
    background: #f1f1f1;
}
.form-comment-post .btn-primary:hover{
    background: #e9e9e9;
}
/*alternativa para login y registro*/
.alter_lr{
	font-size: 14px;
    text-align: CENTER;
    MARGIN-TOP: 24px;
    color: #444;
    font-weight: 300;
}
.alter_lr a{
    color: #FA547E;
    font-weight: 500;
    text-decoration: underline;
}
.alter_lr a:hover{
	text-decoration: underline;
}
/*PUBLICAR CSS*/
.ohs-more textarea{
	min-height: 120px;
}
.ohs-more{
	 margin-bottom: 25px !important;
}
.divls-more{
	 margin-bottom: px !important;
}
.ls-more, .lh-more{
	padding: 0px 10px;
	color: #666;
	font-size: 13px;
	text-decoration: underline;
	display: block;
}
.ls-more{
	margin-bottom: 20px;
}
.lh-more{
	margin-top: 20px;
}
.cont-btnp{
	text-align: right;
}
/* --- SECCIÓN DESCRIPCIÓN Y LEYENDA --- */
.descript {
    display: none; /* JS controla el subidón/bajada con block/none */
    margin-bottom: 20px;
}

.descript .leyenda-formato {
    background: #e9e9e9;
    border: 1px dashed #ced4da;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #495057;
    line-height: 1.5;
}

.descript .leyenda-titulo {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
    color: #212529;
}

.descript .leyenda-grid{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
}

.descript .leyenda-cupon {
    background: #e9ecef;
    border: 1px dashed #cc295f;
    color: #cc295f;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: bold;
    font-family: monospace;
}

.descript .leyenda-footer {
    margin-top: 6px;
    border-top: 1px solid #e9ecef;
    padding-top: 4px;
}

.descript .leyenda-footer a {
    color: #0056b3;
    text-decoration: underline;
}

/* --- CONTROL COMPORTAMIENTO TEXTAREA (PC y Móvil) --- */
.descript textarea {
    width: 100%;
    min-height: 80px;
    box-sizing: border-box;
    resize: vertical;       /* Tirador visible en PC (solo vertical) */
    overflow: auto;         /* Permite el redimensionado nativo */
    field-sizing: content;  /* Auto-crecimiento mágico en móvil al escribir */
}/* --- ESTILOS BASE COMPARTIDOS --- */
.leyenda-formato {
    border: 1px dashed #ced4da;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #495057;
    line-height: 1.5;
}

/* Diferencia de fondos utilizando clases secundarias */

/* Elementos internos */
.leyenda-formato .leyenda-titulo {
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
    color: #212529;
}

.leyenda-formato .leyenda-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
}

.leyenda-formato .leyenda-cupon {
    background: #e9ecef;
    border: 1px dashed #cc295f;
    color: #cc295f;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: bold;
    font-family: monospace;
}

.leyenda-formato .leyenda-footer {
    margin-top: 6px;
    border-top: 1px solid #e9ecef;
    padding-top: 4px;
}

.leyenda-formato .leyenda-footer a {
    color: #0056b3;
    text-decoration: underline;
}
/* END PUBLICAR CSS */
/*HEADER CSS BTN LVL*/
.btn-lvluser {
    background: #e7e7e7;
    display: flex;              /* usamos flex para centrar */
    justify-content: center;    /* centro horizontal */
    align-items: center;        /* centro vertical */
    height: 32px;
    width: 32px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    top: 0px;
    left: 0px;
}

.btn-lvluser svg {
    height: 18px;
    width: 18px;
}
/*END HEADER CSS BTN LVL*/
/*ofertas (item)*/
.iof-descripcion del{/*subrayado*/
	text-decoration: line-through; 
}
.iof-descripcion strong{/*negrita*/
	font-weight: bold;
}
.iof-descripcion em{ /*cursiva*/
	font-style: italic;
}
.iof-descripcion{
    line-height: 17px;
	margin-bottom: 15px;
    font-size: 13px;
    color: #777;
    font-weight: 300;
}
.iof-descripcion .spoiler {
    background-color: black;
    color: black;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
}
.iof-descripcion .spoiler:hover {
    color: white;
}

.iof-descripcion .cupon {
    display: inline-block;
    background: #FFF6DD;
    border: 1px dashed #d4a017;
    padding: 4px 8px;
    font-weight: bold;
    border-radius: 6px;
    color: #b58900;
}
.iof-descripcion .stick-upd{
    margin-top: 6px;
    font-size: 12px;
    font-style: italic;
    color: #c1c1c1;
}
/*END ofertas(item)*/
/*MENUS EMERGENTES STYLE GENERAL*/
#overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 999;
}

.menu-box {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Mantiene el centrado horizontal */
    width: 100%;
    max-width: 500px;
    background: #fff;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.15);
    z-index: 1000;
    padding: 19px;
    border-radius: 16px 16px 0px 0px;
    box-sizing: border-box;
    display: none;
    /* ❌ Quitamos el display: none de aquí para que la animación no se rompa */
}

/* 🔥 EL TRUCO: Cuando tu JS le meta el "display: block" a un menú específico por su ID, 
   esta regla se activará automáticamente y ejecutará la animación de abajo */
.menu-box[style*="display: block"] {
    /* subirDesdeAbajo = Nombre de la animación.
       0.5s = El tiempo que demora en subir (Aumentado para que sea más lento y fino).
       cubic-bezier = Curva de desaceleración suave estilo iOS.
       forwards = Hace que el menú se quede fijo arriba al terminar la animación.
    */
    animation: subirDesdeAbajo 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 🏎️ La ruta de la animación matemática */
@keyframes subirDesdeAbajo {
    from {
        /* Empieza abajo del todo de la pantalla (100% de su propia altura) */
        transform: translate(-50%, 100%); 
    }
    to {
        /* Termina encajado perfecto en la parte inferior de la pantalla */
        transform: translate(-50%, 0); 
    }
}
.menu-box a.option,
.menu-box a.cancel {
    display: block;
    padding: 10px 0;
    color: rgb(15,20,25);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}
.menu-box a.option:hover {
    color: #FF5E8C;
}
a.cancel {
    border:1px solid rgb(207, 217, 222);
    border-radius: 30px;
    text-align: center;
    padding: 13px 0px;
    margin-top: 10px;
    cursor: pointer;
}
/*END MENUS EMERGENTES STYLE GENERAL*/
/*PROFILE*/
.content-profile ul li{
    text-align: center;

    padding: 4px 0px;
}
.content-profile ul{
    margin-bottom: 15px;
}
.content-profile ul li h1{
    font-size: 24px;
    font-weight: 500;
}
.content-profile ul li a.profile-lvl{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #f4f4f4;
    margin: 0px auto;
    background: #e7e7e7;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-profile ul li a.profile-lvl svg{
    width: 64px;
    height:64px;
}
.content-profile ul li.pl-rank{
    font-size: 10px;
    color: #999;
    font-weight: 500;
}
.content-profile ul li.pl-rank a{
    color: #999;
    text-decoration: underline;
}
.content-profile ul li.pl-data02{
    font-size: 13px;
    font-weight: 300;
}
.pl-subtitle{
    padding: 10px 12px;
}
.pl-subtitle span{
    padding: 10px 12px;
    border-bottom: 3px solid #FA547E;
    display: inline-block;
}

/* /END PROFILE */
/* /END SEARCH */
.cont-find{
    margin-right: 5px;
    margin-left: 5px;
}
.dsearch{
    position: relative;
}
.dsearch svg.isearch{
    width: 13px ;
    height: 13px ;
    fill: #555 ;
    position: absolute ;
    left: 14px ;
    top: 50% ;
    transform: translateY(-50%) ;
    pointer-events: none ;
    z-index: 3 ;
}
.dsearch input{
    display: block ;
    width: 100% ;
    padding: 9px 13px 9px 34px;
    margin: 0 ;
    border-radius: 20px ;
    background-color: #F3F5F7 ;
    font-size: 14px ;
    box-sizing: border-box ;
    position: relative ;
    z-index: 2 ;
    outline: none ;
    box-shadow: none;
    border: none;    
}
.titleresultb{
    text-align: center;
    padding-top: 24px;
}
.titleresultb h2{
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
}
.titleresultb p{
    max-width: 700px;
    margin-right: auto;
    margin-bottom: 12px;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
    color: #b1b0bb;
    text-align: center;
    margin-top: 5px;
}
.noresultb{
    text-align: center;
}
/* /END SEARCH */
/*historial de mejoras*/
.historial-toggle-box a,
.icount-comments a{
    font-size: 12px;
    color: #7f8c8d;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f4f4f4;
    padding: 9px 10px;
    border-radius: 20px;
    margin-left: 4px;
}
.historial-toggle-box a svg,
.icount-comments a svg{
    width: 15px;
    height: 15px;
}
.historial-toggle-box a svg{
    stroke: #787c7e;
}
.icount-comments a svg{
    fill: #787c7e ;
}
.dvlink-secondary a{
    background: #f4f4f4;
    border-radius: 20px;
    color: #666666;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
}