@charset "utf-8";
/* CSS Document */

.opacity
{
	position: absolute;
	top: 0px; right: 0px;
	bottom: 0px; left: 0px;
	opacity: 0.5;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	filter: alpha(opacity=5);
	z-index: 1;
}

@font-face
{
   font-family: 'Lucida Handwriting';
   src: url('../lhandw.woff2') format('woff2'),
        url('../lhandw.ttf') format('truetype');
   font-display: swap;
}

.bar-top
{
	position: absolute;
	left: 0px; top: 0px;
	right: 0px; height: 50px;
	background-color:#ffffff;
	z-index: 5;
}

.banner
{
	position: absolute;
	top: 10px; left: 30px;
	font-family: 'Lucida Handwriting';
	font-size: 22px;
	color:#3a3a3a;
	cursor: pointer;
	z-index: -1;
}

.title
{
	position: absolute;
	top: 13px; left: 0px;
	right: 0px;
	text-align: center;
	color:#3a3a3a;
	z-index: -1;
}
.fixed-ptt
{
	position: absolute;
	bottom: 10px;
	left: 42%; right: 15px;
}
.mobile-ptt
{
	position: absolute;
	bottom: 10px;
	left: 75px; right: 75px;
}

.bar-bottom
{
	position: absolute;
	text-align: center;
	left: 0px; bottom: 0px;
	right: 0px; height: 50px;
	background-color:#ffffff;
	z-index: 5;
}

.nH
{
	position: absolute;
    left: 10px; bottom: -8px;
	width: 5px; height: 5px;
	-moz-box-shadow:inset 0px 0px 0px 0px #f5978e;
	-webkit-box-shadow:inset 0px 0px 0px 0px #f5978e;
	box-shadow:inset 0px 0px 0px 0px #f5978e;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
	background-color:#f24537;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	display: none;
}

.p-title
{
	position: relative;
	padding: 15px 50px;
	text-align: center;
}

.p-menu
{
	position: relative;
}

.p-menu a
{
	display:inline-block;
	text-align: center;
	width: 100%;
	padding: 15px 0px;
	cursor: pointer;
}

#box
{
	position: absolute;
	top: 0px; left: 0px;
	bottom: 0px; right: 0px;
	z-index: 99;
}

#box .bo
{
	position: absolute;
	top: 0px; right: 0px;
	bottom: 0px; left: 0px;
}

#box .cont
{
	position: absolute;
	left: 3px;
	bottom: -100%; right: 3px;
	background-color: #FFFFFF;
	-moz-border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
	z-index: 1;
}

#box .cont .close
{
	position: absolute;
	top: 15px; right: 15px;
	width: 20px; height: 20px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 60% 60%;
	background-image: url(../icos/close.svg);
	background-color: #D0D0D0;
	cursor: pointer;
	z-index: 2;
}

#mod
{
	position: absolute;
	top: 0px; left: 0px;
	bottom: 0px; right: 0px;
	z-index: 99;
}

#mod .bo
{
	position: absolute;
	top: 0px; right: 0px;
	bottom: 0px; left: 0px;
}

#mod .cont
{
	position: fixed;
    left: 50%; top: 45%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	background-color: #FFFFFF;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
	z-index: 1;
}
#mod .fixed-wid
{
	width: 500px;
}
#mod .mobile-wid
{
	width: 90%;
}

#mod .cont .close
{
	position: absolute;
	top: 15px; right: 15px;
	width: 20px; height: 20px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 60% 60%;
	background-image: url(../icos/close.svg);
	background-color: #D0D0D0;
	cursor: pointer;
	z-index: 2;
}

.can
{
	display:inline-block;
	color: #949494;
	text-align: center;
	width: 100%;
	padding: 15px 0px;
}

.ace
{
	display:inline-block;
	color: #4fa6f8;
	text-align: center;
	width: 100%;
	padding: 15px 0px;
	cursor: pointer;
}

.del
{
	display:inline-block;
	color: #dc143c;
	text-align: center;
	width: 100%;
	padding: 15px 0px;
	cursor: pointer;
}

.pos-m-a
{
	position: absolute;
	left: 0px; top: 12px;
	right: 0px;
	display: flex;
}

.pos-m-b a
{
	margin-right: 40px;
	cursor: pointer;
}

.pos-m-a .ip
{
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image:url(../icos/user.jpg);
}

.pos-logo
{
	position: absolute;
	left: 42%; top: 6px;
}

.pos-m-b
{
	position: absolute;
	right: 0px; top: 12px;
	text-align: right;
}

.menu a
{
	position: relative;
	vertical-align: top;
	height: 26px;
	width: 26px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	display:inline-block;
	cursor: pointer;
}

.nN
{
	position: absolute;
    left: 15px; top: -5px;
	-moz-box-shadow:inset 0px 0px 0px 0px #f5978e;
	-webkit-box-shadow:inset 0px 0px 0px 0px #f5978e;
	box-shadow:inset 0px 0px 0px 0px #f5978e;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
	background-color:#f24537;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	cursor:pointer;
	color:#ffffff;
	padding:2px 3px;
	font-size: 11px;
	display: none;
	z-index: 2;
}


a.none:link
{
   text-decoration: none;
   color: #336699;
}
a.link:link
{
   text-decoration: none;
   color: #336699;
}
a.link:visited
{
   text-decoration: none;
   color: #336699;
}
a.link:active
{
   text-decoration: none;
   color: #336699;
}
a.link:hover
{
   text-decoration: underline;
   color: #336699;
   cursor: pointer;
}

.text-a
{
	font-size: 18px;
}

.text-b
{
	font-size: 15px;
}

.text-c
{
	font-size: 13px;
}

.wg
{
	font-weight: 600;
}

.og
{
	opacity: 0.5;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	filter: alpha(opacity=5);
}

/* Alert */
#alert
{
	position: absolute;
	top: -50px; left: 0px;
	right: 0px;
	z-index: 3;
	background-color: #FFFFFF;
	cursor: pointer;
}

.fixed-alt
{
	margin: 0 20%;
}

.error
{
	position: relative;
	padding: 15px 20px;
}

/*ads*/
.rand
{
	position: relative;
	display: block;
	padding: 15px 10px;
	z-index: 1;
}

.rand-imge
{
	overflow: hidden;
	float: left;
	width: 40px; height: 40px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin-right: 15px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image:url(../icos/user.jpg);
	cursor: pointer;
}

.rand-left img
{
	width: 100%;
	height: 100%;
}

.rand-table
{
	position: relative;
	height: 40px;
	display: table;
	margin-right: 50px;
}

.rand-middle
{
	display: table-cell;
	vertical-align: middle;
}
.rand-pos
{
	position: absolute;
	right: 0px; top: 18px;
}

/* Notifications */
.note
{
	position: relative;
	display: block;
	padding: 15px 20px;
	cursor: pointer;
}

.n-int
{
	position: relative;
}

.n-int-imge
{
	overflow: hidden;
	float: left;
	width: 40px; height: 40px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin-right: 15px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image:url(../icos/user.jpg);
}

.n-int-left img
{
	width: 100%;
	height: 100%;
}

.n-int-table
{
	position: relative;
	height: 40px;
	display: table;
	margin-right: 50px;
}

.n-int-middle
{
	display: table-cell;
	vertical-align: middle;
}

.i-mb
{
	position: relative;
	width: 200px;
	text-overflow: ellipsis;
	white-space: nowrap; 
	overflow: hidden;
}

.i-dc
{
	position:absolute;
	top: 15px; right: 15px;
}

.n-reques
{
	position: relative;
	width: 250px;
	display: flex;
	margin: 10px 15px;
}

.n-cl
{
	position: absolute;
	top: 10px; right: 15px;
	width: 50px; height: 50px;
}

.n-cl .ig
{
	box-shadow: inset 0 0 0 1px #FFF;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color:#EBEBEB;
}

/* Search */
.s-ico 
{
	position: absolute;
	top: 13px; left: 15px; 
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	width: 25px; height: 25px;
	cursor: pointer;
}
.fixed-psi
{
	position: absolute;
	top: 13px; left: 42%;
}
.mobile-psi
{
	position: absolute;
	top: 13px; left: 15px;
}

.s-text
{
	padding: 8px 12px;
	border: 0;
	outline: none;
	resize: none;
}
.fixed-stx
{
	position: absolute;
	bottom: 10px;
	left: 42%; right: 15px;
}
.mobile-stx
{
	position: absolute;
	bottom: 10px;
	left: 15px; right: 15px;
}

/* Alert */
.t-user
{
	position: relative;
	padding: 10px 25px;
}

.t-imga
{
	float: left;
	width: 30px; height: 30px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image:url(../icos/user.jpg);
	margin-right: 8px;
}

.t-user-table
{
	position: relative;
	height: 30px;
	display: table;
}

.t-user-middle
{
	display: table-cell;
	vertical-align: middle;
}

.myButton1 {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color:#4fa6f8;
	display:inline-block;
	color:#ffffff;
	font-size:13px;
	text-align: center;
	padding:8px 16px;
	text-decoration:none;
	margin-right: 5px;
	cursor: pointer;
}

.myButton0 {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #EBEBEB;
	display:inline-block;
	color:#666666;
	font-size:13px;
	text-align: center;
	padding:8px 16px;
	text-decoration:none;;
	margin-right: 5px;
	cursor: pointer;
}

/* LOADING */
.start
{
	position: absolute;
	left: 0px; top: 0px;
	right: 0px; bottom: 0px;
	font-family: 'Lucida Handwriting';
	font-size: 300%;
	color: #4fa6f8;
	background-color:#ffffff;
	display:flex;
    justify-content: center;
    align-items: center;
	z-index: 2;
}

.loading {
	position: relative;
	display: grid;
	width: 100%;
	padding: 30px 0;
}

.loading .spinner {
	position:  relative;
	width: 50px;
	height: 50px;
	margin: 0 auto;
}

.k-rel
{
	position: relative;
	padding: 15px 15px 15px 50px;
}

.k-pos .spinner
{
	position: absolute;
	left: 20px; top: 14px;
	width: 24px;
	height: 24px;
}

.k-ok
{
	position: absolute;
	left: 20px; top: 12px;
	width: 20px; height: 20px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 110% 110%;
	background-image: url(../icos/okb.svg);
	z-index: 1;
}

.spinner {
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,#949494 94%,#0000) top/2px 2px no-repeat,
    conic-gradient(#0000 30%,#949494);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 2px),#000 0);
  animation:s3 0.5s infinite linear;
}

@keyframes s3{ 
  100%{transform: rotate(1turn)}
}
/* BRINTAGE 2026 - barras y modales */
.bar-top,.bar-bottom{background:rgba(255,255,255,.86)!important;border-color:#e5edf6!important;box-shadow:0 8px 28px rgba(15,23,42,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.bar-top{border-bottom:1px solid #e5edf6;}
.bar-bottom{border-top:1px solid #e5edf6;}
.banner{color:#2f7df6!important;text-shadow:0 6px 18px rgba(47,125,246,.12);}
.title{color:#172033!important;font-weight:650;}
#box .cont,#mod .cont{border:1px solid rgba(226,232,240,.95);border-radius:22px!important;box-shadow:0 20px 55px rgba(15,23,42,.16);background:rgba(255,255,255,.96)!important;}
#box .cont{border-radius:24px 24px 0 0!important;}
#box .cont .close,#mod .cont .close{background-color:#eef3f9!important;box-shadow:0 4px 12px rgba(15,23,42,.08);}
.p-menu a,.can{color:#4b5565!important;}
.p-title{font-weight:650;color:#172033!important;}
.opacity{background:rgba(15,23,42,.42)!important;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}

/* BRINTAGE DESKTOP: barras superior e inferior con el mismo lenguaje */
@media (min-width: 769px){
  .bar-top,.bar-bottom{
    left:3%!important;
    right:3%!important;
    width:auto!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid #e5edf6!important;
    box-shadow:0 8px 28px rgba(15,23,42,.06)!important;
    overflow:hidden!important;
  }
  .bar-top{top:0!important;}
  .bar-bottom{bottom:10px!important;}
}

/* Mensajes: header con buscador adentro y con aire */
#messages .bar-top,#chat .bar-top{height:92px!important;}
#messages .fixed-ptt,#chat .fixed-ptt{bottom:54px!important;}
#messages .mobile-ptt,#chat .mobile-ptt{bottom:54px!important;}
#messages .fixed-stx,#chat .fixed-stx{left:42%!important;right:18px!important;bottom:10px!important;top:auto!important;box-sizing:border-box!important;}
#messages .mobile-stx,#chat .mobile-stx{left:15px!important;right:15px!important;bottom:10px!important;top:auto!important;box-sizing:border-box!important;}
#messages .s-text,#chat .s-text{height:42px!important;width:100%!important;box-sizing:border-box!important;}

/* ==========================================================
   BRINTAGE 2026 - cabecera móvil proporcional
   El logo y el menú comparten el ancho real disponible para
   evitar superposiciones en teléfonos angostos.
   ========================================================== */
@media (max-width:768px){
  body.bt-home #bop.bar-top,
  body.bt-profile #bop.bar-top{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding-left:20px!important;
    padding-right:20px!important;
    padding-left:clamp(20px,8.333vw,30px)!important;
    padding-right:clamp(20px,8.333vw,30px)!important;
    box-sizing:border-box!important;
  }

  body.bt-home #bop .banner,
  body.bt-profile #bop .banner{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:auto!important;
    margin:0!important;
    font-size:22px!important;
    line-height:1.35!important;
    white-space:nowrap!important;
    overflow:visible!important;
    flex:0 0 auto!important;
    z-index:0!important;
  }

  body.bt-home #bop .pos-m-b.menu,
  body.bt-profile #bop .pos-m-b.menu{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:0!important;
    width:auto!important;
    max-width:none!important;
    min-width:21px!important;
    margin:0 0 0 10px!important;
    flex:0 0 auto!important;
  }

  body.bt-home #bop .pos-m-b.menu.home-actions{
    width:158px!important;
    max-width:158px!important;
    min-width:63px!important;
    justify-content:space-between!important;
    flex:1 1 158px!important;
  }

  body.bt-home #bop .pos-m-b.menu a,
  body.bt-profile #bop .pos-m-b.menu a{
    width:21px!important;
    height:21px!important;
    width:clamp(21px,7vw,26px)!important;
    height:clamp(21px,7vw,26px)!important;
    margin:0!important;
    flex:0 0 auto!important;
  }

  body.bt-home #bop .pos-m-b.menu a + a,
  body.bt-profile #bop .pos-m-b.menu a + a{
    margin-left:0!important;
  }
}