@charset "utf-8";BODY{color:#333;font-family:Arial;font-size:11px;background:#FFFFFF;margin-top:0px;margin-left:0px;margin-right:0px;margin-bottom:0px;}
.clickable{cursor:pointer;}
.highlighted{font-family:Arial;font-size:11px;color:Black;background-color:#CCFFCC;}
.menuLink{color:#666;font-family:Arial;font-size:12px;background:transparent;cursor:pointer;width:100%;border:2px solid transparent;background:url(themes/enter_nuevo2/img/sw_hr.png) transparent repeat-x;width:100%;line-height:25px;padding-left:5px;}
.menuLink_Over{color:#666;font-family:Arial;font-size:12px;background:#D0D0D0;cursor:pointer;width:100%;border-bottom:0px solid #E6E6E6;line-height:25px;padding-left:5px;}
.subMenuLink{color:333;font-family:Arial;background:transparent;cursor:pointer;width:100%;text-indent:5px;}
.subMenuLink_Over{color:#333;font-family:Arial;background:#F0F0F0;cursor:pointer;width:100%;text-indent:5px;border-left:1px solid #8E999F;border-right:1px solid #8E999F;}
.menu_head{color:#FFF;font-family:Arial;font-weight:bold;background-color:#8E999F;cursor:pointer;width:100%;text-align:center;}
.menu_background{background:#FFF;border:1px solid #8E999F;}
.menuLink2{color:#003371;background:transparent;cursor:pointer;}
.menuLink_Over2{color:#f7941d;background:transparent;text-decoration:underline;cursor:pointer;}
.cancelar{background:transparent;border:0px solid #562200;color:red;cursor:pointer;text-decoration:underline;}
.link_button_normal{background:#CCC;border:1px solid #562200;border-radius:3px;color:#333;cursor:pointer;}
.link_button_over{background-color:#E6E6E6;border:1px solid #562200;border-radius:3px;color:#333;cursor:pointer;}
.lst_pwd_normal{color:#333;cursor:pointer;}
.lst_pwd_over{cursor:pointer;}
.logout_normal{cursor:pointer;}
.logout_over{cursor:pointer;}
A{color:#46627d;font-family:Arial;font-size:11px;font-weight:bold;text-decoration:none;}
A.lostpass:LINK{font-family:Arial;font-size:11px;color:white;font-weight:bold;text-decoration:none;}
A.lostpass:VISITED{font-family:Arial;font-size:11px;color:white;font-weight:bold;text-decoration:none;}
A.lostpass:HOVER{font-family:Arial;font-size:11px;color:white;font-weight:bold;text-decoration:underline;}
A:LINK{color:#46627d;text-decoration:none;}
A:VISITED{color:#46627d;text-decoration:none;}
A:HOVER{color:#CA5430;text-decoration:underline;}
TH,TD{color:#333;font-family:Arial;font-size:11px;background-:transparent;}
HR{border:2px solid transparent;background:url(themes/enter_nuevo2/img/sw_hr.png) transparent repeat-x;}
.error{color:#990000;font-family:Arial;font-size:11px;}
.info{color:Blue;font-family:Arial;font-size:11px;}
.centerboxtext{color:#333;font-family:Arial;font-size:11px;background:#fafafa;padding:0px;}
.sideboxtext{color:#333;font-family:Arial;font-size:11px;background:transparent;}
.plainboxtitle{color:#333;font-family:Arial;font-size:11px;font-weight:bold;background:#0072BC;}
.plainboxtext{color:#333;font-family:Arial;font-size:12px;background:transparent;}
.sideboxtitle{color:#CA5430;font-family:Arial;font-size:20px;font-weight:bold;font-style:normal;background:white;text-indent:5px;}
.centerboxtitle{color:#990000;font-family:Arial;font-size:13px;font-weight:bold;font-style:normal;background:#EFEFEF;text-indent:5px;}
.pgprocessed{color:#FFF;font-family:Arial;font-size:9px;}
.copyright{color:#FFF;font-family:Arial;font-size:9px;}
.userexttable{color:#FFF;font-family:Arial;font-size:12px;background:#333;}
.usertoppanel{color:#333;font-family:Arial;font-size:12px;background:#F5F5F5;}
.userbottompanel{color:#333;font-family:Arial;font-size:12px;background:#FAFAFA;}
.print_header_toprow{color:#333;font-family:Arial;font-size:10px;font-weight:bold;background:#00A651;}
.print_header_bottomrow{color:#333;font-family:Arial;font-size:10px;font-weight:bold;background:#FFF200;}
.print_header_toptext{color:#333;font-family:Arial;font-size:14px;font-weight:bold;background:transparent;}
.tabMenu_TabTitle{color:white;font-family:Arial;font-weight:bold;font-size:14px;}
.tabMenu_GroupTitle{color:#FFF;font-family:Arial;font-size:13px;font-weight:bold;background:#80898E;padding:2px;}
.tabMenu_LinkCat{color:#FFF;font-family:Arial;font-size:13px;font-weight:normal;background:#80898e;padding:2px;}
.tabMenu_Link{font-family:Arial;font-size:11px;color:#333;}
.tabMenu_Link a:link{color:white;font-family:Arial;font-size:11px;font-weight:normal;cursor:pointer;}
.tabMenu_Link a:visited{color:white;font-family:Arial;font-size:11px;font-weight:normal;cursor:pointer;}
.tabMenu_Link a:active{color:white;font-family:Arial;font-size:11px;font-weight:normal;cursor:pointer;}
.tabMenu_Link a:hover{color:yellow;font-family:Arial;font-size:11px;font-weight:normal;cursor:pointer;}
#star ul.star{list-style:none;margin:0;padding:0;width:85px;height:20px;left:10px;top:-5px;position:relative;float:left;background:url(themes/enter_nuevo2/img/stars.gif) repeat-x;cursor:pointer;}
#star li{padding:0;margin:0;float:left;display:block;width:85px;height:20px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;}
#star li.curr{background:url(themes/enter_nuevo2/img/stars.gif) left 25px;font-size:1px;}
#star div.user{color:#888;font-size:13px;font-family:Arial;left:20px;position:relative;float:left;}
.bannerContent{font-family:Arial;background:#F7F7F7;}
.toolbarContent{font-family:Arial;font-size:11px;}
.toolbarButtons{font-family:Arial;font-size:11px;}
.toolbarWidthNormal{width:175px;}
.toolbarWidthExtendido{width:250px;}
.toolbarButtonMovimiento{font-family:Arial;}
.tablaencabezo{border:2px solid #000;background:#BDBDBD;}
.tablamarco{}
.gridTable{border:2px solid #E0E0E0;}
.editTitles{color:#808080;text-align:right;}
.editTitlesLeft{color:#808080;text-align:left;}
.bannerTable{font-family:Arial;background:#F7F7F7;}
.bannerTitle{color:#FFF;font-weight:bold;font-size:14px;}
.bannerTitleEditable{color:#00346A;font-weight:bold;font-size:14px;font-family:Arial;border:0px;background:transparent;z-index:0;}
.bannerLabel{color:#FFF;font-weight:normal;font-size:8px;}
.bannerField1{color:#FFFFFF;font-weight:normal;font-size:8px;}
.editTitle{color:#333;font-family:Arial;font-weight:bold;font-size:12px;background:transparent;border-bottom:2px solid #7A94B5;}
.title{color:#333;font-family:Arial;font-size:11px;font-weight:bold;background:transparent;}
.scroller tbody{height:400px;overflow-y:scroll;}
.fieldsSeparator{color:#333;font-family:Arial;font-size:11px;font-weight:bold;}
.buttonToolbarJquery{text-indent:10px;width:150px;text-align:left;height:30px;}
.inputSizeComplete{width:98%;}
.inputSizePx{width:175px;}
.heading1Text{padding:6px;}
.heading2Text{padding:6px;}
.footerToolbar{z-index:25;left:0px;width:100%;bottom:0px;height:20px;position:fixed;}
.footerToolbarIE{z-index:25;left:0;width:100%;bottom:0;height:20px;position:absolute;}
.footerToolbarTable{color:inherit;font-family:inherit;font-size:inherit;height:100%;}
.footerToolbarTableIE{color:expression(this.parentNode.currentStyle.color?this.parentNode.currentStyle.color:'#FFF');font-family:inherit;font-size:inherit;height:100%;}
.footerToolbarContent{background:url(themes/enter_nuevo2/img/toolbar_footer_background.png) repeat-x;height:100%;border-top:1px solid #BFBFBF;}
.footerToolbarContentInterno{height:100%;vertical-align:middle;}
.tdToolbarFooterSinInfo{background:transparent;}
.tdToolbarFooterConInfoError{color:#9C0006;padding-left:10px;border:1px solid #9C0006;background:url(themes/enter_nuevo2/img/toolbar_footer_red.png) repeat-x;;}
.tdToolbarFooterConInfoWarning{color:#9C6500;padding-left:10px;border:1px solid #9C6500;background:url(themes/enter_nuevo2/img/toolbar_footer_yellow.png) repeat-x;;}
.tdToolbarFooterConInfoUpdate{color:#006100;padding-left:10px;border:1px solid #006100;background:url(themes/enter_nuevo2/img/toolbar_footer_green.png) repeat-x;;}
.tdToolbarFooterLeft{color:#99000;border-right:1px solid #BFBFBF;}
.tdToolbarFooterRight{border-left:1px solid #BFBFBF;}
.prerequisitosExpander{background:#FFF;border-bottom:#E8E8E8 1px dashed;padding:2px 6px;vertical-align:top;}
.tableSelectCurso td.row1:hover{color:#46627D;text-decoration:underline;font-family:Arial;font-size:11px;font-weight:bold;}
.tableSelectCurso td.row2:hover{color:#46627D;text-decoration:underline;font-family:Arial;font-size:11px;font-weight:bold;}
.cuentaBloqueado{color:#9C0006;font-weight:bold;text-align:center;}
.field_textbox_stand_by{color:#666;font-family:Arial;font-size:11px;font-style:italic;background:White;border:1px solid #B0C4DE;z-index:0;}
.bannerContentAlert,.narrowBannerAlert{background-color:#E5B3B9;border:1px solid #DBD9D9;border-top:1px #C9C7C7 solid;border-bottom:0px #E2E1DD solid;-moz-border-top-right-radius:8px;-webkit-border-top-right-radius:8px;border-top-right-radius:8px;-moz-border-top-left-radius:8px;-webkit-border-top-left-radius:8px;border-top-left-radius:8px;}
.contentTextAlignRight{text-align:right;}
.contentTextAlignLeft{text-align:left}
.contentTextAlignCenter{text-align:center}
.inputHeightPx{height:120px;}
.redContainer{color:#990000;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix{clear:both;}
.menuIconsContent{width:auto;min-width:70%;margin-top:3%;margin-bottom:3%;margin-left:1%;margin-right:1%;background:-webkit-gradient(linear,center top,center bottom,from(#fff),to(#ccc));background-image:linear-gradient(#fff,#ccc);border-radius:6px;box-shadow:0px 0px 4px 2px rgba(0,0,0,0.4);padding:0 10px;position:relative;}
.menu_father li{float:left;position:relative;}
.menu_children li{float:left;position:relative;min-width:130px;}
#menuFreeAccess li a{color:#444;display:block;font-size:11px;line-height:11px;padding:6px 12px;margin:8px 8px;vertical-align:middle;text-decoration:none;}
/*.menuFreeAccess li a:hover{background:-webkit-gradient(linear,center top,center bottom,from(#ededed),to(#fff));background-image:linear-gradient(#ededed,#fff);border-radius:3px;box-shadow:inset 0px 0px 1px 1px rgba(0,0,0,0.1);color:#222;}*/

#menuFreeAccess ul{color:gray;font-weight:normal;cursor:pointer;position:absolute;min-width:130px;display:none;margin:0;padding:0;list-style:none;border-radius:3px;margin-top:5px;background:rgba(255,255,255,1);border-radius:0 0 7px 7px;box-shadow:inset 0px 0px 5px rgba(0,0,0,0.4);z-index:12;opacity:1;}
#menuFreeAccess ul ul{cursor:pointer;position:absolute;left:130px;top:0;min-width:130px;display:none;margin:0;padding:0;list-style:none;border-radius:3px;background:rgba(255,255,255,1);border-radius:7px 7px 7px 7px;box-shadow:inset 0px 0px 5px rgba(0,0,0,0.4);z-index:12;opacity:1;}
.menuExtraSelected{background:-webkit-gradient(linear,center top,center bottom,from(#ccc),to(#ededed));background-image:linear-gradient(#ccc,#ededed);border-radius:5px;box-shadow:inset 0px 0px 1px 1px rgba(0,0,0,0.1);color:#222;opacity:1;}
.menu_father li a:hover{background:-webkit-gradient(linear,center top,center bottom,from(#ccc),to(#ededed));background-image:linear-gradient(#ccc,#ededed);border-radius:5px;box-shadow:inset 0px 0px 1px 1px rgba(0,0,0,0.1);color:#222;opacity:1;}
.menu_father li:hover ul li a:hover{background:-webkit-gradient(linear,center top,center bottom,from(#eee),to(#fff));background-image:linear-gradient(#ededed,#fff);border-radius:5px;box-shadow:inset 0px 0px 1px 1px rgba(0,0,0,0.2);opacity:1;}
/*.iconic{color:inherit;line-height:20px;vertical-align:middle;opacity:0.6;}*/
.menuIconsContent .iconic{color:inherit;line-height:20px;vertical-align:middle;opacity:0.6;}
a.iconic:hover{color:inherit;}
.iconic.carreta:before{content:url(themes/enter_nuevo2/img/cart.png);}
.iconic.supervisor:before{content:url(themes/enter_nuevo2/img/user.png);}
.iconic.maletin:before{content:url(themes/enter_nuevo2/img/briefcase.png);}
.iconic.clientes:before{content:url(themes/enter_nuevo2/img/users.png)}
.iconic.agenda:before{content:url(themes/enter_nuevo2/img/calendar.png)}
.iconic.cotizacion:before{content:url(themes/enter_nuevo2/img/ticket.png)}
.iconic.ordenes:before{content:url(themes/enter_nuevo2/img/export.png)}
.iconic.metas:before{content:url(themes/enter_nuevo2/img/bar-graph.png)}
.iconic.circled-plus:before{content:url(themes/enter_nuevo2/img/circled-plus.png)}
.iconic.circled-minus:before{content:url(themes/enter_nuevo2/img/circled-minus.png)}
.iconic.plus:before{content:url(themes/enter_nuevo2/img/plus.png)}
.iconic.back:before{content:url(themes/enter_nuevo2/img/back.png)}
.iconic.save:before{content:url(themes/enter_nuevo2/img/save.png)}
.iconic.search:before{content:url(themes/enter_nuevo2/img/search.png)}
.iconic.cancel:before{content:url(themes/enter_nuevo2/img/cancel.png)}
.iconic.print:before{content:url(themes/enter_nuevo2/img/print.png)}
.iconic.clone:before{content:url(themes/enter_nuevo2/img/clone.png)}
.iconic.sendemail:before{content:url(themes/enter_nuevo2/img/mail.png)}
.iconic.proyecciones:before{content:url(themes/enter_nuevo2/img/line-graph.png)}
.iconic.calendar:before{content:url(themes/enter_nuevo2/img/agenda.png);}
.iconic.binoculares:before{content:url(themes/enter_nuevo2/img/binoculares.png);}
.iconic.contar:before{content:url(themes/enter_nuevo2/img/contar.png);}
.iconic.megaphone:before{content:url(themes/enter_nuevo2/img/megaphone.png);}
.iconic.report:before{content:url(themes/enter_nuevo2/img/report.png);}
.iconic.check:before{content:url(themes/enter_nuevo2/img/check.png);}
.menuBottonContent{width:110px;height:32px;display:table;margin-bottom:1%;vertical-align:middle;font-weight:bold;border-radius:3px;background:-webkit-gradient(linear,center top,center bottom,from(#fff),to(#ccc));background-image:linear-gradient(#fff,#ccc);box-shadow:0px 0px 2px 1px rgba(0,0,0,0.6);padding:0 10px;cursor:pointer;float:right;text-align:center;}
.divBotonHijo{margin-top:10%;vertical-align:middle;display:table-cell;border-radius:3px;}
.divBotonHijo span{vertical-align:middle;border-radius:3px;}
.divSeparador{width:auto;min-width:89%;margin-top:3%;font-weight:bold;font-size:18px;margin-bottom:3%;background:-webkit-gradient(linear,center top,center bottom,from(#BFBFBF),to(#BFBFBF));background-image:linear-gradient(#BFBFBF,#BFBFBF);border-radius:2px;padding:0 10px;position:relative;}
.tableseparated{width:auto;min-width:92%;margin-top:3%;font-weight:bold;font-size:18px;margin-bottom:3%;margin-left:1%;}
.enc_crm{width:80%;margin-top:80%;font-weight:bold;text-align:center;font-size:14pt;text-indent:1%;margin-bottom:3%;margin-left:1%;background:-webkit-gradient(linear,center top,center bottom,from(#ccc),to(#ccc));background-image:linear-gradient(#777777,#777777);border-radius:2px;padding:5px;position:relative;}
.enc_crm td{font-size:14pt;color:white;line-height:20px;font-family:Tahoma;height:30px;}
.tableseparated #tableAsig tr:nth-child(odd){background-color:#eee;}
.tableseparated #tableAsig tr:nth-child(even){background-color:#fff;}
#tableAsig tr:nth-child(odd){background-color:#eee;}
#tableAsig tr:nth-child(even){background-color:#fff;}
.desc_crm2 td{line-height:20px;font-weight:bold;}
.desc_crm1 td{line-height:20px;font-weight:bold;}
.box_titulo{font-family:Tahoma;height:39px;margin-bottom:20px;background:url(themes/enter_nuevo2/img/barra.jpg) no-repeat;background-size:20cm 39px;}
.item_titulo{float:left;height:29px;width:18px;font-size:18px;line-height:18px;padding:10px 0 0 15px;text-align:center;}
.box_titulo_p{float:left;height:27px;padding:13px 15px 0 25px;font-size:13px;color:#fff;font-weight:bold;}
.box_titulo_p a{font-size:13px;color:#fff;font-weight:bold;text-decoration:none;}
.form_submit{background:url(themes/enter_nuevo2/img/submit.gif) no-repeat;color:#FFF;border:none;cursor:pointer;display:block;float:left;height:30px;margin:0 4px 0 0;padding:0;width:80px;}
.form_reset{background:url(themes/enter_nuevo2/img/reset.gif) no-repeat;color:#FFF;border:none;cursor:pointer;display:block;float:left;height:30px;width:80px;}
.imgCRM{float:inherit;margin-left:20%;}
.navbar-custom-menu > ul > li > a > i{font-size:20px;line-height:20px;}
.navbar-custom-menu > ul > li > a > span{font-size:20px;line-height:20px;}
.navbar > a{font-size:20px;line-height:20px;}
.skin-red .main-header .navbar{background-color:#f39321;}
.skin-red .main-header .logo{background-color:#000000;}
.skin-red .main-header .logo:hover{background-color:#888888;}
.sidebar-form > .input-group > .header{color:white;}
.sidebar-form > .input-group > table > tbody > tr > td{color:#d6d6d6;}
.skin-red .main-header .navbar .sidebar-toggle:hover{background-color:#ce7b1d;}
.form-control-sm{height:calc(1.5em + 0.5rem + 2px);padding:0 5pt;font-size:0.875rem;line-height:1.5;border-radius:0.2rem;}
.form-control-lg{height:calc(1.5em + 1rem + 2px);padding:0.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:0.3rem;}
/* Los sitios de enter_nuevo2 cuyo profile no trae login propio usan el login del core,que es neutro (pizarra). Aqui
   se le ponen los colores de HML Enter:naranja,blanco y negro. Se declara sobre body.core-login (0,1,1) para
   ganarle a la paleta del core (:where,peso 0). Los profiles con login propio (ej. ecotermo) no usan esta clase. */
body.core-login{--hml-text:#1a1a1a;--hml-primary:#ff8a00;--hml-primary-hover:#f57c00;--hml-on-primary:#1a1a1a;--hml-primary-text:#a84b00;--hml-primary-soft:#fff1e0;--hml-accent:#ff8a00;--hml-link:#a84b00;--hml-link-hover:#1a1a1a;--hml-focus:#1a1a1a;--hml-focus-ring:rgba(255,138,0,.45);background:#ffffff linear-gradient(118deg,#ffffff 0%,#ffffff 56%,#ff9a1f 56%,#ff8a00 78%,#f26a00 100%);}
.button{color:#333;font-family:Arial;font-size:11px;background:#CCCCCC;border:1px solid #92A4BC;z-index:0;}
.picbutton{font-family:Arial;font-size:11px;background:transparent;border:0px solid #92A4BC;color:Black;z-index:0;}
.field_textbox,.field_filebox,.field_listbox,.field_selectbox{color:#333;font-family:Arial;font-size:11px;background:#FFF;border:1px solid #B0C4DE;z-index:0;}
.field_checkbox{color:#333;font-family:Arial;font-size:11px;background:transparent;z-index:0;}
.field_textbox_error,.field_filebox_error,.field_listbox_error,.field_selectbox_error{color:#333;font-family:Arial;font-size:11px;background:#FFC0C0;border:1px solid #B0C4DE;z-index:0;}
.field_textbox_readonly{color:#333;font-family:Arial;font-size:11px;border:0px solid #B0C4DE;z-index:0;background:transparent;}
.buttonok{color:#333;font-family:Arial;font-size:11px;background:#CCCCCC;border:1px solid #92A4BC;z-index:0;}
.buttoncancel{color:#333;font-family:Arial;font-size:11px;background:#CCCCCC;border:1px solid #92A4BC;z-index:0;}
.buttonedit{color:#333;font-family:Arial;font-size:11px;background:#CCCCCC;border:1px solid #92A4BC;z-index:0;}
.row0,.heading2{color:#278eaf;font-family:Arial;font-weight:bold;font-size:12px;background:transparent;border-bottom:#8eb2be 2px solid;}
.row1{background:#FAFAFA;border-bottom:#E6E6E6 1px solid;vertical-align:top;font-size:11px;}
.row2{background:transparent;border-bottom:#E6E6E6 1px solid;vertical-align:top;font-size:11px;}
.rowblank{color:#333;font-family:Arial;font-size:11px;background:White;}
.rowgroup{color:#333;font-weight:bold;font-size:12px;font-family:Arial;background:#FCDAB6;}
.rowpostedby{color:#696969;font-family:Arial;font-size:11px;background:#F5F5F5;border-bottom:1px solid #333;border-top:1px solid #333;}
.rowpostedbylink{color:#696969;font-family:Arial;font-size:11px;background:#F5F5F5;text-decoration:none;}
.rowpostedbylink:HOVER{color:#990000;text-decoration:underline;}
.rowdelete{color:#9D4136;font-family:Arial;background:#F2B4B4;padding:2px 6px;vertical-align:top;}
.calendarHeader{color:#46627d;font-family:Arial;font-size:11px;font-weight:bold;background:transparent;}
.calendarToday{color:#FFF;background:#333;font-family:Arial;font-size:10px;font-weight:bold;}
.calendar{color:#333333;font-family:Arial;font-size:10px;font-weight:normal;background:transparent;}
.inventario_subCat_menuLink{color:black;background-color:transparent;cursor:pointer;text-align:center;}
.inventario_subCat_menuLink_Over{color:black;background-color:#CCCCCC;border-left:1px solid #000000;border-right:1px solid #000000;cursor:pointer;text-align:center;}
.inventario_subCat_menu_head{color:black;background-color:#CCCCCC;font-weight:bold;text-align:center;}
.inventario_subCat_menu_background{background-color:#F0F0F0;border:1px solid #000000;}
/* Face-lift de Ecotermo (theme_profile de enter_nuevo2). core/theme.php lo carga despues del style.css,forms.css y lists.css del theme. enter_nuevo2 lo comparten ~50 clientes:nada de ecotermo va en el theme.
   Contrato de tokens y reglas en .notas_AI/estilo/estilo_visual_mvc.md.

   Face-lift SOLO en la UI nueva;la vieja queda congelada sin bloque aparte:- La paleta y los tokens se definen en body[class*="skin-"] (y body.eco-login,el login nuevo) y no en:root. El <body> de la UI vieja no
     trae clase skin-*,asi que ahi ningun token existe y todo var(--hml-x,<valor de siempre>) cae en su
     fallback (los de style_custom.css y los de este archivo).
   - style_custom_ui.css solo se carga en la UI nueva (extra_links_for_profile.php).
   - Las reglas de jquery UI van aqui con prefijo body[class*="skin-"] (le ganan a jquery.ui_1_12_1.css
     aunque se cargue despues) en vez de un jquery.ui_1_12_1.complement.css,que core solo busca en el
     theme y no en el profile. */

/* Paleta Ecotermo. El logo solo trae rojo #b72025 (medido del png) y negro. Del negro sale el grafito
   (neutro para menu,encabezados y texto). Verde,ambar y petroleo son propios (no vienen de la marca)
   y se usan solo para estados:exito,advertencia e info. 6 variaciones con la receta del doc:-dark 40% negro,-darker 78% negro,-light 55% blanco,-lighter 88% blanco,-lightest 93% blanco. */
body[class*="skin-"],body.eco-login{--eco-rojo-darker:#280708;--eco-rojo-dark:#6e1316;--eco-rojo:#b72025;--eco-rojo-light:#df9b9d;--eco-rojo-lighter:#f6e4e5;--eco-rojo-lightest:#faeff0;--eco-grafito-darker:#111111;--eco-grafito-dark:#2e2e2e;--eco-grafito:#4d4d4d;--eco-grafito-light:#afafaf;--eco-grafito-lighter:#eaeaea;--eco-grafito-lightest:#f3f3f3;--eco-verde-darker:#0d1f0d;--eco-verde-dark:#255325;--eco-verde:#3d8b3d;--eco-verde-light:#a8cba8;--eco-verde-lighter:#e8f1e8;--eco-verde-lightest:#f1f7f1;--eco-ambar-darker:#332405;--eco-ambar-dark:#8b620e;--eco-ambar:#e8a317;--eco-ambar-light:#f5d697;--eco-ambar-lighter:#fcf4e3;--eco-ambar-lightest:#fdf9ef;--eco-petroleo-darker:#07181f;--eco-petroleo-dark:#134353;--eco-petroleo:#1f6f8b;--eco-petroleo-light:#9abecb;--eco-petroleo-lighter:#e4eef1;--eco-petroleo-lightest:#eff5f7;}
/* Entre parentesis el contraste WCAG (minimo 4.5 texto normal,3 bordes/iconos).
   Rojo = marca y acento ("aqui estas":raya de la barra,tab y menu activos). Primario,links y foco van en
   petroleo (2026-10-08):con rojo,Grabar se leia como abortar y el foco como error. Para que el acento siga
   diciendo "aqui estas",las cajas de la home NO llevan raya roja (van en grafito). Danger es un carmin mas
   oscuro que el rojo de marca y style_custom_ui.css lo dibuja como contorno + icono. */
body[class*="skin-"],body.eco-login{--hml-text:var(--eco-grafito-dark);--hml-text-muted:#666666;--hml-text-placeholder:#6b6b6b;--hml-link:var(--eco-petroleo);--hml-link-hover:var(--eco-petroleo-dark);--hml-bg-page:var(--eco-grafito-lightest);--hml-bg-surface:#ffffff;--hml-bg-surface-alt:#f8f8f8;--hml-bg-hover:var(--eco-grafito-lighter);--hml-bg-disabled:#f2f2f2;--hml-border:#d6d6d6;--hml-border-input:#8c8c8c;--hml-border-input-hover:var(--eco-grafito);--hml-border-disabled:var(--eco-grafito-light);--hml-focus:var(--eco-petroleo);--hml-focus-ring:var(--eco-petroleo-light);--hml-primary:var(--eco-petroleo);--hml-primary-hover:var(--eco-petroleo-dark);--hml-on-primary:#ffffff;--hml-primary-soft:var(--eco-petroleo-lighter);--hml-primary-text:var(--eco-petroleo-dark);--hml-accent:var(--eco-rojo);--hml-accent-text:var(--eco-rojo-dark);--hml-header-bg:var(--eco-grafito-dark);--hml-header-text:#ffffff;/* Encabezados de modulo plegables (ej. adm_access.php):rojo muy claro con raya roja,para no verse igual que el
       titulo de la ventana y el menu (grafito solido) y para que el rojo de la marca aparezca en el interno (2026-10-09). */
    --hml-module-header-bg:var(--eco-rojo-lighter);--hml-module-header-text:var(--eco-rojo-darker);--hml-module-header-accent:var(--eco-rojo-dark);--hml-row-hover:var(--eco-rojo-lightest);--hml-row-group-bg:var(--eco-grafito-lighter);--hml-row-group-text:var(--eco-grafito-darker);--hml-titlebar-bg:var(--eco-grafito-lighter);--hml-titlebar-text:var(--eco-grafito-darker);/* Cajas AdminLTE (widgets):raya grafito,no roja (el rojo ya es primario y acento).
       2026-09-30:se probaron encabezado blanco con divisor,tonos por area (.hml-section-*) y un tono
       unico de la paleta;se quedo este grafito con titulo sin bold (decision con diseno). El volumen lo
       da el default de style_custom_ui.css (radio + sombra). */
    --hml-box-accent:var(--eco-grafito);--hml-box-header-bg:var(--eco-grafito-lightest);--hml-box-header-text:var(--eco-grafito-darker);--hml-sidebar-bg:var(--eco-grafito-dark);--hml-sidebar-text:var(--eco-grafito-lighter);--hml-sidebar-subtext:var(--eco-grafito-light);--hml-sidebar-active-bg:#202020;--hml-sidebar-active-text:#ffffff;--hml-sidebar-tabs-bg:var(--eco-grafito-darker);--hml-success:#2e682e;--hml-success-hover:var(--eco-verde-dark);--hml-on-success:#ffffff;--hml-success-soft:var(--eco-verde-lighter);--hml-success-text:var(--eco-verde-dark);--hml-warning:var(--eco-ambar);--hml-warning-hover:#d19315;--hml-on-warning:var(--eco-grafito-darker);--hml-warning-soft:var(--eco-ambar-lighter);--hml-warning-text:var(--eco-ambar-dark);--hml-warning-line:var(--hml-warning-text);--hml-danger:#8a1a1e;--hml-danger-hover:#6e1518;--hml-on-danger:#ffffff;--hml-danger-soft:#f3e8e8;--hml-danger-text:#8a1a1e;--hml-danger-ring:rgba(138,26,30,.25);/* info solido en grafito (2026-10-09):el primario ya es petroleo y botones como Editar (primary) / Detalle (info)
       salian iguales. Las alertas info (soft/text) siguen en petroleo. */
    --hml-info:var(--eco-grafito);--hml-info-hover:var(--eco-grafito-dark);--hml-on-info:#ffffff;--hml-info-soft:var(--eco-petroleo-lighter);--hml-info-text:var(--eco-petroleo-dark);--hml-neutral-soft:var(--eco-grafito-lighter);--hml-neutral-text:var(--eco-grafito-dark);--hml-font-numeric:tabular-nums;--hml-fs-base:14px;--hml-fs-sm:13px;--hml-fs-xs:12px;--hml-fs-h1:24px;--hml-fs-h2:20px;--hml-fs-h3:18px;--hml-fs-h4:16px;--hml-fw-heading:600;--hml-radius:4px;--hml-radius-lg:8px;/* Fuente del sistema en vez de Arial:Segoe UI en Windows,San Francisco en Mac/iPhone,Roboto en
       Android. No se descarga nada y todas traen semibold (600). */
    --hml-font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
/* El theme fija "font-family:Arial" en estos 76 selectores (style.css,forms.css,lists.css,calendar.css);h1-h6 van aparte porque AdminLTE los deja en "Source Sans Pro",que no se carga.
   Con el prefijo le ganan solo en la UI nueva. Los iconos no se tocan:.fa pone su fuente en el <i>. */
body[class*="skin-"],body[class*="skin-"] h1,body[class*="skin-"] h2,body[class*="skin-"] h3,body[class*="skin-"] h4,body[class*="skin-"] h5,body[class*="skin-"] h6,body[class*="skin-"] .highlighted,body[class*="skin-"] .menuLink,body[class*="skin-"] .menuLink_Over,body[class*="skin-"] .subMenuLink,body[class*="skin-"] .subMenuLink_Over,body[class*="skin-"] .menu_head,body[class*="skin-"] A,body[class*="skin-"] A.lostpass:LINK,body[class*="skin-"] A.lostpass:VISITED,body[class*="skin-"] A.lostpass:HOVER,body[class*="skin-"] TH,body[class*="skin-"] TD,body[class*="skin-"] .error,body[class*="skin-"] .info,body[class*="skin-"] .centerboxtext,body[class*="skin-"] .sideboxtext,body[class*="skin-"] .plainboxtitle,body[class*="skin-"] .plainboxtext,body[class*="skin-"] .sideboxtitle,body[class*="skin-"] .centerboxtitle,body[class*="skin-"] .pgprocessed,body[class*="skin-"] .copyright,body[class*="skin-"] .userexttable,body[class*="skin-"] .usertoppanel,body[class*="skin-"] .userbottompanel,body[class*="skin-"] .print_header_toprow,body[class*="skin-"] .print_header_bottomrow,body[class*="skin-"] .print_header_toptext,body[class*="skin-"] .tabMenu_TabTitle,body[class*="skin-"] .tabMenu_GroupTitle,body[class*="skin-"] .tabMenu_LinkCat,body[class*="skin-"] .tabMenu_Link,body[class*="skin-"] .tabMenu_Link a:link,body[class*="skin-"] .tabMenu_Link a:visited,body[class*="skin-"] .tabMenu_Link a:active,body[class*="skin-"] .tabMenu_Link a:hover,body[class*="skin-"] #star div.user,body[class*="skin-"] .bannerContent,body[class*="skin-"] .toolbarContent,body[class*="skin-"] .toolbarButtons,body[class*="skin-"] .toolbarButtonMovimiento,body[class*="skin-"] .bannerTable,body[class*="skin-"] .bannerTitleEditable,body[class*="skin-"] .editTitle,body[class*="skin-"] .title,body[class*="skin-"] .fieldsSeparator,body[class*="skin-"] .tableSelectCurso td.row1:hover,body[class*="skin-"] .tableSelectCurso td.row2:hover,body[class*="skin-"] .field_textbox_stand_by,body[class*="skin-"] .enc_crm td,body[class*="skin-"] .box_titulo,body[class*="skin-"] .button,body[class*="skin-"] .picbutton,body[class*="skin-"] .field_textbox,body[class*="skin-"] .field_filebox,body[class*="skin-"] .field_listbox,body[class*="skin-"] .field_selectbox,body[class*="skin-"] .field_checkbox,body[class*="skin-"] .field_textbox_error,body[class*="skin-"] .field_filebox_error,body[class*="skin-"] .field_listbox_error,body[class*="skin-"] .field_selectbox_error,body[class*="skin-"] .field_textbox_readonly,body[class*="skin-"] .buttonok,body[class*="skin-"] .buttoncancel,body[class*="skin-"] .buttonedit,body[class*="skin-"] .row0,body[class*="skin-"] .heading2,body[class*="skin-"] .rowblank,body[class*="skin-"] .rowgroup,body[class*="skin-"] .rowpostedby,body[class*="skin-"] .rowpostedbylink,body[class*="skin-"] .rowdelete,body[class*="skin-"] .calendarHeader,body[class*="skin-"] .calendarToday,body[class*="skin-"] .calendar{font-family:var(--hml-font-family);}
/* El theme pone todos los links en negrita (A{font-weight:bold}):si todo es negrita nada resalta.
   Semibold en general;normal en filas clicables (el color y el hover ya dicen que es link) y en el menu. */
body[class*="skin-"] A{font-weight:600;}
body[class*="skin-"] .hml-link-list a,body[class*="skin-"] .sidebar-menu > li > a,body[class*="skin-"] .sidebar-menu .treeview-menu > li > a{font-weight:400;}
body[class*="skin-"] .sidebar-menu > li.active > a{font-weight:600;}
/* Mismos selectores que style.css/forms.css/lists.css del theme (se cargan antes,este gana por orden).
   El fallback es el valor de siempre del theme:en la UI vieja no hay tokens y queda igual.
   El theme usa 11px en todo;en la UI nueva sube a --hml-fs-base (14px). */
BODY{color:var(--hml-text,#333);font-size:var(--hml-fs-base,11px);}
TH,TD{color:var(--hml-text,#333);font-size:var(--hml-fs-base,11px);}
A{color:var(--hml-link,#46627d);font-size:var(--hml-fs-base,11px);}
A:LINK,A:VISITED{color:var(--hml-link,#46627d);}
A:HOVER{color:var(--hml-link-hover,#CA5430);}
.highlighted{color:var(--hml-text,Black);font-size:var(--hml-fs-base,11px);background-color:var(--hml-row-hover,#CCFFCC);}
.error{color:var(--hml-danger-text,#990000);font-size:var(--hml-fs-base,11px);}
.info{color:var(--hml-info-text,Blue);font-size:var(--hml-fs-base,11px);}
.editTitles,.editTitlesLeft{color:var(--hml-text-muted,#808080);}
.sideboxtitle{color:var(--hml-titlebar-text,#CA5430);background:var(--hml-titlebar-bg,white);}
.centerboxtitle{color:var(--hml-titlebar-text,#990000);background:var(--hml-titlebar-bg,#EFEFEF);}
.row0,.heading2{color:var(--hml-primary-text,#278eaf);font-size:var(--hml-fs-base,12px);border-bottom:2px solid var(--hml-primary,#8eb2be);}
.row1{color:var(--hml-text,Black);font-size:var(--hml-fs-base,11px);background-color:var(--hml-bg-surface-alt,#f5f5f5);border-bottom:1px solid var(--hml-border,#e6e6e6);}
.row2{color:var(--hml-text,Black);font-size:var(--hml-fs-base,11px);background-color:var(--hml-bg-surface,#ffffff);border-bottom:1px solid var(--hml-border,#e6e6e6);}
.rowgroup{color:var(--hml-row-group-text,black);font-size:var(--hml-fs-base,11px);background-color:var(--hml-row-group-bg,#e6e6e6);}
.button{color:var(--hml-text,#333);font-size:var(--hml-fs-base,11px);background:var(--hml-bg-hover,#CCC);border:1px solid var(--hml-border-input,#92A4BC);}
.button:hover{color:var(--hml-text,#333);background-color:var(--hml-border,#E6E6E6);}
.field_textbox,.field_filebox,.field_listbox,.field_selectbox,.field_checkbox{color:var(--hml-text,#333);font-size:var(--hml-fs-base,11px);background:var(--hml-bg-surface,#FFF);border:1px solid var(--hml-border-input,#B0C4DE);}
.field_textbox_error,.field_filebox_error,.field_listbox_error,.field_selectbox_error{color:var(--hml-text,#333);font-size:var(--hml-fs-base,11px);background:var(--hml-danger-soft,#FFC0C0);border:1px solid var(--hml-danger,#B0C4DE);}
.field_textbox_readonly{color:var(--hml-text,#333);font-size:var(--hml-fs-base,11px);}
/* Todo limitado a la UI nueva. Lo que requiere tocar archivos de produccion (roles de botones,colores inline,texto "Logistica_") quedo en el informe para el equipo. */

/* Regresion del face-lift:la letra subio de 11px a 14px y hay cajas con alto fijo inline que ya no alcanzan.
   Caso medido:acordeones de logistica (14 en comercial_view y _logistica_view):<h3 style="height:25px"> con
   el texto en <span style="float:left;margin-top:5px">. El alto fijo era lo que contenia los floats;con la
   letra nueva el texto se salia por debajo. Alto automatico + flow-root (contiene los floats),icono absoluto
   a la derecha (flotado no cabe junto al span de 98%) y sin el margin-top inline:queda centrado (9px arriba/abajo). Solo encabezados con spans flotados,para no mover el icono de los acordeones normales. !important porque alto y margen vienen inline. */
body[class*="skin-"] .ui-accordion .ui-accordion-header:has(> span[style*="float"]){display:flow-root;height:auto !important;}
body[class*="skin-"] .ui-accordion .ui-accordion-header:has(> span[style*="float"]) > .ui-accordion-header-icon{position:absolute;top:50%;right:10px;left:auto;margin-top:-8px;}
body[class*="skin-"] .ui-accordion .ui-accordion-header:has(> span[style*="float"]) > span:not(.ui-icon){margin-top:0 !important;}
body[class*="skin-"] .navbar-custom-menu > ul > li > a > span{font-size:var(--hml-fs-base);line-height:20px;}
body[class*="skin-"] .td-border{border-color:var(--hml-border-input);}
/* Logistica (modules/logistica,exclusivo de ecotermo):menu propio (#cssmenu .etiquetas) y botones .btnstl
   que no reciben los estilos del core. Pestana activa con la raya de acento como en jquery UI;botones como
   los secundarios del sistema (gris con borde). La accion principal de cada formulario se marca en codigo. */
body[class*="skin-"] #cssmenu li.etiquetas > a{color:var(--hml-text-muted);}
body[class*="skin-"] #cssmenu li.etiquetas > a:hover{color:var(--hml-text);}
body[class*="skin-"] #cssmenu li.etiquetas.activem{background:var(--hml-bg-surface);box-shadow:inset 0 3px 0 var(--hml-accent);}
body[class*="skin-"] #cssmenu li.etiquetas.activem > a{color:var(--hml-accent-text);}
body[class*="skin-"] .btnstl{color:var(--hml-text);background:var(--hml-bg-hover);border:1px solid var(--hml-border-input);border-radius:var(--hml-radius);padding:0 12px;cursor:pointer;}
body[class*="skin-"] .btnstl:hover,body[class*="skin-"] .btnstl:focus{background:var(--hml-border);}
body[class*="skin-"] .btnstl:focus-visible{outline:2px solid var(--hml-focus);outline-offset:2px;}
/* "table-responsive" para celular:AdminLTE corta lo que se sale de la pantalla (.wrapper overflow-x:hidden)
   y las tablas/formularios anchos quedaban inaccesibles (caja chica,CxP). Scroll horizontal dentro del panel.
   Solo < 768px:en escritorio el scroll cortaria popups internos. Logistica no:su menu (#cssmenu) despliega
   submenus dentro del panel y el overflow los cortaria. */
@media (max-width:767px){body[class*="skin-"] .content-wrapper .panel-body:not(:has(#cssmenu)),body[class*="skin-"] .content-wrapper .box-body:not(:has(#cssmenu)){overflow-x:auto;-webkit-overflow-scrolling:touch;}}
/* El theme la pinta naranja con el logo en negro. El logo de Ecotermo es rojo sobre blanco:barra blanca con una raya roja abajo,como las dos rayas rojas del header de la UI vieja. */
.skin-red .main-header .navbar,.skin-red .main-header .logo{background-color:var(--hml-bg-surface);box-shadow:inset 0 -3px 0 var(--hml-accent);}
.skin-red .main-header .logo:hover,.skin-red .main-header .navbar .sidebar-toggle:hover,.skin-red .main-header .navbar .nav > li > a:hover{background-color:var(--hml-bg-hover);color:var(--hml-text);}
.skin-red .main-header .navbar .sidebar-toggle,.skin-red .main-header .navbar .nav > li > a,.skin-red .navbar-custom-menu > ul > li > a > i,.skin-red .navbar-custom-menu > ul > li > a > span,.skin-red .navbar > a{color:var(--hml-text);}
.v-center-td{display:flex;justify-content:end;align-items:center;gap:10px;}
.switch{position:relative;display:inline-block;width:38px;height:20px;margin:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--hml-border-input,#8c8c8c);-webkit-transition:.4s;transition:.4s;}
.switch .slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:white;-webkit-transition:.4s;transition:.4s;}
.switch input:checked + .slider{background-color:var(--hml-primary,#B61F24);}
.switch input:focus-visible + .slider{outline:2px solid var(--hml-focus,#1f6f8b);outline-offset:2px;box-shadow:none;}
.switch input:checked + .slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translateX(16px);}
.switch .slider.round{border-radius:24px;}
.switch .slider.round:before{border-radius:50%;}
@media (max-width:767px){.v-center-td{gap:0;}}
/* Copia de themes/dsg_interno/jquery.ui_1_12_1.complement.css (colores 100% tokens) con prefijo
   body[class*="skin-"]:le gana a jquery.ui_1_12_1.css ("ui-lightness",naranja) aunque este se cargue
   despues dentro del body. En la UI vieja no aplica. */

/* Para que info inicie con un iconito. No en los .info vacios (quedaba un icono suelto) ni en las etiquetas
   de datos lbl* que llena el JS (ej. lblProveedor en CxP):mientras estan vacias solo traen espacios y CSS no
   distingue "solo espacios" de texto. */
body[class*="skin-"] .info:not(:empty):not([id^="lbl"]):not(:has(>:not(br)))::before{font-family:FontAwesome,sans-serif;content:"\f05a";margin-right:5px;}
body[class*="skin-"] .ui-widget-header{border:1px solid var(--hml-header-bg);background:var(--hml-header-bg);color:var(--hml-header-text);font-weight:600;}
body[class*="skin-"] .ui-widget-header select{color:var(--hml-text);}
body[class*="skin-"] .ui-state-default,body[class*="skin-"] .ui-widget-content .ui-state-default,body[class*="skin-"] .ui-widget-header .ui-state-default,body[class*="skin-"] .ui-button{border:1px solid var(--hml-border-input);background:var(--hml-bg-surface);color:var(--hml-text);font-weight:normal;}
body[class*="skin-"] .ui-state-default a,body[class*="skin-"] .ui-state-default a:link,body[class*="skin-"] .ui-state-default a:visited,body[class*="skin-"] a.ui-button,body[class*="skin-"] a:link.ui-button,body[class*="skin-"] a:visited.ui-button{color:var(--hml-text);}
body[class*="skin-"] .ui-state-hover,body[class*="skin-"] .ui-widget-content .ui-state-hover,body[class*="skin-"] .ui-widget-header .ui-state-hover,body[class*="skin-"] .ui-state-focus,body[class*="skin-"] .ui-widget-content .ui-state-focus,body[class*="skin-"] .ui-widget-header .ui-state-focus,body[class*="skin-"] .ui-button:hover,body[class*="skin-"] .ui-button:focus{border:1px solid var(--hml-text-muted);background:var(--hml-bg-hover);color:var(--hml-text);font-weight:normal;}
body[class*="skin-"] .ui-state-hover a,body[class*="skin-"] .ui-state-hover a:hover,body[class*="skin-"] .ui-state-hover a:link,body[class*="skin-"] .ui-state-hover a:visited,body[class*="skin-"] .ui-state-focus a,body[class*="skin-"] .ui-state-focus a:hover,body[class*="skin-"] .ui-state-focus a:link,body[class*="skin-"] .ui-state-focus a:visited,body[class*="skin-"] a.ui-button:hover,body[class*="skin-"] a.ui-button:focus{color:var(--hml-text);}
body[class*="skin-"] .ui-visual-focus{outline:2px solid var(--hml-focus);outline-offset:2px;box-shadow:none;}
body[class*="skin-"] .ui-state-active,body[class*="skin-"] .ui-widget-content .ui-state-active,body[class*="skin-"] .ui-widget-header .ui-state-active,body[class*="skin-"] a.ui-button:active,body[class*="skin-"] .ui-button:active,body[class*="skin-"] .ui-button.ui-state-active:hover{border:1px solid var(--hml-primary);background:var(--hml-primary);color:var(--hml-on-primary);font-weight:normal;}
body[class*="skin-"] .ui-state-active a,body[class*="skin-"] .ui-state-active a:link,body[class*="skin-"] .ui-state-active a:visited{color:var(--hml-on-primary);}
body[class*="skin-"] .ui-icon-background,body[class*="skin-"] .ui-state-active .ui-icon-background{border:var(--hml-primary);background-color:var(--hml-primary);}
body[class*="skin-"] .ui-state-highlight,body[class*="skin-"] .ui-widget-content .ui-state-highlight,body[class*="skin-"] .ui-widget-header .ui-state-highlight{border:1px solid var(--hml-warning);background:var(--hml-warning-soft);color:var(--hml-text);}
body[class*="skin-"] .ui-state-error,body[class*="skin-"] .ui-widget-content .ui-state-error,body[class*="skin-"] .ui-widget-header .ui-state-error{border:1px solid var(--hml-danger);background:var(--hml-danger-soft);color:var(--hml-danger-text);}
body[class*="skin-"] .ui-tabs .ui-tabs-nav{background:var(--hml-bg-hover);border:0;border-bottom:1px solid var(--hml-border);color:var(--hml-text);}
body[class*="skin-"] .ui-tabs .ui-tabs-nav li{border-color:var(--hml-border);background:var(--hml-bg-surface-alt);}
body[class*="skin-"] .ui-tabs .ui-tabs-nav .ui-tabs-anchor{background-color:transparent;color:var(--hml-text-muted);}
body[class*="skin-"] .ui-tabs .ui-tabs-nav li.ui-state-hover .ui-tabs-anchor{color:var(--hml-text);}
body[class*="skin-"] .ui-tabs .ui-tabs-nav li.ui-tabs-active{border-color:var(--hml-border);background:var(--hml-bg-surface);}
body[class*="skin-"] .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,body[class*="skin-"] .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,body[class*="skin-"] .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor{background-color:var(--hml-bg-surface);color:var(--hml-accent-text);box-shadow:inset 0 3px 0 var(--hml-accent);}
/* Dos paneles:ilustracion a la izquierda (fondo rojo-lightest),formulario a la derecha. En tablet el
   formulario sube arriba;en celular la ilustracion se oculta y el formulario va en tarjeta blanca sobre
   rojo-lightest para no perder la marca. Sin style_custom_ui.css (no hay sesion):el color del boton y del foco va aqui. Campos a 16px para que iOS no haga zoom al enfocarlos. */
body.eco-login{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--hml-bg-surface);color:var(--hml-text);font-size:var(--hml-fs-base);}
.eco-login-wrap{flex:1;display:flex;min-height:100vh;min-height:100dvh;}
.eco-login-art{position:relative;flex:1 1 55%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:40px;background:linear-gradient(160deg,var(--eco-rojo-lightest) 0%,var(--eco-rojo-lighter) 100%);border-right:4px solid var(--eco-rojo);}
.eco-login-ecosis{position:absolute;top:32px;left:40px;width:110px;height:auto;}
.eco-login-ilustracion{width:100%;max-width:560px;height:auto;}
.eco-login-lema{max-width:520px;margin:0;font-size:clamp(16px,1.25vw,19px);font-weight:400;line-height:1.65;text-align:center;text-wrap:balance;color:var(--eco-grafito-dark);}
.eco-login-lema strong{font-weight:700;color:var(--eco-grafito-darker);}
.eco-login-lema .eco-login-lema-marca{color:var(--eco-rojo);}
.eco-login-lema::before{content:"";display:block;width:48px;height:3px;margin:0 auto 16px;background:var(--eco-rojo);border-radius:2px;}
.eco-login-panel{flex:1 1 45%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 24px;}
.eco-login-logo{width:100%;max-width:340px;height:auto;margin-bottom:32px;}
.eco-login-form{width:100%;max-width:380px;}
.eco-login-titulo{margin:0 0 4px;font-size:var(--hml-fs-h2);font-weight:var(--hml-fw-heading);color:var(--hml-text);}
.eco-login-subtitulo{margin:0 0 24px;font-size:var(--hml-fs-sm);color:var(--eco-grafito);}
.eco-login-form label{font-size:var(--hml-fs-sm);font-weight:600;color:var(--hml-text);}
.eco-login-form .checkbox label{font-weight:normal;}
.eco-login-form .form-control{height:48px;font-size:16px;color:var(--hml-text);border-color:var(--hml-border-input);border-radius:var(--hml-radius);}
.eco-login-form .form-control:focus{border-color:var(--hml-focus);box-shadow:0 0 0 1px var(--hml-focus),0 0 0 4px var(--hml-focus-ring);}
.eco-login-campo{position:relative;}
.eco-login-campo .form-control{padding-left:44px;}
.eco-login-campo #login_passwd{padding-right:48px;}
.eco-login-campo-icono{position:absolute;top:50%;left:16px;transform:translateY(-50%);font-size:16px;color:var(--eco-grafito);pointer-events:none;transition:color .2s ease;}
.eco-login-campo:focus-within .eco-login-campo-icono{color:var(--hml-focus);}
.eco-login-ver{position:absolute;top:0;right:0;width:48px;height:48px;padding:0;border:0;background:transparent;color:var(--eco-grafito);font-size:16px;cursor:pointer;border-radius:0 var(--hml-radius) var(--hml-radius) 0;touch-action:manipulation;transition:color .2s ease;}
.eco-login-ver:hover{color:var(--hml-primary-text);}
.eco-login-ver:focus-visible{outline:2px solid var(--hml-focus);outline-offset:-2px;}
.eco-login-aviso{margin:6px 0 0;font-size:var(--hml-fs-sm);color:var(--eco-ambar-dark);}
.eco-login-aviso:empty{display:none;}
.eco-login-aviso::before{content:"\f071";margin-right:6px;font-family:"Font Awesome 7 Free","Font Awesome 5 Free",FontAwesome;font-weight:900;}
.eco-login-form .checkbox{margin:0 0 8px;}
.eco-login-form .checkbox label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-left:0;cursor:pointer;}
.eco-login-form .checkbox input[type="checkbox"]{position:static;width:18px;height:18px;margin:0;accent-color:var(--hml-primary);cursor:pointer;}
.eco-login-opciones a:focus-visible,.eco-login-registro a:focus-visible{outline:2px solid var(--hml-focus);outline-offset:2px;border-radius:2px;}
.eco-login-opciones{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;column-gap:8px;margin-bottom:16px;}
.eco-login-opciones .checkbox{margin:0;}
.eco-login-opciones a,.eco-login-registro a{display:inline-flex;align-items:center;min-height:44px;color:var(--hml-link);font-size:var(--hml-fs-sm);}
.eco-login-opciones a:hover,.eco-login-registro a:hover{color:var(--hml-link-hover);}
.eco-login-registro{margin:8px 0 0;text-align:center;}
.eco-login .eco-login-btn{height:48px;font-size:16px;font-weight:600;color:var(--hml-on-primary);background:var(--hml-primary);border-color:var(--hml-primary);border-radius:var(--hml-radius);touch-action:manipulation;transition:background-color .2s ease-out,border-color .2s ease-out;}
.eco-login .eco-login-btn:hover,.eco-login .eco-login-btn:focus,.eco-login .eco-login-btn:active{color:var(--hml-on-primary);background:var(--hml-primary-hover);border-color:var(--hml-primary-hover);}
.eco-login .eco-login-btn:focus-visible{outline:2px solid var(--hml-focus);outline-offset:2px;}
/* Mientras el POST viaja:el boton se apaga visualmente con un spinner encima. No se usa disabled porque
   un submit deshabilitado no manda submit_login.
   bottom:12px = (48px del boton - 24px del arco) / 2;asi queda centrado aunque reCAPTCHA v2 dibuje arriba. */
.eco-login-enviar{position:relative;}
.eco-login-enviar.is-loading .eco-login-btn{color:transparent;pointer-events:none;}
.eco-login-enviar.is-loading::after{content:"";position:absolute;bottom:12px;left:50%;width:24px;height:24px;margin-left:-12px;box-sizing:border-box;border:3px solid rgba(255,255,255,.4);border:3px solid color-mix(in srgb,var(--hml-on-primary) 40%,transparent);border-top-color:var(--hml-on-primary);border-radius:50%;animation:eco-login-giro .7s linear infinite;}
@keyframes eco-login-giro{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.eco-login-enviar.is-loading::after{animation-duration:2s;}
.eco-login-campo-icono,.eco-login-ver,.eco-login .eco-login-btn{transition:none;}}
.eco-login .alert-danger{color:var(--hml-danger-text);background:var(--hml-danger-soft);border-color:var(--hml-danger);}
.eco-login-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:16px 40px;border-top:1px solid var(--hml-border);}
.eco-login-homeland-link{display:block;}
.eco-login-homeland{height:22px;width:auto;}
.eco-login-certificaciones{height:44px;width:auto;}
@media (max-width:991px){.eco-login-wrap{flex-direction:column-reverse;}
.eco-login-art{padding:32px 24px;border-right:0;border-top:4px solid var(--eco-rojo);}
.eco-login-ecosis{position:static;width:80px;}
.eco-login-ilustracion{max-width:380px;}}
@media (max-width:767px){body.eco-login{background:var(--eco-rojo-lightest);}
.eco-login-art{display:none;}
.eco-login-panel{justify-content:flex-start;padding:32px 16px;}
.eco-login-logo{max-width:240px;margin:8px 0 24px;}
.eco-login-form{padding:24px 20px;background:var(--hml-bg-surface);border-top:4px solid var(--eco-rojo);border-radius:var(--hml-radius);box-shadow:0 2px 12px rgba(40,7,8,.08);}
.eco-login-titulo{font-size:22px;}
.eco-login-footer{flex-direction:column;padding:16px;background:var(--hml-bg-surface);}}
/* Vertical y alto:centrar. En uno chico la tarjeta va arriba;en uno alto arriba deja media pantalla vacia.
   iOS Safari no redimensiona la pagina al abrir el teclado,asi que centrar no la hace saltar. */
@media (max-width:767px) and (min-height:700px){.eco-login-panel{justify-content:center;}}
/* Horizontal:con 932px de ancho entra el diseno de escritorio y la tarjeta (577px o mas) no cabe en 430px de
   alto;el boton Ingresar quedaba fuera de la vista. Logo a la izquierda,formulario a la derecha y espacios compactos. */
@media (orientation:landscape) and (max-height:500px){.eco-login-wrap{align-items:center;padding:12px 16px;}
.eco-login-panel{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);column-gap:32px;align-items:center;max-width:760px;}
.eco-login-form{grid-column:2;grid-row:1 / span 3;}
.eco-login-logo{justify-self:center;width:auto;max-width:100%;max-height:120px;margin:0;}
.eco-login-panel{padding:20px 24px;}
.eco-login-titulo{font-size:22px;}
.eco-login-subtitulo{margin-bottom:12px;}
.eco-login-form .form-group{margin-bottom:10px;}
.eco-login-opciones{margin-bottom:8px;}
.eco-login-art{display:none;}
.eco-login-panel{justify-items:center;}
.eco-login-form{max-width:420px;}}