/* Fase 10.7 — verbatim de wwwroot/css/presta-ui.css (antes enlazado por PrestamosLayout). Cambio: capas D-51. */
/* ============================================================================
   Vantastic Casa de Préstamos — presta-ui.css
   Layout propio del módulo (/prestamos). Se apoya en FormV2Estilos (clases gv-*)
   y solo agrega: el shell (prefijo pl-), la variación de color cobalto sobre los
   tokens --de-* (únicamente dentro de .pl-app) y piezas propias del módulo.
   No contiene selectores globales: todo cuelga de .pl-app.
   ============================================================================ */

/* ── Tokens: variación cobalto del sistema FormV2 ── */
.gv-root.pl-app {
    --de-ground: #f2f5fb;
    --de-surface: #ffffff;
    --de-surface-2: #f8fafd;
    --de-surface-3: #eef2f9;
    --de-line: #dde4f1;
    --de-line-strong: #c9d4e8;
    --de-ink: #13203b;
    --de-ink-2: #3f4d6b;
    --de-muted: #6b7895;
    --de-faint: #93a0b8;
    --de-acc: #1a4fba;
    --de-acc-deep: #0f3494;
    --de-acc-soft: #e8eef9;
    --de-acc-line: #c3d2f0;
    --pl-gold: #b7861f;
    --pl-gold-soft: #fbf3e0;
    --pl-side-a: #0f3494;
    --pl-side-b: #0a2266;
    --pl-side-ink: #dfe7fb;
    --pl-side-mut: #9fb2e3;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
}

/* ── Menú lateral ── */
.pl-app .pl-side {
    background: linear-gradient(180deg, var(--pl-side-a), var(--pl-side-b));
    color: var(--pl-side-ink);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 30;
}
.pl-app .pl-brand { display: flex; gap: 10px; align-items: center; padding: 2px 6px }
.pl-app .pl-logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #2d6ae0, #c99a35); display: grid; place-items: center; color: #fff; font-size: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.25); flex: none }
.pl-app .pl-brand b { display: block; font-size: 15px; font-weight: 700; line-height: 1.15 }
.pl-app .pl-brand small { color: var(--pl-side-mut); font-size: 11px }
.pl-app .pl-ctx { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 9px 11px; display: grid; gap: 3px; font-size: 11.5px }
.pl-app .pl-ctx .t { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--pl-side-mut) }
.pl-app .pl-ctx .r { display: flex; justify-content: space-between; gap: 8px }
.pl-app .pl-ctx .r span { color: var(--pl-side-mut) }
.pl-app .pl-ctx .r b { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pl-app .pl-nav { display: flex; flex-direction: column; gap: 2px }
.pl-app .pl-nav .gt { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pl-side-mut); padding: 8px 10px 4px }
.pl-app .pl-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--pl-side-ink); font-weight: 500; opacity: .86; text-decoration: none; user-select: none }
.pl-app .pl-nav a i { width: 16px; text-align: center; opacity: .85 }
.pl-app .pl-nav a:hover { background: rgba(255,255,255,.07); opacity: 1 }
.pl-app .pl-nav a.on { background: rgba(255,255,255,.13); opacity: 1; font-weight: 700; box-shadow: inset 3px 0 0 #e0b552 }
.pl-app .pl-nav .cnt { margin-left: auto; font-family: var(--mono); font-size: 10.5px; background: rgba(224,181,82,.18); color: #f3d58f; padding: 1px 7px; border-radius: 9px }
.pl-app .pl-foot { margin-top: auto; display: flex; gap: 8px; align-items: center; padding: 8px 6px 0; border-top: 1px solid rgba(255,255,255,.12) }
.pl-app .pl-foot .av { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none }
.pl-app .pl-foot .us { flex: 1; min-width: 0; font-size: 12px }
.pl-app .pl-foot .us b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pl-app .pl-foot .us small { color: var(--pl-side-mut) }
.pl-app .pl-foot button { width: 30px; height: 30px; border-radius: 6px; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer }
.pl-app .pl-foot button:hover { background: rgba(255,255,255,.2) }

/* ── Zona principal ── */
.pl-app .pl-main { min-width: 0; display: flex; flex-direction: column }
.pl-app .pl-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 22px; background: var(--de-surface); border-bottom: 1px solid var(--de-line); position: sticky; top: 0; z-index: 20 }
.pl-app .pl-top h1 { margin: 0; font-size: 17px; font-weight: 700; color: var(--de-ink) }
.pl-app .pl-top .sub { font-size: 12px; color: var(--de-muted) }
/* Instructivo (InstructivoModulo) en la barra superior: mientras su modal o su panel de voz
   están abiertos, la barra sube por encima del menú lateral (z 30) para que el overlay lo cubra. */
.pl-app .pl-top:has(.ins-ovl), .pl-app .pl-top:has(.ins-tts) { z-index: var(--z-modal) } /* D-51 (era 1100): el instructivo abierto queda sobre el contenido */
.pl-app .pl-movil { display: none }
.pl-app .pl-pill { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 10px; border-radius: 14px; font-size: 11.5px; font-weight: 700; white-space: nowrap }
.pl-app .pl-pill.ok { background: var(--ok-bg); color: var(--ok) }
.pl-app .pl-pill.mal { background: var(--err-bg); color: var(--err) }
.pl-app .pl-pill.sede { background: var(--de-acc-soft); color: var(--de-acc) }
.pl-app .pl-wrap { padding: 18px 22px 40px; min-width: 0 }

/* ── Botones (preferencias del ERP: icon-only 31×31, texto+icono 31 px) ── */
.pl-app .pl-ib { width: 31px; height: 31px; border-radius: 6px; border: none; box-shadow: 0 1px 2px rgba(0,0,0,.08); color: #fff; display: inline-grid; place-items: center; cursor: pointer; background: #374151 }
.pl-app .pl-ib.sm { width: 26px; height: 26px }
.pl-app .pl-ib.save { background: #1a56db }
.pl-app .pl-ib.new { background: #16a34a }
.pl-app .pl-ib.del { background: #dc2626 }
.pl-app .pl-ib.wa { background: #1f9d55 }
.pl-app .pl-ib.gold { background: #b7861f }
.pl-app .pl-ib:disabled { opacity: .45; cursor: not-allowed }
.pl-app .gv-btn.pl-gold { background: linear-gradient(180deg, #d3a23f, #b7861f); border-color: #b7861f; color: #fff }
.pl-app .gv-btn.pl-ok { background: #16a34a; border-color: #16a34a; color: #fff }
.pl-app .gv-btn.pl-wa { background: #1f9d55; border-color: #1f9d55; color: #fff; text-decoration: none }

/* ── Modal "Cobalt Elegante": cabecera con degradado cobalto ── */
.pl-app .gv-mdl { border-radius: 14px }
.pl-app .gv-mdl-h.pl-mh { background: linear-gradient(120deg, #0f3494, #1a4fba 60%, #2d6ae0); color: #fff; border-bottom: 0 }
.pl-app .gv-mdl-h.pl-mh h3 { color: #fff }
.pl-app .gv-mdl-h.pl-mh .gv-s { color: #c8d6f8 }
.pl-app .gv-mdl-h.pl-mh .gv-x { background: rgba(255,255,255,.14); color: #fff; border-color: transparent }
.pl-app .pl-mh-ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.14); display: grid; place-items: center; flex: none }
.pl-app .pl-busy { position: absolute; inset: 0; background: rgba(255,255,255,.72); display: grid; place-items: center; z-index: 5; border-radius: 14px; font-weight: 600; color: var(--de-acc-deep); gap: 6px; text-align: center }
.pl-app .pl-busy i { font-size: 24px; color: var(--de-acc) }
.pl-app .gv-mdl { position: relative }

/* ── Avisos ── */
.pl-app .pl-avisos { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-toast); /* D-51 (era 12000) */ display: grid; gap: 8px; max-width: 380px }
.pl-app .pl-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #0f1a33; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 12.5px }
.pl-app .pl-aviso.ok i { color: #4ade80 } .pl-app .pl-aviso.warn i { color: #fbbf24 } .pl-app .pl-aviso.err i { color: #f87171 }
.pl-app .pl-aviso button { margin-left: auto; background: none; border: 0; color: #9fb2e3; cursor: pointer }

/* ── Piezas propias ── */
.pl-app .pl-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start }
.pl-app .pl-rate { background: linear-gradient(160deg, var(--de-acc-deep), #0a2266); color: #fff; border-radius: 14px; padding: 16px; position: sticky; top: 70px }
.pl-app .pl-rate h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #b9c9f3 }
.pl-app .pl-rate .tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px }
.pl-app .pl-rate .tri div { background: rgba(255,255,255,.08); border-radius: 8px; padding: 8px 6px; text-align: center }
.pl-app .pl-rate .tri small { display: block; font-size: 10px; color: #b9c9f3 }
.pl-app .pl-rate .tri b { font-family: var(--mono); font-size: 15px }
.pl-app .pl-rate .tri .g { background: rgba(224,181,82,.18); box-shadow: inset 0 0 0 1px rgba(224,181,82,.45) }
.pl-app .pl-rate .tri .g b { color: #f3d58f }
.pl-app .pl-rate .row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.1) }
.pl-app .pl-rate .row b { font-family: var(--mono) }
.pl-app .pl-rate .row.big { font-size: 15px; border: 0; padding-top: 8px }
.pl-app .pl-rate .row.big b { color: #f3d58f }
.pl-app .pl-rate .note { font-size: 11px; color: #b9c9f3; margin-top: 10px; line-height: 1.4 }
.pl-app .pl-rate .gv-btn { width: 100%; justify-content: center; margin-top: 12px }
.pl-app .pl-rule { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.pl-app .pl-ord { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.pl-app .pl-ord li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--de-line); border-radius: 8px; background: var(--de-surface-2) }
.pl-app .pl-ord .k { width: 22px; height: 22px; border-radius: 50%; background: var(--de-acc); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; font-family: var(--mono); flex: none }
.pl-app .pl-ord li span { flex: 1 }
.pl-app .pl-ord button { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--de-line-strong); background: var(--de-surface); cursor: pointer }
.pl-app .pl-ord button:disabled { opacity: .35; cursor: default }
.pl-app .pl-cfg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start }
.pl-app .pl-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.pl-app .pl-pk { border: 1.5px solid var(--de-line); border-radius: 12px; background: var(--de-surface); padding: 14px; text-align: left; cursor: pointer; display: grid; gap: 4px }
.pl-app .pl-pk i { font-size: 20px; color: var(--de-acc) }
.pl-app .pl-pk.on { border-color: var(--de-acc); box-shadow: 0 0 0 3px var(--de-acc-soft) }
.pl-app .pl-pk small { color: var(--de-muted) }
.pl-app .pl-path { font-family: var(--mono); font-size: 11px; background: var(--de-surface-3); border: 1px dashed var(--de-line-strong); border-radius: 6px; padding: 6px 9px; word-break: break-all; color: var(--de-ink-2) }
.pl-app .pl-imp { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--de-line); margin: 8px 0 }
.pl-app .pl-imp i { display: block; height: 100% }
.pl-app .pl-gar { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px }
.pl-app .pl-gcard { background: var(--de-surface); border: 1px solid var(--de-line); border-radius: 12px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column }
.pl-app .pl-gcard:hover { border-color: var(--de-acc) }
.pl-app .pl-ph { aspect-ratio: 16/10; max-width: 100%; display: grid; place-items: center; font-size: 30px; color: rgba(255,255,255,.9); position: relative; background: linear-gradient(135deg, #2d6ae0, #0f3494); background-size: cover; background-position: center }
.pl-app .pl-ph .nf { position: absolute; bottom: 8px; right: 8px; font-size: 10.5px; background: rgba(0,0,0,.45); padding: 2px 7px; border-radius: 10px; font-family: var(--mono) }
.pl-app .pl-gcard .b { padding: 10px 12px; display: grid; gap: 4px }
.pl-app .pl-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px }
.pl-app .pl-photos .pl-ph { border-radius: 8px; font-size: 22px }
.pl-app .pl-up { border: 1.5px dashed var(--de-line-strong); border-radius: 8px; display: grid; place-items: center; aspect-ratio: 16/10; color: var(--de-muted); cursor: pointer; font-size: 12px; text-align: center; position: relative }
.pl-app .pl-up input { position: absolute; inset: 0; opacity: 0; cursor: pointer }
.pl-app .pl-files { display: grid; gap: 4px }
.pl-app .pl-files div { display: flex; gap: 8px; align-items: center; padding: 6px 9px; border: 1px solid var(--de-line); border-radius: 7px; font-size: 12px; background: var(--de-surface) }
.pl-app .pl-paper { background: #fffdf8; color: #1f2433; border-radius: 6px; box-shadow: 0 2px 0 #e7e1d2, 0 14px 40px rgba(20,30,60,.12); padding: 30px 34px; font-size: 12.5px; line-height: 1.65; position: relative; min-width: 0 }
.pl-app .pl-paper h2 { text-align: center; font-size: 18px; margin: 0 0 2px }
.pl-app .pl-paper .sub { text-align: center; font-size: 11px; color: #6b6f7c; margin-bottom: 16px }
.pl-app .pl-paper h5 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin: 14px 0 4px; color: #0f3494 }
.pl-app .pl-paper p { margin: 0 0 8px; text-align: justify }
.pl-app .pl-paper .hri { border: 1.5px solid #0f3494; border-radius: 8px; padding: 12px 14px; margin: 10px 0 14px; background: #fff }
.pl-app .pl-paper .hri .gr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.pl-app .pl-paper .hri .gr div { border-left: 3px solid #c99a35; padding-left: 8px }
.pl-app .pl-paper .hri small { display: block; font-size: 10px; color: #6b6f7c; text-transform: uppercase }
.pl-app .pl-paper .hri b { font-family: var(--mono); font-size: 13.5px }
.pl-app .pl-paper table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 6px }
.pl-app .pl-paper th, .pl-app .pl-paper td { border-bottom: 1px solid #e3ded0; padding: 4px 6px; text-align: right; font-family: var(--mono) }
.pl-app .pl-paper th { font-size: 10px; text-transform: uppercase; color: #6b6f7c }
.pl-app .pl-paper .firm { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; text-align: center; font-size: 11px }
.pl-app .pl-paper .firm div { border-top: 1px solid #333; padding-top: 6px }
.pl-app .pl-stamp { position: absolute; top: 20px; right: 20px; border: 2px solid #15803d; color: #15803d; font-weight: 800; font-size: 11px; letter-spacing: 1px; padding: 4px 10px; border-radius: 6px; transform: rotate(6deg); background: #fff }
.pl-app .pl-stamp.bor { border-color: #b7861f; color: #b7861f }
.pl-app .pl-chart text { fill: var(--de-muted); font-family: var(--mono); font-size: 10px }
.pl-app .pl-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--de-ink-2); margin-top: 6px }
.pl-app .pl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px }
.pl-app .pl-list-it { padding: 9px 12px; border-bottom: 1px solid var(--de-line); cursor: pointer }
.pl-app .pl-list-it:hover { background: var(--de-surface-2) }
.pl-app .pl-list-it.on { background: var(--de-acc-soft); box-shadow: inset 3px 0 0 var(--de-acc) }
.pl-app .pl-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--de-surface); border: 1px solid var(--de-line-strong); border-radius: 8px; box-shadow: 0 10px 28px rgba(15,30,70,.14); max-height: 280px; overflow: auto; margin-top: 4px }
.pl-app .pl-drop div { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--de-line) }
.pl-app .pl-drop div:hover { background: var(--de-acc-soft) }

/* ── Responsive ── */
@media (max-width: 1000px) {
    .pl-app .pl-split, .pl-app .pl-cfg { grid-template-columns: 1fr }
    .pl-app .pl-rate { position: static }
}
@media (max-width: 760px) {
    .gv-root.pl-app { grid-template-columns: 1fr }
    .pl-app .pl-side { position: fixed; inset: 0 30% 0 0; transform: translateX(-102%); transition: transform .2s }
    .pl-app .pl-side.abierto { transform: none }
    .pl-app .pl-movil { display: inline-grid }
    .pl-app .pl-wrap, .pl-app .pl-top { padding-left: 14px; padding-right: 14px }
    .pl-app .pl-pick { grid-template-columns: 1fr }
    .pl-app .pl-paper { padding: 20px 16px }
    .pl-app .pl-paper .hri .gr { grid-template-columns: 1fr 1fr }
}

/* Pestañas (ficha del cliente) */
.pl-app .pl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--de-line); margin: 0 -2px 12px; overflow-x: auto }
.pl-app .pl-tab { border: 0; background: none; padding: 9px 13px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--de-muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap }
.pl-app a.pl-tab { text-decoration: none; display: inline-block }
.pl-app .pl-tab:hover { color: var(--de-ink) }
.pl-app .pl-tab.on { color: var(--de-acc); border-bottom-color: var(--de-acc) }
.pl-app .pl-tab .n { font-family: var(--mono); font-size: 10.5px; background: var(--de-surface-2); border-radius: 9px; padding: 1px 6px; margin-left: 5px }
.pl-app .pl-ficha { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start }
.pl-app .pl-ficha .lst { border: 1px solid var(--de-line); border-radius: 10px; overflow: hidden; background: var(--de-surface) }
.pl-app .pl-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px }
@media (max-width: 900px) { .pl-app .pl-ficha { grid-template-columns: 1fr } }

/* v2 · reportes regulatorios y recibos */
.pl-app .pl-obs { display: grid; gap: 6px; margin: 10px 0 }
.pl-app .pl-obs div { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--de-surface-2); border: 1px solid var(--de-line) }
.pl-app .pl-obs div.err { background: #fdecec; border-color: #f3c0c0; color: #8f1d1d }
.pl-app .pl-txt { font-family: var(--mono); font-size: 10.5px; white-space: pre; overflow: auto; max-height: 260px; background: #0f1e46; color: #dbe6ff; padding: 10px; border-radius: 8px }