/* PETROUVE · Portal del empleado. Sin nada de fuera: fuentes del sistema y ningún estilo en línea. */
:root {
  --azul: #1d43d8; --azul-osc: #1636b8; --marca: #0c2c8c; --rojo: #e3122b; --texto: #0d1526; --gris: #5a6479; --suave: #6a7387;
  --borde: #e2e7f0; --fondo: #f4f6fb; --verde: #15803d; --verde-bg: #e6f6ec; --morado: #6d28d9; --morado-cl: #a78bfa;
  --ambar: #b45309; --ambar-cl: #f59e0b; --aviso-bg: #fff7e6;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--fondo); color: var(--texto); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; min-height: 100vh; }
button, input, textarea { font: inherit; color: inherit; }
.pw { max-width: 460px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.cargando { text-align: center; margin-top: 40vh; }
h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
h3 { font-size: 17px; margin: 6px 0 2px; }
.pw-sub { color: var(--gris); font-size: 14px; }
.pw-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 6px; }
.wm { font-weight: 800; letter-spacing: .05em; color: var(--marca); font-size: 18px; }
.wm .v { color: var(--rojo); }
.pw-salir, .pw-back { background: none; border: 0; color: var(--azul); font-weight: 600; font-size: 14px; cursor: pointer; padding: 6px 0; }
.pw-card { background: #fff; border: 1px solid var(--borde); border-radius: 18px; padding: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.pw-card .lbl { color: var(--gris); font-size: 13px; font-weight: 600; }
.pw-card .big { font-size: 32px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pw-btn { min-height: 52px; border-radius: 15px; border: 0; background: var(--azul); color: #fff; font-weight: 650; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 0 16px; text-decoration: none; box-shadow: 0 6px 18px rgba(29, 67, 216, .28); }
.pw-btn:hover { background: var(--azul-osc); }
.pw-btn[disabled] { background: #9fb0ec; box-shadow: none; cursor: not-allowed; }
.pw-btn.sec { background: #fff; color: var(--azul); border: 1px solid #cfd7e4; box-shadow: none; min-height: 46px; font-size: 15px; }
.pw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pw-two .pw-btn { font-size: 14px; min-height: 44px; padding: 0 8px; }
.pw-link { background: none; border: 0; text-align: center; color: var(--gris); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 6px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--gris); }
.campo input, .campo textarea { border: 1px solid #cfd7e4; border-radius: 14px; padding: 12px 14px; font-size: 17px; background: #fff; outline: 0; }
.campo textarea { min-height: 110px; font-size: 15px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(29, 67, 216, .15); }
.codigo { text-align: center; letter-spacing: .5em; font-size: 26px !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.error { background: #fdecec; color: #a11b1b; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.pw-note { display: flex; gap: 8px; font-size: 13px; color: #3b4558; background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 10px 12px; line-height: 1.45; }
.pw-note::before { content: "i"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #e8edfc; color: var(--azul); font-weight: 800; font-size: 12px; display: grid; place-items: center; font-family: Georgia, serif; }
.pw-company { background: #f4f7ff; border-color: #d9e2fb; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 2px 9px; background: #eef1f6; color: var(--gris); }
.chip.ok { background: var(--verde-bg); color: var(--verde); }
.chip.pend { background: var(--aviso-bg); color: var(--ambar); }
/* Reparto de cada 100 € */
.pw-split { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; margin-top: 10px; background: #eef1f6; }
.pw-split > div { height: 100%; }
.c-neto { background: var(--azul); } .c-ss { background: var(--morado-cl); } .c-irpf { background: var(--ambar-cl); } .c-otras { background: #94a3b8; }
.pw-split-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: #3b4558; }
.pw-split-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
/* Del bruto al neto */
.wf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid #eef1f6; font-size: 15px; }
.wf-row small, .wf-sub small { display: block; color: var(--suave); font-size: 12px; margin-top: 1px; }
.wf-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-row.neg-ss { border-bottom: 0; padding-bottom: 6px; } .wf-row.neg-ss b { color: var(--morado); }
.wf-row.neg-irpf b { color: var(--ambar); }
.wf-sub { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0 5px 12px; margin-left: 3px; border-left: 2px solid #ddd6fe; font-size: 13px; color: #3b4558; }
.wf-sub span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--morado); }
.wf-row.total { border-bottom: 0; font-weight: 700; } .wf-row.total b { color: var(--verde); font-size: 20px; }
/* Histórico */
.hist { padding: 4px 14px; }
.hist-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eef1f6; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; }
.hist-item:last-child { border-bottom: 0; }
.hist-item .hm { width: 42px; height: 42px; border-radius: 12px; background: #eef2fd; color: var(--marca); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.hist-item .ht { flex: 1; min-width: 0; }
.hist-item .ht b { display: block; }
.hist-item .amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Confirmación */
.hecho { width: 72px; height: 72px; border-radius: 50%; background: var(--verde-bg); color: var(--verde); display: grid; place-items: center; margin: 20px auto 4px; font-size: 38px; font-weight: 800; }
.ev { display: grid; gap: 8px; font-size: 14px; }
.ev div { display: flex; justify-content: space-between; gap: 10px; }
.ev span { color: var(--gris); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.texto-legal h3 { margin-top: 14px; }
.texto-legal p, .texto-legal li { font-size: 14px; color: #283246; }
.texto-legal ul { padding-left: 18px; display: grid; gap: 6px; margin-top: 6px; }
.centro { text-align: center; }
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px); background: var(--texto); color: #fff; padding: 12px 16px; border-radius: 14px; font-size: 14px; transition: transform .25s; max-width: calc(100% - 32px); }
.aviso.ver { transform: translateX(-50%) translateY(0); }
.pasos { padding-left: 20px; display: grid; gap: 6px; color: #283246; font-size: 14.5px; }