/* ════════════════════════════════════════════════════════════════════════
   SOHRMS · RRHH, fixes de celular (crítica RRHH OlaCredit, punto 7, w494)
   ════════════════════════════════════════════════════════════════════════
   T1: a <=768px el header ".ph" global apila con flex-direction:column-
   reverse (css/main.css ~línea 1361 y el override con !important de
   ~línea 5627, decisión 2026-07-08 para que los CTA de otras pantallas no
   quedaran apretados). Esa reversa deja los botones de acción ARRIBA del
   título, que es justo lo que reporta la crítica en Asistencia del día.

   No se toca la regla global (la pisan decenas de pantallas que dependen
   de ese comportamiento). Acá se restaura el orden natural (título arriba,
   acciones abajo) SOLO para los headers marcados a propósito con
   [data-ph-orden="titulo-primero"]. La especificidad suma un atributo
   sobre ".shell-main .ph" (0,3,0 > 0,2,0) y empata el !important, así que
   gana sin importar el orden de carga de los dos archivos. */
@media (max-width:768px){
  .shell-main .ph[data-ph-orden="titulo-primero"]{
    flex-direction:column !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Resumen ejecutivo (crítica RRHH OlaCredit, punto 5, w495)
   ════════════════════════════════════════════════════════════════════════
   Menú secundario "⋮ Más acciones" del Resumen ejecutivo: saca "Exportar
   datos personales" del mismo nivel visual que "Actualizar datos", porque
   es la acción más sensible de la pantalla (expone PII y queda logueada). */
.rep-menu-pop{
  position:absolute;top:calc(100% + 6px);right:0;min-width:210px;
  background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rsm);
  box-shadow:var(--sh-md);padding:6px;z-index:50;
}
.rep-menu-item{
  display:block;width:100%;text-align:left;padding:8px 10px;
  border:none;background:none;color:var(--tx);font-size:12.5px;
  font-family:inherit;border-radius:6px;cursor:pointer;
}
.rep-menu-item:hover{background:var(--sur2)}

/* ════════════════════════════════════════════════════════════════════════
   Planilla (crítica RRHH OlaCredit, punto 6, w495)
   ════════════════════════════════════════════════════════════════════════
   T6 original: "en celular la tabla se corta (Deducciones a la mitad, ISR y
   Neto fuera de pantalla) y no hay vista de tarjetas". El HTML sigue siendo
   una <table> (data-label en cada <td>, puesto en js/sohrms.js); acá se la
   reflowea a tarjeta por persona sin tocar el .vt genérico, que usan otras
   10 pantallas con paginación (handoff/PATRON_PAGINACION.md). */
@media (max-width:768px){
  .pla-recibos .vt-wrap{overflow-x:visible}
  .pla-recibos table,
  .pla-recibos tbody,
  .pla-recibos tr,
  .pla-recibos td{display:block;width:100%}
  .pla-recibos thead{display:none}
  .pla-recibos tbody tr{
    border:1px solid var(--bdr);border-radius:var(--rsm);
    padding:12px 14px;margin-bottom:10px;background:var(--sur);
  }
  .pla-recibos tbody tr:nth-child(even){background:var(--sur)}
  .pla-recibos td{
    padding:5px 0;border:none;text-align:right;
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  }
  .pla-recibos td[data-label]::before{
    content:attr(data-label);font-size:10.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.3px;color:var(--tx3);
    text-align:left;flex:0 0 auto;
  }
  .pla-recibos td.td-strong{
    display:block;text-align:left;font-size:14.5px;
    padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--bdr);
  }
  .pla-recibos td.td-center{
    justify-content:flex-end;padding-top:8px;margin-top:4px;border-top:1px solid var(--bdr);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Saldos de ausencia, RRHH (v45t/576, #sohrms/saldos)
   ════════════════════════════════════════════════════════════════════════
   Mismo patrón que .pla-recibos: una sola <table> con data-label en cada
   <td>, reflowed a tarjeta por fila en celular sin tocar el .vt genérico. */
@media (max-width:768px){
  .sld-tabla .vt-wrap{overflow-x:visible}
  .sld-tabla table,
  .sld-tabla tbody,
  .sld-tabla tr,
  .sld-tabla td{display:block;width:100%}
  .sld-tabla thead{display:none}
  .sld-tabla tbody tr{
    border:1px solid var(--bdr);border-radius:var(--rsm);
    padding:12px 14px;margin-bottom:10px;background:var(--sur);
  }
  .sld-tabla td{
    padding:5px 0;border:none;text-align:right;
    display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  }
  .sld-tabla td[data-label]::before{
    content:attr(data-label);font-size:10.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.3px;color:var(--tx3);
    text-align:left;flex:0 0 auto;
  }
  .sld-tabla td[data-label="Persona"]{
    display:block;text-align:left;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--bdr);
  }
  .sld-tabla td[data-label="Persona"]::before{display:none}
  .sld-tabla td[data-label="Último ajuste"]{text-align:left}
  .sld-tabla td[data-label="Último ajuste"] > div{width:100%;text-align:left}
  .sld-tabla td[data-label=""]{
    justify-content:flex-start;flex-wrap:wrap;gap:6px;
    padding-top:8px;margin-top:4px;border-top:1px solid var(--bdr);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Mis pagos, pantalla del colaborador (w.516, captura de un empleado real
   de OlaCredit: a 390px el neto se cortaba ("91,261.6"), el orden era por
   id (Julio, Junio, Agosto) y la fecha salía ISO partida en tres renglones)
   ════════════════════════════════════════════════════════════════════════
   Reemplaza la tabla de 5 columnas por una tarjeta "Último pago" + historial
   en tarjetas. Mobile-first: una columna angosta siempre; en escritorio el
   historial pasa a grilla, sin que exista ancho con scroll horizontal. */
.mp-cuenta{margin-bottom:14px;padding:12px 16px}
.mp-cuenta-lbl{font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--tx3)}
.mp-cuenta-val{font-size:13px;margin-top:3px}

.mp-hero{margin-bottom:12px;padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.mp-hero-lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mp-hero-lbl{font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--tx3)}
.mp-hero-neto{font-family:'Inter',sans-serif;font-weight:800;
  font-size:clamp(26px,7vw,36px);color:var(--tx);line-height:1.1;
  font-variant-numeric:tabular-nums}
.mp-hero-meta{font-size:12.5px;color:var(--tx2)}
.mp-hero-btn{align-self:flex-start;margin-top:8px}

.mp-resumen{font-size:12px;color:var(--tx2);margin:0 2px 16px}
.mp-resumen strong{color:var(--tx);font-variant-numeric:tabular-nums}

.mp-hist{display:grid;grid-template-columns:1fr;gap:10px}
.mp-hist-item{background:var(--sur);border:1px solid var(--bdr);
  border-radius:var(--r);padding:12px 14px;cursor:pointer;transition:border-color .12s}
.mp-hist-item:hover{border-color:var(--bdr2)}
.mp-hist-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mp-hist-nombre{font-size:13px;font-weight:700;color:var(--tx)}
.mp-hist-fecha{font-size:11px;color:var(--tx3);margin-top:2px}
.mp-hist-neto{font-size:14.5px;font-weight:700;color:var(--tx);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-hist-sub{font-size:11px;color:var(--tx3);margin-top:6px}

@media (min-width:900px){
  .mp-hist{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

/* ════════════════════════════════════════════════════════════════════════
   Mi inicio, panel de autoservicio del colaborador (w.516, #sohrms/mi-inicio)
   ════════════════════════════════════════════════════════════════════════
   Una columna a 390px, grilla de 2-3 en escritorio. Cada bloque es
   independiente (si una tarjeta no carga, se oculta sin romper el resto). */
.mi-hola{font-size:19px;font-weight:800;color:var(--tx);margin-bottom:2px}
.mi-fecha{font-size:13px;font-weight:500;color:var(--tx3)}

.mi-pend{margin:14px 0;padding:14px 16px}
.mi-pend-ok{color:var(--ok);font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px}
.mi-pend-item{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--bdr);font-size:13px}
.mi-pend-item:last-child{border-bottom:none}
.mi-pend-item a{color:var(--ac);font-weight:600;white-space:nowrap}
.mi-pend-n{background:var(--er-bg);color:var(--er);font-weight:700;font-size:11px;
  padding:2px 8px;border-radius:999px}

.mi-accesos{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}
.shell .mi-acceso-btn,.mi-acceso-btn{display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
  font-size:13.5px;font-weight:700;color:var(--tx);cursor:pointer;text-align:left;
  min-height:44px}
.shell .mi-acceso-btn:hover,.mi-acceso-btn:hover{border-color:var(--bdr2);background:var(--hov)}
.mi-acceso-btn svg{flex-shrink:0;color:var(--ac)}

.mi-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0}
.mi-card{padding:16px}
.mi-card-lbl{font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.mi-card-lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.mi-card-lbl-row .mi-card-lbl{margin-bottom:0}
.mi-card-empty{font-size:12.5px;color:var(--tx3)}

/* Ojo de montos ocultos (w.517): botón icono, mínimo 44px de toque.
   Prefijo .shell obligatorio, vence ".shell button{padding:0;border:0;
   background:transparent}" (0,0,1,1) de css/main.css. */
.shell .monto-eye-btn,.monto-eye-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-width:44px;flex-shrink:0;
  border:1px solid var(--bdr);border-radius:var(--rsm);
  background:var(--sur);color:var(--tx3);cursor:pointer}
.shell .monto-eye-btn:hover,.monto-eye-btn:hover{border-color:var(--bdr2);color:var(--tx)}
.shell .monto-eye-btn:focus-visible,.monto-eye-btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

.mi-tiempo-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--bdr)}
.mi-tiempo-row:last-child{border-bottom:none}
.mi-tiempo-val{font-weight:700;font-variant-numeric:tabular-nums;color:var(--tx)}

.mi-pago-neto{font-family:'Inter',sans-serif;font-weight:800;font-size:26px;
  color:var(--tx);font-variant-numeric:tabular-nums;line-height:1.1}
.mi-pago-meta{font-size:12px;color:var(--tx2);margin:4px 0 10px}

.mi-sol-item{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--bdr);font-size:12.5px}
.mi-sol-item:last-child{border-bottom:none}
.mi-sol-badge{font-size:10px;font-weight:700;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;letter-spacing:.03em;white-space:nowrap}

.mi-novedad{padding:8px 0;border-bottom:1px solid var(--bdr);font-size:12.5px}
.mi-novedad:last-child{border-bottom:none}
.mi-novedad-tit{font-weight:700;color:var(--tx)}
.mi-novedad-sub{color:var(--tx3);font-size:11px;margin-top:2px}

/* Tu trabajo de hoy (w.517): entrada de campo, antes de "Lo que tenés
   pendiente". El CTA primario es el único de toda Mi inicio con fondo
   sólido, a propósito: es la acción que la gente de campo abre primero. */
.mi-trabajo{margin:14px 0;padding:16px}
.mi-trabajo-item{margin-bottom:14px}
.mi-trabajo-item:last-child{margin-bottom:0}

.shell .mi-trabajo-btn-pri,.mi-trabajo-btn-pri{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;padding:14px 16px;
  background:var(--ac);color:#fff;border:none;border-radius:var(--r);
  font-size:15px;font-weight:800;cursor:pointer}
.shell .mi-trabajo-btn-pri:hover,.mi-trabajo-btn-pri:hover{filter:brightness(0.95)}
.mi-trabajo-sub{font-size:12px;color:var(--tx3);margin-top:6px;text-align:center}

.mi-trabajo-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  min-height:44px}
.mi-trabajo-row-txt{font-size:13px;color:var(--tx)}
.mi-trabajo-row a{color:var(--ac);font-weight:600;font-size:12.5px;white-space:nowrap}
.mi-trabajo-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* w.523 · Fila táctil uniforme (ícono + título + subtítulo opcional +
   flecha), ancho completo, mínimo 48px, separadas por línea fina. Un solo
   patrón para jornada/censo/equipo/gerencia dentro de "Tu trabajo de hoy":
   reemplaza el stack de botones .bsm de distinto ancho que reportó Darío
   sobre Mi inicio de Inversiones AD (captura real, cliente piloto).
   Prefijo .shell obligatorio: vence `.shell button{padding:0;border:0;
   background:transparent}` (0,0,1,1) de css/main.css. */
.shell .mi-fila,.mi-fila{display:flex;align-items:center;gap:12px;width:100%;
  min-height:48px;padding:10px 2px;border:0;border-bottom:1px solid var(--bdr);
  background:transparent;cursor:pointer;text-align:left;font-family:inherit}
.shell .mi-fila:hover,.mi-fila:hover{background:var(--hov)}
.shell .mi-fila:focus-visible,.mi-fila:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.mi-fila-ic{flex-shrink:0;font-size:18px;width:24px;text-align:center}
.mi-fila-txt{flex:1;min-width:0}
.mi-fila-tit{font-size:13.5px;font-weight:700;color:var(--tx)}
.mi-fila-sub{font-size:11.5px;color:var(--tx3);margin-top:1px}
.mi-fila-flecha{flex-shrink:0;font-size:12px;font-weight:600;color:var(--ac);white-space:nowrap}

/* Micro-etiqueta de grupo temático (Equipo/Gerencia) dentro de la misma
   tarjeta "Tu trabajo de hoy", para separar visualmente sin abrir otra
   tarjeta. Jornada/censo no lleva etiqueta: es el grupo líder, ya cubierto
   por el título de la tarjeta. */
.mi-trabajo-grupo-lbl{font-size:10px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--tx3);margin:14px 0 4px;padding:0 2px}
.mi-trabajo-info{font-size:11.5px;color:var(--tx3);padding:6px 2px 2px}

@media (min-width:640px){
  .mi-accesos{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
@media (min-width:900px){
  .mi-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1200px){
  .mi-grid{grid-template-columns:repeat(3,1fr)}
}