/* Área de clientes (demostración). Estilo de banca online: textos pequeños, densidad alta. */
body.portal { background: #F3F5F9; font-size: 13px; }
.p-cab { background: #fff; border-bottom: 1px solid #E1E6EE; }
.p-cab__in { padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.p-cab__izq, .p-cab__der { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.p-cab__der { font-size: 12px; color: var(--texto-3); }
.p-cab select { min-height: 34px; padding: 0 10px; border: 1px solid var(--borde-2); border-radius: 6px; font: 600 13px var(--cuerpo); color: var(--marino); background: #fff; max-width: 100%; }
.p-campana { position: relative; width: 36px; height: 36px; border: 1px solid #E1E6EE; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--marino); }
.p-campana span { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 99px; background: #C2410C; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.p-usuario { display: flex; align-items: center; gap: 8px; }
.p-avatar { width: 32px; height: 32px; border-radius: 99px; background: var(--azul); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.p-cuerpo { display: flex; flex-wrap: wrap; min-height: calc(100vh - 90px); }
.p-menu { flex: 1 1 210px; max-width: 240px; background: var(--marino); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.p-menu a { min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 8px; color: #C3D0E8; text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .p-menu a:hover { background: #13306B; color: #fff; } }
.p-menu a[aria-current="page"] { background: #fff; color: var(--marino); font-weight: 700; }
.p-menu a .n { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 99px; background: #C2410C; color: #fff; font-size: 10px; font-weight: 700; text-align: center; }
.p-gestores { margin-top: 18px; padding: 12px; border-radius: 10px; background: #13306B; color: #C3D0E8; display: grid; gap: 8px; font-size: 12px; }
.p-gestores b { color: #fff; }
.p-gestores a { color: var(--azul-claro); font-weight: 600; text-decoration: none; }
.p-main { flex: 999 1 560px; min-width: 0; padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 760px) {
  .p-menu { max-width: none; flex-basis: 100%; flex-direction: row; overflow-x: auto; padding: 8px; }
  .p-menu a { flex-shrink: 0; }
  .p-gestores { display: none; }
  .p-main { padding: 16px; }
}
.p-tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px; }
.p-tit h1 { font-size: 22px; }
.p-tit p { color: var(--texto-3); }
.p-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.p-kpi { background: #fff; border: 1px solid #E1E6EE; border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
.p-kpi small { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--texto-3); }
.p-kpi b { font: 800 20px var(--titulos); color: var(--marino); }
.p-kpi .nota { font-size: 11px; color: var(--texto-3); }
.p-kpi .nota.ok { color: #1E6B3A; font-weight: 600; }
.p-kpi .nota.prov { color: #8A5A00; }
.p-kpi--oscura { background: var(--marino); border-color: var(--marino); }
.p-kpi--oscura small { color: #C3D0E8; } .p-kpi--oscura b { color: #fff; } .p-kpi--oscura .nota { color: #FCD34D; }
.p-fila { display: flex; flex-wrap: wrap; gap: 16px; }
.p-caja { background: #fff; border: 1px solid #E1E6EE; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.p-caja h2 { font: 700 14px var(--cuerpo); color: var(--marino); }
.p-caja h3 { font: 700 13px var(--cuerpo); color: var(--azul); }
.p-lista > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #EEF1F5; align-items: center; }
.p-lista > div:last-child { border-bottom: 0; }
.p-lista small { display: block; font-size: 11px; color: var(--texto-3); }
.p-chip { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.p-chip.ok { background: #E7F4EC; color: #1E5B34; } .p-chip.info { background: #E5ECFA; color: #0A3A9E; }
.p-chip.aviso { background: #FFF1E0; color: #9A3412; } .p-chip.gris { background: #EEF1F5; color: #3A4853; }
.p-fecha { width: 42px; flex-shrink: 0; text-align: center; border-radius: 6px; background: var(--fondo-suave); padding: 4px 0; line-height: 1.1; }
.p-fecha b { display: block; font-size: 15px; color: var(--marino); } .p-fecha span { font-size: 10px; color: var(--texto-3); }
.p-alerta { display: flex; gap: 10px; padding: 10px; border-radius: 8px; background: #FFF7ED; border: 1px solid #FED7AA; }
.p-alerta b { color: #7C2D12; display: block; } .p-alerta span { color: #6B4A2B; }
.p-destacado { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #EEF1F5; align-items: flex-start; }
.p-destacado i { width: 20px; height: 20px; flex-shrink: 0; border-radius: 99px; display: flex; align-items: center; justify-content: center; font: normal 700 12px var(--cuerpo); }
.p-destacado i.pos { background: #E7F4EC; color: #1E5B34; } .p-destacado i.neg { background: #FFF1E0; color: #9A3412; }
.p-barras { height: 200px; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--borde-2); padding: 0 4px; }
.p-barras > div { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; position: relative; }
.p-barras .v, .p-barras .g { width: 40%; max-width: 22px; border-radius: 3px 3px 0 0; }
.p-barras .v { background: var(--azul); } .p-barras .g { background: var(--azul-claro); }
.p-barras .a { position: absolute; left: 10%; right: 10%; height: 2px; background: #C2410C; }
.p-ejes { display: flex; gap: 10px; padding: 0 4px; font-size: 11px; color: var(--texto-3); }
.p-ejes span { flex: 1; text-align: center; }
.p-leyenda { display: flex; gap: 14px; font-size: 11px; color: var(--texto-3); flex-wrap: wrap; }
.p-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.p-tabla { overflow-x: auto; background: #fff; border: 1px solid #E1E6EE; border-radius: 10px; }
.p-tabla table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.p-tabla th { background: #F7F9FC; color: var(--texto-3); font-weight: 600; text-align: left; padding: 10px 14px; }
.p-tabla td { padding: 9px 14px; border-top: 1px solid #EEF1F5; }
.p-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.p-tabla tr.total td { border-top: 2px solid var(--borde-2); font-weight: 700; background: #F7F9FC; }
.p-sector { position: relative; height: 54px; }
.p-sector .escala { position: absolute; left: 0; right: 0; top: 22px; height: 12px; border-radius: 99px; background: linear-gradient(90deg, #F5C6C0 0 18%, #FCE7B2 18% 50%, #CDEBD8 50% 100%); }
.p-barra-h { height: 8px; border-radius: 99px; background: #EEF1F5; } .p-barra-h div { height: 8px; border-radius: 99px; background: var(--azul); }
.p-subir { border: 2px dashed var(--azul-claro); border-radius: 12px; background: #F7FAFF; padding: 22px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; text-align: center; color: var(--marino); cursor: pointer; }
.p-carpetas { flex: 1 1 200px; max-width: 260px; padding: 8px; gap: 2px; }
.p-carpetas button, .p-informes button { width: 100%; min-height: 36px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; font: 500 12.5px var(--cuerpo); color: var(--texto); cursor: pointer; text-align: left; }
.p-carpetas button[aria-pressed="true"], .p-informes button[aria-pressed="true"] { background: var(--fondo-azul); color: var(--marino); font-weight: 700; }
.p-informes button { min-height: 50px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 6px 10px; }
.p-informes small { font-size: 11px; color: var(--texto-3); font-weight: 400; }
.p-nuevo { font-size: 10px; font-weight: 700; color: #fff; background: #C2410C; border-radius: 99px; padding: 1px 6px; }
.p-tipo { font-size: 10px; font-weight: 700; color: #fff; border-radius: 4px; padding: 2px 5px; margin-right: 6px; }
.p-informe { background: #fff; border: 1px solid #E1E6EE; border-radius: 10px; overflow: hidden; }
.p-informe__cab { background: var(--marino); color: #fff; padding: 16px 20px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.p-informe__cab small { display: block; font-size: 11px; color: var(--azul-claro); text-transform: uppercase; letter-spacing: .5px; }
.p-informe__cab b { font: 800 18px var(--titulos); }
.p-informe__cuerpo { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.p-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.p-cifras > div { border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; }
.p-cifras small { font-size: 10.5px; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.p-cifras b { font-size: 17px; }
.p-cifras span { font-size: 11px; color: var(--texto-2); }
.p-pasos { display: flex; gap: 4px; }
.p-pasos > div { flex: 1; display: grid; gap: 4px; }
.p-pasos i { height: 6px; border-radius: 99px; background: #E1E6EE; }
.p-pasos i.hecho { background: var(--azul); }
.p-pasos span { font-size: 10.5px; color: var(--texto-3); }
.p-chat { display: flex; flex-direction: column; gap: 12px; }
.p-chat .yo { align-self: flex-end; max-width: 75%; background: var(--azul); color: #fff; border-radius: 12px 12px 2px 12px; padding: 10px 12px; }
.p-chat .el { align-self: flex-start; max-width: 85%; background: var(--fondo-suave); border-radius: 12px 12px 12px 2px; padding: 10px 12px; display: grid; gap: 6px; }
.p-btn { min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--azul); color: #fff; font: 600 13px var(--cuerpo); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.p-btn--sec { background: #fff; color: var(--azul); border: 1px solid var(--borde-2); }
.p-main:focus { outline: none; }
.p-informe h3, .p-lista h3 { font: 700 13px var(--cuerpo); color: var(--azul); }

/* Movimiento (03/11/2026): mismo criterio que site.css. Cambio de sección con fundido corto; botones que responden al pulsar. */
.p-menu a, .p-carpetas button, .p-informes button { transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }
.p-btn { transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.p-btn:active, .p-menu a:active, .p-carpetas button:active, .p-informes button:active, .p-campana:active { transform: scale(0.97); }
.p-campana { transition: transform 160ms var(--ease-out); }
.p-main > * { animation: mbl-fundido 150ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .p-btn:active, .p-menu a:active, .p-carpetas button:active, .p-informes button:active, .p-campana:active { transform: none; }
}