@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap);
:root { --c0: #fff; --c1: #2c3e50; --cs: #275c29; --c3: #f1c40f; --cb: #019cd7; --cbtn: #000; --fsize: .68rem; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1); --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --transition-fast: 150ms cubic-bezier(.4,0,.2,1); --transition-normal: 300ms cubic-bezier(.4,0,.2,1); --transition-slow: 500ms cubic-bezier(.4,0,.2,1); --grid-border: #e2e8f0; --grid-header-bg: var(--c1); --highlight: #f5f9fc; --row-hover: #e8f4fc; --row-select: #e1f0fb }

@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}

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

@keyframes slideInLeft {
    from { transform: translateX(-20px); opacity: 0 }
    to { transform: translateX(0); opacity: 1 }
}

@keyframes slideInRight {
    from { transform: translateX(20px); opacity: 0 }
    to { transform: translateX(0); opacity: 1 }
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0 }
    to { transform: translateY(0); opacity: 1 }
}

@keyframes rippleEffect {
    0% { transform: scale(0); opacity: .6 }
    100% { transform: scale(2.5); opacity: 0 }
}

@keyframes successCheck {
    0% { transform: scale(0); opacity: 0 }
    50% { transform: scale(1.2); opacity: 1 }
    100% { transform: scale(1); opacity: 1 }
}

@keyframes tableHighlight {
    0% { background-color: rgba(1,156,215,.15) }
    100% { background-color: transparent }
}

html { -webkit-text-size-adjust: 100%; box-sizing: border-box }
body { display: flex; flex-flow: column wrap; justify-content: space-evenly }
    body > * { font: var(--fsize) Poppins,Verdana,'Segoe UI' }
img { max-width: 100vw; height: auto; display: block; margin: 0 auto; transition: transform var(--transition-normal) }
    img:hover { transform: scale(1.02) }
.c1 { color: var(--c1) }
.cs { color: var(--cs) }
.c3 { color: var(--c3) }
input, select, textarea { border: 0; padding: .06rem .3rem; border-radius: .19rem; outline: 0; transition: all var(--transition-normal) }
[type=button], [type=password], [type=submit], [type=text], select { height: 1.7rem !important }
[type=button], [type=submit] { height: 2rem; padding: 0; margin: 0 2px; min-width: 2rem; cursor: pointer; color: var(--c0); font-weight: 500; transition: all var(--transition-normal); border-radius: var(--radius-sm); border: none; position: relative; overflow: hidden }
    [type=button]:hover, [type=submit]:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background-color: var(--cs) }
    [type=button]:after, [type=submit]:after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255,255,255,.5); opacity: 0; border-radius: 100%; transform: scale(1,1) translate(-50%); transform-origin: 50% 50%; animation: rippleEffect .5s }
    [type=button]:focus, [type=submit]:focus { box-shadow: 0 0 0 3px rgba(1,156,215,.3); outline: 0 }
.linbut a:link, .linbut a:visited, .menu_link a:hover, a:link, a:visited { color: var(--cb); text-decoration: none; transition: color var(--transition-fast) }
a:hover { color: var(--cb) }
.linbut a:active, a:active { text-decoration: none }
.divContent { width: 99vw; padding: 0 0 .3rem .3rem; position: relative; top: 1.4rem; animation: fadeIn .5s }
    .divContent h1 { border-radius: 8px; margin: .1rem 0 0; padding: .2rem .1rem .2rem .7rem; color: var(--c0); background: var(--cs); border-left: .5rem solid #f39c12; animation: slideInLeft .5s; font-size: var(--fsize); font-weight: 600; text-transform: uppercase }
.fc, .filtros, .form, .pnlboton, .pnlbotonAux { max-width: 100%; clear: both }
.filtros { border-radius: 0 0 0 5px; padding: 0 0 0 .5rem; display: inline-block; border-left: 1px solid var(--cb); background: linear-gradient(90deg,rgba(236,240,241,.5) 0,rgba(252,252,252,.3) 30%); animation: fadeIn .6s }
    .filtros label, .filtros span { display: inline-block; margin: .1rem; text-align: right; font-weight: 700 }
    .filtros [type=text], .filtros select { background: rgba(230,255,230,.2); border-bottom: .06rem solid var(--cs); margin: .1rem 0; transition: all var(--transition-normal) }
        .filtros [type=text]:focus, .filtros select:focus { background: #e6ffe6; border-bottom: .15rem solid #2ecc71 }
.form, .login { box-shadow: var(--shadow-md); border-radius: var(--radius-md) }
.form { margin: .1rem 0 0; background: #f9fafb; min-height: contain; animation: fadeIn .5s }
    .form ul { padding: .4rem 0 0; min-width: 31.3%; border-right: 1px dashed rgba(39,96,155,.26); display: inline-block; float: left }
    .form li { list-style: none; padding: .08rem 0; transition: background-color var(--transition-normal); border-radius: var(--radius-sm) }
        .form li:hover { background-color: rgba(1,75,215,.05) }
        .form li input[type=checkbox]:disabled { float: left }
    .form label, .form span { font-stretch: expanded; color: var(--cs); display: inline-block; vertical-align: top; width: 8.1rem; text-align: right; padding-right: .2rem }
        .filtros label:after, .form label:after { content: ":" }
    .form textarea { min-width: 15rem; height: 5.6rem; line-height: 1.5 }
    .form select { max-width: 8rem }
    .form [type=password], .form [type=text], .form select, .form textarea { border-bottom: .06rem solid var(--cs) }
.grid > * { font-size: calc(var(--fsize)*.9) }
.grid, .gridPlana { overflow-x: auto; border: hidden; margin: 0 0 .1rem; animation: fadeIn .6s; box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); background: var(--c0); border: 1px solid var(--grid-border) }
    .grid table, .gridPlana table { width: 100%; border-collapse: collapse }
    .grid caption { caption-side: top; padding: 1rem; text-align: left; font-weight: 600; border-bottom: 1px solid var(--grid-border); background-color: var(--highlight); text-transform: uppercase; color: var(--c1) }
    .grid td, .gridPlana td { padding: .2rem .3rem; border-bottom: 1px solid var(--grid-border); vertical-align: middle; transition: background-color var(--transition-normal) }
    .grid tr, .gridPlana tr { transition: background-color var(--transition-normal) }
      /*  .grid tr:hover > td { background-color: var(--row-hover) }*/
        .grid tr:not(.bandapie):hover > td { background-color: var(--row-hover); }
        .table.table-dark tr:hover > td { background-color: inherit !important; }
        .grid tr.selected > td { background-color: var(--row-select) }
        .grid tr.new-row { animation: tableHighlight 2s ease }
    .grid th, .gridPlana th { background: var(--cs); color: var(--c0); font-weight: 700; text-align: left; border: none; vertical-align: middle; position: relative; padding: .2rem .3rem }
        .grid th [type=checkbox], .grid th label { padding: .1rem .3rem 0 }
        .gridPlana th:first-child { border-radius: .5rem 0 0 }
        .gridPlana th:last-child { border-radius: 0 .5rem 0 0 }
    .grid tr.selectable { cursor: pointer }
        .grid tr.selectable:hover td { background-color: var(--row-hover) }
        .grid tr.selectable.selected td { background-color: var(--row-select) }
    .grid .status-cell { display: flex; align-items: center; gap: .5rem }
    .grid .cell-bold { font-weight: 600; color: var(--c1) }
    .grid .cell-highlight { background-color: rgba(1,156,215,.07) }
    .grid .cell-action-buttons { white-space: nowrap; display: flex; gap: .25rem }
.grid-header-sortable { cursor: pointer; user-select: none }
    .grid-header-sortable:after { content: ""; display: inline-block; margin-left: .25rem; width: 0; height: 0; vertical-align: middle }
    .grid-header-sortable.sort-asc:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid var(--c0) }
    .grid-header-sortable.sort-desc:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--c0) }
.grid-pagination { display: flex; justify-content: center; align-items: center; padding: 1rem; border-top: 1px solid var(--grid-border); background-color: var(--highlight) }
    .grid-pagination a { margin: 0 .25rem; padding: .5rem; border-radius: var(--radius-sm); transition: all var(--transition-normal); color: var(--c1); text-decoration: none; min-width: 2rem; text-align: center }
        .grid-pagination a:hover { background-color: rgba(1,156,215,.1); color: var(--cb) }
        .grid-pagination a.active { background-color: var(--cb); color: var(--c0) }
.grid-container { position: relative; width: 100% }
.grid-actions { position: absolute; top: 1rem; right: 1rem; display: flex; gap: .5rem; margin-bottom: .5rem; z-index: 5 }
    .grid-actions button { padding: .5rem 1rem; background: var(--c0); border: 1px solid var(--grid-border); border-radius: var(--radius-sm); cursor: pointer; font-size: .9rem; transition: all var(--transition-normal); color: var(--c1); font-weight: 500 }
        .grid-actions button:hover { background-color: var(--highlight); transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--cb) }
.grid-empty { padding: 3rem; text-align: center; color: #94a3b8; background-color: #f9fafb; border-radius: var(--radius-md); margin: 1rem }
.grid.compact td, .grid.compact th { padding: .5rem .75rem; font-size: .9em }
[type=text]:focus, select:focus, textarea:focus { border-left: .15rem solid var(--cb) }
.header { background: linear-gradient(to right,var(--cs),#34495e); color: var(--c0); border-radius: 0 0 .5rem .5rem; height: 1.7rem; position: fixed; width: 100vw; z-index: 10; box-shadow: 0 .13rem .3rem rgba(0,0,0,.1); font-size: 14px; border: 0; animation: fadeIn .5s; top: -3px }
    .header a { color: var(--c0) !important; transition: opacity var(--transition-fast) }
        .header a:hover { opacity: .9 }
.bandapie { background: var(--cs) !important; color: var(--c0); text-align: center }
    .bandapie td { text-align: right }
.banda a:link, .grid th a:link { text-decoration: none; color: var(--c0) }
.boton, .login [type=submit], [type=submit] { vertical-align: top; background: rgba(0,0,0,.9); color: #c9c9c9; padding: 0 .3rem; transition: all var(--transition-normal); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: none; font-weight: 500; cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--shadow-sm) }
    .boton:hover, .login [type=submit]:hover { background: var(--cs); color: var(--c0); transform: translateY(-1px); box-shadow: var(--shadow-md) }
.boton, .botonD { min-width: 6.7rem }
.botonD { background: #e6e6e6; color: #777; opacity: 1; cursor: not-allowed }
    .botonD:hover { transform: none; box-shadow: var(--shadow-sm); background: #e6e6e6; color: #777 }
.botonAux { display: inline-block }
.obl { background: #f8f8ff; border-left: .1rem solid var(--cs); transition: background-color var(--transition-normal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0 }
    .obl:hover { background: #d6eaf8 }
.tarea { color: #27609b; position: relative; font-weight: 600 }
    .tarea:before { content: " ✓"; color: green; margin: 0 .3rem 0 0; display: inline-block; animation: successCheck .5s }
.subtarea { color: rgba(36,59,85,.9); position: relative; left: 1.3rem }
.menu_side { font-size: calc(var(--fsize)*2); left: .3rem; top: -.3rem !important; color: #ccc; padding: .06rem .38rem; border-radius: .3rem; transition: all var(--transition-normal); cursor: pointer; z-index: 1060 }
    .menu_side:hover { color: var(--c0); transform: scale(1.1) }
.sidebar { font-size: calc(var(--fsize)*1.2); z-index: 3; border: .5rem solid var(--cs); border-radius: var(--radius-lg); height: 95vh; width: auto; position: fixed; top: 0; left: .5rem; background: var(--cs); padding-top: 2.5rem; overflow-y: auto; margin-top: 0; box-shadow: var(--shadow-md) }
    .sidebar a, .sidebar i { color: var(--c0) !important; text-decoration: none }
    .sidebar .container-menu, .sidebar .container-submenu { display: flex }
    .sidebar a { display: block; padding: .13rem .19rem; transition: .1s }
        .sidebar a:hover { background-color: rgba(255,255,255,.1); border-radius: var(--radius-sm) }
    .sidebar i { margin: .13rem .13rem 0 auto }
    .container-menu:hover, .sidebar .container-menu { font-weight: 900 }
.sub-menu { margin-left: .3rem }
    .sub-menu a { padding: .19rem !important }
::-webkit-scrollbar { width: .5rem }
::-webkit-scrollbar-thumb { background: #373737; border-radius: .3rem }
::-webkit-scrollbar-track { background: var(--c0) }
.date_info, .menu_side, .user_infoE { top: -.2rem; position: absolute }
.date_info { left: 2vw; top: .9rem !important; display: none }
.enova { font-size: calc(var(--fsize)*1.2); font-weight: 900; position: absolute; top: .2rem; left: 4vw; color: var(--c3); animation: fadeIn .8s }
.user_infoE { left: 17vw; animation: fadeIn .8s; width: 60% }
.user_info { right: 16.1rem; font-size: calc(var(--fsize)*1); animation: fadeIn .8s }
.user_info { position: absolute; top: 40%; transform: translateY(-50%) }
.curved { border-radius: var(--radius-lg); border: 2px solid var(--color-primary); overflow: hidden }
.enlaces {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    animation: 0.8s ease 0s 1 normal none running fadeIn;
    gap: 0.1rem;
}
.bloque-costos {
    background-color: #fff;
    width: 445px;
    /*margin: 20px auto;*/
}

.tabla-costos {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
    border: 1px solid #000;
}

.fila-costos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #000;
    height: 26px;
}

.etiqueta-costos,
.porcentaje-costos,
.valor-costos {
    padding: 4px 8px;
    border-right: 1px solid #000;
    color: #275C29;
}

.etiqueta-costos {
    flex: 1;
    font-weight: 600;
}

.porcentaje-costos {
    width: 70px;
    text-align: right;
    margin-right: 0;
}

.valor-costos {
    width: 80px;
    text-align: right;
    border-right: none;
}

.ultima-fila {
    border-bottom: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.tooltipo, .tooltipoAyuda { display: inline-block; position: relative }
    .tooltipo .tooltiptexto, .tooltipoAyuda .tooltipoAyudatexto { visibility: hidden; position: absolute; z-index: 100; opacity: 0; transition: opacity .3s,transform .3s,visibility 0s .3s; box-shadow: var(--shadow-md); pointer-events: none }
    .tooltipo .tooltiptexto { min-width: 5rem; background: var(--cb); color: var(--c0); text-align: center; border-radius: var(--radius-sm); padding: .06rem 0; top: 2rem; left: -.2rem; transform: translateY(10px) }
    .tooltipoAyuda .tooltipoAyudatexto { width: 100%; max-width: 250px; min-width: 100px; background-color: rgba(0,0,0,.8); color: #fff; text-align: left; border-radius: 6px; padding: 5px; font-size: 10px; font-weight: 400; top: 35px; left: calc(50% - 50%); transform: translateX(-50%) translateY(10px) }
    .tooltipo:hover .tooltiptexto, .tooltipoAyuda:hover .tooltipoAyudatexto { visibility: visible; opacity: 1; transition: opacity .3s,transform .3s }
    .tooltipo:hover .tooltiptexto { transform: translateY(0) }
    .tooltipoAyuda:hover .tooltipoAyudatexto { transform: translateX(-50%) translateY(0) }
.modale { background: rgba(128,128,128,.9); animation: fadeIn .3s; backdrop-filter: blur(2px) }
.fl { float: left; padding: .19rem }
.fc { padding: 0 .3rem; width: 100vw }
.fr { background: #f6f6f6; border: .6rem; float: right; padding: .3rem }
.al { text-align: left }
.ac, .contenidofoots, .footer, .footerclientes, .perfil, .powerby { text-align: center }
.ar { text-align: right }
.aj { text-align: justify }
.panel { background: var(--c0); border-radius: var(--radius-lg); width: auto; padding: .3rem; animation: fadeIn .5s; box-shadow: var(--shadow-lg) }
    .panel h1 { position: relative; left: -.19rem }
.login { width: 50vw; background: var(--cs) !important; margin: 3rem auto; padding: 2.5rem; border-radius: .5rem; animation: fadeIn 1s }
    .login [type=password], .login [type=submit], .login [type=text] { border: 0; height: 2rem; line-height: 0; width: 94%; margin: 0 0 3px 5px }
    .login span { color: var(--cb) }
    .login .logo { position: relative; top: 2px; height: 2rem; left: 100px }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px }
    .status-dot.active { background-color: #2ecc71 }
    .status-dot.inactive { background-color: #e74c3c }
    .status-dot.pending { background-color: #f39c12 }
.powerby { left: 35%; border-radius: .6rem .6rem 0 0; z-index: 2; background: var(--cs); bottom: 0; color: var(--c0); position: fixed; width: auto; padding: 0 1.3rem; box-shadow: var(--shadow-md) }
    .powerby a { color: var(--c3) !important; transition: color var(--transition-normal) }
        .powerby a:hover { color: var(--c3) }
.mensaje { border-radius: 8px 0; background: rgba(0,0,0,.08); height: 55px; width: 100vw; position: fixed; right: 0; bottom: 0; padding: 0; overflow-y: auto; animation: slideInRight .5s; z-index: 99999; }
.notificacion-ayuda { position: absolute; top: 0; right: 60px; z-index: 1000; display: none; width: 420px; height: 70vh; transition: transform .4s }
    .notificacion-ayuda.show { animation: slideInRight .4s }
#notificationContent { height: 75vh }
.close-button { background-color: rgba(0,0,0,.5); border: 0; border-radius: 50%; cursor: pointer; display: inline-block; font-size: 16px; padding: 0 8px; position: absolute; right: 10px; top: 10px; color: #fff; font-size: 18px; transition: all var(--transition-normal) }
    .close-button:hover { background-color: rgba(0,0,0,.8); transform: rotate(90deg) }
.center-spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 99999; padding: 20px; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: 99998; animation: fadeIn .3s; backdrop-filter: blur(2px) }
.eayuda, .edirTel, .esalir, .esugerencias, .etarea { background: url(img/etarea.png) no-repeat }
.eayuda { background: url(img/eayuda.png) no-repeat }
.edirTel { background: url(img/etel.png) no-repeat }
.esugerencias { background: url(img/esugerencias.png) no-repeat }
.esalir { background: url(img/eclose.png) no-repeat }
.circulo { font-size: var(--fsize); background: #f6f6f6; border: .3rem solid var(--cb); border-radius: 50vw; margin: 0 .8rem; padding: 1.3rem; width: 5.6rem; height: 5.6rem; transition: all var(--transition-normal); box-shadow: var(--shadow-sm) }
    .circulo:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(1,156,215,.2) }
.w4 { width: 2.5rem }
.w5 { width: 3.1rem }
.w6 { width: 3.6rem }
.w8 { width: 5rem }
.w9 { width: 5.6rem }
.w10 { width: 6.3rem }
.w12 { width: 11.3rem }
.w16 { width: 10rem }
.w20 { width: 12.5rem }
.w30 { width: 18.8rem }
.w35 { width: 21.9rem }
.w40 { width: 25rem }
.w42 { width: 41.25rem }
.w50 { width: 31.25rem }
.w55 { width: 34.38rem }
.w60 { width: 37.5rem }
.w65 { width: 40.6rem }
.w70 { width: 43.8rem }
.w90 { width: 56.25rem }
.w100 { width: 99vw }
.h4 { height: 2.5rem }
.h5 { height: 3.1rem }
.h6 { height: 3.8rem }
.h8 { height: 5rem }
.h9 { height: 5.6rem }
.h10 { height: 6.3rem }
.h12 { height: 11.3rem }
.h20 { height: 12.5rem }
.h30 { height: 18.8rem }
.h40 { height: 25rem }
.h50 { height: 31.3rem }
.h100 { height: 99vw }
.p1 { padding: 0 .6rem }
.p2 { padding: 0 1.3rem }
.p3 { padding: 0 1.9rem }
.p6 { padding: 0 3.8rem }
.pv1 { padding: .6rem 0 }
.pv2 { padding: 1.3rem 0 }
.pv3 { padding: 1.9rem 0 }
.pm1 { margin: .6rem }
.contenedor-flex { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-top: .3rem }
.s-3 { flex: 1 1 calc(33.33% - 20px); max-width: calc(33.33% - 20px) }
.s-2 { flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px) }
.we { width: 5rem }
.listbox { border-bottom: .06rem solid #6aa3c9 }
.listbox-boton { margin-top: 6rem }
.grida { animation: slideDown 1s ease-in-out }
.panel-nomodal .panel { max-height: none !important }
#LnbActividades, .elementosOc, .etarea { display: none }
.logo, .logoApu { background: url(img/logo.png) 100% no-repeat; height: 25px; left: -22vw; top: 0; width: 205px; cursor: pointer; position: relative; background-size: contain }
.miEmpresaL { display: inline-block; left: 5vw; padding: 6px 0 0; z-index: -1; color: #fff; display: flex; align-items: center }
    .miEmpresaL a:hover, .miEmpresaL a:link, .miEmpresaL a:visited { color: var(--cs); text-decoration: none }
.logoApuImagen {
    background: url(img/logo.png) 100% no-repeat;
    height: 60px;
    top: 0;
    width: 100px;
    cursor: pointer;
    position: relative;
    background-size: contain;
    background-color: var(--cs);
    margin-left: 2rem;
    margin-top:2rem;
}
.info-proyecto {
    padding: 15px;
    width: 100%;
    border-collapse: collapse;
    color: var(--cs);
}

    .info-proyecto ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: table;
        width: 100%;
    }

    .info-proyecto li {
        display: table-row;
    }

        .info-proyecto li label {
            display: table-cell;
            padding: 6px 10px;
            font-weight: bold;
            text-transform: uppercase;
            width: 15%;
        }

        .info-proyecto li asp\:Label {
            display: table-cell;
            padding: 6px 10px;
            border-bottom: 1px solid #ccc;
            font-family: Arial, sans-serif;
        }

        .info-proyecto li:last-child label,
        .info-proyecto li:last-child asp\:Label {
            border-bottom: none;
        }

.logo-apuweb {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-left: 2rem;
    margin-top: 2rem;
}
#ctl00_lblNombreMiEmpresa { position: relative; left: 5vw; top: -7px; display: inline-block }
.form .lblDetApu { width: 50% }
.form .lblDer { width: 10%; vertical-align: bottom }
.form .ulDescripcion, .form .ulDescripcionMdl { padding-left: 0 }
.btn-con-icon { display: inline-flex; align-items: center; background-color: #2c3e50; color: #fff !important; border: none; padding: 8px 16px; font-size: 14px; font-family: 'Segoe UI',sans-serif; border-radius: 4px; text-decoration: none; cursor: pointer; transition: background-color .3s ease; gap: 8px; margin-top: 10px }
    .btn-con-icon:hover { background-color: #275c29; color: #fff; text-decoration: none }
    .btn-con-icon svg { width: 16px; height: 16px; fill: currentColor; vertical-align: middle }
.btn-renovar { display: inline-block; margin-top: 0; background-color: #ff6b00; color: #fff !important; padding: 10px 16px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: background-color .2s ease-in-out }
    .btn-renovar:hover { background-color: #d95b00 }
    .btn-renovar:empty { padding: 0; margin: 0; background-color: transparent; border-left: none; box-shadow: none }
.table-responsive canvas { flex: 1 1 45%; max-width: 45%; height: 350px !important; box-sizing: border-box; }
.FailureText { font-size: var(--fsize) }
.aspNetHidden { display: none !important; }
.HeaderIzq, .al { text-align: left !important }
.HeaderDer, .ar { text-align: right !important }
.HeaderCenter { text-align: center !important }
@media print {
    body, page { margin: 0; box-shadow: 0; background: var(--c0) }
    .grid, .gridPlana { box-shadow: none; border: 1px solid #000 }
        .grid th, .gridPlana th { color: #000; background: #f5f5f5; border-bottom: 1px solid #000 }
        .grid tr:nth-child(even) { background-color: #f9f9f9 }
}

@media only screen and (max-width:480px) {
    :root { --fsize: 18px }
    body > * { font-size:  var(--fsize) }
    #MenuPrincipal ul, #cph_caActividadMensual, #ctl00_lblNombreMiEmpresa, #lblNombreMiEmpresa, #menu ul li, #menu > ul, .buscador, .calendar-actividades, .date_info, .elementosOc, .enova, .header .logo, .mesesAbiertos { display: none }
    .header { height: 2.5rem }
    .divContent { top: 2rem }
    .enlaces { top: 1rem }
    .fc { padding: 0 }
    .fr { float: left }
    .form .ulDescripcion, .form .ulDescripcionMdl { padding-left: 0 }
    .form .lblDetApu { width: 55% }
    .form .lblDer { width: 20%; vertical-align: bottom }
    .form [type=radio] { width: 100%; position: relative }
    .float-fecha { justify-content: center; display: flex }
    .boton, .botonD { width: 95vw; display: inline-block; height: 3rem; margin: .2rem }
    #botonesPnl .boton, #botonesPnl .botonD, #botonesPnlD .boton, #botonesPnlD .botonD { width: 93vw !important; display: inline-block; height: 3rem; margin: .2rem }
    .user_info { left: 14vw; top: 0 }
    .menu_side { left: .6rem; top: .31rem }
    .sidebar { height: auto; font-size: 20px }
        .sidebar a { padding: .1rem .1rem }
    .filtros { width: 100%; margin: 0; text-align: left; padding: 0 .3rem 0 0 }
        .filtros label, .filtros span { width: 18%; margin: .1rem .6rem; display: inline-block }
        .filtros [type=text], .filtros select { width: 40%; display: inline-block }
    .login { width: 100%; height: 20rem }
        .login [type=password], .login [type=submit], .login [type=text] { width: 94%; margin: .1rem }
        .login .logo { position: relative; top: 2px; height: 20%; left: 10px }
    .grid { margin-left: 0 !important; width: 99%; font-weight: 900 }
    [type=text], select { text-align: left }
    [type=file] { width: 60% }
    [type=password], [type=text], select { height: 2rem }
    .form { margin: 0 .5rem 0 0; width: 99vw }
        .form ul { margin: 0; padding: 0; width: 98% }
        .filtros label, .filtros span, .form label, .form span { text-align: left; width: 35%; vertical-align: middle }
        .form textarea { width: 94vw; font-size: 18px !important }
            .form textarea.obl { width: 92vw }
        .form [type=password], .form [type=text], .form [type=url], .form select { width: 50% }
        .fc [type=submit], .filtros [type=submit], .form [type=submit] { display: inline-block }
    .mensaje { position: fixed; left: 0; bottom: 0 }
    .panel { padding: 0 0 0 .2rem; left: .6rem !important; width: 95vw !important }
    .panelnomodal { max-height: none !important }
    .powerby { width: 100vw; margin: 0; font-size: calc(var(--fsize)*.65); bottom: 0; left: 0 }
    .modale { position: absolute; top: 1rem }
    .tooltipo .tooltiptexto { min-width: 12rem }
    .tooltipoAyuda .tooltipoAyudatexto { top: -30px; left: -270px; transform: translateX(0) }
    .form .w4 { width: 3rem }
    .form .w9 { width: 5rem }
    .form .w12 { width: 8rem }
    .form .w20 { width: 14rem }
    .form .we { width: 13.2rem }
    .w8 { width: 8rem }
    .w30 { width: 45% }
    .w40 { width: 100% }
    .w-50 { width: 100% !important; }
    .panel .fc .boton, .panel .fc .botonD { width: 93vw }
    .listbox { width: 95% !important }
    .opc { margin-bottom: 1.7rem }
    .s-2, .s-3 { flex: 1 0 100%; max-width: 100%; margin-bottom: 10px }
    .contenedor-flex { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column }
    .circulo { font-size: 13px }
    .plus { width: 67px; height: 3rem }
    .dt-paging-button { height: 2.8rem }
    .kpi-card { flex: 1 1 30%; min-height: 200px; }
    .kpi-card {
        width: 100%; /* Cada carta ocupa toda la fila */
        min-height: 180px; /* Altura fija para igualar */
    }
    .table-responsive { flex-wrap: wrap; /* Se permite bajar línea */ }
        .table-responsive canvas { flex-basis: 100%; /* Ocupa todo el ancho disponible */ max-width: 100%; height: 250px !important; margin-bottom: 20px; }
    .tooltipoAyuda .tooltipoAyudatexto { top: -30px; left: 60px;  transform: translateX(0); max-width: 90vw;  overflow-wrap: break-word; }
    
}

@media only screen and (min-width:481px) and (max-width:768px) {
    :root { --fsize: 18px }
    body > * { font-size: var(--fsize) }
    #MenuPrincipal ul, #cph_caActividadMensual, #ctl00_lblNombreMiEmpresa, #lblNombreMiEmpresa, #menu ul li, #menu > ul, .buscador, .calendar-actividades, .date_info, .elementosOc, .enova, .header .logo, .mesesAbiertos { display: none }
    .header { height: 2.5rem }
    .divContent { top: 2rem }
    .enlaces { top: 1rem }
    .fc { padding: 0 }
    .fr { float: left }
    .form .ulDescripcion, .form .ulDescripcionMdl { padding-left: 0 }
    .form .lblDetApu { width: 55% }
    .form [type=radio] { width: 100%; position: relative }
    .float-fecha { justify-content: center; display: flex }
    .boton, .botonD { width: 96vw; display: inline-block; height: 3rem; margin: .2rem }
    .user_info { left: 14vw; top: 0 }
    .menu_side { left: .6rem; top: .31rem }
    .sidebar { height: auto; font-size: 20px }
        .sidebar a { padding: .1rem .1rem }
    .filtros { width: 100VW }
        .filtros label, .filtros span { text-align: left; margin: .1rem .6rem; width: 22%; display: inline-block }
        .filtros [type=text], .filtros select { width: 50% }
    .content { position: absolute; top: 20% }
    .login { width: 100%; height: 20rem }
        .login [type=password], .login [type=submit], .login [type=text] { width: 94%; margin: .1rem }
        .login a { font-size: 17px }
        .login .logo { position: relative; top: 2px; height: 3rem; left: 10px }
    .grid { margin-left: 0 !important; width: 99%; font-weight: 900 }
    [type=text], select { text-align: left }
    [type=password], [type=text], select { height: 2rem }
    .form { margin: 0; width: 99vw }
        .form ul { margin: 0; padding: 0; width: 98% }
        .form label, .form span { text-align: left; width: 30%; vertical-align: middle }
        .form [type=password], .form [type=text], .form [type=url], .form select { width: 56% }
        .form textarea { width: 95%; font-size: 18px !important }
        .fc [type=submit], .filtros [type=submit], .form [type=submit] { display: inline-block }
    .fc [type=submit] { margin-left: .7rem }
    .mensaje { position: fixed; left: 0; bottom: 0 }
    .panel { left: 1.2rem !important; width: 95vw !important }
    .powerby { width: 100vw; margin: 0; font-size: .7rem; bottom: 0; left: 0 }
    .tooltipoAyuda .tooltipoAyudatexto { top: -15px; left: 0; transform: translate(-100%,-50%) }
    .form .w4 { width: 4rem }
    .form .w9 { width: 8rem }
    .form .w12 { width: 8rem }
    .form .we { width: 23rem }
    .w8 { width: 8rem }
    .panel .form .grid { width: 95% }
    .listbox { width: 99% !important }
    .panel .fc .boton, .panel .fc .botonD { width: 90vw }
    .opc { margin-bottom: 1.7rem }
    .pnlboton .boton, .pnlboton .botonD { width: 93vw }
    .pnlbotonAux .boton, .pnlbotonAux .botonD { width: 91vw }
    .sbotones { width: 95vw }
    .botonAux { margin-left: .5rem }
    .s-2, .s-3 { flex: 1 0 100%; max-width: 100%; margin-bottom: 10px }
    .circulo { font-size: 13px }
    .plus { width: 67px; height: 3rem }
    .dt-paging-button { height: 2.8rem }
    .paging_simple_numbers { width: 30rem }
    .table-responsive { width: 100%; padding: 10px; display: flex; justify-content: center; gap: 40px; padding-top: 10px; flex-wrap: wrap; }
    .table-responsive { flex-wrap: wrap; /* En pantallas más pequeñas bajan de línea */ }
        .table-responsive canvas { flex-basis: 90%; max-width: 90%; margin-bottom: 20px; /* espacio entre gráficos cuando están en columna */ }
    .tooltipoAyuda .tooltipoAyudatexto { top: -30px; left: 60px; transform: translateX(0); max-width: 90vw; overflow-wrap: break-word; }
    .w40 { width: 100% }
    .w-50 { width: 100% !important; }
    #botonesPnl .boton, #botonesPnl .botonD, #botonesPnlD .boton, #botonesPnlD .botonD { width: 95vw !important; display: inline-block; height: 3rem; margin: .2rem }
}

@media only screen and (min-width:769px) and (max-width:1024px) {
    #MenuPrincipal ul, #cph_caActividadMensual, #ctl00_lblNombreMiEmpresa, #lblNombreMiEmpresa, #menu ul li, #menu > ul, .buscador, .calendar-actividades, .date_info, .elementosOc, .enova, .header .logo { display: none }
    .form [type=radio] { width: 1.3rem; position: relative }
    .float-fecha { float: right !important }
    .form [type=password], .form [type=text], .form select { max-width: 8rem }
    .sidebar { height: auto; font-size: 18px }
    .W30 { width: 7% }
    .boton, .botonD { min-width: 3.8rem }
    .pnlboton .boton, .pnlboton .botonD { min-width: 3.8rem }
    .pnlboton { clear: both }
    .botonAux { max-width: 100%; clear: both }
    .login input { margin: .06rem auto; height: 1.7rem; font-size: .8rem }
    .login .logo { position: relative; top: 2px; height: 3rem; left: 10px }
    .login { width: 50vw; height: 20rem; }
    .panel { margin: 0 !important; width: 95vw !important }
        .panel .form .grid { width: 95% }
    .tooltipoAyuda .tooltipoAyudatexto { top: -30px; left: -270px; transform: translateX(0) 
    }
    .tooltipoAyuda .tooltipoAyudatexto { top: -30px; left: 60px; transform: translateX(0); max-width: 90vw; overflow-wrap: break-word; }
    .s-2, .s-3 { flex: 1 0 100%; max-width: 100%; margin-bottom: 10px }
}

@media only screen and (min-width:1025px) {
    .elementosOc, .enova { display: none }
    .form [type=radio] { width: 1.3rem; position: relative }
    .float-fecha { float: right !important }
    .form [type=password], .form [type=text], .form select { max-width: 12rem }
    .form textarea { max-width: 100%; min-height: 5rem }
    .boton, .botonD { min-width: 5rem }
    .botonAux { max-width: 100%; clear: both }
    .w8 { width: 5rem }
    .login .logo { position: relative; top: 2px; height: 2rem; left: 10px }
}