/* ═══════════════════════════════════════════════════════════════════════════
   INICIO (Client/Pages/Index.razor) — prefijos .ini- (la agenda) e .ip-/.hoy-
   (los bloques que ya tenía la portada: pulso, accesos, identidad).

   Antes estas reglas iban en un <style> dentro de la página. Viven aquí por la
   regla de la casa: si una regla lleva el nombre de un dato del negocio va en la
   hoja del módulo; la cabecera, la tira y los banners siguen siendo pan-* de
   pantalla.css. Esta hoja se carga después de pantalla.css (ver index.html).

   La paleta es la institucional —tinta navy, papel blanco, acentos por dominio—
   y del brief «quiet luxury» se toma lo que aguanta el sol en un teléfono: aire,
   jerarquía tipográfica, sombras largas y suaves, transiciones discretas.
   ═══════════════════════════════════════════════════════════════════════════ */

.ip {
    --ink: #0C2740;
    --muted: #5b7186;
    --line: #e3e9f0;
    --azul: #185FA5;
    --verde: #2e7d32;
    --ambar: #e0a128;
    --rojo: #c62828;
    --morado: #6a1b9a;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--ink);
}

/* ── Filtros: la búsqueda y, a quien lleva varios frentes, el frente ── */
.ini-filtros { grid-template-columns: minmax(260px, 1fr); }
/* La columna del frente puede encogerse (mínimo 0): con seis frentes (ROOT) la
   barra mide más que media tableta, y un «max-content» fijo empujaba la página
   hacia la derecha. Si no cabe, la barra se desliza dentro de su celda. */
.ini-filtros-frente { grid-template-columns: minmax(240px, 1fr) minmax(0, max-content); }
.ini-filtros-accesos { grid-template-columns: max-content auto; }
.ini-filtro-buscar { min-width: 0; }
.ini-filtro-frente { min-width: 0; }
.ini-filtro-frente .rz-selectbutton {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
.ini-filtro-frente .rz-selectbutton .rz-button { flex: 0 0 auto; }

.ini-perfil { margin-left: 6px; color: var(--pan-azul); font-weight: 600; }

/* ── La tira: cuatro indicadores; los tres de las bandejas llevan a su sección ── */
.hoy-tira { grid-template-columns: repeat(4, minmax(180px, 1fr)); }

.ini-tira-boton {
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    width: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}
.ini-tira-boton:hover { box-shadow: 0 8px 22px -12px rgba(12, 39, 64, .45); transform: translateY(-1px); }
.ini-tira-boton:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }

/* Banner rojo propio: .pan-error está reservado a los fallos del sistema y esto
   no es un fallo, es algo que detiene el trabajo. Misma geometría que los pan-*. */
.hoy-alerta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 6px 12px;
    border-radius: 8px; border: 1px solid rgba(211,47,20,.28); background: rgba(211,47,20,.06);
    color: var(--pan-rojo); font-size: 12.5px; }
.hoy-alerta > span { flex: 1 1 auto; min-width: 0; }
/* El botón no se encoge: a 360 px lo apretaba a 32 px y su rótulo se salía de la pantalla. */
.hoy-alerta > .rz-button { flex: 0 0 auto; }

/* ═══════════ Las tres bandejas ═══════════ */

.ini-bandeja { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ini-bandeja-cab { display: flex; flex-direction: column; gap: 2px; }
.ini-bandeja-titulo {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 15.5px; font-weight: 700; letter-spacing: .01em; color: var(--pan-tinta);
}
.ini-bandeja-titulo:focus { outline: none; }
.ini-bandeja-titulo:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 4px; border-radius: 6px; }
.ini-bandeja-titulo > .material-symbols-outlined { font-size: 20px; color: var(--pan-azul); }
.ini-bandeja-espera .ini-bandeja-titulo > .material-symbols-outlined { color: var(--pan-verde); }
.ini-bandeja-sub { margin: 0; font-size: 12px; line-height: 1.45; color: var(--pan-apagado); max-width: 78ch; }

.ini-bandeja-cuenta {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
    padding: 0 7px; border-radius: 999px; font-family: var(--pan-mono); font-size: 11.5px; font-weight: 600;
    background: rgba(24, 95, 165, .10); color: var(--pan-azul);
}
.ini-bandeja-historico .ini-bandeja-cuenta { background: rgba(91, 113, 134, .12); color: var(--pan-apagado); }

/* La revisión histórica se pliega: el título es un botón del tamaño del título. */
.ini-plegable {
    display: inline-flex; align-items: center; gap: 8px; padding: 2px 6px 2px 0; margin: 0;
    font: inherit; color: inherit; background: none; border: 0; cursor: pointer; border-radius: 8px;
    min-height: 40px;
}
.ini-plegable .material-symbols-outlined { font-size: 22px; color: var(--pan-tenue); }
.ini-plegable:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }

.ini-subgrupo {
    display: flex; align-items: center; gap: 6px; margin: 6px 0 0;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--pan-apagado);
}
.ini-subgrupo .material-symbols-outlined { font-size: 16px; color: var(--pan-verde); }
.ini-subgrupo::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--pan-linea); margin-left: 4px; }

.ini-quieto { margin: 0; padding: 10px 2px; font-size: 12.5px; color: var(--pan-apagado); }

.ini-mas {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px;
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--pan-linea); background: var(--pan-papel);
    font: inherit; font-size: 12px; font-weight: 600; color: var(--pan-azul); cursor: pointer; text-decoration: none;
}
.ini-mas:hover { border-color: rgba(24, 95, 165, .35); }
.ini-mas:focus-visible { outline: 2px solid var(--pan-azul); outline-offset: 2px; }

/* ═══════════ La tarjeta de la agenda ═══════════
   Qué (título), qué falta, responsable, fecha y el acceso directo. Una sola
   columna de lectura; el color es sólo el filete del canto, la pastilla del icono
   y la del momento: la tarjeta entera teñida deja de leerse. */

.ini-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
    gap: 12px;
}

.ini-tarjeta {
    --ini-acento: var(--pan-azul);
    position: relative;
    display: flex; flex-direction: column; gap: 9px; min-width: 0;
    padding: 13px 14px 12px 16px;
    background: var(--pan-papel);
    border: 1px solid var(--pan-linea);
    border-radius: 14px;
    box-shadow: var(--pan-sombra-tarjeta);
    transition: box-shadow .18s ease, transform .18s ease;
    animation: ini-entrar .28s ease-out both;
}
.ini-tarjeta::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--ini-acento);
}
.ini-tarjeta:hover { box-shadow: 0 10px 26px -14px rgba(12, 39, 64, .42); transform: translateY(-1px); }

.ini-rojo { --ini-acento: var(--pan-rojo); }
.ini-ambar { --ini-acento: var(--pan-ambar); }
.ini-azul { --ini-acento: var(--pan-azul); }
.ini-verde { --ini-acento: var(--pan-verde); }
.ini-gris { --ini-acento: #9aabbb; }
.ini-urgente { background: linear-gradient(0deg, rgba(211, 47, 20, .035), rgba(211, 47, 20, .035)), var(--pan-papel); }
.ini-gris { box-shadow: none; }

.ini-tarjeta-cab { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }

.ini-icono {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
    background: rgba(24, 95, 165, .09);
    background: color-mix(in srgb, var(--ini-acento) 12%, transparent);
    color: var(--ini-acento);
}

.ini-tarjeta-txt { flex: 1 1 auto; min-width: 0; }

.ini-titulo {
    margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--pan-tinta);
    overflow-wrap: anywhere;
}
.ini-cantidad {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    margin-left: 4px; padding: 0 6px; border-radius: 999px; vertical-align: 1px;
    font-family: var(--pan-mono); font-size: 11px; font-weight: 600;
    background: color-mix(in srgb, var(--ini-acento) 14%, transparent); color: var(--ini-acento);
}
.ini-falta { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: #34495d; overflow-wrap: anywhere; }

.ini-momento {
    flex: 0 0 auto; align-self: flex-start; padding: 3px 8px; border-radius: 999px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
    background: color-mix(in srgb, var(--ini-acento) 11%, transparent); color: var(--ini-acento);
}

/* Responsable y fecha: rótulo pequeño encima del dato, como en los documentos. */
.ini-datos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding-left: 47px; }
.ini-dato { display: flex; flex-direction: column; min-width: 0; }
.ini-dato dt {
    font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pan-tenue);
}
.ini-dato dd { margin: 1px 0 0; font-size: 12px; color: var(--pan-tinta); overflow-wrap: anywhere; }
.ini-dato-usted dd { font-weight: 700; color: var(--pan-azul); }

.ini-detalle { margin: 0; padding-left: 47px; font-size: 11.5px; line-height: 1.4; color: var(--pan-apagado); overflow-wrap: anywhere; }

/* Los registros de una tarjeta agrupada, cada uno con su enlace. */
.ini-items { list-style: none; margin: 0; padding: 0 0 0 47px; display: flex; flex-direction: column; gap: 3px; }
.ini-items li { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 12px; }
.ini-items a {
    flex: 1 1 auto; min-width: 0; color: var(--pan-azul); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0;
}
.ini-items a:hover { text-decoration: underline; }
.ini-item-fecha { flex: 0 0 auto; font-family: var(--pan-mono); font-size: 10.5px; color: var(--pan-tenue); }
.ini-items-mas { color: var(--pan-apagado); font-size: 11.5px; }

/* El acceso directo: un enlace de verdad, con el verbo. */
.ini-accion {
    align-self: flex-end; display: inline-flex; align-items: center; gap: 3px; min-height: 34px;
    padding: 6px 10px 6px 12px; border-radius: 999px; text-decoration: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; color: var(--ini-acento);
    background: color-mix(in srgb, var(--ini-acento) 8%, transparent);
    transition: background .15s ease, box-shadow .15s ease;
}
.ini-accion .material-symbols-outlined { font-size: 17px; }
.ini-accion:hover { background: color-mix(in srgb, var(--ini-acento) 15%, transparent); }
.ini-accion:focus-visible { outline: 2px solid var(--ini-acento); outline-offset: 2px; }

@keyframes ini-entrar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ini-tarjeta { animation: none; transition: none; }
    .ini-tarjeta:hover, .ini-tira-boton:hover { transform: none; }
}

/* ── Avisos sin leer ── */
.hoy-avisos { display: flex; flex-direction: column; gap: 6px; }
.hoy-aviso { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
    font-family: inherit; cursor: pointer; padding: 8px 12px;
    background: var(--pan-papel); border: 1px solid var(--pan-linea);
    border-left: 3px solid var(--pan-azul); border-radius: 10px; }
.hoy-aviso:hover { background: rgba(24,95,165,.04); }
.hoy-aviso .material-symbols-outlined { font-size: 18px; color: var(--pan-azul); flex: none; margin-top: 1px; }
.hoy-aviso-txt { flex: 1 1 auto; min-width: 0; }
.hoy-aviso .t { display: block; font-size: 12.5px; font-weight: 700; color: var(--pan-tinta); }
.hoy-aviso .m { display: block; font-size: 11.5px; line-height: 1.35; color: var(--pan-apagado); overflow-wrap: anywhere; }
.hoy-aviso .f { flex: none; font-size: 10.5px; color: var(--pan-tenue); white-space: nowrap; }

/* ── Encabezado de sección (pulso, accesos, identidad) ── */
.ip-seccion { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; font-weight: 600; color: var(--muted); margin: 18px 0 0; }
.ip-seccion::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--line); }

/* ── Pulso operativo ── */
.ip-pulso { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; }
.ip-pulso-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
    cursor: pointer; text-align: left; width: 100%; font-family: inherit;
    transition: box-shadow .15s, transform .15s; }
.ip-pulso-card:hover { box-shadow: 0 6px 18px rgba(12,39,64,.10); transform: translateY(-1px); }
.ip-pulso-card:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ip-pulso-card .e { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ip-pulso-card .v { font-family: 'IBM Plex Mono', monospace; font-size: 21px; font-weight: 600; margin-top: 3px; line-height: 1.1; }
.ip-pulso-card .v.txt { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; padding-top: 5px; }
.ip-pulso-card .n { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ip-pulso-card.alerta { border-color: rgba(224,161,40,.45); background: #fffdf7; }
.ip-pulso-card.alerta .v { color: var(--ambar); }
.ip-pulso-card.bien .v { color: var(--verde); }
.ip-cargando { height: 21px; width: 70%; border-radius: 4px; margin-top: 3px;
    background: linear-gradient(90deg, #eef2f6 25%, #f7fafc 50%, #eef2f6 75%); background-size: 200% 100%;
    animation: ip-brillo 1.2s ease-in-out infinite; }
@keyframes ip-brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Accesos ── */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(235px, 100%), 1fr)); gap: 12px; }
.ip-acceso { position: relative; display: flex; align-items: stretch;
    background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--azul);
    border-radius: 12px; overflow: hidden;
    transition: box-shadow .15s, transform .15s; }
.ip-acceso:hover { box-shadow: 0 6px 18px rgba(12,39,64,.10); transform: translateY(-1px); }
.ip-acceso-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 12px;
    text-align: left; background: none; border: none; padding: 14px 4px 14px 14px;
    cursor: pointer; font-family: inherit; }
.ip-acceso-main:focus-visible { outline: 2px solid var(--azul); outline-offset: -3px; }
.ip-acceso .material-symbols-outlined { font-size: 26px; color: var(--azul); line-height: 1; flex: none; }
.ip-acceso-txt { min-width: 0; }
.ip-acceso .t { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ip-acceso .s { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.ip-fav { flex: none; background: none; border: none; cursor: pointer; padding: 8px 10px 0 6px; min-width: 40px;
    color: #cdd7e1; display: flex; align-items: flex-start; justify-content: center; }
.ip-fav:hover { color: var(--ambar); }
.ip-fav:focus-visible { outline: 2px solid var(--azul); outline-offset: -3px; }
.ip-fav.on { color: var(--ambar); }
.ip-fav .material-symbols-outlined { font-size: 19px; color: inherit; }
.ip-fav.on .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.ip-acceso.verde { border-left-color: var(--verde); } .ip-acceso.verde .ip-acceso-main .material-symbols-outlined { color: var(--verde); }
.ip-acceso.ambar { border-left-color: var(--ambar); } .ip-acceso.ambar .ip-acceso-main .material-symbols-outlined { color: var(--ambar); }
.ip-acceso.rojo  { border-left-color: var(--rojo); }  .ip-acceso.rojo  .ip-acceso-main .material-symbols-outlined { color: var(--rojo); }
.ip-acceso.navy  { border-left-color: var(--ink); }   .ip-acceso.navy  .ip-acceso-main .material-symbols-outlined { color: var(--ink); }
.ip-acceso.morado { border-left-color: var(--morado); } .ip-acceso.morado .ip-acceso-main .material-symbols-outlined { color: var(--morado); }

.ip-vacio { font-size: 12.5px; color: var(--muted); padding: 14px 2px; }

/* ── Identidad: la onda del fondo evoca el recurso hídrico (SVG embebido) ── */
.ip-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    background: linear-gradient(135deg, #0C2740 0%, #123b5e 55%, #17527f 100%);
    border-radius: 14px; padding: 22px 26px; margin-top: 22px; color: #fff;
    box-shadow: 0 8px 24px rgba(12,39,64,.14); }
.ip-hero::after { content: ""; position: absolute; inset: auto 0 -2px 0; height: 90px; opacity: .18;
    background-repeat: no-repeat; background-size: cover; background-position: bottom;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,60 C150,110 350,0 600,45 C850,90 1050,20 1200,60 L1200,120 L0,120 Z' fill='%239fd0f2'/><path d='M0,85 C200,120 400,45 650,80 C900,115 1050,60 1200,90 L1200,120 L0,120 Z' fill='%23ffffff' opacity='0.5'/></svg>"); }
.ip-hero > * { position: relative; z-index: 1; }
.ip-hero img { height: 78px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.ip-hero-txt { flex: 1 1 340px; min-width: 0; }
.ip-hero-lema { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
    color: #8fd6b4; margin-bottom: 4px; }
.ip-hero-emp { font-size: 24px; font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.ip-hero-planta { font-size: 15px; font-weight: 600; color: #9fd0f2; margin-top: 2px; }
.ip-hero-desc { font-size: 13px; color: #cfe1f0; margin-top: 8px; line-height: 1.5; max-width: 62ch; }
.ip-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ip-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
    padding: 3px 10px; border-radius: 999px; color: #eaf3fa; }
.ip-tag .material-symbols-outlined { font-size: 13px; }

.ip-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.ip-kpi { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--verde);
    border-radius: 10px; padding: 12px 14px; }
.ip-kpi .material-symbols-outlined { font-size: 19px; color: var(--verde); }
.ip-kpi .v { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.1; margin-top: 2px; }
.ip-kpi .d { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

.ip-mvv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.ip-mvv-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ip-mvv-card .t { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--azul); }
.ip-mvv-card .c { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 6px; }
.ip-valores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ip-valor { font-size: 11px; font-weight: 600; color: var(--verde); background: rgba(46,125,50,.08);
    border: 1px solid rgba(46,125,50,.20); border-radius: 999px; padding: 3px 10px; }

.ip-alianzas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ip-alianza { font-size: 11px; font-weight: 600; color: var(--muted); background: #f4f7fa;
    border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }

.ip-foot { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 8px; font-size: 11px;
    color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.ip-foot a { color: var(--azul); text-decoration: none; }

/* ═══════════ Anchos ═══════════
   Ojo con el orden (ver Formato-pantallas-listado): esta hoja se carga DESPUÉS de
   pantalla.css, así que en los cortes estrechos se repite aquí lo que se quiere,
   o ganaría la regla de un corte más ancho. */

@media (max-width: 1100px) {
    .hoy-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    /* En el teléfono la tira va en UNA fila de cuatro, la cifra arriba y el rótulo
       debajo: en 2×2 (o apilada) empujaba la primera tarjeta —que es a lo que se
       entra— bajo el doblez; lo midió la validación a 360 px. */
    .hoy-tira { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 0; }
    .hoy-tira .pan-tira-dato { padding: 7px 6px 7px 10px; row-gap: 3px; align-content: start; }
    .hoy-tira .pan-tira-icono, .hoy-tira .pan-tira-pie { display: none; }
    .hoy-tira .pan-tira-monto { grid-row: 1; }
    .hoy-tira .pan-tira-rotulo {
        grid-row: 2; font-size: 8.5px; letter-spacing: .06em; line-height: 1.2;
        white-space: normal; overflow-wrap: anywhere;
    }
    /* Se busca con BUSCAR de la barra inferior: la hoja a pantalla completa, hecha
       para el teclado del teléfono. El campo en línea repetía lo mismo encima de la
       agenda. Queda el filtro de frente, si lo hay. */
    .ini-filtro-buscar { display: none; }
    .ini-filtros:not(.ini-filtros-frente) { display: none; }
    .ini-filtros, .ini-filtros-frente { grid-template-columns: minmax(0, 1fr); }
    .ini-filtros-accesos { grid-template-columns: minmax(0, 1fr) auto; }
    .ini-bandeja { margin-top: 14px; }
    .ini-tarjeta { padding: 12px 12px 11px 14px; }
    /* En la columna estrecha, los datos se alinean con el texto y no con el icono. */
    .ini-datos, .ini-detalle, .ini-items { padding-left: 0; }
    .ini-accion { min-height: 44px; padding: 8px 14px; }
    .ip-hero { padding: 18px 16px; gap: 14px; }
    .ip-hero img { height: 56px; }
    .ip-hero-emp { font-size: 20px; }
}

@media (max-width: 420px) {
    .pan-cabecera-sub .ini-perfil { display: block; margin-left: 0; }
    .ini-momento { font-size: 9px; padding: 2px 7px; }
}

/* Pantallas táctiles, de cualquier ancho (una tableta de 768 px o más también se
   usa con el dedo): cada objetivo mide 44 px de alto. El aspecto no cambia; crece
   la zona que responde al toque. */
@media (pointer: coarse) {
    .ini-accion { min-height: 44px; padding: 8px 14px; }
    .ini-plegable, .ini-mas { min-height: 44px; }
    .ini-items { gap: 0; }
    .ini-items li { align-items: center; }
    /* Una línea de 44 px (no flex): así conserva los puntos suspensivos. */
    .ini-items a { display: block; line-height: 44px; padding: 0; }
    .hoy-alerta > .rz-button { min-height: 40px; padding-inline: 12px; }
}

@media print {
    .ini-tarjeta { animation: none; box-shadow: none; break-inside: avoid; }
    .ini-accion { display: none; }
}