/*
**
** BeautyAdmin v1.1
** 
*******************************/

/* === General === */
body {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 13px;
	/*color: #333333;*/
	background-color: #3F3F3F;
        background-image: url("assets/image/logocasmt.png");
        background-position: 10px 15px;
        background-repeat: no-repeat;
        /*padding-top: 30px;*/
}
.contentWrapper { background-color: #ffffff; padding: 0; }
a { outline: 0 !important; }

h1 {font-size: 1.5em; }
h2 {font: 1.5em "Open Sans", "Times New Roman", serif;
	letter-spacing: 1px;
}
h3 {
	font: bold 1em "Open Sans", Arial, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
}
h4 {
	font: bold 1.1em "Open Sans", "Times New Roman", serif;
	letter-spacing: 1px;
	color: #797979;
	font-weight: 300;
	font-size: 16px
}
a { color: #595959 /*05a1dc Color texto "Olvido su contraseña"*/ }
hr { margin: 0px 0px 10px 0px; }
select { border-color: #bbbbbb/*E0C47D Borde input combobox*/; }

.pagination ul {
	-webkit-box-shadow: 0 1px 2px rgba(224, 196, 125, 0.05);
	-moz-box-shadow: 0 1px 2px rgba(224, 196, 125, 0.05);
	box-shadow: 0 1px 2px rgba(224, 196, 125, 0.5);
}
.pagination ul > li > a, .pagination ul > li > span { border-color: #FF0000; }
.pagination ul > li > a:hover { background: #FFFCF4; }
.pagination a { color: #FF0000; }
.pagination ul > .active > a:hover,
.pagination ul > .active > a, .pagination ul > .active > span { 
	color: #FF0000;
	background-color: #FF0000;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFE097), to(#F2D389) );
	background-image: -webkit-linear-gradient(top, #FF0000, #F2D389);
	background-image: -moz-linear-gradient(top, #FF0000, #F2D389);
	background-image: -ms-linear-gradient(top, #FFE097, #F2D389);
	background-image: -o-linear-gradient(top, #FFE097, #F2D389);
	background-image: linear-gradient(top, #ffffff, #F2D389);	
}
.pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover { color: #FF0000; }

.login {
	padding-top: 140px;
	background-color:#FFFFFF; /*#fcecc4; Color de Fondo en el Login*/
}

.label-inverse {
	font-weight: normal;
	font-size: 11px;
	margin-left: 2px;
}

p.lead {
	margin-top: -18px;
	text-indent:2px;
	font-size: 18px;
	padding-bottom: 0px;
	margin-bottom: 10px;
	color: #797979
}

.well {
	background-color: #fffcf4;
	border: 1px solid #F8AAAF; /*eeddb1; Color Borde formulario*/
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	color: #969696; /*a69971;                                          Color texto labels*/
	font-size: 13px;
        /*padding-left: 5px; Margen pad de los labels Titulo, cuadro de texto Buscar etc*/ 
}
.well-footer-support { color: #b1a483; margin: 20px 0 0; }

/* === Header Section === */
.top-line {
	height: 48px;
	line-height: 45px;
	background-color: #3f3f3f;
	font-size: 13px;
	color: #858484
}

.top-line .btn {
	margin-top: 0;
}

.login .top-line .container {
	text-align: center;
}

.top-line .brand {
	float: none;
	font-size: 24px;
	font-weight: 600;
	color: #FF0000; /*f9d064;*/
	text-shadow: 0 1px 0 #000;
	padding: 0;
	margin: 0 !important;
}

.brand strong {
	font-weight: 600;
	color: #FF0000; /*e8d29a*/
}

a.account-type {
	color: #f7bf3d;
}

/* Navbar Blue*/
.navbar-blue {
	color: #999999;
	margin-top: 48px;
	height: 41px;
	z-index: 1000;
}
.btn-lang { text-align: left; }
.btn-lang > a { display: inline-block; }
.btn-lang .caret { vertical-align: middle; margin-left: 5px; border-top-color: #fff; }
.dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: #fff; text-shadow: none; }

.navbar-blue .navbar-inner {
	background-color: #bddef9;
	height: 41px;
	background-image: url("img/bg_navbar-blue.jpg");
	background-repeat: repeat-x;
	filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
	border-color: #317fbd;
}

.navbar-blue .brand,.navbar-blue .nav>li>a {
	color: #317fbd;
	font-weight: 600;
	font-size: 14px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
	padding-right: 20px;
	padding-left: 20px;
}

.navbar-blue .brand:hover,.navbar-blue .nav>li>a:hover {
	color: #ffffff;
}

.navbar-blue .nav>li>a:focus,.navbar-blue .nav>li>a:hover {
	background-color: #d3e9fb;
	color: #317fbd;
}

.navbar-blue .nav .active>a,.navbar-blue .nav .active>a:hover,.navbar-blue .nav .active>a:focus
	{
	color: #ffffff;
	background-color: #5b9ccf;
	text-shadow: 0 1px 0 rgba(49, 127, 189, 1);
}

.navbar-blue .navbar-link {
	color: #999999;
}

.navbar-blue .navbar-link:hover {
	color: #ffffff;
}
.navbar-blue .nav li.dropdown.open>.dropdown-toggle,.navbar-blue .nav li.dropdown.active>.dropdown-toggle,.navbar-blue .nav li.dropdown.open.active>.dropdown-toggle
	{
	color: #ffffff;
	background-color: #5b9ccf;
	text-shadow: 0 1px 0 rgba(49, 127, 189, 1);
}

.navbar-blue .nav li.dropdown>.dropdown-toggle .caret {
	border-top-color: #317fbd;
	border-bottom-color: #317fbd;
	vertical-align: middle;
	margin: 0 0 0 5px;
}

.navbar-blue .nav li.dropdown.open>.dropdown-toggle .caret,.navbar-blue .nav li.dropdown.active>.dropdown-toggle .caret,.navbar-blue .nav li.dropdown.open.active>.dropdown-toggle .caret
	{
	border-top-color: #ffffff;
	border-bottom-color: #ffffff;
}

.navbar-blue .navbar-search .search-query {
	color: #ffffff;
	background-color: #ffffff;
	border-color: #bddef9;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0
		rgba(255, 255, 255, 0.15);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0
		rgba(255, 255, 255, 0.15);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0
		rgba(255, 255, 255, 0.15);
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
}

.navbar-blue .navbar-search .search-query:-moz-placeholder {
	color: #cccccc;
}

.navbar-blue .navbar-search .search-query:-ms-input-placeholder {
	color: #cccccc;
}

.navbar-blue .navbar-search .search-query::-webkit-input-placeholder {
	color: #cccccc;
}

.navbar-blue .navbar-search .search-query:focus,.navbar-blue .navbar-search .search-query.focused
	{
	padding: 5px 15px;
	color: #333333;
	text-shadow: 0 1px 0 #ffffff;
	background-color: #ffffff;
	border: 0;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
	outline: 0;
}

.navbar-blue .btn-navbar {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5b9ccf;
	background-image: -moz-linear-gradient(top, #8bbfef, #a6d2f7);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8bbfef),
		to(#a6d2f7) );
	background-image: -webkit-linear-gradient(top, #8bbfef, #a6d2f7);
	background-image: -o-linear-gradient(top, #8bbfef, #a6d2f7);
	background-image: linear-gradient(to bottom, #8bbfef, #a6d2f7);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8bbfef',
		endColorstr='#ffa6d2f7', GradientType=0 );
	border-color: #a6d2f7 #a6d2f7 #5faff1;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	*background-color: #a6d2f7;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=  false );
}

.navbar-blue .btn-navbar:hover,.navbar-blue .btn-navbar:active,.navbar-blue .btn-navbar.active,.navbar-blue .btn-navbar.disabled,.navbar-blue .btn-navbar[disabled]
	{
	color: #ffffff;
	background-color: #a6d2f7;
	*background-color: #8ec7f5;
}

.navbar-blue .btn-navbar:active,.navbar-blue .btn-navbar.active {
	background-color: #77bbf3 \9;
}

/* Navbar Blue Divider */
.navbar-blue .divider-vertical {
	height: 40px;
	margin: 0;
	border-left: 1px solid #61a8e1;
	border-right: 1px solid #ffffff;
}

/* Navbar Blue Divider */
.divider-topline {
	display: inline-block;
	margin: 0 10px;
	vertical-align: middle;
	height: 30px;
	border-left: 1px solid #1f1f1f;
	border-right: 1px solid #656565;
}

.toplinks {
	position: relative;
	display: inline;
	padding: 6px 10px 6px 10px;
	vertical-align: middle;
	color: #797979;
}
.toplinks a { color: #797979; }

.toplinks:hover {
	background-color: #000000;
	cursor: pointer;
	width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}



/* === Main Section === */

/* Login  */
.login form {
	width: 250px;
	float: none;
	margin: 0 auto;
	
}




.login form legend {
	
	background-color:#595959; /*f7bf3d;*/
	background-image: -webkit-linear-gradient(top, #FF0000, #595959);
	background-image: -moz-linear-gradient(top, #FF0000, #595959);
	background-image: -ms-linear-gradient(top, #FF0000, #595959);
	background-image: -o-linear-gradient(top, #FF0000, #595959);
	background-image: linear-gradient(to bottom, #cccccc, #595959); /*Color fondo "Acceder" en el LOGIN*/
-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	width:290px;
	margin-top:-20px;
	padding-right:0;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-indent:5px;
		border-bottom: 1px solid #595959;/*b28848;*/
		text-align:center;
		
	
	}


.login .footer img {margin-top:50px;}
/* Login input */

.login .well .signin {
	text-align: center;
	background: none;
	margin: 0;
	padding: 2px 0px 0px 0px;
}

.login button {
	margin-bottom: 6px;
}

.login .control-group {
	background-image: url("img/login-border-dotted.png");
	background-position: bottom;
	background-repeat: no-repeat;
	padding-bottom: 4px;
}

/* Overview */
.divider-dotted {
	display: block;
	margin: 6px 0px 6px 0px;
	background-image: url("img/login-border-dotted.png");
	background-position: bottom;
	background-repeat: no-repeat;
	padding-bottom: 4px;
}

.well .info {
	display: block;
	font-size: 13px;
	color: #FF0000; /*763d00;*/
	line-height: 16px;
}

.overview .nav li {
	text-indent: 6px;
}

.nav {
	margin-bottom: 10px;
}
.nav-dotted li { border-bottom: 1px dotted #b3a478; padding: 5px 0 10px; }
.nav-dotted li.nodots { border: none; padding: 10px 0 0; }
.nav-orders li { padding: 10px 0; }
.nav-orders > li > a.btn-details:hover { background-color: #FF0000;/*F2D389;*/ }
.nav-orders .btn-details { margin: 5px 0 0; }
.nav-collapse, .nav-collapse.collapse { z-index: 2; }

.nav .view {
	padding-top: 6px;
	font-size: 12px;
}

/* Site Pages */
.site-pages {
	display: block;
	text-decoration: none;
	text-align: center;
	height: 110px;
	margin-top: 10px;
}
.site-pages:nth-child(7n+7) { margin-left: 0; }

.site-pages a {
	color: #763d00;
	text-decoration: none;
	display: block;
}

.site-pages span {
	clear: both;
	margin-bottom: 5px;
	display: block;
}
.site-pages .btn-block .btn-block-txt { vertical-align: middle; display: inline-block; font-size: 15pt; }
.site-pages .btn-block { margin: 0; line-height: 51px; text-align: left; padding: 5px; }
.btn-add-page { margin: 12px 0px 25px 0px; }
.icon-site-pages { vertical-align: middle; }
h1 { margin: 10px 0 0; }
p.lead { margin: 0 0 10px; text-indent: 0; }

/* === Footer === */
.footer {
	min-height: 185px;
	margin: 0;
	font-size: 13px;
	font-style: italic;
	color: #797979
}

.footer .links {
	min-height: 145px;
	padding: 10px;
	border-top: 1px solid #e0c47d;
	background-color: #f9f5ea
}

.footer-icon {
	float: left;
	width: 129px;
	height: 82px;
	margin: 30px;
	background-image: url("img/icon_footer-hand.png");
}

.footer-links {
	list-style: none;
	margin-top: 20px;
}

.footer-links li {
	float: left;
	display: inline-block;
	width: 145px;
	font-weight: bold;
	color: #763d00;
	font-size: 14px;
	text-shadow: 0 2px 0 rgba(255, 255, 255, 1);
}

.footer-links li ul {
	margin: 8px 4px;
}

.footer-links li ul li {
	display: block;
	font-weight: normal;
	margin-bottom: 3px;
	font-size: 13px;
}

.footer .copy {
	height: 40px;
	background-color: #3f3f3f;
	text-align: center;
	line-height: 40px;
	color: #858484
}
.footer .copy a { color: #fff; }

/* === Responsive Elements === */
@media ( max-width : 979px)
{
	.nav-collapse .dropdown-menu .nav-header {
		color: #e2f1fe;
		background-color: #76a2c5;
		float: left;
		margin: 10px;
	}
	.nav-collapse .dropdown-menu a {
		padding: 9px 15px;
		font-weight: normal;
		color: #8ebbdf;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	.nav-collapse .dropdown-menu a:hover {
		background-color: #e2f1fe
	}
	.navbar-blue .navbar-inner {
		padding: 0;
		margin: 0;
	}
	.navbar-blue  .navbar-inner {
		background-image: none;
		background-color: #bfdff9;
	}
	.navbar-blue {
		margin-top: -20px;
		margin-bottom: 0;
	}
	.nav-collapse {
		background-color: #bfdff9;
	}
	.navbar-blue {
		background: #000;
		margin-top: -20px;
	}
	.nav-collapse .nav>.divider-vertical {
		display: block;
		height: auto;
		margin-top: -2px;
		border: none;
		border-bottom: 1px solid #8ebbdf;
		border-top: 1px solid #e2f1fe;
	}
	.navbar .nav-collapse .nav {
		float: none;
		margin: 0;
		height: auto;
	}
}
@media ( min-width : 768px) and (max-width: 979px) {
	.login {
		margin-top: -20px;
		padding-top: 60px;
	}
	.login .top-line { margin-top:0px;}
	.top-menu >.top-line {
		margin-top: -90px;
		min-height: 20px;
		padding: 0 10px 0 10px;
	}
	.left-menu >.top-line,
	.right-menu >.top-line {
		margin-top: -48px;
		min-height: 20px;
		height: 48px;
		margin-bottom: 0;
	}
        
	.top-line .container {
		height: 0px;
	}
	.footer-icon {
		display: none
	}
	.footer ul.footer-links {
		width: 100%;
	}
	.tab-content {
		float: none;
		margin: 0;
		padding: 0;
	}
	.welcome {
		display: none;
	}
	.nav-tabs {
		width: 100%;
	}
	.tabs-left>.nav-tabs>li,.tabs-right>.nav-tabs>li {
		float: left;
		margin-right: 10px;
	}
	.tab-content {
		float: left;
	}
}

@media ( max-width : 767px)
{
	.login {
		margin-top: -30px;
		padding-top: 60px;
	}
	.login .top-line { margin-top:0px;}
	.login .footer img {
		display: none;
	}
	.top-menu >.top-line {
		margin-top: -90px;
		height: auto;
		padding: 0 10px 0 10px;
	}
        /*Agregue para mejorar header*/
        .top-line {
            height: 48px;
            line-height: 100px;
            font-size: 15px;
            margin-top: -90px;
        }
	.welcome {
		width: 100%;
		clear: both;
	}
	.top-line .pull-right {
		float: left;
	}
	.welcome {
		display: none;
	}
	.footer-icon {
		display: none
	}
	.footer .well {
		width: 90%;
	}
	.nav-tabs {
		width: 100%;
	}
	.tabs-left>.nav-tabs>li,.tabs-right>.nav-tabs>li {
		float: left;
		margin-right: 10px;
	}
	.tab-content {
		float: left;
	}
	.notes {
		display: none;
	}
}


/* === Other Elements === */

/* Form Elements */
.form-horizontal legend { margin-top:-18px;}
.well.form legend { margin-top: -18px; }
.input-append .add-on,.input-prepend .add-on {
	text-shadow: 0 1px 0 white;
	background-color: #fff; /*              Color fondo iconitos login*/
	border: 1px solid #bbbbbb;/*0000;/*8AAAF;/*e0c47d; Color borde iconos login*/
	width: 16px;
	height: 14px; /*Altura cuadrado iconitos login*/
	padding: 6px;
}

input[type=text]
{
    width:180px;
    height: 28px;
    padding: 3px;
    padding-left: 5px;
    border: 1px solid #bbbbbb;/*F8AAAF;/*e0c47d; Borde input login*/
    font-size: 13px;
    text-indent: 5px;
}

input[type=password] {
	width:180px;
	height: 28px;
	padding: 3px;
        padding-left: 5px;
	border: 1px solid #bbbbbb;/*F8AAAF;/*e0c47d; Borde input login*/
	font-size: 13px;
	text-indent: 5px;
}
.login-form .input { width: 85%; }

textarea {
	border: 1px solid #e0c47d;
}

.checkbox input {
	width: 30px;
}

legend {
	display: block;
	width: 100%;
	padding: 0 20px 0 0;
	margin: 0px 0px 20px -20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 40px;
	text-indent: 10px;
	color: #000000;
	
	border-bottom: 1px solid #f4e9c9;
}

.well .heading {
	display: block;
	width: 100%;
	padding: 0 40px 0 0;
	margin: 0px 0px 20px -20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 40px;
	text-indent: 10px;
	color: #763d00;
	border-bottom: 1px solid #f4e9c9;
	margin-top: -18px;
}
.well.compact .tab-content { background: #fff; margin: 0 -19px; padding: 20px; border-bottom: 1px solid #F4E9C9; float: none; width: auto; }
.well.compact .nav-tabs { margin: 0 -19px; padding-left: 10px; border-bottom: 1px solid #F4E9C9; width: auto; }
.well.compact .nav > li > a { color: #763D00; font-size: 14px; font-weight: 600; }
.well.compact .nav > li > a:hover { background-color: #763D00; color: #fff; }
.well.compact .nav-tabs > .active > a, 
.well.compact .nav-tabs > .active > a:hover { border-color: #F4E9C9; border-bottom-color: transparent; color: #763D00; background: #fff; }
.well.compact .nav-tabs > li > a:hover { border-color: #fff; }
.well.compact { padding-bottom: 9px; }
.well.compact h4 { margin-bottom: 0; }
.well .list { list-style: none; margin: 0 -19px; padding: 0; }
.well .list li { display: block; background: #fff; border-bottom: 1px solid #F4E9C9; line-height: 40px; padding: 0 10px; }
.well.compact .list.nav li { line-height: 20px; padding: 10px; }
.well .list li .count { float: right; font-size: 16pt; color: #763D00; }
.well .heading.glyphicons { padding: 0 0 0 35px; }
.well .heading.glyphicons i:before { color: #763D00; top: 8px; font-weight: normal; }

@media (max-width: 767px)
{
	.well input[type=text],
	.well input[type=password] { width: 86%; }
	.form-search input { width: 99%; }
	.form-search input,
	.form-search select { margin: 0 0 10px; }
}

/* Icons */
.icon-brown,.nav-tabs>.active>a>[class^="icon-"],.nav-tabs>.active>a>[class*=" icon-"],.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-blue .nav>.active>a>[class^="icon-"],.navbar-blue .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"]
	{
	background-image: url("img/glyphicons-halflings-brown-buttons.png");
}

.icon-blue-l,.nav-tabs>.active>a>[class^="icon-"],.nav-tabs>.active>a>[class*=" icon-"],.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-blue .nav>.active>a>[class^="icon-"],.navbar-blue .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"]
	{
	background-image: url("img/glyphicons_halflings-blue-light.png");
}

.icon-gray,.nav-tabs>.active>a>[class^="icon-"],.nav-tabs>.active>a>[class*=" icon-"],.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-blue .nav>.active>a>[class^="icon-"],.navbar-blue .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"]
	{
	background-image: url("img/glyphicons_halflings-gray.png");
}

/* Icons Light Cream */
.icon-cream-w,.nav-tabs>.active>a>[class^="icon-"],.nav-tabs>.active>a>[class*=" icon-"],.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-blue .nav>.active>a>[class^="icon-"],.navbar-blue .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"]
	{
	background-image: url("img/glyphicons_halflings-cream-well.png");
}

/* White icons with optional class, or on hover/active states of certain elements */
.icon-cream,.nav-tabs>.active>a>[class^="icon-"],.nav-tabs>.active>a>[class*=" icon-"],.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-blue .nav>.active>a>[class^="icon-"],.navbar-blue .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"]
	{
	background-image: url("img/glyphicons-halflings-cream-light.png");
}

.icon-white-t,.nav-tabs>.active>a>[class^="icon-"],.nav-tabs>.active>a>[class*=" icon-"],.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-blue .nav>.active>a>[class^="icon-"],.navbar-blue .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"]
	{
	background-image:
		url("img/glyphicons-halflings-white-transparent.png");
}

.icon-cream.icon-user {
	background-position: 0 0;
}

.icon-cream.icon-password {
	background-position: -21px 0;
}

.icon-forgot {
	width: 21px;
	height: 20px;
	margin-right: 5px;
	background-image: url("img/icon-question-forgot.png");
	background-position: 0 0px
}



.icon-circles {
	width: 53px;
	height: 17px;
	margin-right: 15px;
	background-position: 0 0px
}

.icon-circles-reverse {
	width: 53px;
	height: 17px;
	margin-left: 15px;
	background-position: 0 0px
}


.icon-site-pages {
	width: 40px;
	height: 51px;
	background-image: url("img/icon_site-pages.png");
	background-position: 0 0px;
	margin: 5px;
}

/* BUTTON*/
.btn {
	color: #763d00;
	font-size: 13px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #ffe097;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffe097),
		to(#f2d389) );
	/*background-image: -webkit-linear-gradient(top, #DF3A01, #B43104);*/ /*Rojo*/
        background-image: -webkit-linear-gradient(top, #ffe097, #f2d389); /*Amarilllo*/
	background-image: -moz-linear-gradient(top, #ffe097, #f2d389);
	background-image: -ms-linear-gradient(top, #ffe097, #f2d389);
	background-image: -o-linear-gradient(top, #ffe097, #f2d389);
	background-image: linear-gradient(top, #ffe097, #f2d389);
	border: 1px solid #bbbbbb;
}
.btn2 {
	color: #000000;
	font-size: 13px;
        text-align: center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #ffe097;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffe097),
		to(#f2d389) );
	/*background-image: -webkit-linear-gradient(top, #DF3A01, #B43104);*/ /*Rojo*/
        background-image: -webkit-linear-gradient(top, #595959, #d3d3d3); /*Amarilllo*/
	background-image: -moz-linear-gradient(top, #ffe097, #f2d389);
	background-image: -ms-linear-gradient(top, #ffe097, #f2d389);
	background-image: -o-linear-gradient(top, #ffe097, #f2d389);
	background-image: linear-gradient(top, #ffe097, #f2d389);
	border: 1px solid #bbbbbb;
}

.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] {
	background: none;
	color: #763d00;
	background-color: #f2d389; /* Amarillos*/
}

.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b; /*Verde*/
	background-image: -moz-linear-gradient(top, #96ca5a, #85b949);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#96ca5a),
		to(#85b949) );
	background-image: -webkit-linear-gradient(top, #96ca5a, #85b949);
	background-image: -o-linear-gradient(top, #96ca5a, #85b949);
	background-image: linear-gradient(to bottom, #96ca5a, #85b949);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff96ca5a',
		endColorstr='#ff85b949', GradientType=0 );
	border-color: #7eb440;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	*background-color: #85b949;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=  false );
}

.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]
	{
	color: #ffffff;
	background-color: #85b949;
	*background-color: #85b949;
}

.btn-success:active,.btn-success.active {
	background-color: #85b949 \9;
}

.btn-primary {
	color: #ffffff;
	font-size: 13px;
	text-shadow: 0 1px 0 rgba(29, 81, 122, 1);
	background-color: #595959; /*79bdf3;*/
	background-image: -moz-linear-gradient(top, #595959, #595959);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#595959),
		to(#68abe2) );
	background-image: -webkit-linear-gradient(top, #595959, #595959);
	background-image: -o-linear-gradient(top, #595959, #595959);
	background-image: linear-gradient(to bottom, #888888, #595959);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff79bdf3',
		endColorstr='#ff51a351', GradientType=0 );
	border-color: #aaaaaa;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=  false );
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]
	{
	color: #ffffff;
	background-color: #595959; 
}

.btn-primary:active,.btn-primary.active {
	background-color: #595959;
}
.btn-primary2 {
	color: #ffffff;
	font-size: 13px;
	text-shadow: 0 1px 0 rgba(29, 81, 122, 1);
	background-color: #595959; /*79bdf3;*/
	background-image: -moz-linear-gradient(top, #595959, #595959);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#595959),
		to(#68abe2) );
	background-image: -webkit-linear-gradient(top, #595959, #595959);
	background-image: -o-linear-gradient(top, #595959, #595959);
	background-image: linear-gradient(to bottom, #595959, #595959);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff79bdf3',
		endColorstr='#ff51a351', GradientType=0 );
	border-color: #aaaaaa;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=  false );
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.btn-primary2:hover,.btn-primary2:active,.btn-primary2.active,.btn-primary2.disabled,.btn-primary2[disabled]
	{
	color: #ffffff;
	background-color: #595959; 
}

.btn-primary2:active,.btn-primary2.active {
	background-color: #595959;
}

.btn-danger {
	color: #ffffff;
	font-size: 13px;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #d96359;
	background-image: -moz-linear-gradient(top, #d96359, #c85248);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d96359),
		to(#c85248) );
	background-image: -webkit-linear-gradient(top, #d96359, #c85248);
	background-image: -o-linear-gradient(top, #d96359, #c85248);
	background-image: linear-gradient(to bottom, #d96359, #c85248);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd96359',
		endColorstr='#ffc85248', GradientType=0 );
	border-color: #c85248;
	*background-color: #c85248;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=  false );
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]
	{
	color: #ffffff;
	background-color: #d96359;
	*background-color: #d96359;
}

.btn-danger:active,.btn-danger.active {
	background-color: #d96359 \9;
}

/*  BREADCRUMB */
.breadcrumb {
	margin-top: 28px;
	margin-bottom:2px;
	
	font-size: 13px;
	height: 10px;
	padding: 4px 10px 14px 10px;
}

.breadcrumb > li > .divider { padding: 0; }
.breadcrumb .divider {
	display: inline-block;
	background-image: url("img/icon_breadcrumb-divider.png");
	vertical-align: middle;
	width: 17px;
	height: 10px;
	padding: 0px;
	margin: 0 4px 0 4px;
}

.google-visualization-table-div-page {
  margin: 10px 0 0 0 !important;
}
.google-visualization-table-div-page .a-d-e-h-g {
  padding: 0;
  border: none;
  margin: 0;
}
.google-visualization-table-div-page .a-d-e-f-g,
.google-visualization-table-div-page .a-d-e-h-g {
  border-style: none;
}
.google-visualization-table-div-page .a-d-e-o-q .a-d-e-h-g {
  border: none;
}
.google-visualization-table-div-page .a-d-e {
  background: none;
  margin-left: 5px;
}
.google-visualization-table-div-page .a-d-e.a-d-e-o-p {
  margin-left: 0;
}
.google-visualization-table-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #F4E9C9;
  border-left: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 10pt;
  background: none !important;
}
.google-visualization-table-table td,
.google-visualization-table-table .tableHeaderRow td {
  padding: 4px 10px;
  border: none;
  border-left: 1px solid #F4E9C9;
  border-top: 1px solid #F4E9C9;
  line-height: 20px;
}
.google-visualization-table-table .tableHeaderRow td {
  font-weight: 400;
  vertical-align: bottom;
  color: #763D00;
  text-align: center;
}
.google-visualization-table-table tbody tr:nth-child(odd) td,
.google-visualization-table-table tbody tr:nth-child(odd) td {
  background-color: rgba(255, 255, 255, 0.5);
  background-color: #FFFCF4;
}
.google-visualization-table-table .tableHeaderRow:first-child tr:first-child > td:first-child,
.google-visualization-table-table tbody:first-child tr:first-child > td:first-child {
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}
.google-visualization-table-table .tableHeaderRow:first-child tr:first-child > td:last-child,
.google-visualization-table-table tbody:first-child tr:first-child > td:last-child {
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
}
.google-visualization-table-table tbody:last-child tr:last-child > td:first-child {
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
}
.google-visualization-table-table tbody:last-child tr:last-child > td:last-child {
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
}
.google-visualization-table-table .tableHeaderRow:first-child tr:first-child td,
.google-visualization-table-table tbody:first-child tr:first-child td {
  border-top: 0;
}

/* Dropdown */
.open .arrow {
	display: none;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99999;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 0 0 0 -2px;
	list-style: none;
	background-color: white;
	border: 1px solid #a1cbf2;
	border-top: 2px solid #fff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 0px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	/* Links within the dropdown menu*/
}

.dropdown-menu a {
	color: #317fbd;
}

.dropdown-menu .divider {
	background-color: #d6edff;
}

.dropdown-menu .nav-header {
	color: #a1cbf2;
}

.navbar .nav>li>.dropdown-menu::before,.navbar .nav>li>.dropdown-menu::after
	{
	display: none;
}

.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a
	{
	background: #d6edff;
	color: #317fbd;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

/* LABELS */
.well .label {
	background-color: #bda770;
	/*padding: 25px 0;*/
	font-size: 11px;
	font-weight: normal
}

.well .label-success {
	background-color: #5c9f3e;
}

.well .label-inverse {
	background-color: #434343;
}

.well .label-important {
	background-color: #b23939;
}

/* Tables */
.table {
	border-color: #bbbbbb;
}

.table thead tr {
	color: #000000; /*#763d00; Color letra Titulos Tablas*/
	background-color: #CCCCCC; /*#ffe097;*/
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC),
		to(#595959) ); /* DEGRADE de FONDO EN TITULOS TABLAS*/
	background-image: -webkit-linear-gradient(top, #CCCCCC, #AAAAAA);
	background-image: -moz-linear-gradient(top, #CCCCCC, #AAAAAA);
	background-image: -ms-linear-gradient(top, #CCCCCC, #AAAAAA);
	background-image: -o-linear-gradient(top, #CCCCCC, #AAAAAA);
	background-image: linear-gradient(top, #CCCCCC, #AAAAAA);
}

.table thead tr th {
	font-size: 14px;
	font-weight: 600;
	border-right: 1px solid #595959; /*f8e4b4; // BORDE DERECHO DE CADA TITULO TABLA*/
	padding-top: 5px;
}

.table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th
	{
	background-color: #fffcf4;
}

.table-bordered th,.table-bordered td {
	border-left: 1px solid #bbbbbb; /*d6c08a; LINEAS VERTICALES TABLAS*/
	/* border:1px solid #d6c08a; */
}

.table th,.table td {
	font-size: 14px;
	border-top: 1px solid #bbbbbb; /*d6c08a; LINEAS HORIZONTALES TABLAS*/
	vertical-align: middle;
}
.table th.center,.table td.center { text-align: center; }

.table tbody tr td small,
.table tbody tr td small a {
	color: #cdbc89
}
.table tbody tr td small a { text-decoration: underline; }

.thumbnail.product { width: 50px; height: 50px; display: inline-block; vertical-align: middle; margin: 0 8px 0 0; border-color: #bbbbbb; background: #fff; }

/* Modals */
.modal {
	background-color: #f9f5ea;
	border: 1px solid #999;
	border: 1px solid rgba(0, 0, 0, .3);
	*border: 1px solid #999; /* IE6-7 */
	.
	border-radius
	(6px);
	.
	box-shadow
	(0
	3px
	7px
	rgba(0,0,0,0.3));
}

.modal-header {
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffe097),
		to(#f2d389) );
	background-image: -webkit-linear-gradient(top, #ffe097, #f2d389);
	background-image: -moz-linear-gradient(top, #ffe097, #f2d389);
	background-image: -ms-linear-gradient(top, #ffe097, #f2d389);
	background-image: -o-linear-gradient(top, #ffe097, #f2d389);
	background-image: linear-gradient(top, #ffe097, #f2d389);
	border-bottom: 1px solid #bbbbbb;
	height: 25px;
	color: #763d00;
	font-weight: 600;
	line-height: 25px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

.modal-header .close {
	font-size: 16px;
}

.modal-body {
	padding: 0px 0px 0px 20px;
	margin: 0px;
}

.modal-footer {
	border: none;
	background: none;
	box-shadow: none;
	margin: 0;
	padding: 10;
}

/* Tabs & Pills */
.tabs-left >.nav-tabs {
	border: 1px solid #d2bc87;
	background: #fffcf4;
	padding: 2px 0px 2px 2px;
}

.tabs-left > .nav-tabs a:hover {
	background: none;
	color: #763d00;
	padding-top: 9px;
	padding-bottom: 12px;
	line-height: 20px;
	border: none;
	margin-right: 1px;
	margin-bottom: 0;
}

.tabs-left > .nav-tabs .active {
	border: none;
}

.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover {
	width: auto;
	height: 23px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
	font-weight: 600;
	padding-top: 9px;
	padding-bottom: 7px;
	margin: 0 2px 0 0;
	color: #763d00;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #ffdf92;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffdf92), to(#f4d585) );
	background-image: -webkit-linear-gradient(top, #ffdf92, #f4d585);
	background-image: -moz-linear-gradient(top, #ffdf92, #f4d585);
	background-image: -ms-linear-gradient(top, #ffdf92, #f4d585);
	background-image: -o-linear-gradient(top, #ffdf92, #f4d585);
	background-image: linear-gradient(top, #ffdf92, #f4d585);
	border: 1px solid #bbbbbb;
}

/*******************************************************/

/* CSS 3D BUTTON */
.push_button {
	display: inline-block;
	padding: 2px 14px;
	position: relative;
	height: 24px;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	line-height: 24px;
	display: block;
	margin: 30px;
}

.push_button:before {
	background: #f0f0f0;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0),
		to(#f0f0f0) );
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
	position: absolute;
	content: "";
	z-index: -1;
}

.push_button:active {
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0
		rgba(255, 255, 255, .1) inset;
	top: 5px;
}

.push_button:active:before {
	top: -11px;
	bottom: -5px;
	content: "";
}

.top-line .icon-brown {
	margin: 2px 3px 0px -2px;
}

/* ORANGE on DARK GRAY */
.orange-on-dark {
	display: inline-block;
	margin: -3px 3px 0 3px;
	vertical-align: middle;
	text-shadow: 0px 1px 0 #fce7be;
	font-weight: bold;
	color: #763d00;
	background: #f7bf3d;
	text-transform: uppercase;
	border: 1px solid #fad888;
 	background-image: -webkit-linear-gradient(top, #f9d071, #f7bf3d);
	background-image: -moz-linear-gradient(top, #f9d071, #f7bf3d);
	background-image: -ms-linear-gradient(top, #f9d071, #f7bf3d);
	background-image: -o-linear-gradient(top, #f9d071, #f7bf3d);
	background-image: linear-gradient(to bottom, #f9d071, #f7bf3d);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0
		rgba(255, 255, 255, .1) inset, 0 4px 0 #c3921f, 0 4px 2px
		rgba(0, 0, 0, .5);
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0
		rgba(255, 255, 255, .1) inset, 0 4px 0 #c3921f, 0 4px 2px
		rgba(0, 0, 0, .5);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0
		rgba(255, 255, 255, .1) inset, 0 4px 0 #c3921f, 0 4px 2px
		rgba(0, 0, 0, .5);
}

.orange-on-dark:hover {
	background: #f8cb60;
	text-decoration: none;
	color: #763d00;
}


@media (max-width: 240px)
{
	.site-pages .btn-block .btn-block-txt { font-size: 10pt; line-height: 55px; }
}
.visible-phone-table,
.visible-phone-320-table,
.visible-phone-320-block,
.visible-phone-480-table { display: none; }
.hidden-phone-table,
.hidden-phone-320-table,
.hidden-phone-480-table { display: table; }
.hidden-phone-320-block { display: block; }
.tab-content { padding: 0; }

/* Gallery */
.tabs-arrow { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid #f2ecda; }
.tabs-arrow li { height: 39px; display: block; border-bottom: 1px solid #f2ecda; position: relative; z-index: 1; }
.tabs-arrow li a { display: block; position: relative; height: 38px; color: #cfb670; line-height: 38px; padding: 0 0 0 49px; text-decoration: none; border: 1px solid #f2ecda; border-bottom: none; border-top: none; }
.tabs-arrow .active { background: #d3bd84; margin-right: -20px; }
.tabs-arrow .active a {
	border: 1px solid #d3bd84;
	color: #763D00;
	background-color: #FFE097;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFE097), to(#F2D389) );
	background-image: -webkit-linear-gradient(top, #FFE097, #F2D389);
	background-image: -moz-linear-gradient(top, #FFE097, #F2D389);
	background-image: -ms-linear-gradient(top, #FFE097, #F2D389);
	background-image: -o-linear-gradient(top, #FFE097, #F2D389);
	background-image: linear-gradient(top, #FFE097, #F2D389);
	z-index: 2;
	font-weight: 600;
	height: 39px;
	top: -1px;
}
.tabs-arrow .active a:after {
	position: absolute;
	width: 0;
	height: 0;
	z-index: 3;
	border-width: 21px;
	border-color: #fff #fff #fff transparent;
	border-style: solid;
	border-right-width: 0;
	display: block;
	content: "";
	right: -1px;
	top: -1px;
	z-index: 2;
}
.tabs-arrow .active a:before {
	display: block;
	content: "";
	border-width: 20px;
	border-color: #d3bd84 #d3bd84 #d3bd84 transparent;
	border-style: solid;
	border-right-width: 0;
	right: 0px;
	top: 0;
	position: absolute;
	z-index: 1;
}
.tabs-arrow li a i:before {
	width: 22px;
	height: 17px;
	background: #fbf1d6;
	border: 1px solid #dccb9a;
	-webkit-box-shadow: inset 0 0 0 1px #fff;
	-moz-box-shadow: inset 0 0 0 1px #fff;
	-ms-box-shadow: inset 0 0 0 1px #fff;
	-o-box-shadow: inset 0 0 0 1px #fff;
	box-shadow: inset 0 0 0 1px #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 12px;
	color: #d8c58e;
	text-shadow: 0 1px 0 #fff;
	text-align: center;
	padding: 5px 0 0;
	top: 7px;
	left: 7px;
}
.tabs-arrow .active a i:before {
	background: #974820;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	-webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
	-moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
	-ms-box-shadow: inset 1px 1px 3px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
	-o-box-shadow: inset 1px 1px 3px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
	box-shadow: inset 1px 1px 3px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
	border: 0;
	left: 8px;
	top: 8px;
}
.albums .btn { margin: 0 0 10px; }
.gallery .media { margin-top: 0; overflow: visible; margin-bottom: 20px; }
.gallery .media ul { margin: 0; padding: 0; list-style: none; overflow: visible; }
.gallery .media ul li { margin-bottom: 15px; }
.gallery .media ul li:nth-child(6n+7) { margin-left: 0; }
.gallery .media ul li .thumb {
	border: 1px solid #d3bd84;
	color: #763D00;
	background-color: #FFE097;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFE097), to(#F2D389) );
	background-image: -webkit-linear-gradient(top, #FFE097, #F2D389);
	background-image: -moz-linear-gradient(top, #FFE097, #F2D389);
	background-image: -ms-linear-gradient(top, #FFE097, #F2D389);
	background-image: -o-linear-gradient(top, #FFE097, #F2D389);
	background-image: linear-gradient(top, #FFE097, #F2D389);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
	-moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
	-ms-box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
	-o-box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
	padding: 6px;
	text-align: center;
	cursor: pointer;
	position: relative;
	display: block;
}
.albums .circle_remove,
.gallery .media .circle_remove { 
	position: absolute; top: -10px; right: -10px; z-index: 3; padding: 0; background: #ffe199; width: 18px; height: 18px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.albums .circle_remove { 
	right: 25px; top: 10px; cursor: pointer; display: none;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.albums .active .circle_remove { display: block; }
.albums .active .tooltip { opacity: 1; filter: alpha(opacity=100); }
.albums .active .tooltip-inner { 
	background: #974820;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
	-ms-box-shadow: inset 1px 1px 1px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
	-o-box-shadow: inset 1px 1px 1px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
	box-shadow: inset 1px 1px 1px rgba(0,0,0,.5), 1px 1px 0 rgba(255,255,255,.5);
}
.albums .active .tooltip-arrow { border-left-color: #974820; }
.albums .circle_remove i:before,
.gallery .media .circle_remove i:before { top: 0; left: 0; font-size: 18px; color: #763d00; }
.albums .circle_remove i:before { color: #974820; }
.gallery .media span { display: inline-block; }
.gallery .media .hide { display: none; }
.gallery .media .name { padding: 9px 0 4px; }
.gallery .media .image { border: 1px solid rgba(255,255,255,.5); max-width: 110px; max-height: 112px; position: relative; overflow: hidden; }
.gallery .media .image .hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(118,61,0,.7); display: none; vertical-align: middle; text-align: center; }
.gallery .media .image .hover span { padding: 0; color: #caac7d; font-size: 12px; text-shadow: none; vertical-align: middle; display: table-cell; }
.gallery .media .image .hover span i:before { color: #caac7d; position: relative; top: -2px; left: auto; font-size: 14px; vertical-align: middle; margin-right: 4px; }
.gallery .media .image .hover.active,
.gallery .media li:hover .image .hover { display: block; }

.separator { padding: 10px 0; }
.separator.bottom { padding: 0 0 10px; }
.ajax-loader { padding: 20px 0; text-align: center; }
.media .ajax-loader { padding: 20px 0 40px; }
.ajax-rd { padding: 20px 0 0; font-size: 13px; }
.modal-body { padding: 20px 20px 0; }
#modalItem .image img { max-height: 400px; max-width: none; }
#modalItem .modal-body { overflow: hidden; }
.bootbox .modal-body { padding: 20px; }
.bootbox .modal-footer { background: #FBF1D6; }

.navbar .btn, .navbar .btn-group { margin-top: 2px; }
.navbar .btn-navbar { margin-top: 6px; }

/* Documentation */
pre.prettyprint {
  word-break: normal;
  word-wrap: normal;
  white-space: pre;
  background-color: #FFFFFF;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #FFFFFF), color-stop(50%, #EFEFEF));
  background-image: -webkit-linear-gradient(#FFFFFF 50%, #EFEFEF 50%);
  background-image: -moz-linear-gradient(#FFFFFF 50%, #EFEFEF 50%);
  background-image: -o-linear-gradient(#FFFFFF 50%, #EFEFEF 50%);
  background-image: linear-gradient(#FFFFFF 50%, #EFEFEF 50%);
  -moz-background-size: 38px 38px;
  background-size: 38px 38px;
  border: 1px solid #EFEFEF;
  display: block;
  line-height: 19px;
  margin-bottom: 10px;
  overflow: visible;
  overflow-y: hidden;
  padding: 0 0 0 4px;
}
pre.prettyprint .glyphicons {
  padding: 0 0 0 20px;
}
pre.prettyprint .glyphicons i:before {
  font-size: 17px;
  top: 1px;
}
.documentation ul li a {
  
}
.documentation .glyphicons.orange i:before { color: #EDB459; }
.documentation .tab-content { padding: 10px 0 0; }
.documentation .table { margin: 0 0 10px; }
.documentation h1,
.documentation h2,
.documentation h3,
.documentation h4 { margin: 10px 0; }
.documentation .separator { margin: 10px 0; }
.documentation .separator.bottom { margin: 0 0 10px; }
.documentation p { margin: 0 0 20px; }
.documentation ul ul {
  margin-bottom: 10px;
}
.documentation .span3 .menu.affix {
  top: 110px;
  width: 220px;
}
.documentation ul.icons li { display: block; }
.documentation #docs_icons {
  padding: 20px 0;
}
.documentation #docs_icons .glyphicons {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 120px;
  font-size: 12px;
  line-height: 48px;
  overflow: hidden;
}
.documentation #docs_icons .glyphicons i:before {
  line-height: 55px !important;
}
.documentation .show-grid {
  margin-top: 10px;
  margin-bottom: 20px;
}
.documentation .show-grid [class*="span"] {
  background-color: #EFEFEF;
  text-align: center;
  -webkit-border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  min-height: 40px;
  line-height: 40px;
}
.documentation .show-grid .show-grid {
  margin-top: 0;
  margin-bottom: 0;
}
.documentation .show-grid .show-grid [class*="span"] {
  background-color: #CACACA;
}

.top-menu { padding-top: 90px; }
.left-menu, .right-menu { padding-top: 0px; }
.left-menu .mainContainerFluid, .right-menu .mainContainerFluid {
	padding: 0;
}
.left-menu.login .mainContainerFluid,
.right-menu.login .mainContainerFluid {
	padding: 2px 0 0;
}
.left-menu .mainContainerFluid .inner, .right-menu .mainContainerFluid .inner {
	padding-right: 20px;
	padding-bottom: 20px;
}

body.sticky_footer { padding-bottom: 35px; }
.mainMenuWrapper { overflow: hidden; }
.mainMenu {
	background-color: #F7CBCE; /*bfdff9;   Color Fondo Menu */
	margin-bottom: -99999px;
	padding-bottom: 99999px;
	position: relative;
	box-shadow: -5px 5px 10px #FE7F55 inset;
	-moz-box-shadow: -5px 5px 10px #FE7F55 inset;
  	-webkit-box-shadow: -5px 5px 10px #F8AAAF inset;
}
.mainContent {
	left: 13.52991452991453%;
	position: relative;
}
.mainMenu > ul {
	border-color: #b5b5b5; /*317fbd; Linea derecha del menu principal*/
	border-width: 1px;
	border-style: solid;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	list-style: none;
}
.left-menu .mainMenu > ul {
	border-left-width: 0;
	border-bottom-width: 0; 
	border-top-width: 0;
}
.right-menu .mainMenu > ul {
	border-right-width: none;
	border-bottom-width: none; 
	border-top-width: none;
}
.mainMenu > ul > li {
	height: 30px; /*Altura Submenu*/
	line-height: 20px;
	display: block;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #b5b5b5; /*8dc1d9; Color Borde MENU*/
}
.mainMenu > ul > li > a {
	color: #535353;/* #317fbd; Color Texto de Menu No Seleccionado*/
	text-shadow: 0 1px 0 #fff;
	font-weight: bold;
	text-indent: 20px;
	display: block;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #eaf4fd;  /*Color Borde Inferior Menu */
	height: 39px;
	line-height: 39px;
}
.mainMenu > ul > li > a:hover { text-decoration: none; }
.mainMenu > ul > li.active > a {
	color: #555453;
	background-color: #E62835; /*FF0A0A; /*5b9ccf; Color Menu seleccionado*/
	text-shadow: 0 1px 0 #C9C7C6;/*#317fbd; Sombreado de Texto Activo en Menu*/
	font-weight: bold;
	text-indent: 20px;
}
.mainMenu .dropdown .caret {
	position: absolute;
	top: 18px;
	right: 10px;
	margin: 0;
	border-top-color: #000000;/*317fbd; Flechita del Menu*/
}
.mainMenu .dropdown.active a > .caret { border-top-color: #fff; }
.mainMenu .collapse {
	position: relative;
	left: auto;
	top: auto;
	float: none;
	border: none;
	z-index: auto;
	box-shadow: -5px 5px 10px #9fc7ed;
	-moz-box-shadow: -5px 5px 10px #9fc7ed;
  	-webkit-box-shadow: -5px 5px 10px #F8AAAF;
  	margin: 0;
  	padding: 0;
  	min-width: auto;
  	background-color: #fff;
}
.mainMenu .collapse li a {
	display: block;
	padding: 3px 20px;
	text-decoration: none;
}
.mainMenu .collapse .divider {
	margin: 0;
	background-color: #F53D00; /*d6edff;                             VERRRRRRRRRRR*/
	height: 1px;
	overflow: hidden;
}
.mainMenu .collapse li a:before {
	content: "\e212";
	font-family: "Glyphicons";
	font-size: 14px;
	display: inline-block;
	vertical-align: middle;
	padding: 0 5px 0 0;
	position: relative;
	top: -1px;
}
.mainMenu .collapse li > a, 
.mainMenu .collapse li > a:hover {
	background: #fff; /* Color de botones de Submenu inactivos*/
	color: #595959; /*5b9ccf; Color de Texto summenu Inactivo*/
	font-weight: normal;
	font-size: 13px;
        /*font-weight: bold;*/
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #eaf4fd;
}
.mainMenu .collapse .active > a, 
.mainMenu .collapse .active > a:hover {
	background: #fff;
	color: #FF0A0A;/*3e3e3e; Color texto boton Submenu Activo*/
	text-shadow: none;
        font-weight: bold;
	
}
.mainMenu .dropdown.open,
.mainMenu .dropdown.open a { height: auto; }
.right-menu .mainMenu { 
	float: right;
	box-shadow: 5px 5px 10px #9fc7ed inset;
	-moz-box-shadow: 5px 5px 10px #9fc7ed inset;
  	-webkit-box-shadow: 5px 5px 10px #9fc7ed inset;
}
.right-menu .mainMenu .collapse {
	box-shadow: 5px 5px 10px #9fc7ed;
	-moz-box-shadow: 5px 5px 10px #9fc7ed;
  	-webkit-box-shadow: 5px 5px 10px #9fc7ed;
}
.right-menu .mainContent { left: 0; margin-left: 0; }
.right-menu .mainContent .inner { padding-right: 0; padding-left: 0px; }
#sticky_footer {
	height: 35px;
	line-height: 35px;
	background-color: #3f3f3f;
	font-size: 13px;
	color: #858484;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 1px solid #232323;
	z-index: 20000;
}
#sticky_footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid #232323;
	border-right: 1px solid #535353;
	display: inline-block;
}
#sticky_footer ul li {
	float: left;
	display: block;
	border-right: 1px solid #232323;
	line-height: 35px;
	height: 35px;
}
#sticky_footer ul li span:first-child, 
#sticky_footer ul li a {
	border-left: 1px solid #535353;
	display: block;
	width: auto;
	cursor: pointer;
	padding: 0 10px;
	text-align: center;
	line-height: 35px;
	text-decoration: none;
	color: #797979;
	font-weight: bold;
}
#sticky_footer ul li.active span:first-child, 
#sticky_footer ul li:hover span:first-child, 
#sticky_footer ul li.active a, 
#sticky_footer ul li:hover a {
	color: #e6e6e6;
}
#sticky_footer ul li span:first-child i:before, 
#sticky_footer ul li a i:before {
	line-height: 35px;
	position: relative;
	color: #797979;
	left: auto;
	top: 0;
	font-size: 20px;
	vertical-align: middle;
	font-weight: normal;
}
#sticky_footer ul li.active span:first-child i:before, 
#sticky_footer ul li:hover span:first-child i:before, 
#sticky_footer ul li.active a i:before, 
#sticky_footer ul li:hover a i:before {
	color: #e6e6e6;
}
#sticky_footer ul li span:first-child.text span, 
#sticky_footer ul li a.text span {
	margin-left: 5px;
}
@media (max-width: 979px)
{
	.tab-content {
		float: left;
		width: 100%;
		padding: 0;
	}
	.navbar .nav-collapse .nav { height: auto; }
	.navbar .nav-collapse .nav li { height: auto; }
	.navbar .nav-collapse .nav li.dropdown.dropdown-hover:hover ul.dropdown-menu { display: block; }
	.navbar .nav-collapse .nav li.dropdown.dropdown-hover.open:hover ul.dropdown-menu { display: block; }
	.navbar .nav-collapse .nav li.dropdown.dropdown-hover ul.dropdown-menu { display: block; }
}
@media (min-width: 1200px)
{
	.documentation .span3 .menu.affix { width: 270px; }
}
@media (max-width: 979px) and (min-width: 767px)
{
	.gallery .media ul li .thumb { padding: 3px; }
	.gallery .media ul li .thumb .name { font-size: 9pt; line-height: normal; display: none; }
	.documentation .span3 .menu.affix { width: 166px; top: 20px; }
	.mainMenu .collapse li > a,
	.mainMenu .collapse li > a:hover { padding: 3px 10px; font-size: 12px; }
	.mainMenu > ul > li > a,
	.mainMenu > ul > li > a:hover,
	.mainMenu > ul > li.active > a,
	.mainMenu > ul > li.active > a:hover { text-indent: 10px; font-size: 13px; }
}
@media (max-width: 767px)
{
	.btn-phone-block { display: block; margin: 0 0 5px; padding-left: 0; padding-right: 0; width: 100%; }
	.btn-phone-block:last-child { margin-bottom: 0; }
	.navbar .btn-navbar {
		display: block;
	}
	body { padding: 0; }
	.site-pages { height: auto; margin: 0 0 15px; }
	.top-line .pull-right {
		width: 100%;
		border-top: 1px solid #656565;
	}
	.top-line .pull-left { width: 100%; padding-top: 1px; border-bottom: 10px solid #1F1F1F; }
	.visible-phone-table { display: table; }
	.hidden-phone-table { display: none; }
	.tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li 
	{
		display: block;
		float: none;
		width: auto;
		margin: 0 2px 0 0;
	}
	.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover
	{
		width: auto;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		margin: 0;
	}
	.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-left: 0; margin-right: 0; }
	.contentWrapper .row { padding: 0 10px; }
	.gallery .media ul li { margin-bottom: 0; }
	.gallery .media ul li .thumb { text-align: left; }
	.gallery .media ul li .thumb .image { text-align: center; float: left; }
	.gallery .media ul li .thumb .name { padding: 10px 20px; display: block; float: left; }
	.gallery .media ul li .thumb:after { clear: both; display: block; content: ""; }
	.tabs-arrow .active a:after { display: none; }
	.tabs-arrow .active a:before { display: none; }
	.tabs-arrow .active { margin: 0; }
	.gallery .media .circle_remove { top: 5px; right: 5px; }
	.albums .circle_remove { right: 10px; }
	#modalItem .image img { max-width: 100%; max-height: 300px; }
	.gallery .media .image .hover.active,
	.gallery .media li:hover .image .hover { display: none; }
	.documentation .span3 .menu.affix { width: auto; position: static; top: 0; }
	.mainContent { left: 0; }
	.mainMenu { margin-bottom: 0; padding-bottom: 0; }
	.left-menu .mainMenu > ul,
	.right-menu .mainMenu > ul { position: relative; border-left-width: 1px; }
	.left-menu .mainContainerFluid .inner, .right-menu .mainContainerFluid .inner { padding: 0 10px; }
	.left-menu > .top-line,
	.right-menu > .top-line { margin-top: -48px; height: auto; margin-bottom: 0; }
	.top-line .brand { padding: 0 1px; }
}
@media (max-width: 480px)
{
	.visible-phone-480-table { display: table; }
	.hidden-phone-480-table { display: none; }
}
@media (max-width: 320px)
{
	.visible-phone-320-table { display: table; }
	.visible-phone-320-block { display: block; }
	.hidden-phone-320-table,
	.hidden-phone-320-block { display: none; }
	.visible-phone-480-table { display: none; }
}

ul.nav li.dropdown.dropdown-hover:hover ul.dropdown-menu { display: block; }
.navbar .nav { height: 40px; position: relative; overflow: visible; }
.navbar .nav > li { height: 41px; position: relative; overflow: visible; }
.navbar .nav > li > a { 
	padding: 0 20px;
	height: 41px;
	line-height: 41px;
	margin: 0;
}

/* Responsive Tables */
@media only screen and (max-width: 800px) {
  .table-responsive.swipe-horizontal {
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    position: relative;
    width: 100%;
  }
  .table-responsive.swipe-horizontal th,
  .table-responsive.swipe-horizontal td {
    display: block;
    margin: 0;
    vertical-align: top;
  }
  .table-responsive.swipe-horizontal th {
    text-align: right;
    border-bottom: 0;
    border-left: 0;
  }
  .table-responsive.swipe-horizontal td {
    min-height: 1.25em;
    text-align: left;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 0;
  }
  .table-responsive.swipe-horizontal thead {
    display: block;
    float: left;
  }
  .table-responsive.swipe-horizontal thead tr {
    display: block;
  }
  .table-responsive.swipe-horizontal tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    word-spacing: 0;
    letter-spacing: 0;
    font-size: 0;
  }
  .table-responsive.swipe-horizontal tbody tr {
    display: inline-block;
    vertical-align: top;
    border-left: 1px solid #E0D5C6;
  }
  .table-responsive.block {
    	/* Force table to not be like tables anymore */
    	/* Hide table headers (but not display: none;, for accessibility) */
    	/* Label the data */
  }
  .table-responsive.block table,
  .table-responsive.block thead,
  .table-responsive.block tbody,
  .table-responsive.block th,
  .table-responsive.block td,
  .table-responsive.block tr {
    display: block;
  }
  .table-responsive.block thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table-responsive.block tr {
    border: 1px solid #E0D5C6;
  }
  .table-responsive.block td {
    /* Behave  like a "row" */
  
    border: none;
    border-bottom: 1px solid #E0D5C6;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
  }
  .table-responsive.block td:before {
    /* Now like a table header */
  
    position: absolute;
    /* Top/left values mimic padding */
  
    vertical-align: middle;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: right;
    font-weight: bold;
  }
  .table-responsive.block td:before {
    content: attr(data-title);
  }
}

/*************** Notifications ***************/

.notification {
                position: relative;                
                padding: 0;
                border: 1px solid;
                background-position: 10px 11px !important;
                background-repeat: no-repeat !important;
                font-size: 13px;
                width: 285px;
                margin:auto;
                }
               
.notification div {
                display:block;
                font-style:normal;
                padding: 10px 10px 10px 36px;
                line-height: 1.5em;                
                }
                
.information {
                background: #dbe3ff url('img/information.png');
                border-color: #a2b4ee;
                color: #585b66;
                }


.notification div {
                display:block;
                font-style:normal;
                padding: 10px 10px 10px 36px;
                line-height: 1.5em;
                }

.notification .close {
                color:#990000;
                font-size:9px;
                position:absolute;
                right:5px;
                top:5px;
                }
  
 /* =========== MODIFICACIONES 2026 ===================*/
.textarea-fluid{
  width: 80% !important;
  min-height: 60px;
  resize: none;
  box-sizing: border-box;
  height: 120px;
}
/* Prioridad sobre Bootstrap */
.controls textarea.textarea-fluid{
  height: 68px;          /* AJUSTÁ ACÁ */
  min-height: 68px;
  max-height: 106px;      /* opcional */
  line-height: 16px;
  resize: none;
}
/* Alinear textarea exactamente como input */
.control-group .controls textarea.textarea-fluid{
  width: 80% !important;
  margin-left: 0 !important;
  box-sizing: border-box;
  display: inline-block;
}





 /* ===== FIX HEADER LAYOUT VIEJO ===== */
body:not(.csm-redesign) .top-line{
  height: 48px;                 /* ajustá si querés 46 / 50 */
  line-height: 48px;            /* clave: centra verticalmente */
  padding: 0 12px;              /* aire lateral */
  overflow: hidden;             /* evita que se corte raro */
}

body:not(.csm-redesign) .top-line img{
  vertical-align: middle;       /* alinea logo */
}

body:not(.csm-redesign) .top-line font,
body:not(.csm-redesign) .top-line b{
  vertical-align: middle;
}
/* ===== FIX HEADER LAYOUT VIEJO (MÓVIL) ===== */
@media (max-width: 767px){
  body:not(.csm-redesign) .top-line{
    height: auto !important;
    line-height: normal !important;
    padding: 8px 10px !important;
    overflow: visible !important;   /* clave: que no recorte */
  }

  /* Acomoda logo + texto sin cortar */
  body:not(.csm-redesign) .top-line > div{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body:not(.csm-redesign) .top-line img{
    width: 32px !important;
    height: 32px !important;
  }

  /* Texto más chico y en una sola línea con “…” */
  body:not(.csm-redesign) .top-line font b{
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: calc(100vw - 70px) !important; /* deja lugar para el logo */
  }
}

               

                
                

/* =========================================================
   CASMT - REDISEÑO ENCAPSULADO
   Aplica SOLO cuando el <body> tiene class="csm-redesign"
   Pegar al FINAL de beautyadmin.css
   ========================================================= */

body.csm-redesign{
  /* paleta */
  --csm-red:#C4161C;
  --csm-red-dark:#8F0F13;
  --csm-black:#111111;
  --csm-gray-900:#222;
  --csm-gray-700:#555;
  --csm-gray-200:#E9E9E9;
  --csm-gray-100:#F5F5F5;
  --csm-white:#FFFFFF;

  background: var(--csm-gray-100);
}

/* ---------- TOPBAR ---------- */
body.csm-redesign .top-line.csm-topbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 999998 !important;
  height: 52px !important;
  background: #111 !important;
  border-bottom: 1px solid #000 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}
body.csm-redesign .csm-topbar-inner{
  height: 52px !important;
  display:flex !important;
  align-items:center !important;
  padding: 0 12px !important;
}
body.csm-redesign .csm-topbar-brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-decoration:none !important;
  width: 100% !important;
}
body.csm-redesign .csm-topbar-logo{
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background:#fff !important;
  padding:2px !important;
  display:block !important;
}
body.csm-redesign .csm-topbar-title{
  color:#fff !important;
  font-weight:800 !important;
  letter-spacing:.3px !important;
  font-size: 14px !important;
  line-height: 16px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (min-width: 1200px){
  body.csm-redesign .csm-topbar-title{ font-size: 16px !important; }
}

/* ---------- LAYOUT / CONTENT ---------- */
body.csm-redesign .csm-shell{
  background: var(--csm-gray-100);
  min-height: calc(100vh - 52px);
}
body.csm-redesign .csm-content{
  padding-top: 14px !important;
}

/* Sidebar modernizado SOLO en rediseño */
body.csm-redesign .csm-sidebar{
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Estilos sobre tu menú viejo, pero SOLO cuando estás en rediseño */
body.csm-redesign .mainMenu > ul > li.active > a,
body.csm-redesign .mainMenu > ul > li.active > a.csm-side-link{
  background: var(--csm-red) !important;
  color:#fff !important;
  text-shadow:none !important;
}
body.csm-redesign .mainMenu .collapse .active > a,
body.csm-redesign .mainMenu .collapse .active > a:hover{
  color: var(--csm-red) !important;
}

/* ---------- BOTONES / INPUTS (reutilizables) ---------- */
body.csm-redesign .csm-btn{
  border-radius: 12px !important;
  font-weight: 900 !important;
  letter-spacing:.2px;
  text-shadow:none !important;
}
body.csm-redesign .csm-btn-lg{ height: 42px !important; line-height: 22px !important; }
body.csm-redesign .csm-btn-block{ width:100% !important; }

body.csm-redesign .csm-btn-primary{
  background: linear-gradient(180deg, var(--csm-red), var(--csm-red-dark)) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color:#fff !important;
}
body.csm-redesign .csm-btn-secondary{
  background: linear-gradient(180deg, #f2dca6, #e7c56a) !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  color:#2a2a2a !important;
}

body.csm-redesign .csm-label{
  font-weight:900; font-size:12px; color:#666;
  margin-bottom:6px; display:block;
}
body.csm-redesign .csm-input{
  width:100% !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid #dcdcdc !important;
  padding: 6px 10px !important;
  box-sizing:border-box;
}
body.csm-redesign .csm-input:focus{
  border-color: rgba(196,22,28,.55) !important;
  box-shadow: 0 0 0 3px rgba(196,22,28,.12) !important;
}

/* ---------- ICONOS (CSS, sin bootstrap sprites) ---------- */
body.csm-redesign .csm-ico{ font-style:normal; font-weight:900; display:inline-block; }
body.csm-redesign .csm-ico-plus::before{ content:"+"; }
body.csm-redesign .csm-ico-search::before{ content:"⌕"; }
body.csm-redesign .csm-ico-burger::before{ content:"≡"; font-size:18px; }
body.csm-redesign .csm-ico-arrow::before{ content:"›"; font-size:22px; }
body.csm-redesign .csm-ico-home::before{ content:"⌂" !important; }
body.csm-redesign .csm-ico-list::before{ content:"≡" !important; }
body.csm-redesign .csm-ico-pay::before{ content:"$" !important; }
body.csm-redesign .csm-ico-card::before{ content:"▦" !important; }
body.csm-redesign .csm-ico-exit::before{ content:"⟲" !important; }

/* ---------- BOTTOM NAV (SOLO rediseño) ---------- */
body.csm-redesign .csm-bottom-nav{
  position: fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  height: 64px !important;
  background:#fff !important;
  border-top: 1px solid #e6e6e6 !important;
  box-shadow: 0 -10px 30px rgba(0,0,0,.08) !important;
  display:flex !important;
  justify-content: space-around !important;
  align-items:center !important;
  z-index: 999999 !important;
}
body.csm-redesign .csm-bottom-item{
  width: 20% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 4px !important;
  text-decoration:none !important;
  color:#555 !important;
  font-weight:700 !important;
  font-size:11px !important;
  padding: 6px 0 !important;
}
body.csm-redesign .csm-bottom-item:hover,
body.csm-redesign .csm-bottom-item:active{
  color: var(--csm-red) !important;
}
body.csm-redesign .csm-bottom-nav .csm-ico{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:none !important;
  text-indent:0 !important;
  font-family: Arial, sans-serif !important;
  font-style:normal !important;
  font-weight:900 !important;
  font-size:18px !important;
  line-height:18px !important;
}

/* ---------- CUENTA (componentes) -------- -- */
body.csm-redesign .csm-socio-bar{
  background:#fff;
  border:1px solid #eee;
  border-radius: 14px;
  padding: 4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  margin: 39px 0 12px;
}
body.csm-redesign .csm-socio-left{ display:flex; align-items:center; gap:12px; }

body.csm-redesign .csm-avatar{
  width:52px; height:52px;
  border-radius: 999px;
  border: 3px solid var(--csm-red); /* borde rojo */
  background:#fff;
  object-fit: cover;
}

body.csm-redesign .csm-socio-nombre{ 
    font-size:14px; 
    font-weight:900; 
    color:#222; 
    line-height:20px; 
    margin-top:2px;}
body.csm-redesign .csm-socio-sub{
     font-size:12px; 
     color:#666; 
     margin-top:20px; }

body.csm-redesign .csm-socio-actions{ display:flex; align-items:center; gap:10px; }
body.csm-redesign .csm-socio-edit{
  width:38px; height:38px;
  border-radius: 12px;
  background:#f4f4f4;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none !important;
}

body.csm-redesign .csm-hamb-btn{
  border-radius: 12px !important;
  background:#f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  height:38px !important;
  padding: 8px 10px !important;
}
body.csm-redesign .csm-hamb-menu{
  border-radius: 14px !important;
  padding: 6px 0 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.18) !important;
}
body.csm-redesign .csm-hamb-menu a{ padding: 10px 14px !important; }

body.csm-redesign .csm-cuenta-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin: 10px 0 12px;
}
body.csm-redesign .csm-saldo-box{
  background: linear-gradient(180deg, #333, #1b1b1b);
  color:#fff;
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 180px;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
body.csm-redesign .csm-saldo-label{ font-size: 12px; opacity:.85; font-weight:700; }
body.csm-redesign .csm-saldo-value{ font-size: 18px; font-weight:900; letter-spacing:.2px; }

body.csm-redesign .csm-filter-card{
  background:#fff;
  border:1px solid #eee;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  margin-bottom: 10px;
}
body.csm-redesign .csm-filter-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 10px;
  align-items:end;
}
body.csm-redesign .csm-filter-grid-simple{
  grid-template-columns: 1fr 1fr auto;
}
body.csm-redesign .csm-field-btn{ min-width: 150px; }

body.csm-redesign .csm-alert-warn{
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff4d8;
  border: 1px solid #f0dbad;
  color:#5a4a1a;
  margin: 10px 0 12px;
}

/* Listado tarjetas */
body.csm-redesign .csm-saldo-inline{
  font-size: 16px;
  font-weight: 900;
  color:#222;
  margin: 8px 0 10px;
}
body.csm-redesign .csm-movs{ display:flex; flex-direction:column; gap:10px; }
body.csm-redesign .csm-mov-row{
  background:#fff;
  border:1px solid #eee;
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
body.csm-redesign .csm-mov-fecha{
  min-width: 110px;
  font-weight: 900;
  color:#222;
  font-size: 13px;
}
body.csm-redesign .csm-mov-main{ flex:1; min-width: 0; }
body.csm-redesign .csm-mov-movimiento{
  font-weight: 900;
  color:#222;
  font-size: 14px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
body.csm-redesign .csm-badges{ margin-top: 6px; }
body.csm-redesign .csm-badge{
  display:inline-block;
  background:#f1f1f1;
  border:1px solid #e2e2e2;
  color:#444;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11px;
}
body.csm-redesign .csm-mov-imp{
  min-width: 220px;
  text-align:right;
}
body.csm-redesign .csm-imp-line{ font-size: 12px; color:#666; display:flex; justify-content:space-between; gap:10px; }
body.csm-redesign .csm-imp-line b{ color:#222; }
body.csm-redesign .csm-imp-saldo b{ color: var(--csm-red); }

body.csm-redesign .csm-red .csm-mov-fecha,
body.csm-redesign .csm-red .csm-mov-movimiento{ color: var(--csm-red); }
body.csm-redesign .csm-blue .csm-mov-fecha,
body.csm-redesign .csm-blue .csm-mov-movimiento{ color:#1f6fd6; }
body.csm-redesign .csm-green .csm-mov-fecha,
body.csm-redesign .csm-green .csm-mov-movimiento{ color:#2e8b57; }

body.csm-redesign .csm-totales{
  margin-top: 12px;
  background:#fff;
  border:1px solid #eee;
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  gap: 14px;
  justify-content:space-between;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}
body.csm-redesign .csm-tot-item{ display:flex; flex-direction:column; gap:4px; }
body.csm-redesign .csm-tot-item span{ font-size:12px; color:#666; font-weight:900; }
body.csm-redesign .csm-tot-item b{ font-size:14px; color:#222; }



/* Por si tu layout viejo mete margin-top negativo */
body.csm-redesign .top-menu{ padding-top: 0 !important; }
body.csm-redesign .left-menu > .top-line,
body.csm-redesign .right-menu > .top-line{
  margin-top: 0 !important;
}



/* ---------- RESPONSIVE SOLO rediseño ---------- */
@media (max-width: 900px){
  body.csm-redesign{ padding-bottom: 76px !important; } /* bottom nav */
}
@media (min-width: 901px){
  body.csm-redesign .csm-bottom-nav{ display:none !important; }
  body.csm-redesign{ padding-bottom: 0 !important; }
}

/* Opción A: en móvil, oculto sidebar SOLO en rediseño */
@media (max-width: 767px){
  body.csm-redesign .mainMenu{ display:none !important; }
  body.csm-redesign .mainContent{ margin-left:0 !important; left:0 !important; }

  body.csm-redesign .csm-cuenta-actions{ flex-direction:column; align-items:stretch; }
  body.csm-redesign .csm-saldo-box{ width:90%; }
  body.csm-redesign .csm-field-btn{ min-width: 0; }

  body.csm-redesign .csm-filter-grid{ grid-template-columns: 1fr; }

  body.csm-redesign .csm-mov-row{
    flex-direction:column;
    align-items:stretch;
  }
  body.csm-redesign .csm-mov-fecha{ min-width:0; }
  body.csm-redesign .csm-mov-imp{ min-width:0; text-align:left; }
  body.csm-redesign .csm-imp-line{ justify-content:flex-start; }
}

/* Agregado para FPersonaPlatea*/
.cs-subtotal-box {
    margin-bottom: 0;        /* evita empujar al siguiente campo */
}

.cs-info-text {
    display: block;
    margin-top: 0px;         /* bien pegado al subtotal */
    margin-bottom: 2px;      /* poco aire antes del siguiente input */
    font-size: 11px;
    color: #777;
    line-height: 1.2;
    margin-left: 190px;
}
.cs-subtotal-inline {
    display: flex;
    align-items: center;     /* alinea verticalmente */
    gap: 6px;                /* espacio entre input y texto */
}

.cs-info-inline {
    white-space: nowrap;    /* evita que se vaya abajo */
    font-size: 11px;
    color: #777;
    line-height: 1.2;
}

body.csm-redesign .csm-socio-bar,
body.csm-redesign .csm-socio-actions,
body.csm-redesign .btn-group.csm-hamb{
  overflow: visible !important;
}

body.csm-redesign .csm-hamb-menu{
  z-index: 999999 !important;
}


/* ===== Hamburguesa CASMT (sin Bootstrap) ===== */
.csm-hamb{ position: relative !important; }
.csm-hamb .csm-hamb-btn{ position: relative !important; z-index: 2 !important; }

/* el menú */
.csm-hamb-menu{
  display: none;               /* arranca oculto */
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  min-width: 220px !important;
  z-index: 999999 !important;

  /* look app */
  border-radius: 14px !important;
  padding: 6px 0 !important;
  border: 1px solid #e6e6e6 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.18) !important;
}

/* items */
.csm-hamb-menu li > a{
  padding: 10px 14px !important;
  font-weight: 700 !important;
}

/* evita que algún padre lo recorte */
.csm-socio-bar,
.csm-socio-actions,
.btn-group.csm-hamb{
  overflow: visible !important;
}

/* Ajuste fino: nombre + documento más juntos */
body.csm-redesign .csm-socio-nombre{
  line-height: 20px !important;
  margin-bottom: 2px !important;   /* antes estaba “respirando” de más */
}

body.csm-redesign .csm-socio-sub{
  line-height: 14px !important;
  margin-top: 0 !important;
}
body.csm-redesign .csm-socio-meta{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centra el bloque respecto a la foto */
}
/* Botón hamburguesa pro (icon button) */
body.csm-redesign .csm-hamb-btn{
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #f3f3f3 !important;
  border: 1px solid #e2e2e2 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;

  text-decoration: none !important;
}

body.csm-redesign .csm-hamb-btn:hover,
body.csm-redesign .csm-hamb-btn:active{
  background: #ffffff !important;
  border-color: rgba(196,22,28,.25) !important;
}

/* Centrado del icono */
body.csm-redesign .csm-hamb-btn .csm-ico{
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}
/* ===== SALDO SOCIO – tarjeta inteligente ===== */
body.csm-redesign .csm-saldo-box{
  display: flex;
  align-items: center;
  justify-content: center;   /* texto centrado */
  gap: 8px;

  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;

  background: #ffffff;
  color: #222;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

/* Texto horizontal */
body.csm-redesign .csm-saldo-label{
  display: none; /* ya no hace falta “Saldo” separado */
}

body.csm-redesign .csm-saldo-value{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Estados */
body.csm-redesign .csm-saldo-ok{
  color: #1f8b4c !important;      /* verde */
}

body.csm-redesign .csm-saldo-deuda{
  color: #111 !important;         /* negro */
}

/* Mobile: ancho casi completo y centrado */
@media (max-width: 767px){
  body.csm-redesign .csm-saldo-box{
    width: 90%;
    justify-content: center;
    text-align: center;
  }
}
body.csm-redesign .csm-saldo-deuda{
  background: linear-gradient(180deg,#ffffff,#f6f6f6);
}
/* ===== SALDO SOCIO – compacto, una línea, legible ===== */
body.csm-redesign .csm-saldo-box{
  /* pisa el fondo negro anterior */
  background: #111 !important;
  color: #fff !important;

  border: 1px solid #eee !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.06) !important;

  /* compacto */
  min-height: 0 !important;
  padding: 8px 12px !important;

  /* una línea y centrado */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Si querés mantener “Saldo” visible */
body.csm-redesign .csm-saldo-label{
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 !important;
  line-height: 16px !important;
}

body.csm-redesign .csm-saldo-value{
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* estados */
body.csm-redesign .csm-saldo-ok{
  color: #1f8b4c !important;
}
body.csm-redesign .csm-saldo-deuda{
  color: #111 !important;
}

/* móvil: que ocupe casi todo el ancho */
@media (max-width: 767px){
  body.csm-redesign .csm-cuenta-actions{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.csm-redesign .csm-saldo-box{
    width: 90% !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 10px !important;
  }
}
/* ===== BOTÓN NUEVO VOLANTE – PLANO / SOBRIO ===== */
body.csm-redesign .csm-btn-volante{
  /* tamaño */
  width: 97% !important;
  height: 35px !important;          /* más bajo que antes */
  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  /* estilo plano */
  background: var(--csm-red) !important;   /* rojo oficial */
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 8px !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  text-shadow: none !important;

  /* sombra neutra, igual al saldo */
  box-shadow: 0 6px 14px rgba(0,0,0,.12) !important;
}

/* hover / active: apenas feedback */
body.csm-redesign .csm-btn-volante:hover,
body.csm-redesign .csm-btn-volante:active{
  background: var(--csm-red-dark) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.14) !important;
}

/* icono */
body.csm-redesign .csm-btn-volante .csm-ico{
  font-size: 17px !important;
  line-height: 17px !important;
}


@media (max-width: 767px){
  body.csm-redesign .csm-cuenta-actions{
    align-items: center !important;
    gap: 10px !important;
  }

  body.csm-redesign .csm-actions-right{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
}

@media (min-width: 768px){
  body.csm-redesign .csm-btn-volante{
    width: auto !important;
    padding: 0 22px !important;
  }
}
/* Iconos bottom nav (simples pero acordes) */
body.csm-redesign .csm-ico-cuenta::before{ content:"≣"; }     /* lista / estado */
body.csm-redesign .csm-ico-pagos::before{ content:"$"; }      /* pagos */
body.csm-redesign .csm-ico-carnet::before{ content:"⎔"; }     /* credencial */
body.csm-redesign .csm-ico-abonos::before{ content:"▦"; }     /* butaca / abono */
body.csm-redesign .csm-ico-entradas::before{ content:"🎟"; }  /* ticket (emoji) */

/* Si no querés emoji (más “corporativo”), usá esto en vez de 🎟 */
 /* body.csm-redesign .csm-ico-entradas::before{ content:"▭"; } */

/* Activo: rojo oficial */
body.csm-redesign .csm-bottom-item.is-active{
  color: var(--csm-red) !important;
}
body.csm-redesign .csm-bottom-item.is-active .csm-ico{
  color: var(--csm-red) !important;
}

/* ===== FIX: asegurar que el pseudo-elemento se muestre ===== */
body.csm-redesign .csm-bottom-nav .csm-ico:before{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  content: "" !important; /* default, luego cada icono lo pisa */
}

/* ===== ICONOS NAV (unicode seguro) ===== */
body.csm-redesign .csm-ico-cuenta:before   { content: "\2630" !important; } /* ☰  cuenta/listado */
body.csm-redesign .csm-ico-pagos:before    { content: "\0024" !important; } /* $  pagos */
body.csm-redesign .csm-ico-carnet:before   { content: "\25A6" !important; } /* ▦  credencial */
body.csm-redesign .csm-ico-abonos:before   { content: "\25A4" !important; } /* ▤  abonos */
body.csm-redesign .csm-ico-entradas:before { content: "\25AD" !important; } /* ▭  entradas/ticket */



body.csm-redesign .csm-nav-ico{
  display: block !important;
  font-family: Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 15px !important;
}
body.csm-redesign .csm-nav-ico{
  display:block;
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 17px;
  line-height: 15px;
  margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAV — SVG icons (reemplazo de Unicode)
═══════════════════════════════════════════════════════════ */
body.csm-redesign .csm-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 62px;
  background: var(--csm-black, #111);
  display: flex;
  align-items: stretch;
  z-index: 9999;
  box-shadow: 0 -2px 12px rgba(0,0,0,.35);
}
@media (min-width: 901px) {
  body.csm-redesign .csm-bottom-nav { display: none !important; }
}
body.csm-redesign .csm-bottom-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  gap: 3px;
  transition: color .15s;
  padding: 0;
}
body.csm-redesign .csm-bottom-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}
body.csm-redesign .csm-bottom-item span {
  font-size: 10px;
  line-height: 1;
}
body.csm-redesign .csm-bottom-item.is-active {
  color: var(--csm-red, #C4161C);
}
body.csm-redesign .csm-bottom-item:hover,
body.csm-redesign .csm-bottom-item:active {
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
body.csm-redesign .csm-bottom-item.is-active:hover {
  color: var(--csm-red, #C4161C);
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR DESKTOP — nuevo estilo con SVG
═══════════════════════════════════════════════════════════ */
body.csm-redesign .csm-sidebar {
  background: #1a1a1a;
  min-height: 100vh;
  padding: 0 !important;
}
@media (max-width: 900px) {
  body.csm-redesign .csm-sidebar { display: none !important; }
  body.csm-redesign .csm-content { width: 100% !important; margin: 0 !important; }
}
body.csm-redesign .csm-side-nav {
  list-style: none;
  margin: 0;
  padding: 12px 0;
}
body.csm-redesign .csm-side-item {
  margin: 0;
}
body.csm-redesign .csm-side-divider {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 8px 16px;
}
body.csm-redesign .csm-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: rgba(255,255,255,.6) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  border-radius: 8px;
  margin: 2px 8px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
body.csm-redesign .csm-side-link:hover {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.9) !important;
}
body.csm-redesign .csm-side-item.is-active .csm-side-link {
  background: rgba(196,22,28,.2);
  color: #ff6b6e !important;
}
body.csm-redesign .csm-side-link-sm {
  font-size: 12px;
  padding: 9px 16px;
  color: rgba(255,255,255,.4) !important;
}
body.csm-redesign .csm-side-ico {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD — hero, acciones, carousel, movimientos
═══════════════════════════════════════════════════════════ */

/* Hero */
body.csm-redesign .csm-dash-hero {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d0a0b 60%, var(--csm-red, #C4161C) 100%);
  padding: 20px 16px 18px;
}
body.csm-redesign .csm-dash-hero-inner {
  max-width: 600px;
  margin: 0 auto;
}
body.csm-redesign .csm-dash-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
body.csm-redesign .csm-dash-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.25);
  flex-shrink: 0;
}
body.csm-redesign .csm-dash-avatar-placeholder {
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
body.csm-redesign .csm-dash-avatar-placeholder svg {
  width: 32px; height: 32px;
  stroke: rgba(255,255,255,.4);
  fill: none;
}
body.csm-redesign .csm-dash-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
body.csm-redesign .csm-dash-doc {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin-top: 3px;
}
body.csm-redesign .csm-dash-saldo {
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.csm-redesign .csm-dash-saldo-ok {
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.3);
}
body.csm-redesign .csm-dash-saldo-deuda {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
}
body.csm-redesign .csm-dash-saldo-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
body.csm-redesign .csm-dash-saldo-ok .csm-dash-saldo-label { color: #4ade80; }
body.csm-redesign .csm-dash-saldo-deuda .csm-dash-saldo-label { color: #fca5a5; }
body.csm-redesign .csm-dash-saldo-detail {
  font-size: 13px;
  color: rgba(255,255,255,.75);
}

/* Secciones */
body.csm-redesign .csm-dash-section {
  padding: 14px 16px 0;
  max-width: 680px;
}
body.csm-redesign .csm-dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
body.csm-redesign .csm-dash-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #111;
}
body.csm-redesign .csm-dash-section-link {
  font-size: 12px;
  color: var(--csm-red, #C4161C);
  text-decoration: none;
  font-weight: 600;
}

/* Grid de acciones */
body.csm-redesign .csm-dash-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 400px) {
  body.csm-redesign .csm-dash-actions { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}
body.csm-redesign .csm-dash-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 6px 12px;
  text-decoration: none !important;
  color: #111 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  font-size: 11px;
  font-weight: 600;
  transition: box-shadow .15s, transform .1s;
  border: 1px solid rgba(0,0,0,.06);
}
body.csm-redesign .csm-dash-action-btn:hover,
body.csm-redesign .csm-dash-action-btn:active {
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
  transform: translateY(-1px);
  text-decoration: none !important;
}
body.csm-redesign .csm-dash-action-btn-dis {
  opacity: .45;
  pointer-events: none;
}
body.csm-redesign .csm-dash-action-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a1a1a, #3a0a0c);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.csm-redesign .csm-dash-action-ico svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
}

/* Carrusel */
body.csm-redesign .csm-carousel-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
body.csm-redesign .csm-carousel {
  display: flex;
  transition: transform .35s ease;
  will-change: transform;
}
body.csm-redesign .csm-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 20px 20px 18px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
body.csm-redesign .csm-slide-abono    { background: linear-gradient(135deg, #1a1a1a, #2d0a0b); }
body.csm-redesign .csm-slide-actividad{ background: linear-gradient(135deg, #1a2d1a, #2d4a2d); }
body.csm-redesign .csm-slide-partido  { background: linear-gradient(135deg, #1a1a3a, #0a1060); }
body.csm-redesign .csm-slide-default  { background: linear-gradient(135deg, #1a1a1a, #8F0F13); }
body.csm-redesign .csm-slide-info     { background: linear-gradient(135deg, #1a1a1a, #333); }

body.csm-redesign .csm-slide-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
}
body.csm-redesign .csm-slide-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
body.csm-redesign .csm-slide-sub {
  font-size: 12px;
  color: rgba(255,255,255,.6);
}
body.csm-redesign .csm-slide-cta {
  margin-top: 6px;
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none !important;
  align-self: flex-start;
  letter-spacing: .2px;
  backdrop-filter: blur(4px);
}
body.csm-redesign .csm-slide-cta:hover {
  background: rgba(255,255,255,.25);
  text-decoration: none !important;
}

body.csm-redesign .csm-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
}
body.csm-redesign .csm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
body.csm-redesign .csm-dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

/* Padding body para bottom nav en mobile */
@media (max-width: 900px) {
  body.csm-redesign .contentWrapper.csm-shell {
    padding-bottom: 70px;
  }
}

/* ═══════════════════════════════════════════════════════════
   REDESIGN V2 — Sidebar + Bento Dashboard + Responsive
═══════════════════════════════════════════════════════════ */

/* ── TOPBAR (negro puro — solo la franja del logo) ─────── */
body.csm-redesign .csm-topbar {
  background: #111111 !important;
  border-bottom: none !important;
}

/* ── SIDEBAR GRIS, SIN LÍNEAS ──────────────────────────── */
body.csm-redesign .csm-sidebar {
  background: #232323 !important;
  border-right: 1px solid rgba(0,0,0,.5) !important;
}

/* Eliminar bordes que agrega Bootstrap a los <li> */
body.csm-redesign .csm-side-nav li,
body.csm-redesign .csm-side-nav > li {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  background: none !important;
  list-style: none !important;
  padding: 0 !important;
}

/* Divisor: ultra sutil */
body.csm-redesign .csm-side-divider {
  background: rgba(255,255,255,.07) !important;
  margin: 8px 14px !important;
}

/* Link base: borde izquierdo placeholder para evitar salto de texto */
body.csm-redesign .csm-side-link {
  border-left: 3px solid transparent !important;
  padding: 10px 14px 10px 13px !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 1px 8px 1px 0 !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background .13s, color .13s, border-left-color .13s !important;
}
body.csm-redesign .csm-side-link:hover {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.82) !important;
  border-left-color: rgba(255,255,255,.12) !important;
  text-decoration: none !important;
}

/* Activo: barra roja izquierda + fondo sutil */
body.csm-redesign .csm-side-item.is-active .csm-side-link {
  border-left-color: #C4161C !important;
  background: rgba(196,22,28,.1) !important;
  color: #ffffff !important;
}

/* Links secundarios (Cambiar contraseña, Salir) */
body.csm-redesign .csm-side-link-sm {
  color: rgba(255,255,255,.3) !important;
  font-size: 12px !important;
}
body.csm-redesign .csm-side-link-sm:hover {
  color: rgba(255,255,255,.62) !important;
}

/* ── HERO: full-width, profile + saldo en fila ─────────── */
body.csm-redesign .csm-dash-hero {
  padding: 18px 20px 16px !important;
}
body.csm-redesign .csm-dash-hero-inner {
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
body.csm-redesign .csm-dash-profile {
  flex: 1 !important;
  margin-bottom: 0 !important;
}
@media (max-width: 600px) {
  body.csm-redesign .csm-dash-hero-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
}

/* ── BODY GRID: 2 col en desktop ───────────────────────── */
body.csm-redesign .csm-dash-body-grid {
  padding: 14px 16px 20px;
}
@media (min-width: 901px) {
  body.csm-redesign .csm-dash-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px 20px 24px;
    align-items: start;
  }
}
body.csm-redesign .csm-dash-col-left,
body.csm-redesign .csm-dash-col-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 900px) {
  body.csm-redesign .csm-dash-col-left,
  body.csm-redesign .csm-dash-col-right { gap: 12px; }
}
body.csm-redesign .csm-dash-section {
  padding: 0 !important;
  max-width: 100% !important;
}
body.csm-redesign .csm-dash-section-header {
  padding: 0 2px;
  margin-bottom: 10px;
}

/* ── BENTO GRID (checkerboard) ─────────────────────────── */
body.csm-redesign .csm-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 118px 118px;
  gap: 10px;
}
/* Cuenta ancho (2/3), Pagos angosto (1/3) — fila 1
   Abono angosto (1/3), Entrada ancho (2/3) — fila 2  */
body.csm-redesign .csm-bento-cuenta  { grid-column: 1 / 3; grid-row: 1; }
body.csm-redesign .csm-bento-pagos   { grid-column: 3;     grid-row: 1; }
body.csm-redesign .csm-bento-abono   { grid-column: 1;     grid-row: 2; }
body.csm-redesign .csm-bento-entrada { grid-column: 2 / 4; grid-row: 2; }

/* Mobile ≤540px: 2 col, cuenta full / pagos+abono mitades / entrada full */
@media (max-width: 540px) {
  body.csm-redesign .csm-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 96px 88px 96px;
    gap: 8px;
  }
  body.csm-redesign .csm-bento-cuenta  { grid-column: 1 / 3; grid-row: 1; }
  body.csm-redesign .csm-bento-pagos   { grid-column: 1;     grid-row: 2; }
  body.csm-redesign .csm-bento-abono   { grid-column: 2;     grid-row: 2; }
  body.csm-redesign .csm-bento-entrada { grid-column: 1 / 3; grid-row: 3; }
}

/* Bento card base */
body.csm-redesign .csm-bento-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 13px 14px;
  border-radius: 14px;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
}
body.csm-redesign .csm-bento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  text-decoration: none !important;
}
body.csm-redesign .csm-bento-card:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}
body.csm-redesign .csm-bento-card.csm-bento-card-dis {
  opacity: .3;
  pointer-events: none;
  filter: grayscale(.5);
}

/* Ícono (top-left absoluto) */
body.csm-redesign .csm-bento-ico {
  position: absolute;
  top: 12px;
  left: 13px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.csm-redesign .csm-bento-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Textos (bottom-left) */
body.csm-redesign .csm-bento-label {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -.1px;
}
body.csm-redesign .csm-bento-sub {
  font-size: 11px;
  color: rgba(255,255,255,.38);
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── COLORES BENTO CARDS ───────────────────────────────── */
body.csm-redesign .csm-bento-cuenta {
  background: linear-gradient(145deg, #1e1218 0%, #2d0b0e 100%);
}
body.csm-redesign .csm-bento-cuenta .csm-bento-ico {
  background: rgba(196,22,28,.2);
  color: #ff5760;
}
body.csm-redesign .csm-bento-pagos {
  background: linear-gradient(145deg, #131c15 0%, #0b2016 100%);
}
body.csm-redesign .csm-bento-pagos .csm-bento-ico {
  background: rgba(34,197,94,.14);
  color: #4ade80;
}
body.csm-redesign .csm-bento-abono {
  background: linear-gradient(145deg, #1a1600 0%, #231d00 100%);
}
body.csm-redesign .csm-bento-abono .csm-bento-ico {
  background: rgba(245,158,11,.14);
  color: #fbbf24;
}
body.csm-redesign .csm-bento-entrada {
  background: linear-gradient(145deg, #0e1522 0%, #111d32 100%);
}
body.csm-redesign .csm-bento-entrada .csm-bento-ico {
  background: rgba(59,130,246,.14);
  color: #60a5fa;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR V3 — Pill activo + Section labels (estilo Linear/Notion)
═══════════════════════════════════════════════════════════ */

/* Background: gris carbón oscuro */
body.csm-redesign .csm-sidebar {
  background: #1f2027 !important;
  border-right: 1px solid rgba(0,0,0,.22) !important;
}

/* Lista sin padding extra */
body.csm-redesign .csm-side-nav {
  padding: 6px 0 12px !important;
  margin: 0 !important;
}

/* Todos los <li>: limpiar herencia Bootstrap */
body.csm-redesign .csm-side-nav li,
body.csm-redesign .csm-side-nav > li {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  background: none !important;
  list-style: none !important;
  padding: 0 !important;
}

/* ── Section labels (PRINCIPAL / CUENTA) ───────────────── */
body.csm-redesign li.csm-side-section-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .85px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.22) !important;
  padding: 18px 16px 5px 16px !important;
  cursor: default !important;
  pointer-events: none !important;
  display: block !important;
  line-height: 1 !important;
}
body.csm-redesign li.csm-side-section-label:first-child {
  padding-top: 8px !important;
}

/* ── Items: padding lateral para el pill ───────────────── */
body.csm-redesign .csm-side-nav > li.csm-side-item {
  padding: 1px 8px !important;
}

/* ── Link base: pill, sin borde izquierdo ──────────────── */
body.csm-redesign .csm-side-link,
body.csm-redesign .csm-side-link-sm {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  border-left: none !important;
  border: none !important;
  margin: 0 !important;
  color: rgba(255,255,255,.52) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background .13s, color .13s !important;
  white-space: nowrap !important;
}

/* Hover */
body.csm-redesign .csm-side-link:hover,
body.csm-redesign .csm-side-link-sm:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.88) !important;
  text-decoration: none !important;
}

/* ── Activo: pill relleno ──────────────────────────────── */
body.csm-redesign .csm-side-item.is-active .csm-side-link {
  background: rgba(196,22,28,.18) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}
body.csm-redesign .csm-side-item.is-active .csm-side-ico {
  stroke: #ff5760 !important;
}

/* ── Ícono ──────────────────────────────────────────────── */
body.csm-redesign .csm-side-ico {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
  opacity: .8 !important;
}
body.csm-redesign .csm-side-item.is-active .csm-side-ico {
  opacity: 1 !important;
}

/* Ocultar el divider viejo (reemplazado por section labels) */
body.csm-redesign .csm-side-divider {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT V3 — Sidebar fijo + Topbar split negro/blanco
═══════════════════════════════════════════════════════════ */

/* ── TOPBAR (mobile): negro completo con logo ──────────── */
body.csm-redesign .top-line.csm-topbar {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  background: #111111 !important;
  z-index: 500 !important;
  position: relative !important;
}

/* Brand siempre visible (mobile: ocupa todo, desktop: 200px) */
body.csm-redesign .csm-topbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  flex: 1 !important;       /* mobile: ocupa todo el ancho */
  background: #111111 !important;
  border: none !important;
}
body.csm-redesign .csm-topbar-logo {
  height: 34px !important;
  width: 34px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-topbar-brand-txt {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
body.csm-redesign .csm-topbar-brand-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .4px;
}
body.csm-redesign .csm-topbar-brand-sub {
  font-size: 9.5px;
  color: rgba(255,255,255,.35);
  font-weight: 500;
  margin-top: 1px;
}

/* Actions bar: oculto en mobile */
body.csm-redesign .csm-topbar-bar {
  display: none !important;
}

/* ── DESKTOP ≥901px: topbar split + sidebar fijo ───────── */
@media (min-width: 901px) {

  /* Topbar: fija en el top, flex split */
  body.csm-redesign .top-line.csm-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    display: flex !important;
    height: 52px !important;
    background: transparent !important;
  }

  /* Brand izquierda: 200px, negro, sin borde */
  body.csm-redesign .csm-topbar-brand {
    width: 200px !important;
    flex: 0 0 200px !important;
    background: #111111 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    border-right: none !important;
  }

  /* Actions derecha: blanco, border-bottom sutil */
  body.csm-redesign .csm-topbar-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 1 !important;
    background: #f9f9fb !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 0 20px !important;
  }

  /* Botón notificación */
  body.csm-redesign .csm-topbar-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e4e8 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #555 !important;
    transition: background .13s, border-color .13s !important;
    flex-shrink: 0 !important;
  }
  body.csm-redesign .csm-topbar-btn:hover {
    background: #f0f0f5 !important;
    border-color: #c4161c !important;
    color: #c4161c !important;
  }
  body.csm-redesign .csm-topbar-btn svg {
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor !important;
    fill: none !important;
  }

  /* ── Sidebar: fijo, negro, full height ───────────────── */
  body.csm-redesign .mainMenu.csm-sidebar {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    width: 200px !important;
    height: calc(100vh - 52px) !important;
    min-height: 0 !important;
    background: #111111 !important;
    float: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 400 !important;
    border-right: 1px solid rgba(255,255,255,.04) !important;
  }

  /* ── Contenido: desplazado derecha y abajo ───────────── */
  body.csm-redesign .contentWrapper.csm-shell {
    margin-top: 52px !important;
    margin-left: 200px !important;
    padding-bottom: 0 !important;
  }
  body.csm-redesign .mainContainerFluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }
  body.csm-redesign .mainMenuWrapper {
    margin: 0 !important;
  }
  body.csm-redesign .mainContent.csm-content {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }
}

/* ── Sidebar: section labels ajustados ─────────────────── */
body.csm-redesign li.csm-side-section-label {
  padding: 14px 16px 3px 16px !important; /* top menor para que no quede lejos */
}
body.csm-redesign li.csm-side-section-label:first-child {
  padding-top: 10px !important;
}

/* ── Sidebar: items más compactos ──────────────────────── */
body.csm-redesign .csm-side-nav > li.csm-side-item {
  padding: 1px 6px !important;
}
body.csm-redesign .csm-side-link {
  padding: 9px 11px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}

/* ── Pill activo: blanco sutil (no rojo — el rojo va en el body) */
body.csm-redesign .csm-side-item.is-active .csm-side-link {
  background: rgba(255,255,255,.1) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}
body.csm-redesign .csm-side-item.is-active .csm-side-ico {
  stroke: #ffffff !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT V4 — Sidebar desde top:0 + Topbar solo en contenido
═══════════════════════════════════════════════════════════ */

/* ── Topbar mobile: negro, visible solo en mobile ──────── */
body.csm-redesign .top-line.csm-topbar.csm-topbar-mobile {
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  height: 52px !important;
  background: #111111 !important;
  position: relative !important;
  z-index: 10 !important;
}
body.csm-redesign .csm-topbar-mobile .csm-topbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
body.csm-redesign .csm-topbar-mobile .csm-topbar-logo {
  height: 34px !important;
  width: 34px !important;
  object-fit: contain !important;
}
body.csm-redesign .csm-topbar-mobile .csm-topbar-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .3px !important;
}

/* Topbar desktop: oculta en mobile */
body.csm-redesign .csm-topbar-desk {
  display: none;
}

/* ── DESKTOP ≥ 901px ────────────────────────────────────── */
@media (min-width: 901px) {

  /* Ocultar topbar mobile */
  body.csm-redesign .top-line.csm-topbar-mobile {
    display: none !important;
  }

  /* Topbar desktop: fija, empieza DESPUÉS del sidebar (left:200px) */
  body.csm-redesign .csm-topbar-desk {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 200px !important;
    right: 0 !important;
    height: 52px !important;
    background: #f9f9fb !important;
    border-bottom: 1px solid #e4e6ea !important;
    z-index: 300 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 20px !important;
  }
  body.csm-redesign .csm-topbar-desk-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Sidebar: desde top:0, full height, sobre el contenido */
  body.csm-redesign .mainMenu.csm-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 200px !important;
    height: 100vh !important;
    min-height: 0 !important;
    background: #111111 !important;
    float: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 500 !important;
    border-right: 1px solid rgba(255,255,255,.04) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Contenido: empujado 200px a la derecha y 52px abajo */
  body.csm-redesign .contentWrapper.csm-shell {
    margin-top: 52px !important;
    margin-left: 200px !important;
    padding: 0 !important;
  }
  body.csm-redesign .mainContainerFluid {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.csm-redesign .mainMenuWrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
  body.csm-redesign .mainContent.csm-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }
  body.csm-redesign .mainContent.csm-content > .inner {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ── Sidebar: logo header (solo visible en desktop) ─────── */
body.csm-redesign .csm-sidebar-header {
  display: none;
}
@media (min-width: 901px) {
  body.csm-redesign .csm-sidebar-header {
    display: flex !important;
    height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    flex-shrink: 0 !important;
    padding: 0 12px !important;
  }
  body.csm-redesign .csm-sidebar-logo-img {
    height: 38px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
  }
  /* Nav: flex-grow para ocupar el espacio restante */
  body.csm-redesign .csm-sidebar .csm-side-nav {
    flex: 1 !important;
    padding: 8px 0 12px !important;
  }
}

/* ── Pill activo: altura compacta (no superpone vecinos) ── */
body.csm-redesign .csm-side-link {
  padding: 7px 10px !important;
  line-height: 1.35 !important;
}
body.csm-redesign .csm-side-nav > li.csm-side-item {
  padding: 1px 6px !important;
}

/* ── Topbar actions: botones ────────────────────────────── */
body.csm-redesign .csm-topbar-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e4e8 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #555 !important;
  transition: background .13s, border-color .13s, color .13s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
body.csm-redesign .csm-topbar-btn:hover {
  background: #f3f4f6 !important;
  border-color: #c4161c !important;
  color: #c4161c !important;
}
body.csm-redesign .csm-topbar-btn svg {
  width: 17px !important;
  height: 17px !important;
  stroke: currentColor !important;
  fill: none !important;
  display: block !important;
}

/* ── Dropdown usuario ───────────────────────────────────── */
body.csm-redesign .csm-user-wrap {
  position: relative !important;
}
body.csm-redesign .csm-user-dd {
  display: none;
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  background: #ffffff !important;
  border: 1px solid #e4e6ea !important;
  border-radius: 12px !important;
  padding: 6px 0 !important;
  min-width: 210px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.14) !important;
  z-index: 9999 !important;
}
body.csm-redesign .csm-user-dd.is-open {
  display: block !important;
}
body.csm-redesign .csm-user-dd-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #333 !important;
  text-decoration: none !important;
  transition: background .1s !important;
}
body.csm-redesign .csm-user-dd-item:hover {
  background: #f5f6f8 !important;
  text-decoration: none !important;
}
body.csm-redesign .csm-user-dd-item svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-user-dd-danger {
  color: #c4161c !important;
}
body.csm-redesign .csm-user-dd-sep {
  height: 1px !important;
  background: #eeeff2 !important;
  margin: 4px 0 !important;
}

/* ── HERO: margen + border-radius para alinearse con bento */
body.csm-redesign .csm-dash-hero {
  margin: 14px 14px 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 20px 20px 18px !important;
}
@media (max-width: 900px) {
  body.csm-redesign .csm-dash-hero {
    margin: 10px 10px 0 !important;
    border-radius: 12px !important;
  }
}

/* ── BODY GRID: mismo margen que el hero ────────────────── */
body.csm-redesign .csm-dash-body-grid {
  padding: 14px 14px 20px !important;
}
@media (min-width: 901px) {
  body.csm-redesign .csm-dash-body-grid {
    padding: 14px 14px 24px !important;
  }
}

/* ── CAROUSEL: altura razonable sin forzar 246px ─────────── */
body.csm-redesign .csm-carousel-wrap {
  min-height: auto !important;
}
body.csm-redesign .csm-slide {
  min-height: 155px !important;
}
@media (min-width: 901px) {
  body.csm-redesign .csm-slide {
    min-height: 165px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT V4 — PATCH 1: píldora / logo / sidebar scroll
═══════════════════════════════════════════════════════════ */

/* ── Píldora: margen explícito entre items ─────────────── */
body.csm-redesign .csm-side-nav > li.csm-side-item {
  padding: 0 8px !important;
  margin: 2px 0 !important;
}
body.csm-redesign .csm-side-link,
body.csm-redesign .csm-side-link-sm {
  padding: 6px 10px !important;
  line-height: 1.25 !important;
}

/* ── Sidebar desktop: header siempre visible ───────────── */
@media (min-width: 901px) {
  /* El scroll va en el nav, no en el sidebar entero */
  body.csm-redesign .mainMenu.csm-sidebar {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Header: altura fija, no se encoge nunca */
  body.csm-redesign .csm-sidebar-header {
    display: flex !important;
    flex: 0 0 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    background: #111111 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    cursor: pointer !important;
    overflow: hidden !important;
  }
  /* Logo: tamaño adecuado para sidebar */
  body.csm-redesign .csm-sidebar-logo-img {
    height: 38px !important;
    width: auto !important;
    max-width: 168px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  /* Nav: scrollable, con min-height:0 para que funcione bien en flex */
  body.csm-redesign .csm-sidebar .csm-side-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 0 16px !important;
    margin: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PATCH 2 — Causas raíz del layout
═══════════════════════════════════════════════════════════ */

/* ── FIX: .mainContent tiene position:relative; left:13.53% ── */
body.csm-redesign .mainContent.csm-content {
  position: static !important;
  left: 0 !important;
}

/* ── FIX: .mainMenu > ul tiene position:absolute; top:0 ─────
   Solución: header y nav absolutamente posicionados en el sidebar */
@media (min-width: 901px) {
  /* Sidebar: bloque (no flex), sirve de containing block para abs */
  body.csm-redesign .mainMenu.csm-sidebar {
    display: block !important;
    overflow: hidden !important;
  }
  /* Header: top:0, ocupa la franja superior del sidebar */
  body.csm-redesign .csm-sidebar-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    background: #111111 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    z-index: 2 !important;
    cursor: pointer !important;
    flex: none !important;
  }
  body.csm-redesign .csm-sidebar-logo-img {
    height: 38px !important;
    width: auto !important;
    max-width: 168px !important;
    object-fit: contain !important;
    display: block !important;
  }
  /* Nav: empieza en top:56px (DEBAJO del header, no encima) */
  body.csm-redesign .csm-sidebar .csm-side-nav {
    position: absolute !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 0 16px !important;
    margin: 0 !important;
    z-index: 1 !important;
    flex: none !important;
    width: auto !important;
    min-height: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD V2 — Rediseño (clases csm-d2-*)
═══════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────── */
body.csm-redesign .csm-d2-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 14px 14px 0 !important;
  padding: 18px 20px !important;
  background: linear-gradient(120deg, #141414 0%, #200004 100%) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
@media (max-width: 900px) {
  body.csm-redesign .csm-d2-hero {
    margin: 10px 10px 0 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
  }
}
body.csm-redesign .csm-d2-hero-profile {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
body.csm-redesign .csm-d2-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,255,255,.15) !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-d2-avatar-ph {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.08) !important;
}
body.csm-redesign .csm-d2-avatar-ph svg {
  width: 26px !important;
  height: 26px !important;
  stroke: rgba(255,255,255,.45) !important;
}
body.csm-redesign .csm-d2-name {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .15px !important;
}
body.csm-redesign .csm-d2-sub {
  color: rgba(255,255,255,.45) !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}
/* Badges de estado */
body.csm-redesign .csm-d2-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-radius: 30px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
body.csm-redesign .csm-d2-badge svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-d2-badge-ok {
  background: rgba(22,163,74,.18) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74,222,128,.22) !important;
}
body.csm-redesign .csm-d2-badge-deuda {
  background: rgba(196,22,28,.22) !important;
  color: #f87171 !important;
  border: 1px solid rgba(248,113,113,.25) !important;
}
body.csm-redesign .csm-d2-hero-status {
  text-align: right !important;
}
body.csm-redesign .csm-d2-hero-deuda-det {
  color: rgba(255,255,255,.38) !important;
  font-size: 11.5px !important;
  margin-top: 5px !important;
}

/* ── BODY GRID ────────────────────────────────────────────── */
body.csm-redesign .csm-d2-body {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  padding: 14px 14px 28px !important;
}
@media (min-width: 901px) {
  body.csm-redesign .csm-d2-body {
    grid-template-columns: 3fr 2fr !important;
    gap: 12px !important;
  }
}

/* ── ACCIONES (4 tiles en 2×2) ───────────────────────────── */
body.csm-redesign .csm-d2-actions-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
body.csm-redesign .csm-d2-act {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 16px 16px 14px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .12s, box-shadow .12s !important;
}
body.csm-redesign .csm-d2-act:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  text-decoration: none !important;
}
body.csm-redesign .csm-d2-act::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 14px 14px 0 0 !important;
}
body.csm-redesign .csm-d2-act-dis {
  opacity: .48 !important;
  pointer-events: none !important;
}
body.csm-redesign .csm-d2-act-ico {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-d2-act-ico svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}
body.csm-redesign .csm-d2-act-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111 !important;
  line-height: 1.2 !important;
}
body.csm-redesign .csm-d2-act-sub {
  font-size: 11.5px !important;
  color: #888 !important;
  margin-top: 3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
/* Colores por tipo de acción */
body.csm-redesign .csm-d2-act-cuenta::before { background: #c4161c !important; }
body.csm-redesign .csm-d2-act-cuenta .csm-d2-act-ico { background: #fff0f0 !important; color: #c4161c !important; }
body.csm-redesign .csm-d2-act-pagos::before  { background: #2563eb !important; }
body.csm-redesign .csm-d2-act-pagos .csm-d2-act-ico  { background: #eff6ff !important; color: #2563eb !important; }
body.csm-redesign .csm-d2-act-abono::before  { background: #d97706 !important; }
body.csm-redesign .csm-d2-act-abono .csm-d2-act-ico  { background: #fffbeb !important; color: #d97706 !important; }
body.csm-redesign .csm-d2-act-entrada::before { background: #16a34a !important; }
body.csm-redesign .csm-d2-act-entrada .csm-d2-act-ico { background: #f0fdf4 !important; color: #16a34a !important; }

/* ── COLUMNA INFO ─────────────────────────────────────────── */
body.csm-redesign .csm-d2-info-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Tarjeta partido */
body.csm-redesign .csm-d2-match-card {
  background: linear-gradient(135deg, #141414 0%, #200004 100%) !important;
  border-radius: 14px !important;
  padding: 18px 18px 16px !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-d2-match-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #f87171 !important;
  margin-bottom: 8px !important;
}
body.csm-redesign .csm-d2-match-teams {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
}
body.csm-redesign .csm-d2-match-teams span {
  color: rgba(255,255,255,.35) !important;
  font-weight: 400 !important;
  margin: 0 5px !important;
}
body.csm-redesign .csm-d2-match-fecha {
  font-size: 12px !important;
  color: rgba(255,255,255,.45) !important;
  margin-top: 6px !important;
}
body.csm-redesign .csm-d2-match-cta {
  display: inline-block !important;
  margin-top: 12px !important;
  padding: 7px 16px !important;
  background: #c4161c !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background .12s !important;
}
body.csm-redesign .csm-d2-match-cta:hover {
  background: #a81219 !important;
  text-decoration: none !important;
  color: #fff !important;
}

/* Tarjeta info (abono activo, etc.) */
body.csm-redesign .csm-d2-info-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-d2-info-ico {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-d2-info-ico svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}
body.csm-redesign .csm-d2-info-abono .csm-d2-info-ico { background: #fffbeb !important; color: #d97706 !important; }
body.csm-redesign .csm-d2-info-label {
  font-size: 11px !important;
  color: #999 !important;
  margin-bottom: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-weight: 600 !important;
}
body.csm-redesign .csm-d2-info-val {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Lista de movimientos */
body.csm-redesign .csm-d2-movs-wrap {
  background: #ffffff !important;
  border: 1px solid #eaecf0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  flex: 1 !important;
}
body.csm-redesign .csm-d2-movs-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #f0f1f4 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #333 !important;
}
body.csm-redesign .csm-d2-movs-head a {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #c4161c !important;
  text-decoration: none !important;
}
body.csm-redesign .csm-d2-movs-head a:hover { text-decoration: underline !important; }
body.csm-redesign .csm-d2-mov {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  border-bottom: 1px solid #f5f6f8 !important;
}
body.csm-redesign .csm-d2-mov:last-child { border-bottom: none !important; }
body.csm-redesign .csm-d2-mov-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: #ddd !important;
}
body.csm-redesign .csm-d2-mov-deuda .csm-d2-mov-dot { background: #f87171 !important; }
body.csm-redesign .csm-d2-mov-pago  .csm-d2-mov-dot { background: #4ade80 !important; }
body.csm-redesign .csm-d2-mov-main {
  flex: 1 !important;
  min-width: 0 !important;
}
body.csm-redesign .csm-d2-mov-desc {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #333 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.csm-redesign .csm-d2-mov-fecha {
  font-size: 11px !important;
  color: #bbb !important;
  margin-top: 1px !important;
}
body.csm-redesign .csm-d2-imp-r {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #ef4444 !important;
  white-space: nowrap !important;
}
body.csm-redesign .csm-d2-imp-g {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #22c55e !important;
  white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD MK — mobile-first (csm-mk-*). Desktop ≥ 901px
═══════════════════════════════════════════════════════════ */

/* Fondo del área de contenido */
body.csm-redesign .mainContent.csm-content > .inner {
  background: #F5F5F5 !important;
  min-height: calc(100vh - 52px) !important;
}

/* ── HERO ─────────────────────────────────────────────────── */
body.csm-redesign .csm-mk-hero {
  background: linear-gradient(160deg, #111 0%, #3a0608 60%, #8F0F13 100%) !important;
  padding: 20px 16px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
body.csm-redesign .csm-mk-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 85% 20%, rgba(196,22,28,.22) 0%, transparent 55%),
              radial-gradient(circle at 15% 80%, rgba(196,22,28,.13) 0%, transparent 45%);
  pointer-events: none !important;
}
body.csm-redesign .csm-mk-hero-profile {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative !important;
  z-index: 1 !important;
}
body.csm-redesign .csm-mk-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255,255,255,.28) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: #555 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
body.csm-redesign .csm-mk-avatar-ph {
  background: rgba(255,255,255,.1) !important;
}
body.csm-redesign .csm-mk-avatar-ph svg {
  width: 30px !important;
  height: 30px !important;
  stroke: rgba(255,255,255,.5) !important;
  fill: none !important;
}
body.csm-redesign .csm-mk-hero-nombre {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.csm-redesign .csm-mk-hero-sub {
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  margin-top: 3px !important;
}
body.csm-redesign .csm-mk-hero-badge {
  display: inline-block !important;
  margin-top: 5px !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .7px !important;
  padding: 2px 9px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
}
/* Saldo bar */
body.csm-redesign .csm-mk-hero-saldo {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 18px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 14px 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
body.csm-redesign .csm-mk-saldo-label {
  color: rgba(255,255,255,.58) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
body.csm-redesign .csm-mk-saldo-value {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -.3px !important;
  line-height: 1.2 !important;
}
body.csm-redesign .csm-mk-saldo-value.csm-mk-deuda { color: #ff7070 !important; }
body.csm-redesign .csm-mk-saldo-value.csm-mk-ok    { color: #6eff9e !important; font-size: 16px !important; }
body.csm-redesign .csm-mk-saldo-sub {
  color: rgba(255,255,255,.45) !important;
  font-size: 11px !important;
  margin-top: 3px !important;
}
body.csm-redesign .csm-mk-saldo-cta {
  background: linear-gradient(180deg, #C4161C, #8F0F13) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 10px rgba(196,22,28,.45) !important;
  letter-spacing: .2px !important;
  text-decoration: none !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-mk-saldo-cta:hover {
  background: linear-gradient(180deg, #d91920, #8F0F13) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── SECCIONES ────────────────────────────────────────────── */
body.csm-redesign .csm-mk-section {
  padding: 16px 16px 0 !important;
}
body.csm-redesign .csm-mk-section-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase !important;
  color: #555 !important;
  margin-bottom: 12px !important;
}

/* ── STATUS CARDS (Abono / Cuenta) ───────────────────────── */
body.csm-redesign .csm-mk-status-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
body.csm-redesign .csm-mk-status-card {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
}
body.csm-redesign .csm-mk-sc-label {
  font-size: 11px !important;
  color: #999 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 6px !important;
}
body.csm-redesign .csm-mk-sc-value {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #222 !important;
  line-height: 1.2 !important;
}
body.csm-redesign .csm-mk-sc-value.csm-mk-ok  { color: #1a9a4a !important; }
body.csm-redesign .csm-mk-sc-value.csm-mk-bad { color: #C4161C !important; }
body.csm-redesign .csm-mk-sc-sub {
  font-size: 11px !important;
  color: #999 !important;
  margin-top: 3px !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

/* ── ACCIONES (4 icons en fila) ───────────────────────────── */
body.csm-redesign .csm-mk-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
body.csm-redesign .csm-mk-action-card {
  background: #CACACA !important;
  border-radius: 12px !important;
  padding: 14px 6px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform .12s, background .12s !important;
  text-decoration: none !important;
  color: inherit !important;
}
body.csm-redesign .csm-mk-action-card:hover {
  transform: translateY(-2px) !important;
  background: #B8B8B8 !important;
  text-decoration: none !important;
  color: inherit !important;
}
body.csm-redesign .csm-mk-action-card.csm-mk-dis {
  opacity: .45 !important;
  pointer-events: none !important;
}
body.csm-redesign .csm-mk-action-ico {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.csm-redesign .csm-mk-action-ico svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}
body.csm-redesign .csm-mk-ico-red    { background: #f5e6e7 !important; color: #C4161C !important; }
body.csm-redesign .csm-mk-ico-blue   { background: #e6f0fc !important; color: #1a6fd6 !important; }
body.csm-redesign .csm-mk-ico-orange { background: #fff4e0 !important; color: #e07b00 !important; }
body.csm-redesign .csm-mk-ico-green  { background: #e6f5ec !important; color: #1a9a4a !important; }
body.csm-redesign .csm-mk-ico-purple { background: #f0eafc !important; color: #7c3aed !important; }
body.csm-redesign .csm-mk-action-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: #555 !important;
  line-height: 1.2 !important;
}

/* ── CAROUSEL (solo mobile) ───────────────────────────────── */
body.csm-redesign .csm-mk-carousel-section { display: block !important; }
@media (min-width: 901px) {
  body.csm-redesign .csm-mk-carousel-section { display: none !important; }
}
body.csm-redesign .csm-mk-carousel-wrap {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.14) !important;
  background: #111 !important;
  aspect-ratio: 16/7 !important;
}
body.csm-redesign .csm-mk-carousel-track {
  display: flex !important;
  transition: transform .4s ease !important;
}
body.csm-redesign .csm-mk-carousel-slide {
  min-width: 100% !important;
  aspect-ratio: 16/7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}
body.csm-redesign .csm-mk-slide-partido { background: linear-gradient(135deg, #1a0203, #8F0F13) !important; }
body.csm-redesign .csm-mk-slide-abono   { background: linear-gradient(135deg, #0a1628, #1a6fd6) !important; }
body.csm-redesign .csm-mk-slide-default { background: linear-gradient(135deg, #111, #3a0608) !important; }
body.csm-redesign .csm-mk-slide-info    { background: linear-gradient(135deg, #0a1f0e, #1a9a4a) !important; }
body.csm-redesign .csm-mk-slide-content {
  text-align: center !important;
  color: #fff !important;
  padding: 16px !important;
  z-index: 1 !important;
  position: relative !important;
}
body.csm-redesign .csm-mk-slide-content h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin-bottom: 5px !important;
  color: #fff !important;
}
body.csm-redesign .csm-mk-slide-content p {
  font-size: 12px !important;
  opacity: .8 !important;
  line-height: 1.4 !important;
  color: #fff !important;
  margin: 0 !important;
}
body.csm-redesign .csm-mk-slide-btn {
  display: inline-block !important;
  margin-top: 10px !important;
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
body.csm-redesign .csm-mk-slide-btn:hover { color: #fff !important; text-decoration: none !important; }
body.csm-redesign .csm-mk-carousel-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 0 0 !important;
}
body.csm-redesign .csm-mk-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #E9E9E9 !important;
  cursor: pointer !important;
  transition: background .2s, width .2s !important;
  border: none !important;
  padding: 0 !important;
  display: inline-block !important;
}
body.csm-redesign .csm-mk-dot.is-active {
  background: #C4161C !important;
  width: 20px !important;
  border-radius: 4px !important;
}
body.csm-redesign .csm-mk-carousel-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0,0,0,.32) !important;
  color: #fff !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 0 !important;
}
body.csm-redesign .csm-mk-carousel-arrow.prev { left: 8px !important; }
body.csm-redesign .csm-mk-carousel-arrow.next { right: 8px !important; }

/* ── MOVIMIENTOS (cards) ──────────────────────────────────── */
body.csm-redesign .csm-mk-mov-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
body.csm-redesign .csm-mk-mov-card {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-left: 3px solid transparent !important;
}
body.csm-redesign .csm-mk-mov-card.csm-mk-border-red    { border-left-color: #C4161C !important; }
body.csm-redesign .csm-mk-mov-card.csm-mk-border-green  { border-left-color: #1a9a4a !important; }
body.csm-redesign .csm-mk-mov-card.csm-mk-border-gray   { border-left-color: #ccc !important; }
body.csm-redesign .csm-mk-mov-ico {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.csm-redesign .csm-mk-mov-ico svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}
body.csm-redesign .csm-mk-mov-ico.ico-red    { background: #fff0f0 !important; color: #C4161C !important; }
body.csm-redesign .csm-mk-mov-ico.ico-green  { background: #e6f5ec !important; color: #1a9a4a !important; }
body.csm-redesign .csm-mk-mov-ico.ico-gray   { background: #f0f0f0 !important; color: #888 !important; }
body.csm-redesign .csm-mk-mov-body { flex: 1 !important; min-width: 0 !important; }
body.csm-redesign .csm-mk-mov-desc {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.csm-redesign .csm-mk-mov-date {
  font-size: 11px !important;
  color: #999 !important;
  margin-top: 2px !important;
}
body.csm-redesign .csm-mk-mov-badges {
  display: flex !important;
  gap: 5px !important;
  margin-top: 4px !important;
}
body.csm-redesign .csm-mk-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
}
body.csm-redesign .csm-mk-badge.b-red    { background: #fff0f0 !important; color: #C4161C !important; }
body.csm-redesign .csm-mk-badge.b-green  { background: #e6f5ec !important; color: #1a9a4a !important; }
body.csm-redesign .csm-mk-badge.b-gray   { background: #f0f0f0 !important; color: #888 !important; }
body.csm-redesign .csm-mk-mov-amount { text-align: right !important; flex-shrink: 0 !important; }
body.csm-redesign .csm-mk-amount {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #111 !important;
  white-space: nowrap !important;
}
body.csm-redesign .csm-mk-amount.deuda { color: #C4161C !important; }
body.csm-redesign .csm-mk-amount.ok    { color: #1a9a4a !important; }
body.csm-redesign .csm-mk-see-more {
  display: block !important;
  text-align: center !important;
  padding: 12px !important;
  color: #C4161C !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
body.csm-redesign .csm-mk-see-more:hover {
  text-decoration: underline !important;
  color: #C4161C !important;
}
body.csm-redesign .csm-mk-section-gap { height: 8px !important; }

/* ── DESKTOP ≥ 901px ─────────────────────────────────────── */
@media (min-width: 901px) {
  body.csm-redesign .csm-mk-hero {
    padding: 24px 28px 0 !important;
  }
  body.csm-redesign .csm-mk-avatar {
    width: 72px !important;
    height: 72px !important;
  }
  body.csm-redesign .csm-mk-hero-nombre {
    font-size: 20px !important;
  }
  body.csm-redesign .csm-mk-hero-saldo {
    border-radius: 14px !important;
    margin-top: 20px !important;
    padding: 16px 22px 22px !important;
  }
  body.csm-redesign .csm-mk-section {
    padding: 16px 28px 0 !important;
  }
  /* Desktop: action-cards en fila única flex, horizontales */
  body.csm-redesign .csm-mk-actions-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  body.csm-redesign .csm-mk-action-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
  body.csm-redesign .csm-mk-action-ico {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }
  body.csm-redesign .csm-mk-action-ico svg {
    width: 18px !important;
    height: 18px !important;
  }
  body.csm-redesign .csm-mk-action-label {
    font-size: 12px !important;
    text-align: left !important;
  }
  /* Desktop: movimientos en 1 columna, filas compactas */
  body.csm-redesign .csm-mk-mov-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  body.csm-redesign .csm-mk-mov-card {
    padding: 7px 12px !important;
    border-radius: 8px !important;
    gap: 10px !important;
  }
  body.csm-redesign .csm-mk-mov-ico {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
  }
  body.csm-redesign .csm-mk-mov-ico svg {
    width: 14px !important;
    height: 14px !important;
  }
  body.csm-redesign .csm-mk-mov-desc {
    font-size: 12px !important;
  }
  body.csm-redesign .csm-mk-mov-date {
    display: inline !important;
    font-size: 10px !important;
    margin-top: 0 !important;
    margin-left: 6px !important;
  }
  body.csm-redesign .csm-mk-mov-badges {
    display: inline-flex !important;
    margin-top: 0 !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
  }
  body.csm-redesign .csm-mk-amount {
    font-size: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ACCOUNT PAGE — csm-mk-acct-* / csm-mk-pills / csm-mk-totals
   Usados en: fbuscarpersonacuenta-csm.php, flistarpersonacuenta-csm.php
══════════════════════════════════════════════════════════════════ */

/* ── Header oscuro con saldo total ─────────────── */
body.csm-redesign .csm-mk-acct-header {
  background: linear-gradient(135deg, #111111 0%, #3a0608 50%, #8F0F13 100%) !important;
  padding: 18px 16px 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
body.csm-redesign .csm-mk-acct-header::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='160' cy='40' r='80' fill='rgba(196%2C22%2C28%2C.18)'/%3E%3C/svg%3E") right top / 200px no-repeat !important;
  pointer-events: none !important;
}
body.csm-redesign .csm-mk-acct-saldo-label {
  color: rgba(255,255,255,.65) !important;
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .6px !important;
  margin-bottom: 4px !important; position: relative !important;
}
body.csm-redesign .csm-mk-acct-saldo-value {
  color: #ff7070 !important;
  font-size: 26px !important; font-weight: 900 !important;
  letter-spacing: -.5px !important; position: relative !important;
  line-height: 1.15 !important;
}
body.csm-redesign .csm-mk-acct-saldo-value.ok {
  color: #6eff9e !important; font-size: 17px !important;
}
body.csm-redesign .csm-mk-acct-btns {
  display: flex !important; gap: 8px !important;
  margin-top: 12px !important; position: relative !important;
}
body.csm-redesign .csm-mk-acct-btn {
  flex: 1 !important; border-radius: 10px !important;
  padding: 10px 8px !important; font-size: 13px !important; font-weight: 700 !important;
  cursor: pointer !important; border: none !important;
  text-align: center !important; text-decoration: none !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  line-height: 1.2 !important; white-space: nowrap !important;
}
body.csm-redesign .csm-mk-acct-btn.primary {
  background: linear-gradient(180deg, #C4161C, #8F0F13) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(196,22,28,.4) !important;
}
body.csm-redesign .csm-mk-acct-btn.secondary {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
body.csm-redesign .csm-mk-acct-btn:hover { text-decoration: none !important; color: #fff !important; }
body.csm-redesign .csm-mk-acct-btn svg { flex-shrink: 0 !important; }

/* ── Page title strip ──────────────────────────── */
body.csm-redesign .csm-mk-acct-title {
  color: #fff !important;
  font-size: 19px !important; font-weight: 800 !important;
  position: relative !important; margin-bottom: 2px !important;
}

/* ── Filter pills row ──────────────────────────── */
body.csm-redesign .csm-mk-pills-row {
  padding: 10px 16px !important;
  display: flex !important; gap: 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  background: #fff !important;
  border-bottom: 1px solid #e9e9e9 !important;
}
body.csm-redesign .csm-mk-pills-row::-webkit-scrollbar { display: none !important; }
body.csm-redesign .csm-mk-pill {
  background: #f5f5f5 !important; color: #555 !important;
  border: 1.5px solid #e9e9e9 !important; border-radius: 20px !important;
  padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important;
  white-space: nowrap !important; cursor: pointer !important; flex-shrink: 0 !important;
  text-decoration: none !important; display: inline-block !important;
}
body.csm-redesign .csm-mk-pill.is-active {
  background: #C4161C !important; color: #fff !important;
  border-color: #C4161C !important;
}
body.csm-redesign .csm-mk-pill:hover { text-decoration: none !important; }
body.csm-redesign .csm-mk-pill-action {
  background: #fff4e0 !important; color: #e07b00 !important;
  border-color: #ffe0a0 !important;
}

/* ── Info banner ───────────────────────────────── */
body.csm-redesign .csm-mk-info-banner {
  margin: 8px 16px !important; padding: 10px 12px !important;
  background: #fff8e7 !important; border-radius: 10px !important;
  border-left: 3px solid #e07b00 !important;
  font-size: 11px !important; color: #666 !important;
  line-height: 1.45 !important;
}

/* ── Totals summary card ───────────────────────── */
body.csm-redesign .csm-mk-totals {
  margin: 8px 16px 0 !important;
  background: #fff !important; border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
body.csm-redesign .csm-mk-tot-row {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important;
  padding: 5px 0 !important; border-bottom: 1px solid #f0f0f0 !important;
}
body.csm-redesign .csm-mk-tot-row:last-child { border-bottom: none !important; }
body.csm-redesign .csm-mk-tot-label {
  font-size: 12px !important; color: #999 !important; font-weight: 600 !important;
}
body.csm-redesign .csm-mk-tot-value {
  font-size: 13px !important; font-weight: 800 !important; color: #111 !important;
}
body.csm-redesign .csm-mk-tot-value.deuda { color: #C4161C !important; }
body.csm-redesign .csm-mk-tot-value.ok    { color: #1a9a4a !important; }

/* ── Empty state ───────────────────────────────── */
body.csm-redesign .csm-mk-empty {
  text-align: center !important;
  padding: 40px 16px 20px !important;
  color: #bbb !important;
}
body.csm-redesign .csm-mk-empty svg {
  display: block !important; margin: 0 auto 12px !important; opacity: .3 !important;
}

/* ── Search bar (Pagos view) ───────────────────── */
body.csm-redesign .csm-mk-search-wrap {
  padding: 12px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #e9e9e9 !important;
  display: flex !important; gap: 8px !important; align-items: center !important;
}
body.csm-redesign .csm-mk-search-input {
  flex: 1 !important;
  background: #f5f5f5 !important; border: none !important;
  border-radius: 10px !important; padding: 10px 14px !important;
  font-size: 14px !important; color: #111 !important;
  outline: none !important; box-shadow: none !important;
}
body.csm-redesign .csm-mk-search-input:focus { background: #eee !important; }
body.csm-redesign .csm-mk-search-btn {
  flex-shrink: 0 !important; background: #C4161C !important;
  border: none !important; border-radius: 10px !important;
  padding: 10px 14px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body.csm-redesign .csm-mk-new-btn {
  flex-shrink: 0 !important;
  background: linear-gradient(180deg,#C4161C,#8F0F13) !important;
  color: #fff !important; border: none !important; border-radius: 10px !important;
  padding: 10px 12px !important; font-size: 12px !important; font-weight: 700 !important;
  text-decoration: none !important; white-space: nowrap !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  box-shadow: 0 3px 8px rgba(196,22,28,.3) !important;
}
body.csm-redesign .csm-mk-new-btn:hover { text-decoration: none !important; color: #fff !important; }

/* Desktop adaptaciones — account page */
@media (min-width: 901px) {
  body.csm-redesign .csm-mk-acct-header { padding: 20px 24px 22px !important; }
  body.csm-redesign .csm-mk-acct-btns   { max-width: 420px !important; }
  body.csm-redesign .csm-mk-pills-row   { padding: 10px 24px !important; }
  body.csm-redesign .csm-mk-info-banner { margin: 8px 24px !important; }
  body.csm-redesign .csm-mk-totals      { margin: 10px 24px 0 !important; }
  body.csm-redesign .csm-mk-search-wrap { padding: 12px 24px !important; }
  body.csm-redesign .csm-mk-empty       { padding: 60px 24px 20px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   PATCH: Sidebar pill — altura reducida, sin superposición
   El link original tenía margin:2px 8px (no pisado por patches anteriores)
   que sumaba al padding y hacía la píldora demasiado alta.
══════════════════════════════════════════════════════════════════ */
body.csm-redesign .csm-side-link,
body.csm-redesign .csm-side-link-sm {
  height: auto !important;       /* ← anula el height:39px del tema original */
  padding: 5px 10px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}
body.csm-redesign .csm-side-nav > li.csm-side-item {
  height: auto !important;       /* por las dudas, también en el li */
  padding: 0 8px !important;
  margin: 2px 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   BURGER MOBILE — topbar CEL
══════════════════════════════════════════════════════════════════ */

/* Botón burger en topbar */
body.csm-redesign .csm-mob-burger {
  background: none !important; border: none !important;
  color: #fff !important; cursor: pointer !important;
  padding: 6px !important; flex-shrink: 0 !important;
  display: flex !important; align-items: center !important;
  margin-left: auto !important;
  opacity: .9 !important;
}
body.csm-redesign .csm-mob-burger:hover { opacity: 1 !important; }

/* Dropdown del burger: cubre toda la pantalla bajo el topbar */
body.csm-redesign .csm-burger-dd {
  display: none !important;
  position: fixed !important; top: 52px !important;
  left: 0 !important; right: 0 !important;
  z-index: 1100 !important;
  background: #1c1c1c !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.45) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
body.csm-redesign .csm-burger-dd.is-open { display: block !important; }

/* Items del dropdown */
body.csm-redesign .csm-burger-item {
  display: flex !important; align-items: center !important;
  gap: 14px !important; padding: 15px 20px !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 14px !important; font-weight: 500 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
body.csm-redesign .csm-burger-item:hover {
  background: rgba(255,255,255,.07) !important;
  text-decoration: none !important;
}
body.csm-redesign .csm-burger-item svg { flex-shrink: 0 !important; opacity: .7 !important; }
body.csm-redesign .csm-burger-sep {
  height: 1px !important;
  background: rgba(255,255,255,.12) !important;
}
body.csm-redesign .csm-burger-danger { color: #ff7070 !important; }
body.csm-redesign .csm-burger-danger svg { opacity: 1 !important; }

/* Solo visible en mobile */
@media (min-width: 901px) {
  body.csm-redesign .csm-mob-burger { display: none !important; }
  body.csm-redesign .csm-burger-dd  { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   FIX CRÍTICO: topbar mobile oculto por margin-top:-48px del tema
   IMPORTANTE: scoped SOLO a mobile. Sin media query este display:flex
   sobreescribiría el display:none del desktop y mostraría el topbar
   negro en PC, sumando 52px extra de gap al margin-top:52px del shell.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.csm-redesign > .top-line.csm-topbar-mobile {
    margin-top: 0 !important;
    display: flex !important;
    position: relative !important;
    z-index: 500 !important;
  }
}
/* Asegurar que en desktop quede oculto pase lo que pase */
@media (min-width: 901px) {
  body.csm-redesign > .top-line.csm-topbar-mobile {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX: Hero edge-to-edge — eliminar padding/margin de wrappers
   ─────────────────────────────────────────────────────────────────
   CEL: .inner tiene padding:0 10px en mobile (tema original) → gap
   PC:  topbar-mobile invisible pero aun generaba 52px extra en desktop
        porque su fix anterior no estaba dentro de un media query.
══════════════════════════════════════════════════════════════════ */

/* ── CEL (< 901px): wrappers sin padding, hero borde-a-borde ── */
@media (max-width: 900px) {
  body.csm-redesign .contentWrapper.csm-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body.csm-redesign .mainContainerFluid {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.csm-redesign .mainMenuWrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
  body.csm-redesign .mainContent.csm-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }
  body.csm-redesign .mainContent.csm-content > .inner {
    margin: 0 !important;
    padding: 0 !important;
  }
  body.csm-redesign .csm-mk-hero {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── PC (≥ 901px): contenido fixed + hero flush y side-by-side ─
   ESTRATEGIA: en lugar de pelear con Bootstrap grid, hacer
   .mainContent.csm-content position:fixed exactamente bajo el
   topbar y a la derecha del sidebar. Elimina TODO conflicto con
   wrappers/padding/clearfix de Bootstrap.
────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  /* Wrappers Bootstrap: vaciarlos completamente */
  body.csm-redesign .contentWrapper.csm-shell {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.csm-redesign .mainContainerFluid {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.csm-redesign .mainMenuWrapper {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* ── ÁREA DE CONTENIDO: fixed, exactamente debajo del topbar ── */
  body.csm-redesign .mainContent.csm-content {
    position: fixed !important;
    top: 52px !important;        /* coincide con height del csm-topbar-desk */
    left: 200px !important;      /* coincide con width del sidebar */
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    background: #F5F5F5 !important;
    z-index: 100 !important;
  }
  body.csm-redesign .mainContent.csm-content > .inner {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  /* ── HERO: flex row → profile (izq) + saldo (der) ─────────── */
  body.csm-redesign .csm-mk-hero {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    padding: 24px 32px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  body.csm-redesign .csm-mk-hero-profile {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
  }
  body.csm-redesign .csm-mk-hero-saldo {
    flex: 0 0 300px !important;
    margin-top: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LOGO LogoCASMT23_2.png — ajuste por versión
   Logo apaisado 2019×776 (ratio ≈2.6:1, fondo transparente)
══════════════════════════════════════════════════════════════════ */

/* ── PC: logo en el header del sidebar ─────────────────────── */
@media (min-width: 901px) {
  /* Header: mantiene su altura original; solo ajustamos padding lateral */
  body.csm-redesign .csm-sidebar-header {
    padding: 0 16px !important;
  }
  /* Logo: sin fondo ni bordes, centrado verticalmente dentro del header original */
  body.csm-redesign .csm-sidebar-logo-img {
    height: 56px !important;
    width: auto !important;
    max-width: 168px !important;   /* sidebar 200px - 2×16px padding */
    object-fit: contain !important;
    display: block !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
}

/* ── CEL: logo alineado a la izquierda en topbar negro ──────── */
@media (max-width: 900px) {
  /* Brand: alineado a la izquierda */
  body.csm-redesign .csm-topbar-mobile .csm-topbar-brand {
    justify-content: flex-start !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  /* Logo: un poco más grande (46px), sin fondo ni bordes.
     LogoCASMT23_2 es 2019×776 (ratio 2.6:1), fondo transparente.
     A 46px alto → ancho ≈120px → bien visible en la barra. */
  body.csm-redesign .csm-topbar-mobile .csm-topbar-logo {
    height: 50px !important;
    width: auto !important;
    max-width: 190px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    background: transparent !important;   /* ← anula el background:#fff */
    border-radius: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MI CUENTA — botones de acción (Generar volante / Ver pagos)
══════════════════════════════════════════════════════════════════ */
body.csm-redesign .csm-mk-acct-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
body.csm-redesign .csm-mk-acct-act-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  transition: opacity .12s !important;
}
body.csm-redesign .csm-mk-acct-act-btn:hover {
  text-decoration: none !important;
  opacity: .85 !important;
}
body.csm-redesign .csm-mk-acct-act-btn.primary {
  background: linear-gradient(180deg, #C4161C, #8F0F13) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(196,22,28,.3) !important;
}
body.csm-redesign .csm-mk-acct-act-btn.primary:hover { color: #fff !important; }
body.csm-redesign .csm-mk-acct-act-btn.secondary {
  background: #f0f0f0 !important;
  color: #333 !important;
  border: 1.5px solid #ddd !important;
}
body.csm-redesign .csm-mk-acct-act-btn.secondary:hover { color: #333 !important; }
body.csm-redesign .csm-mk-acct-act-btn svg { flex-shrink: 0 !important; }

@media (min-width: 901px) {
  body.csm-redesign .csm-mk-acct-actions { padding: 12px 24px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   CUENTA — filtros y resultados (csm-ct-*)
══════════════════════════════════════════════════════════════════ */

/* Wrapper cuenta — padding lateral uniforme para filtro + lista */
body.csm-redesign .csm-ct-wrap {
  padding: 12px 14px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Caja de filtros */
body.csm-redesign .csm-ct-filter-card {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e8e8e8 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
  padding: 10px 14px !important;
}

/* Fila de filtros — flex, se envuelve en mobile */
body.csm-redesign .csm-ct-filter-body {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 6px !important;
}

/* Cada grupo de controles */
body.csm-redesign .csm-ct-filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* Divisor vertical entre grupos */
body.csm-redesign .csm-ct-divider {
  display: block !important;
  width: 1px !important;
  height: 22px !important;
  background: #e4e4e4 !important;
  flex-shrink: 0 !important;
  margin: 0 4px !important;
  align-self: center !important;
}

/* Label "Desde / Hasta" */
body.csm-redesign .csm-ct-filter-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #999 !important;
  white-space: nowrap !important;
}

/* Campos de fecha */
body.csm-redesign .csm-ct-date-input {
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 7px !important;
  padding: 0 8px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 12px !important;
  color: #333 !important;
  background: #fafafa !important;
  outline: none !important;
  max-width: 138px !important;
  vertical-align: middle !important;
}
body.csm-redesign .csm-ct-date-input:focus {
  border-color: #C4161C !important;
  background: #fff !important;
}

/* Botón lupa — círculo rojo, alineado al extremo derecho */
body.csm-redesign .csm-ct-search-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #C4161C !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  box-shadow: 0 2px 6px rgba(196,22,28,.30) !important;
  transition: background .15s !important;
}
body.csm-redesign .csm-ct-search-btn:hover { background: #a41217 !important; }

/* Correcciones para elementos dentro del wrap */
body.csm-redesign .csm-ct-wrap .csm-mk-info-banner  { margin: 0 !important; }
body.csm-redesign .csm-ct-wrap .csm-mk-totals        { margin: 0 !important; }
body.csm-redesign .csm-ct-wrap .csm-mk-mov-list      { padding: 0 !important; }
body.csm-redesign .csm-ct-wrap .csm-mk-empty         { padding: 40px 0 20px !important; }
body.csm-redesign .csm-ct-wrap .csm-mk-section-gap   { height: 4px !important; }

/* Mobile: ocultar divisores cuando los grupos apilan */
@media (max-width: 600px) {
  body.csm-redesign .csm-ct-divider { display: none !important; }
  body.csm-redesign .csm-ct-date-input { max-width: 140px !important; }
}

/* PC */
@media (min-width: 901px) {
  body.csm-redesign .csm-ct-wrap { padding: 14px 24px 0 !important; gap: 12px !important; }
  body.csm-redesign .csm-ct-filter-card { padding: 10px 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   PAGOS — lista de comprobantes (cards)
══════════════════════════════════════════════════════════════════ */

/* Contenedor lista */
/* Wrapper Pagos — contiene filtro + lista, define el ancho común */
body.csm-redesign .csm-pg-wrap {
  padding: 14px 14px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Caja de filtros con bordes redondeados */
body.csm-redesign .csm-pg-filter-card {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e8e8e8 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
  overflow: hidden !important;
}
body.csm-redesign .csm-pg-filter-card .csm-mk-pills-row {
  border-bottom: none !important;
  background: transparent !important;
  padding: 10px 14px !important;
}

/* Lista de cards — padding cero (el wrap provee el margen lateral) */
body.csm-redesign .csm-pg-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
}

/* Estado vacío (filtro sin resultados) */
body.csm-redesign .csm-pg-empty {
  text-align: center !important;
  padding: 40px 16px !important;
  color: #bbb !important;
}
body.csm-redesign .csm-pg-empty svg {
  display: block !important;
  margin: 0 auto 12px !important;
  opacity: .3 !important;
}
body.csm-redesign .csm-pg-empty p {
  font-size: 14px !important;
  margin: 0 !important;
}

/* Card base */
body.csm-redesign .csm-pg-card {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 13px 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
  border-left: 4px solid #ddd !important;
}
/* Borde de color según estado */
body.csm-redesign .csm-pg-card[data-estado="Pendiente"],
body.csm-redesign .csm-pg-card[data-estado="Pago en Espera"] {
  border-left-color: #e07b00 !important;
}
body.csm-redesign .csm-pg-card[data-estado="Pagado"] {
  border-left-color: #1a9a4a !important;
}
body.csm-redesign .csm-pg-card[data-estado="Expiró"],
body.csm-redesign .csm-pg-card[data-estado="Anulado"] {
  border-left-color: #bbb !important;
  opacity: .8 !important;
}

/* Encabezado: [número + badge] + importe */
body.csm-redesign .csm-pg-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
body.csm-redesign .csm-pg-card-num-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
body.csm-redesign .csm-pg-card-num {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Badge de estado */
body.csm-redesign .csm-pg-badge {
  display: inline-block !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
body.csm-redesign .csm-pg-badge-pend {
  background: #fff4e0 !important;
  color: #e07b00 !important;
}
body.csm-redesign .csm-pg-badge-ok {
  background: #e6f5ec !important;
  color: #1a9a4a !important;
}
body.csm-redesign .csm-pg-badge-off {
  background: #f0f0f0 !important;
  color: #999 !important;
}

/* Conceptos */
body.csm-redesign .csm-pg-card-concepts {
  font-size: 12px !important;
  color: #444 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}

/* Meta: fecha + botones de pago en la misma fila */
body.csm-redesign .csm-pg-card-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 2px !important;
}
body.csm-redesign .csm-pg-meta-info {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  font-size: 11px !important;
  color: #888 !important;
}
body.csm-redesign .csm-pg-vto {
  color: #C4161C !important;
  font-weight: 600 !important;
}
body.csm-redesign .csm-pg-recibo {
  color: #1a6fd6 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
body.csm-redesign .csm-pg-recibo:hover { text-decoration: underline !important; }

/* Importe — ahora en el encabezado */
body.csm-redesign .csm-pg-amount {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #111 !important;
  letter-spacing: -.3px !important;
  white-space: nowrap !important;
}
/* Botones de pago — misma altura que fecha, con borde fino */
body.csm-redesign .csm-pg-pay-btns {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-pg-pay-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 7px !important;
  border: 1px solid #d8d8d8 !important;
  background: #fff !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: opacity .12s, border-color .12s !important;
}
body.csm-redesign .csm-pg-pay-btn:hover {
  opacity: .85 !important;
  border-color: #bbb !important;
}
body.csm-redesign .csm-pg-pay-mp img {
  height: 26px !important;
  width: auto !important;
  display: block !important;
}
body.csm-redesign .csm-pg-pay-macro img {
  height: 26px !important;
  width: auto !important;
  display: block !important;
}

/* Adaptaciones PC */
@media (min-width: 901px) {
  body.csm-redesign .csm-pg-wrap  { padding: 16px 24px 0 !important; gap: 10px !important; }
  body.csm-redesign .csm-pg-list  { gap: 8px !important; }
  body.csm-redesign .csm-pg-empty { padding: 60px 24px !important; }
  body.csm-redesign .csm-pg-card  { padding: 12px 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   FORMULARIOS GENÉRICOS — fpersona, fpersonada
══════════════════════════════════════════════════════════════════ */
body.csm-redesign .csm-form-card {
  background: #fff !important;
  border-radius: 12px !important;
  margin: 10px 16px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}
body.csm-redesign .csm-form-section-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  color: #C4161C !important;
  margin-bottom: 12px !important;
}
body.csm-redesign .csm-form-row {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f5f5f5 !important;
}
body.csm-redesign .csm-form-row:last-child { border-bottom: none !important; }
body.csm-redesign .csm-form-row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  flex-direction: unset !important;
}
body.csm-redesign .csm-form-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #999 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  margin-bottom: 5px !important;
}
body.csm-redesign .csm-form-ctrl {
  width: 100% !important;
  background: #f8f8f8 !important;
  border: 1.5px solid transparent !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 14px !important;
  color: #111 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color .12s, background .12s !important;
}
body.csm-redesign .csm-form-ctrl:focus {
  background: #f0f0f0 !important;
  border-color: #C4161C !important;
}
body.csm-redesign .csm-form-readonly {
  opacity: .6 !important;
  cursor: default !important;
  background: #f0f0f0 !important;
}
body.csm-redesign .csm-form-btn-row {
  padding: 12px 16px 16px !important;
}
body.csm-redesign .csm-form-submit {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 13px 16px !important;
  background: linear-gradient(180deg, #C4161C, #8F0F13) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(196,22,28,.35) !important;
  transition: opacity .12s !important;
}
body.csm-redesign .csm-form-submit:hover { opacity: .88 !important; }
body.csm-redesign .csm-form-submit svg { flex-shrink: 0 !important; }

@media (min-width: 901px) {
  body.csm-redesign .csm-form-card { margin: 10px 24px !important; }
  body.csm-redesign .csm-form-btn-row { padding: 12px 24px 16px !important; }
  body.csm-redesign .csm-form-submit { max-width: 320px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   DÉBITO AUTOMÁTICO — fpersonada-csm
══════════════════════════════════════════════════════════════════ */
body.csm-redesign .csm-da-info {
  margin: 12px 16px 0 !important;
  background: #fff8e7 !important;
  border-radius: 12px !important;
  border-left: 4px solid #e07b00 !important;
  padding: 12px 14px !important;
  font-size: 12px !important;
  color: #555 !important;
  line-height: 1.5 !important;
}
body.csm-redesign .csm-da-info-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 700 !important;
  color: #e07b00 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
}
body.csm-redesign .csm-da-info p { margin: 3px 0 !important; }
body.csm-redesign .csm-da-nov-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
body.csm-redesign .csm-da-nov-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f5f5f5 !important;
  gap: 10px !important;
}
body.csm-redesign .csm-da-nov-row:last-child { border-bottom: none !important; }
body.csm-redesign .csm-da-nov-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
body.csm-redesign .csm-da-nov-fecha {
  font-size: 10px !important;
  color: #aaa !important;
}
body.csm-redesign .csm-da-nov-msg {
  font-size: 12px !important;
  color: #333 !important;
}
body.csm-redesign .csm-da-nov-importe {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111 !important;
  flex-shrink: 0 !important;
}

@media (min-width: 901px) {
  body.csm-redesign .csm-da-info { margin: 12px 24px 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ABONOS — fbuscarpersonasplateas-csm / flistarpersonasplateas-csm
══════════════════════════════════════════════════════════════════ */
body.csm-redesign .csm-ab-buy-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 16px !important;
}
body.csm-redesign .csm-ab-tipo-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #888 !important;
  letter-spacing: .5px !important;
}
body.csm-redesign .csm-ab-buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  background: linear-gradient(180deg, #C4161C, #8F0F13) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(196,22,28,.35) !important;
  transition: opacity .12s !important;
}
body.csm-redesign .csm-ab-buy-btn:hover {
  opacity: .88 !important;
  text-decoration: none !important;
  color: #fff !important;
}
body.csm-redesign .csm-ab-disabled {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: #f8f8f8 !important;
  border-radius: 10px !important;
  margin: 10px 16px !important;
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.45 !important;
}
body.csm-redesign .csm-ab-disabled svg { flex-shrink: 0 !important; color: #bbb !important; margin-top: 1px !important; }
/* Lista */
body.csm-redesign .csm-ab-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 4px 16px 12px !important;
}
body.csm-redesign .csm-ab-card {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 13px 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
  border-left: 4px solid #ddd !important;
}
body.csm-redesign .csm-ab-card-actual { border-left-color: #1a9a4a !important; }
body.csm-redesign .csm-ab-card-hist   { opacity: .8 !important; }
body.csm-redesign .csm-ab-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
body.csm-redesign .csm-ab-card-sector {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111 !important;
}
/* Badges abonos */
body.csm-redesign .csm-ab-badge {
  display: inline-block !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
body.csm-redesign .csm-ab-badge-ok   { background: #e6f5ec !important; color: #1a9a4a !important; }
body.csm-redesign .csm-ab-badge-pend { background: #fff4e0 !important; color: #e07b00 !important; }
body.csm-redesign .csm-ab-badge-off  { background: #f0f0f0 !important; color: #999 !important; }
body.csm-redesign .csm-ab-card-meta {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 11px !important;
  color: #666 !important;
  margin-bottom: 8px !important;
}
body.csm-redesign .csm-ab-tipo { font-weight: 600 !important; }
body.csm-redesign .csm-ab-card-foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}
body.csm-redesign .csm-ab-dates {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  font-size: 11px !important;
  color: #888 !important;
}
body.csm-redesign .csm-ab-vto { color: #C4161C !important; font-weight: 600 !important; }
body.csm-redesign .csm-ab-importe {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #111 !important;
}

@media (min-width: 901px) {
  body.csm-redesign .csm-ab-buy-wrap { padding: 12px 24px !important; }
  body.csm-redesign .csm-ab-disabled { margin: 10px 24px !important; }
  body.csm-redesign .csm-ab-list     { padding: 4px 24px 12px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   ENTRADAS — fbuscarpersonasentradas-csm / flistarpersonasentradas-csm
══════════════════════════════════════════════════════════════════ */
body.csm-redesign .csm-en-buy-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 16px !important;
}
body.csm-redesign .csm-en-buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  background: linear-gradient(180deg, #C4161C, #8F0F13) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(196,22,28,.35) !important;
  transition: opacity .12s !important;
}
body.csm-redesign .csm-en-buy-btn:hover {
  opacity: .88 !important;
  text-decoration: none !important;
  color: #fff !important;
}
body.csm-redesign .csm-en-disclaimer {
  font-size: 11px !important;
  color: #888 !important;
  line-height: 1.4 !important;
  max-width: 360px !important;
  margin: 0 !important;
}
body.csm-redesign .csm-en-disabled {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: #f8f8f8 !important;
  border-radius: 10px !important;
  margin: 10px 16px !important;
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.45 !important;
}
body.csm-redesign .csm-en-disabled svg { flex-shrink: 0 !important; color: #bbb !important; margin-top: 1px !important; }
/* Lista entradas */
body.csm-redesign .csm-en-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 4px 16px 12px !important;
}
body.csm-redesign .csm-en-card {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 13px 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
  border-left: 4px solid #ddd !important;
}
body.csm-redesign .csm-en-card:has(.csm-en-badge-ok)   { border-left-color: #1a9a4a !important; }
body.csm-redesign .csm-en-card:has(.csm-en-badge-pend) { border-left-color: #e07b00 !important; }
body.csm-redesign .csm-en-card:has(.csm-en-badge-off)  { opacity: .8 !important; }
body.csm-redesign .csm-en-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
body.csm-redesign .csm-en-partido {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111 !important;
}
body.csm-redesign .csm-en-badge {
  display: inline-block !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
body.csm-redesign .csm-en-badge-ok   { background: #e6f5ec !important; color: #1a9a4a !important; }
body.csm-redesign .csm-en-badge-pend { background: #fff4e0 !important; color: #e07b00 !important; }
body.csm-redesign .csm-en-badge-off  { background: #f0f0f0 !important; color: #999 !important; }
body.csm-redesign .csm-en-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  font-size: 11px !important;
  color: #666 !important;
  margin-bottom: 8px !important;
}
body.csm-redesign .csm-en-sector  { font-weight: 600 !important; }
body.csm-redesign .csm-en-num     { color: #888 !important; }
body.csm-redesign .csm-en-fecha   { color: #aaa !important; }
body.csm-redesign .csm-en-card-foot {
  display: flex !important;
  justify-content: flex-end !important;
}
body.csm-redesign .csm-en-ticket-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 14px !important;
  background: linear-gradient(180deg, #C4161C, #8F0F13) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(196,22,28,.3) !important;
}
body.csm-redesign .csm-en-ticket-btn:hover {
  opacity: .88 !important;
  text-decoration: none !important;
  color: #fff !important;
}

@media (min-width: 901px) {
  body.csm-redesign .csm-en-buy-wrap  { padding: 12px 24px !important; }
  body.csm-redesign .csm-en-disabled  { margin: 10px 24px !important; }
  body.csm-redesign .csm-en-list      { padding: 4px 24px 12px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   MI FOTO — fpersonafoto-csm
══════════════════════════════════════════════════════════════════ */
body.csm-redesign .csm-foto-preview-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 24px 16px 16px !important;
}
body.csm-redesign .csm-foto-ring {
  position: relative !important;
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
  border: 4px solid #fff !important;
  background: #e0e0e0 !important;
  cursor: pointer !important;
}
body.csm-redesign .csm-foto-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}
body.csm-redesign .csm-foto-ph {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #d0d0d0 !important;
  color: #999 !important;
}
body.csm-redesign .csm-foto-ph svg {
  width: 60px !important;
  height: 60px !important;
}
body.csm-redesign .csm-foto-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.38) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  opacity: 0 !important;
  transition: opacity .18s !important;
  cursor: pointer !important;
}
body.csm-redesign .csm-foto-ring:hover .csm-foto-overlay { opacity: 1 !important; }
body.csm-redesign .csm-foto-caption {
  margin-top: 8px !important;
  font-size: 12px !important;
  color: #888 !important;
}
body.csm-redesign .csm-foto-caption-empty { color: #bbb !important; }
/* Mensaje OK/Error */
body.csm-redesign .csm-foto-msg {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 16px 8px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body.csm-redesign .csm-foto-msg.ok  { background: #e6f5ec !important; color: #1a9a4a !important; }
body.csm-redesign .csm-foto-msg.err { background: #f5e6e7 !important; color: #C4161C !important; }
/* Requisitos */
body.csm-redesign .csm-foto-reqs {
  margin: 0 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.csm-redesign .csm-foto-req-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #666 !important;
}
body.csm-redesign .csm-foto-req-item svg { color: #1a9a4a !important; flex-shrink: 0 !important; }
/* File input personalizado */
body.csm-redesign .csm-foto-file-row {
  margin: 0 16px 12px !important;
}
body.csm-redesign .csm-foto-file-input {
  display: none !important;
}
body.csm-redesign .csm-foto-file-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 16px !important;
  background: #f5f5f5 !important;
  border: 2px dashed #ddd !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #555 !important;
  cursor: pointer !important;
  transition: border-color .12s, background .12s !important;
}
body.csm-redesign .csm-foto-file-label:hover {
  border-color: #C4161C !important;
  background: #fdf5f5 !important;
  color: #C4161C !important;
}
body.csm-redesign .csm-foto-file-label svg { flex-shrink: 0 !important; }

@media (min-width: 901px) {
  body.csm-redesign .csm-foto-preview-wrap { padding: 32px 24px 16px !important; }
  body.csm-redesign .csm-foto-ring { width: 160px !important; height: 160px !important; }
  body.csm-redesign .csm-foto-msg  { margin: 0 24px 8px !important; }
  body.csm-redesign .csm-foto-reqs { margin: 0 24px 12px !important; }
  body.csm-redesign .csm-foto-file-row { margin: 0 24px 12px !important; }
  body.csm-redesign .csm-form-submit { margin-left: 24px !important; margin-right: 24px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO SALDO — visibilidad controlada por JS via clase
   Usa #id para ganar en especificidad sobre la regla PC
   que tiene display:flex !important (class-level selector).
══════════════════════════════════════════════════════════════════ */
body.csm-redesign #csm-hero-saldo.csm-saldo-oculto {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   VOLANTE DE PAGO — fpersonavolante-csm
══════════════════════════════════════════════════════════════════ */
body.csm-redesign .csm-vlt-section {
  padding: 12px 16px !important;
}
/* Seleccionar todos */
body.csm-redesign .csm-vlt-selall {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: #f8f8f8 !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555 !important;
}
body.csm-redesign .csm-vlt-selall input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #C4161C !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
/* Lista de items */
body.csm-redesign .csm-vlt-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
body.csm-redesign .csm-vlt-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.07) !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  transition: border-color .12s !important;
}
body.csm-redesign .csm-vlt-item:has(input:checked) {
  border-color: #C4161C !important;
  background: #fff8f8 !important;
}
body.csm-redesign .csm-vlt-item input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: #C4161C !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
body.csm-redesign .csm-vlt-item-body {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.csm-redesign .csm-vlt-item-desc {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111 !important;
  line-height: 1.3 !important;
}
body.csm-redesign .csm-vlt-item-fecha {
  font-size: 11px !important;
  color: #aaa !important;
}
body.csm-redesign .csm-vlt-item-importe {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #C4161C !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
/* Total */
body.csm-redesign .csm-vlt-total-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 14px !important;
  background: #f5e6e7 !important;
  border-radius: 10px !important;
  margin-bottom: 14px !important;
}
body.csm-redesign .csm-vlt-total-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #8F0F13 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}
body.csm-redesign .csm-vlt-total-value {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #C4161C !important;
  letter-spacing: -.3px !important;
}
body.csm-redesign .csm-vlt-btn-row {
  /* reutiliza csm-form-submit, sin padding extra */
}

@media (min-width: 901px) {
  body.csm-redesign .csm-vlt-section { padding: 14px 24px !important; }
  body.csm-redesign .csm-vlt-item { padding: 12px 16px !important; }
}