*{
	margin: 0;
	padding: 0;
}
.contenedor{
    width: 1024px;
    margin: 0 auto;
    font: 12px Tahoma,Arial,Helvetica,sans-serif;
}

.cabecera{
    width: 100%;
    height: 178px;
    background: url(../images/header.jpg) repeat-x;
}

.barestado{
	width: 100%;
    height: 30px;
	color: white;
	text-align: right;
	background: url(../images/barestado.jpg) repeat-x;
}

.barestado a{
    color: white;
	text-decoration: none;
}

.barestado a:visited{
	color: white;
}

.txtbarsta{
	margin: 0 20px 0 0;
	display: inline;
}

.cuerpo{
    width: 100%;
    overflow: hidden;
}

.menu{
    width: 124px;
    float: left;
    background: red;
}

#aplicacion{
    width: 900px;
    margin: 5px 0;
    float: left;
}

.pie{
    width: 100%;
    height: 50px;
    text-align: right;
    color: white;
    font-size: 11px;
    background: url(../images/footer.jpg) repeat-x;
    clear: both;
}

.pie span{
    margin: 12px 0px;
}

.error{
    border: solid 1px red;
    background: #FDFDEA;
}

.celparametros{
	width: 100%;
	margin: 2% 0;
}

#aplicacion h3{
	width: 98%;
	margin: 0 1% 1% 1%;
}
/*Inica Menu*/
.menu ul{
    list-style: none;
    width:100%;
}

.menu ul li{
    width: 100%;
    background-color: #4B4B4B;
}

.menu ul li a{
    padding-top:5px;
    border-color: #404040 #1A1A1A #1A1A1A #505050;
    border-style: solid;
    border-width: 1px;
    padding-left: 10px;
    text-decoration: none;
    display: block;
    color:white;
    height:30px;
    background: #5B5B5B  no-repeat center right;
    line-height: 30px;
}

.menu ul li ul a{
    border-color: #404040 #1A1A1A #1A1A1A #505050;
    border-style: solid;
    border-width: 1px;
    margin-top:2px;
    padding-left: 10px;
    display:block;
    text-decoration: none;
    color:white;
    height:25px;
    background: #0D0D0D;
}

.menu ul li a:hover{
    background: #DB5A0A  no-repeat center right;
}

.menu ul li a:focus{
    outline: none;
}

.menu ul li ul a:hover{
    background: #FCAB14;
    color:black;
}

.menu ul li ul{
    display:none;
}
/*Fin de menu*/

/*Inicio CSS login*/
.frmlogin{
	width: 100%;
	margin: 40px 0px 40px 0px;
	text-align: right;
	float: left;
}

.cellabel{/*Celda label*/
	width: 40%;
	height: 22px;
	padding: 3px 1% 0 0;
	text-align: right;
	float: left;
}

.celtext{/*Celda texto*/
	text-align: left;
	width: 59%;
	height: 25px;
	float: left;
}

.groupbox{
    text-align: left;
	width: 45%;
    float: left;
    padding: 5px 0px 2px 5px;
    margin: 0px 0px 5px 41%;
}

.textedit{
	width: 200px;
	height: 20px;
}

.lookup{
	width: 202px;
	height: 22px;
}

#btnentrar{
	width: 204px;
	height: 30px;
}
/*Fin CSS login*/

/*Inicio de botones*/
.botones{
	width: 100%;
	height: 25px;
	margin: 10px 0;
}

.boton{
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	padding: 2px 4px 2px 4px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	font-size: 14px;
}

.boton:hover{
	text-decoration: none;
}

.boton:active{
	position: relative;
	top: 1px;
}

.orange{
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

.orange:hover{
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

.orange:active{
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
/*Fin de botones*/

/*Inicio Celdas*/
#catalogo{
	width: 48%;
	margin: 0 1%;
	float: left;
}

.encabezado{
	width: 100%;
    overflow: hidden;
}

#datos{
	width: 100%;
    clear: both;
}

.filtros{
	width: 100%;
    clear: both;
}

#nuevo{
	width: 48%;
	height: 200px;
	margin: 0 1%;
	float: left;
	display: none;
}

.fila{
	width: 100%;
	word-wrap: break-word;
    overflow: hidden;
}

.cel30{
	width: 29px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}

.cel50{
	width: 49px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}

.cel70{
	width: 69px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}

.cel100{
	width: 99px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}


.cel150{
	width: 149px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}

.cel200{
	width: 199px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}

.cel250{
	width: 249px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}

.cel300{
	width: 299px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}

.cel350{
	width: 349px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}


.cel400{
	width: 399px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}

.cel450{
	width: 449px;
	height: 19px;
	border: 1px solid gray;
	border-right: none;
	border-top: none;
	float: left;
}

.celfinal{
	border-right: 1px solid gray;
}

.centrar{
	text-align: center;
}

.pintar{
	border-top: 1px solid gray;
	background-color: #f78d1d;
	color: #fef4e9;
}

.algder{text-align: right;}
.allancho{width: 98%; margin: 0 1% 0 1%; float: left;}
.txtupper{text-transform: uppercase;}
/*Fin Celdas*/

.loader{
	width: 100%;
	margin: 10px 0;
	text-align: center;
}

/*nuevos css*/
.algizq{text-align: left;}
.algder{text-align: right;}
.allancho{width: 98%; margin: 0 1% 0 1%; float: left;}
.txtupper{text-transform: uppercase;}
.fizq{float: left;}
.fder{float: right;}
.mtop1{margin-top: 1%;}
.mbot1{margin-bottom: 1%;}
.mizq1{margin-left: 1%;}
.mder1{margin-right: 1%;}
.ptop1{padding-top: 1%;}
.pbot1{padding-bottom: 1%;}
.ptop5{padding-top: 5%;}
.pbot5{padding-bottom: 5%;}
.pizq1{padding-left: 1%;}
.pder1{padding-right: 1%;}
.marcar{background: #898989 !important;}
.selfil{background: #898989 !important;}
.por5{width: 5%;}
.por7{width: 7%}
.por10{width: 10%;}
.por12{width: 12%;}
.por15{width: 15%;}
.por18{width: 18%;}
.por20{width: 20%;}
.por25{width: 25%;}
.por29{width: 29%;}
.por30{width: 30%;}
.por33{width: 33%;}
.por35{width: 35%;}
.por39{width: 39%;}
.por40{width: 40%;}
.por45{width: 45%;}
.por47{width: 47%;}
.por48{width: 48%;}
.por49{width: 49%;}
.por50{width: 50%;}
.por55{width: 55%;}
.por60{width: 60%;}
.por65{width: 65%;}
.por70{width: 70%;}
.por80{width: 80%;}
.por90{width: 90%;}
.por95{width: 95%;}
.por98{width: 98%;}
.por99{width: 99%;}
.por100{width: 100%;}
.alt20{height: 20px;}
.alt25{height: 25px;}
.cortar{word-wrap: break-word; overflow: hidden;}
.ocultar{display: none;}
.mostrar{display: block;}
.clear{clear: both;}
.nosize{resize:none;}
.borbot{border-bottom: 1px solid #b4b4b4;}
.naranja{background-color: #f78d1d}
.inline{display:inline;}

.fontsize14{
    font-size: 14px;    
}
.fontsize15{
    font-size: 15px;    
}
/*fin nuevo css*/

/*Inicio Paginacion*/
ul.numpag{
	list-style: none;
	text-align: center;
	overflow: hidden;
}

ul.numpag li{
	padding: 1%;
	float: left;
	border-right: 1px solid #2C2C2C;
}
ul.numpag li a{color:color:#2C2C2C;}
ul.numpag li a:link{color:#2C2C2C;}
ul.numpag li a:active{color:#2C2C2C;}
ul.numpag li a:visited{color:#2C2C2C;}
ul.numpag li a:hover{color:#2C2C2C;}
.selpag{background: #2C2C2C;}

ul.numpag li.selpag a{color: white;}
/*Fin Paginacion*/

.fntroj{color: red;}
.fntazu{color: blue;}
.fntbla{color: white;}


.borred{
	border: 1px solid #b4b4b4;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.inactivo{
	background: #CCC; 
    color: #333; 
    border: 1px solid #666 
}

/* ========================================================================== */
/* Tema visual Opticas de Similares                                            */
/* Capa compatible: conserva clases, medidas funcionales y comportamiento JS. */
/* ========================================================================== */

:root{
	--marca-azul-950: #07143f;
	--marca-azul-900: #0c1f63;
	--marca-azul-800: #123382;
	--marca-azul-600: #1769c2;
	--marca-rojo-700: #c91524;
	--marca-rojo-600: #e51d2a;
	--marca-rojo-500: #f12633;
	--marca-blanco: #ffffff;
	--marca-fondo: #f3f6fb;
	--marca-superficie: #ffffff;
	--marca-texto: #17213a;
	--marca-texto-suave: #64708a;
	--marca-borde: #dbe2ef;
	--marca-sombra: 0 10px 30px rgba(7, 20, 63, .10);
	--marca-sombra-suave: 0 4px 14px rgba(7, 20, 63, .08);
}

html{
	background: var(--marca-fondo);
}

body{
	background:
		radial-gradient(circle at top left, rgba(23, 105, 194, .08), transparent 28rem),
		var(--marca-fondo);
	color: var(--marca-texto);
	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
}

.contenedor{
	background: var(--marca-superficie);
	border: 1px solid rgba(12, 31, 99, .10);
	border-radius: 0 0 14px 14px;
	box-shadow: var(--marca-sombra);
	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
	overflow: hidden;
}

.cabecera{
	background: var(--marca-blanco);
	border-bottom: 0;
	box-sizing: border-box;
	height: 180px;
	overflow: hidden;
}

.cabecera a{
	display: block;
}

.cabecera img{
	display: block;
	height: 180px;
	max-width: 100%;
	width: 100%;
	transition: filter .25s ease, transform .25s ease;
}

.cabecera a:hover img{
	filter: saturate(1.08) contrast(1.03);
	transform: scale(1.002);
}

.barestado{
	background: linear-gradient(110deg, var(--marca-azul-950), var(--marca-azul-800));
	box-shadow: 0 3px 10px rgba(7, 20, 63, .24);
	color: var(--marca-blanco);
	line-height: 30px;
}

.barestado a{
	border-radius: 5px;
	font-weight: 700;
	padding: 4px 8px;
	transition: background-color .2s ease, color .2s ease;
}

.barestado a:hover,
.barestado a:focus{
	background: var(--marca-rojo-600);
	color: var(--marca-blanco);
}

.cuerpo{
	background: var(--marca-superficie);
}

.menu{
	background: var(--marca-azul-950);
	box-shadow: 4px 0 14px rgba(7, 20, 63, .14);
}

.menu ul li{
	background: var(--marca-azul-950);
}

.menu ul li a,
.menu ul li ul a{
	background: linear-gradient(135deg, var(--marca-azul-900), var(--marca-azul-950));
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
	box-sizing: border-box;
	color: var(--marca-blanco);
	font-weight: 600;
	letter-spacing: .01em;
	transition: background .2s ease, box-shadow .2s ease, padding-left .2s ease;
}

.menu ul li ul a{
	background: #09184d;
	color: rgba(255, 255, 255, .92);
	font-size: 11px;
	margin-top: 0;
}

.menu ul li a:hover,
.menu ul li a:focus,
.menu ul li ul a:hover,
.menu ul li ul a:focus{
	background: linear-gradient(135deg, var(--marca-rojo-700), var(--marca-rojo-500));
	box-shadow: inset 4px 0 0 var(--marca-blanco);
	color: var(--marca-blanco);
	padding-left: 14px;
}

#aplicacion{
	animation: entradaAplicacion .32s ease-out both;
	background: var(--marca-superficie);
}

#aplicacion h1,
#aplicacion h2,
#aplicacion h3{
	color: var(--marca-azul-900);
	letter-spacing: -.01em;
}

.frmlogin{
	background: linear-gradient(145deg, #ffffff, #f8faff);
	border: 1px solid var(--marca-borde);
	border-radius: 14px;
	box-shadow: var(--marca-sombra-suave);
	box-sizing: border-box;
	margin: 40px 24%;
	padding: 30px 5%;
	width: 52%;
}

.frmlogin::before{
	color: var(--marca-azul-900);
	content: "Acceso al sistema";
	display: block;
	font-size: 20px;
	font-weight: 750;
	letter-spacing: -.02em;
	margin-bottom: 24px;
	text-align: center;
}

.frmlogin .cellabel,
.frmlogin .celtext{
	box-sizing: border-box;
	height: 40px;
}

.frmlogin .cellabel{
	line-height: 32px;
	padding-top: 0;
}

.frmlogin .textedit,
.frmlogin .lookup,
.frmlogin #btnentrar{
	height: 34px;
	width: 100%;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea,
.textedit,
.lookup{
	background-color: var(--marca-blanco);
	border: 1px solid #b9c5d8;
	border-radius: 6px;
	box-sizing: border-box;
	color: var(--marca-texto);
	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="email"]:hover,
select:hover,
textarea:hover{
	border-color: var(--marca-azul-600);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus{
	border-color: var(--marca-azul-600);
	box-shadow: 0 0 0 3px rgba(23, 105, 194, .16);
}

button,
input[type="button"],
input[type="submit"],
.boton,
#btnentrar{
	border-radius: 7px;
	box-sizing: border-box;
	cursor: pointer;
	font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 700;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}

#btnentrar,
.orange{
	background: linear-gradient(135deg, var(--marca-azul-800), var(--marca-azul-950));
	border: 1px solid var(--marca-azul-950);
	box-shadow: 0 4px 10px rgba(7, 20, 63, .20);
	color: var(--marca-blanco);
	filter: none;
	text-shadow: none;
}

#btnentrar:hover,
#btnentrar:focus,
.orange:hover,
.orange:focus{
	background: linear-gradient(135deg, var(--marca-rojo-700), var(--marca-rojo-500));
	border-color: var(--marca-rojo-700);
	box-shadow: 0 7px 16px rgba(201, 21, 36, .22);
	color: var(--marca-blanco);
	filter: none;
	transform: translateY(-1px);
}

#btnentrar:active,
.boton:active,
.orange:active{
	background: var(--marca-azul-950);
	color: var(--marca-blanco);
	filter: none;
	transform: translateY(1px);
}

.encabezado,
.naranja,
.pintar{
	background: linear-gradient(110deg, var(--marca-azul-900), var(--marca-azul-800));
	color: var(--marca-blanco);
	font-weight: 700;
}

.encabezado{
	border-radius: 7px 7px 0 0;
	box-shadow: var(--marca-sombra-suave);
}

#catalogo,
#nuevo,
#nuevousu,
#nuevacja,
#nvocorte,
#nvoart,
#detalle,
.cnt_abono,
.cnt_venta,
.groupbox,
fieldset{
	background: var(--marca-superficie);
	border-color: var(--marca-borde);
	border-radius: 10px;
	box-shadow: var(--marca-sombra-suave);
	box-sizing: border-box;
}

.fila{
	transition: background-color .18s ease, box-shadow .18s ease;
}

#datos .fila:hover,
.group .fila:hover{
	background-color: #edf4ff !important;
	box-shadow: inset 4px 0 0 var(--marca-azul-600);
}

.borbot{
	border-bottom-color: var(--marca-borde);
}

body .marcar,
body .selfil,
body .selcli{
	background: #dce9fb !important;
	box-shadow: inset 4px 0 0 var(--marca-rojo-600);
	color: var(--marca-azul-950);
}

ul.numpag{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	padding: 7px 0;
}

ul.numpag li{
	background: var(--marca-blanco);
	border: 1px solid var(--marca-borde);
	border-radius: 5px;
	float: none;
	padding: 3px 7px;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

ul.numpag li:hover{
	background: #edf4ff;
	border-color: var(--marca-azul-600);
	transform: translateY(-1px);
}

body .selpag{
	background: var(--marca-azul-900) !important;
	border-color: var(--marca-azul-900) !important;
}

ul.numpag li a,
ul.numpag li a:link,
ul.numpag li a:visited,
#letras > a{
	color: var(--marca-azul-900);
	font-weight: 700;
	text-decoration: none;
}

ul.numpag li.selpag a,
#letras a.selpag{
	color: var(--marca-blanco);
}

.error{
	background: #fff1f2;
	border-color: var(--marca-rojo-600);
	box-shadow: 0 0 0 3px rgba(229, 29, 42, .10);
}

.fntroj{
	color: var(--marca-rojo-700);
}

.fntazu{
	color: var(--marca-azul-600);
}

.borred{
	border-color: var(--marca-borde);
	border-radius: 8px;
}

.inactivo,
input:disabled,
select:disabled,
textarea:disabled{
	background: #e9edf4;
	border-color: #cbd3e0;
	color: var(--marca-texto-suave);
	cursor: not-allowed;
}

.pie{
	background: linear-gradient(110deg, var(--marca-azul-950), var(--marca-azul-900));
	color: rgba(255, 255, 255, .88);
	display: flex;
	align-items: center;
	justify-content: center;
	position: static;
	text-align: center;
}

.pie span{
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	margin: 0;
}

@keyframes entradaAplicacion{
	from{ opacity: 0; transform: translateY(5px); }
	to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
	*,
	*::before,
	*::after{
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}