/* =====================================================================
   REDISENO UI INGELAN
   Se carga despues de Bootstrap y de los estilos del sistema. Todo va
   acotado a .ing-login (login), .ing-trx (Transacciones Beneficios) y
   body.ing-shell (encabezado, menu lateral y color de las grillas), para
   no afectar el resto del contenido de las demas pantallas.
   ===================================================================== */
:root{
  --ing-bg:#F6F5F3;
  --ing-surface:#FFFFFF;
  --ing-text:#1C1D21;
  --ing-muted:#5A5C63;
  --ing-subtle:#6B6D74;
  --ing-border:#DCDBD8;
  --ing-input-bg:#FCFCFB;
  --ing-accent:#A8191F;
  --ing-accent-hover:#7E1217;
  --ing-radius:12px;
  --ing-radius-lg:20px;
  --ing-shadow:0 1px 2px rgba(20,20,30,.04),0 12px 32px rgba(20,20,30,.06);
  --ing-font:Inter,system-ui,sans-serif;
}

/* ---------- LOGIN ---------- */
.ing-login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:24px;box-sizing:border-box;background:var(--ing-bg);font-family:var(--ing-font);color:var(--ing-text)}
.ing-login__wrap{width:100%;max-width:400px;display:flex;flex-direction:column;gap:32px}
.ing-login__brand{display:flex;flex-direction:column;align-items:center;gap:14px}
.ing-login__brand img{height:56px}
.ing-login__card{background:var(--ing-surface);border-radius:var(--ing-radius-lg);padding:40px 36px;box-shadow:var(--ing-shadow);display:flex;flex-direction:column;gap:24px;margin:0}
.ing-step{font-size:12px;font-weight:600;color:var(--ing-accent);letter-spacing:.6px;text-transform:uppercase}
.ing-login h1{margin:0;font-family:var(--ing-font);font-size:26px;font-weight:700;letter-spacing:-.5px;color:var(--ing-text)}
.ing-login p.lead{margin:0;padding:0;font-size:15px;font-weight:400;line-height:1.5;color:var(--ing-muted)}
.ing-field{display:flex;flex-direction:column;gap:8px;margin:0;font-size:13px;font-weight:500;color:#3A3C42}
.ing-input{width:100%;box-sizing:border-box;height:48px;border:1px solid var(--ing-border);border-radius:var(--ing-radius);padding:0 16px;font:15px var(--ing-font);background:var(--ing-input-bg);color:var(--ing-text)}
.ing-input:focus{outline:none;border-color:var(--ing-accent);box-shadow:0 0 0 3px rgba(168,25,31,.12)}
.ing-btn{height:48px;width:100%;border:0;border-radius:var(--ing-radius);background:var(--ing-text);color:#fff;font:600 15px var(--ing-font);cursor:pointer}
.ing-btn:hover{background:#000}
.ing-btn:focus-visible{outline:2px solid var(--ing-accent);outline-offset:2px}
.ing-client{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ing-bg);border-radius:var(--ing-radius);padding:12px 14px}
.ing-client small{display:block;font-size:12px;color:var(--ing-subtle)}
.ing-client strong{font-size:15px;overflow-wrap:anywhere}
.ing-pass{position:relative;display:block}
.ing-pass .ing-input{padding-right:52px}
.ing-pass button{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:transparent;color:var(--ing-subtle);cursor:pointer}
.ing-login a{color:var(--ing-accent);text-decoration:none;font-weight:500}
.ing-login a:hover{color:var(--ing-accent-hover)}
.ing-foot{font-size:12px;color:#8A8C92;text-align:center}

/* Responsivo del login */
.ing-login{min-height:100dvh}
.ing-login__brand img{max-width:100%;object-fit:contain}
.ing-client > div{min-width:0}
.ing-client a{flex:none}
@media (max-width:480px){
  .ing-login{justify-content:flex-start;gap:20px;padding:max(24px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
  .ing-login__wrap{gap:20px}
  .ing-login__brand img{height:48px}
  .ing-login__card{padding:28px 20px;gap:20px;border-radius:16px}
  .ing-login h1{font-size:23px}
  /* con menos de 16px iOS hace zoom al enfocar el campo */
  .ing-login .ing-input{font-size:16px}
  .ing-foot{margin-top:auto}
}
/* telefono horizontal: el formulario parte arriba para que no se corte y se pueda desplazar */
@media (max-height:560px){
  .ing-login{justify-content:flex-start;gap:16px;padding-top:16px;padding-bottom:16px}
  .ing-login__wrap{gap:16px}
  .ing-login__brand img{height:36px}
  .ing-login__card{padding:20px 24px;gap:14px}
}
/* los avisos de error del login traen ancho y alto fijos pensados para escritorio */
@media (max-width:767px){
  body.ing-login-page #DivMensaje .modal-dialog{width:auto !important;margin:16px}
  body.ing-login-page #VentanaBusqueda{height:auto !important}
}

/* ---------- TRANSACCIONES BENEFICIOS: CONTENIDO ---------- */
.ing-trx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px}
.ing-trx-head h1.page-header{margin:0;padding:0;border:0;font-family:var(--ing-font);font-size:28px;font-weight:700;letter-spacing:-.4px;color:var(--ing-text)}
.ing-trx-head p{margin:4px 0 0;padding:0;font-size:14px;color:var(--ing-muted)}
.ing-trx-export{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--ing-border);border-radius:10px;background:var(--ing-surface);color:var(--ing-text);font:600 14px var(--ing-font);cursor:pointer}
.ing-trx-export:hover{background:#F1F3F6}

.ing-trx{font-family:var(--ing-font);color:var(--ing-text)}

.ing-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:16px}
.ing-kpi{background:var(--ing-surface);border:1px solid #EEF0F3;border-radius:var(--ing-radius);padding:16px 18px}
.ing-kpi span{display:block;font-size:13px;color:var(--ing-muted)}
.ing-kpi strong{display:block;margin-top:6px;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}

.ing-card{background:var(--ing-surface);border:1px solid #E6E5E2;border-radius:14px;overflow:hidden}
.ing-filtros{display:grid;grid-template-columns:minmax(220px,2fr) repeat(4,minmax(130px,1fr)) auto;gap:12px;align-items:end;padding:16px}
.ing-filtros label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:12px;font-weight:500;color:var(--ing-muted)}
.ing-filtros .ing-input{height:40px;padding:0 12px;border-radius:10px;font-size:14px}
.ing-filtros .ing-btn{height:40px;width:auto;padding:0 20px;border-radius:10px;font-size:14px}
@media (max-width:1200px){.ing-filtros{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}

.ing-tabla{overflow-x:auto}
/* la tarjeta ya pone el borde y la paginacion es propia; la grilla comun esta al final */
body.ing-shell .ing-trx table.datagrid{min-width:860px;border:0;border-radius:0;overflow:visible}
body.ing-shell .ing-trx table.datagrid thead{overflow:visible}
body.ing-shell .ing-trx table.datagrid tbody{overflow:visible;max-height:none !important}
body.ing-shell .ing-trx table.datagrid tfoot{display:none}

.ing-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.ing-badge--ok{background:#E6F4EC;color:#1C6B42}
.ing-badge--pendiente{background:#FDF3E1;color:#8A5300}
.ing-badge--anulada{background:#FBEDEE;color:#9E1F25}

.ing-trx table.datagrid tbody tr.ing-vacio{cursor:default}
.ing-trx table.datagrid tbody tr.ing-vacio td{width:100%;padding:48px 16px;text-align:center}
.ing-vacio strong{display:block;font-size:15px;font-weight:600}
.ing-vacio span{display:block;margin-top:4px;color:var(--ing-muted)}

.ing-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid #EEEDEA;font-size:13px;color:var(--ing-muted)}
.ing-paginas{display:flex;align-items:center;gap:8px}
.ing-paginas button{height:36px;min-width:36px;padding:0 12px;border:1px solid var(--ing-border);border-radius:8px;background:var(--ing-surface);color:var(--ing-text);font:500 13px var(--ing-font);cursor:pointer}
.ing-paginas button:disabled{color:#B5B6BA;cursor:default}

/* ---------- ENCABEZADO Y MENU LATERAL (colores del menu en sidebar.css) ---------- */
body.ing-shell .navbar-static-top{background:var(--ing-surface);border-color:#EEF0F3;min-height:64px}
body.ing-shell .navbar-header img{width:auto !important;height:48px !important;padding:0 !important;margin:8px 0 0 20px !important}
body.ing-shell .navbar-brand{height:auto;margin:16px 0 0 !important;padding:6px 12px;border-radius:8px;background:#F1F3F6;color:var(--ing-muted);font-size:13px;line-height:20px;font-weight:500}
body.ing-shell .navbar-top-links{margin-top:8px !important}
@media (min-width:768px){
  body.ing-shell .sidebar{width:240px;margin-top:64px !important;height:calc(100vh - 64px);overflow-y:auto}
  body.ing-shell #page-wrapper{margin-left:240px;margin-top:64px !important}
}
/* Los selects de contexto siguen en el menu (conservan su id y su onchange): solo se muestran
   como chips en el encabezado, para no mover elementos que usan las demas pantallas. */
@media (min-width:992px){
  body.ing-shell .ing-ctx{height:0;padding:0;border:0}
  body.ing-shell .ing-ctx select{position:fixed;top:16px;z-index:1031;width:170px;height:32px;padding:0 8px;border:0;border-radius:8px;background-color:#F1F3F6;box-shadow:none;color:var(--ing-text);font-size:13px;font-weight:500;cursor:pointer}
  body.ing-shell .ing-ctx::before{position:fixed;top:21px;z-index:1031;content:"\203A";color:var(--ing-subtle);font-size:16px;line-height:1}
  body.ing-shell .ing-ctx--cliente::before{display:none}
  body.ing-shell .ing-ctx--cliente select{left:252px}
  body.ing-shell .ing-ctx--sucursal::before{left:428px}
  body.ing-shell .ing-ctx--sucursal select{left:442px}
  body.ing-shell .ing-ctx--centro::before{left:618px}
  body.ing-shell .ing-ctx--centro select{left:632px}
  body.ing-shell #nameEmp{position:fixed;top:0;left:252px;max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  body.ing-shell.ing-shell-cliente #nameEmp,
  body.ing-shell.ing-shell-contexto #nameSuc,
  body.ing-shell.ing-shell-contexto #nameCent{display:none}
  body.ing-shell:not(.ing-shell-contexto) #nameSuc{position:fixed;top:0;left:442px}
  body.ing-shell:not(.ing-shell-contexto) #nameCent{position:fixed;top:0;left:632px}
}

/* ---------- GRILLAS (table.datagrid de GenericGrid.js y las armadas a mano) ---------- */
body.ing-shell table.datagrid{display:block;width:100%;border:1px solid #E6E5E2;border-radius:14px;border-collapse:separate;background:#FFFFFF;overflow-x:auto;overflow-y:hidden;font-family:var(--ing-font)}
/* thead y tbody reservan el mismo canal de scroll para que las columnas queden alineadas */
body.ing-shell table.datagrid thead,body.ing-shell table.datagrid tbody{display:block;width:100%;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#DCDBD8 transparent}
body.ing-shell table.datagrid thead::-webkit-scrollbar,body.ing-shell table.datagrid tbody::-webkit-scrollbar{width:8px;background:transparent}
body.ing-shell table.datagrid tbody::-webkit-scrollbar-thumb{border-radius:4px;background:#DCDBD8}
body.ing-shell table.datagrid thead{height:auto;background:#FAFAF9;border-bottom:1px solid #EEEDEA;scrollbar-color:transparent transparent}
/* todas las columnas en una fila: si los anchos suman mas de 100% se reparten.
   GenericGrid pone los th directo en el thead; las grillas a mano los dejan en un tr */
body.ing-shell table.datagrid thead{display:flex}
body.ing-shell table.datagrid thead tr,body.ing-shell table.datagrid tbody tr{display:flex;width:100%;float:none;border:0}
body.ing-shell table.datagrid tr:after{display:none}
body.ing-shell table.datagrid thead th,body.ing-shell table.datagrid tbody td{flex:1 1 auto;float:none;min-width:0;height:auto;margin:0;border:0}
body.ing-shell table.datagrid thead th{padding:12px 16px;background:transparent;filter:none;color:#6B6D74;font-family:var(--ing-font);font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ing-shell table.datagrid tbody{background:#FFFFFF;word-break:normal}
body.ing-shell table.datagrid tbody td{padding:13px 16px;border-top:1px solid #EEEDEA;color:#1C1D21;font-family:var(--ing-font);font-size:14px;line-height:1.4;overflow:hidden;overflow-wrap:anywhere}
body.ing-shell table.datagrid tbody tr:first-child td{border-top:0}
body.ing-shell table.datagrid tbody div{margin-left:0}
/* las grillas comunes crecen con su contenido; las de los modales conservan su alto */
body.ing-shell table.datagrid[id^="tableGrid_"] tbody{height:auto !important;max-height:max(260px,calc(100vh - 340px)) !important}
body.ing-shell table.datagrid[id^="tableGrid_"] thead th{text-align:left !important}
@media (max-width:991px){
  body.ing-shell table.datagrid[id^="tableGrid_"] thead,body.ing-shell table.datagrid[id^="tableGrid_"] tbody{min-width:760px}
}
body.ing-shell table.datagrid[id*="_modal_"] thead th,body.ing-shell table.datagrid[id*="_modal_"] tbody td{padding:8px 10px;font-size:13px}
/* las columnas "Ver" de los modales son angostas: el titulo no debe cortarse */
body.ing-shell table.datagrid[id*="_modal_"] thead th{padding:8px 2px;overflow:visible;text-overflow:clip}
body.ing-shell table.datagrid tbody tr.hoverTrGrid{background:#FAFAF9}
body.ing-shell table.datagrid tbody tr.activeSelect{background:#FBEDEE}
body.ing-shell table.datagrid thead th.ing-num,body.ing-shell table.datagrid tbody td.ing-num{text-align:right !important;font-variant-numeric:tabular-nums}
/* el numero de fila trae color:#FFFFFF en linea, pensado para el fondo azul */
body.ing-shell table.datagrid tbody td.indexNumber{background:#FAFAF9;color:#6B6D74 !important}
body.ing-shell table.datagrid .inputGrid{background-color:transparent}
/* GenericGrid marca la celda activa de las grillas editables con el atributo bgcolor */
body.ing-shell table.datagrid tbody td[bgcolor="#4FABFF"]{background:#FBEDEE}
body.ing-shell table.datagrid tbody td[bgcolor="#FAFAFA"]{background:transparent}
body.ing-shell table.datagrid tbody .btn-linkedin{border-color:#DCDBD8;background:#FFFFFF;color:#1C1D21}

/* Paginacion */
body.ing-shell table.datagrid tfoot{display:block;height:auto;background:#FFFFFF;border-top:1px solid #EEEDEA;color:#5A5C63;font-size:13px}
body.ing-shell table.datagrid tfoot tr,body.ing-shell table.datagrid tfoot td{display:block}
body.ing-shell table.datagrid tfoot td div{padding:0;background:#FFFFFF}
body.ing-shell table.datagrid #paging{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
body.ing-shell table.datagrid #paging li{float:none;margin:0 !important;padding:0}
body.ing-shell table.datagrid #paging select{width:72px;height:36px !important;padding:0 8px !important;border-color:#DCDBD8;border-radius:8px;box-shadow:none;color:#5A5C63;font-size:13px}
body.ing-shell table.datagrid .pagination{display:flex;gap:4px;margin:0}
body.ing-shell table.datagrid .pagination > li > a{display:block;float:none;min-width:36px;height:36px;margin:0;padding:0 8px;border:1px solid #DCDBD8;border-radius:8px;background:#FFFFFF;color:#5A5C63;font-size:13px;line-height:34px;text-align:center}
body.ing-shell table.datagrid .pagination > li > a:hover,body.ing-shell table.datagrid .pagination > li > a:focus{background:#F6F5F3;color:#1C1D21}
body.ing-shell table.datagrid .pagination > .active > a,body.ing-shell table.datagrid .pagination > .active > a:hover,body.ing-shell table.datagrid .pagination > .active > a:focus{border-color:#1C1D21;background:#1C1D21;color:#FFFFFF}
body.ing-shell table.datagrid .pagination > .disabled > a,body.ing-shell table.datagrid .pagination > .disabled > a:hover{background:#FFFFFF;color:#B5B6BA}

/* ---------- BARRA SUPERIOR DE LA GRILLA ---------- */
body.ing-shell .navtab{margin-bottom:16px;border-bottom:0}
/* Pestanas Lista / Datos / Config visual como control segmentado */
body.ing-shell .navtab > li[id^="tab_"]{margin:0;padding:4px 0;background:#F6F5F3}
body.ing-shell .navtab > li[id^="tab_"]:first-child{padding-left:4px;border-radius:10px 0 0 10px}
body.ing-shell .navtab > li[id^="tab_"]:not(:has(+ li[id^="tab_"])){padding-right:4px;border-radius:0 10px 10px 0}
body.ing-shell .navtab > li[id^="tab_"] > a{margin:0;padding:6px 14px;border:0;border-radius:8px;background:transparent;color:#6B6D74;font-family:var(--ing-font);font-size:14px;font-weight:500;line-height:20px}
body.ing-shell .navtab > li[id^="tab_"] > a:hover{background:transparent;color:#1C1D21}
body.ing-shell .navtab > li[id^="tab_"].active > a,body.ing-shell .navtab > li[id^="tab_"].active > a:hover,body.ing-shell .navtab > li[id^="tab_"].active > a:focus{border:0;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.08);color:#1C1D21;font-weight:600}
/* Botones de accion: sin azul; el icono trae color:#fff en linea */
body.ing-shell .navtab .btn-primary,body.ing-shell .navtab .btn-primary:hover,body.ing-shell .navtab .btn-primary:focus,body.ing-shell .navtab .btn-primary:active{height:40px !important;min-width:40px;border:1px solid #DCDBD8;border-radius:10px;background:#FFFFFF;box-shadow:none;color:#1C1D21;text-shadow:none}
body.ing-shell .navtab .btn-primary:hover{background:#F6F5F3}
body.ing-shell .navtab .btn-primary:focus-visible{outline:2px solid #A8191F;outline-offset:2px}
body.ing-shell .navtab .btn-primary a{color:#1C1D21 !important}
/* Buscador */
body.ing-shell #txt_search{height:40px;padding-left:38px;border:1px solid #DCDBD8;border-radius:10px;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6D74' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;box-shadow:none;color:#1C1D21;font-family:var(--ing-font);font-size:14px}
body.ing-shell #txt_search:focus{border-color:#A8191F;outline:none;box-shadow:0 0 0 3px rgba(168,25,31,.12)}
body.ing-shell .navtab > #li_txt_bus{margin-left:8px}

/* ---------- SELECTOR MULTIPLE CON BUSQUEDA Y CHIPS ---------- */
.ing-ms{position:relative;font-family:var(--ing-font)}
.ing-ms__control{display:flex;align-items:center;gap:8px;min-height:40px;padding:5px 12px 5px 8px;border:1px solid #DCDBD8;border-radius:10px;background:#FFFFFF;cursor:pointer}
.ing-ms__control:focus,.ing-ms--abierto .ing-ms__control{border-color:#A8191F;outline:none;box-shadow:0 0 0 3px rgba(168,25,31,.12)}
.has-error .ing-ms__control{border-color:#A8191F}
.ing-ms__chips{display:flex;flex:1;flex-wrap:wrap;gap:6px;min-width:0}
.ing-ms__placeholder{padding:3px 6px;color:#8A8C92;font-size:14px}
.ing-ms__chip{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:3px 4px 3px 9px;border:1px solid #DCDBD8;border-radius:8px;background:#F6F5F3;color:#1C1D21;font-size:13px;line-height:18px}
.ing-ms__chip i{color:#6B6D74;font-size:12px}
.ing-ms__chip span{overflow-wrap:anywhere}
.ing-ms__chip button{flex:none;width:20px;height:20px;padding:0;border:0;border-radius:6px;background:transparent;color:#6B6D74;font-size:16px;line-height:18px;cursor:pointer}
.ing-ms__chip button:hover{background:#FBEDEE;color:#A8191F}
.ing-ms__flecha{flex:none;color:#6B6D74;font-size:18px;transition:transform .15s}
.ing-ms--abierto .ing-ms__flecha{transform:rotate(180deg)}
.ing-ms__panel{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1000;padding:10px 0 0;border:1px solid #E6E5E2;border-radius:12px;background:#FFFFFF;box-shadow:0 8px 28px rgba(20,20,30,.16);overflow:hidden}
.ing-ms--abierto .ing-ms__panel{display:block}
.ing-ms--arriba .ing-ms__panel{top:auto;bottom:calc(100% + 6px)}
.ing-ms__buscar{display:block;width:calc(100% - 20px);height:36px;margin:0 10px 8px;padding:0 10px;border:1px solid #DCDBD8;border-radius:8px;background:#FFFFFF;color:#1C1D21;font-size:14px}
.ing-ms__buscar:focus{border-color:#A8191F;outline:none;box-shadow:0 0 0 3px rgba(168,25,31,.12)}
.ing-ms__lista{max-height:280px;overflow-y:auto}
.ing-ms__opcion{display:flex;align-items:center;gap:12px;margin:0;padding:8px 12px;color:#1C1D21;font-size:14px;font-weight:400;line-height:20px;cursor:pointer}
.ing-ms__opcion:hover{background:#F6F5F3}
.ing-ms__opcion input{flex:none;appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border:1.5px solid #B5B6BA;border-radius:4px;background:#FFFFFF center/12px no-repeat;cursor:pointer}
.ing-ms__opcion input:checked{border-color:#A8191F;background-color:#A8191F;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")}
.ing-ms__opcion input:focus-visible{outline:2px solid #A8191F;outline-offset:2px}
.ing-ms__opcion--activa,.ing-ms__opcion--activa:hover{background:#FBEDEE;color:#A8191F}
.ing-ms__vacio{display:none;padding:12px;color:#6B6D74;font-size:14px;text-align:center}
.ing-ms__ayuda{display:block;margin-top:5px;color:#6B6D74;font-size:12px}

/* ---------- INICIO: SIN PANTALLA ABIERTA ---------- */
.ing-inicio{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 110px);padding:24px 0;font-family:var(--ing-font);color:var(--ing-text)}
.ing-inicio__contenido{width:100%;max-width:880px}
.ing-inicio h1{margin:0;font-family:var(--ing-font);font-size:28px;font-weight:700;letter-spacing:-.4px;color:var(--ing-text)}
.ing-inicio p{margin:6px 0 24px;padding:0;font-size:15px;color:var(--ing-muted)}
.ing-inicio h2{margin:28px 0 12px;font-family:var(--ing-font);font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--ing-subtle)}
.ing-inicio__pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.ing-inicio__pasos li{display:flex;gap:12px;padding:16px;border:1px solid #E6E5E2;border-radius:14px;background:var(--ing-surface)}
.ing-inicio__numero{flex:none;width:26px;height:26px;border-radius:50%;background:#FBEDEE;color:var(--ing-accent);font-size:13px;font-weight:600;line-height:26px;text-align:center}
.ing-inicio__pasos strong{display:block;margin-bottom:4px;font-size:14px;font-weight:600}
.ing-inicio__pasos div span{display:block;font-size:13px;line-height:1.45;color:var(--ing-muted)}
.ing-inicio__accesos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ing-inicio__acceso{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #E6E5E2;border-radius:12px;background:var(--ing-surface);color:var(--ing-text);text-align:left;cursor:pointer}
.ing-inicio__acceso:hover{border-color:#DCDBD8;background:#F6F5F3}
.ing-inicio__acceso:focus-visible{outline:2px solid var(--ing-accent);outline-offset:2px}
.ing-inicio__acceso i{flex:none;width:18px;color:var(--ing-subtle);font-size:16px;text-align:center}
.ing-inicio__acceso strong{display:block;font-size:14px;font-weight:600}
.ing-inicio__acceso small{display:block;margin-top:1px;font-size:12px;color:var(--ing-muted)}
@media (max-width:900px){.ing-inicio__pasos{grid-template-columns:1fr}.ing-inicio{align-items:flex-start}}