:root{
--s-green-950:#052e23;
--s-green-900:#07382c;
--s-green-800:#0a4d3c;
--s-green-700:#0e5f48;
--s-green-600:#12775a;
--s-lime:#d9f340;
--s-ink:#152430;
--s-muted:#5b6b7a;
--s-soft:#8595a5;
--s-line:#dbe4ec;
--s-line-strong:#c8d4de;
--s-bg:#eef2f5;
--s-tint:#f2f6f8;
--s-ok:#0d9855;
--s-ok-soft:#e5f6ec;
--s-ok-line:#b9e4c9;
--s-warn:#b97708;
--s-warn-soft:#fdf3e1;
--s-warn-line:#f0d9a8;
--s-danger:#b42318;
--s-danger-soft:#fdecea;
--s-danger-line:#f2bcb6;
--s-radius:18px;
--s-radius-sm:12px;
--s-shadow:0 10px 30px rgba(9,40,63,.08),0 2px 6px rgba(9,40,63,.05);
--s-shadow-lift:0 18px 44px rgba(9,40,63,.14);
--s-focus:0 0 0 4px rgba(18,119,90,.18);
}
body{
margin:0;
background:var(--s-bg) !important;
color:var(--s-ink);
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
line-height:1.5;
-webkit-text-size-adjust:100%;
}
body *{box-sizing:border-box}
h1,h2,h3{line-height:1.2;color:var(--s-ink)}
.small{font-size:13px;color:var(--s-muted)}
a{color:var(--s-green-700)}
.page-top,.selection-top{
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding:14px clamp(16px,3vw,26px) !important;
background:linear-gradient(120deg,var(--s-green-900),var(--s-green-800) 60%,#0e2f50) !important;
color:#fff !important;
border-bottom:2px solid rgba(217,243,64,.5);
box-shadow:0 8px 22px rgba(6,42,60,.18);
}
.page-top-left,.selection-brand{display:flex;align-items:center;gap:12px;min-width:0}
.page-top img,.selection-brand img{width:44px !important;height:44px !important;border-radius:12px;object-fit:cover;background:rgba(255,255,255,.1);padding:2px}
.page-top strong,.selection-brand strong{color:#fff}
.page-top-left div,.selection-brand div{color:rgba(255,255,255,.92);font-size:14px;min-width:0}
.selection-brand span{color:rgba(255,255,255,.72) !important;font-size:12px}
.page-top>a,.page-top a[href]{
display:inline-flex;align-items:center;gap:7px;
padding:9px 15px;border-radius:11px;
background:rgba(255,255,255,.14);color:#fff !important;text-decoration:none;font-weight:800;font-size:14px;
border:1px solid rgba(255,255,255,.2);
}
.page-top>a:hover{background:rgba(255,255,255,.24)}
.page-top>span{background:rgba(255,255,255,.14) !important;border:1px solid rgba(255,255,255,.2);border-radius:999px !important}
.selection-logout{
border:0;border-radius:11px;padding:10px 15px;
background:#c0362b !important;color:#fff !important;font-weight:800;cursor:pointer;
box-shadow:0 6px 14px rgba(192,54,43,.28);
}
.selection-logout:hover{background:#a4291f !important}
.wrap{max-width:1120px;margin:24px auto;padding:0 16px}
.selection-wrap,.ing-wrap,.exp-wrap,.manual-wrap,.public-wrap,.pv-wrap,.pg-wrap{
width:min(1160px,calc(100% - 28px)) !important;margin:24px auto 70px !important;
}
.panel,.card,.selection-card,.ing-section,.exp-card,.public-card,.manual-card,.pv-card{
background:#fff !important;
border:1px solid var(--s-line) !important;
border-radius:var(--s-radius) !important;
box-shadow:var(--s-shadow) !important;
padding:clamp(16px,3vw,24px) !important;
margin-bottom:16px;
}
.panel h1{margin:0 0 6px;font-size:clamp(22px,3vw,30px);font-weight:900}
.panel>.small{margin-top:0}
h2{font-size:clamp(18px,2.3vw,22px);font-weight:800}
.btn,button.btn,a.btn,
button[type="submit"]{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:46px;padding:11px 20px;
border:1.5px solid transparent;border-radius:13px;
font:inherit;font-size:15px;font-weight:800;letter-spacing:.01em;line-height:1.15;
text-decoration:none;white-space:nowrap;cursor:pointer;
background:var(--s-green-800);color:#fff;
box-shadow:0 6px 16px rgba(10,77,60,.22);
transition:transform .12s,box-shadow .15s,background .15s,border-color .15s,color .15s;
-webkit-tap-highlight-color:transparent;
}
.btn:hover,button.btn:hover,a.btn:hover{background:var(--s-green-700);color:#fff;text-decoration:none}
.btn:active,button.btn:active{transform:translateY(1px)}
.btn:focus-visible,button:focus-visible{outline:none;box-shadow:var(--s-focus)}
button:disabled,.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-yellow,button.btn-yellow,a.btn-yellow{
background:linear-gradient(135deg,#12915b,#0b6b41);color:#fff;
box-shadow:0 8px 20px rgba(13,152,85,.28);
}
.btn-yellow:hover{background:linear-gradient(135deg,#0f8351,#095c38);color:#fff}
.btn-gray,button.btn-gray,a.btn-gray{
background:#fff;color:var(--s-green-800);border-color:#bfd2c9;box-shadow:0 2px 8px rgba(9,40,63,.06);
}
.btn-gray:hover{background:#f2f8f4;border-color:var(--s-green-600);color:var(--s-green-800)}
.btn-red,button.btn-red,a.btn-red{
background:var(--s-danger);color:#fff;box-shadow:0 6px 16px rgba(180,35,24,.22);
}
.btn-red:hover{background:#9a1e14;color:#fff}
input,select,textarea{
width:100%;font:inherit;font-size:16px;color:var(--s-ink);
background:#fff;
border:1.5px solid var(--s-line-strong);
border-radius:var(--s-radius-sm);
padding:11px 13px;min-height:46px;
transition:border-color .15s,box-shadow .15s;
appearance:none;-webkit-appearance:none;
}
select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--s-green-600);box-shadow:var(--s-focus)}
input::placeholder,textarea::placeholder{color:#9aa8b5}
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;min-height:0;accent-color:var(--s-green-700);vertical-align:-4px}
input[type="file"]{padding:9px 11px;background:var(--s-tint);cursor:pointer}
input[type="file"]::file-selector-button{
margin-right:12px;border:1px solid var(--s-green-600);border-radius:9px;
background:#fff;color:var(--s-green-700);font-weight:800;padding:8px 13px;cursor:pointer;
}
input:disabled,select:disabled,textarea:disabled{background:var(--s-tint);color:#7c8b99;cursor:not-allowed}
label{font-weight:700;color:#33465a;font-size:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid label{display:block;margin:0 0 6px}
.form-grid .full{grid-column:1/-1}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
.search{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0}
.search input,.search select{width:auto;flex:1 1 190px;min-width:0}
.search .btn{flex:0 0 auto}
.errors,.ok{border-radius:14px;padding:14px 16px;margin-bottom:14px;font-weight:700;border:1px solid transparent}
.ok{background:var(--s-ok-soft);color:#0a6c3b;border-color:var(--s-ok-line)}
.errors{background:var(--s-danger-soft);color:#9a1e14;border-color:var(--s-danger-line)}
.errors ul{margin:8px 0 0;padding-left:20px}
.errors li{margin:2px 0}
.missing{color:var(--s-danger);font-weight:800}
.badge{
display:inline-flex;align-items:center;gap:6px;
padding:5px 11px;border-radius:999px;
font-size:11.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;border:1px solid transparent;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-activo{background:var(--s-ok-soft);color:#0a6c3b;border-color:var(--s-ok-line)}
.badge-baja{background:var(--s-warn-soft);color:#8a5a06;border-color:var(--s-warn-line)}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:14px;overflow:hidden}
thead th{
text-align:left;background:var(--s-green-800);color:#fff;
font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
padding:11px 14px;white-space:nowrap;
}
tbody td{padding:12px 14px;border-bottom:1px solid #eef2f6;vertical-align:top}
tbody tr:nth-child(even) td{background:#f8fbf9}
tbody tr:hover td{background:#eff7f2}
table .btn{min-height:40px;padding:8px 14px;font-size:13.5px;border-radius:11px;box-shadow:none}
@media(max-width:820px){
.panel,.ing-section,.exp-card{overflow-x:auto}
table{min-width:620px}
}
.credit-footer-light{text-align:center;color:var(--s-soft);font-size:12.5px;padding:22px 12px 34px;font-weight:700}
.postulante-hero,.public-hero,.selection-hero,.ing-hero,.exp-hero,.manual-hero,.pv-hero{
position:relative;overflow:hidden;color:#fff !important;
border-radius:calc(var(--s-radius) + 6px) !important;
padding:clamp(20px,3.4vw,30px) !important;
background:
radial-gradient(120% 160% at 100% 0%,rgba(217,243,64,.15) 0%,rgba(217,243,64,0) 44%),
linear-gradient(132deg,#0a4d3c 0%,#0a4544 46%,#0e2f50 100%) !important;
box-shadow:0 16px 40px rgba(6,42,60,.22) !important;
}
.postulante-hero::before,.public-hero::before,.selection-hero::before,.ing-hero::before,.exp-hero::before,.manual-hero::before,.pv-hero::before{
content:"";position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.6px);
background-size:22px 22px;opacity:.4;
-webkit-mask-image:linear-gradient(115deg,transparent 42%,#000 100%);
mask-image:linear-gradient(115deg,transparent 42%,#000 100%);
pointer-events:none;
}
.postulante-hero>*,.public-hero>*,.selection-hero>*,.ing-hero>*,.exp-hero>*,.manual-hero>*,.pv-hero>*{position:relative;z-index:1}
.postulante-hero h1,.public-hero h1,.selection-hero h1,.ing-hero h1,.exp-hero h1,.manual-hero h1,.pv-hero h1{
color:#fff !important;margin:0 0 8px !important;font-weight:900;font-size:clamp(24px,4vw,40px) !important;
}
.postulante-hero p,.public-hero p,.selection-hero p,.ing-hero p,.exp-hero p,.manual-hero p,.pv-hero p{
color:rgba(255,255,255,.9) !important;margin:0;
}
.postulante-hero .small,.public-hero .small{color:rgba(255,255,255,.8) !important}
.ing-hero .btn-yellow,.manual-hero .btn,.pv-hero .btn{box-shadow:0 8px 20px rgba(0,0,0,.18)}
.puesto-panel{
background:var(--s-ok-soft) !important;border:1px solid var(--s-ok-line) !important;
border-radius:var(--s-radius) !important;padding:18px !important;margin:18px 0 24px !important;
}
.puesto-panel h2{margin:0 0 6px;color:var(--s-green-800)}
.puesto-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.puesto-info{
background:#fff;border:1.5px solid var(--s-line);border-radius:14px;padding:14px;color:var(--s-muted);font-size:14px;
}
.puesto-info strong{display:block;color:var(--s-green-800);margin-bottom:6px}
.puesto-info.active{border-color:var(--s-green-600);box-shadow:0 0 0 3px rgba(18,119,90,.14);background:#f4faf6}
@media(max-width:760px){.puesto-info-grid{grid-template-columns:1fr}}
.file-card{
border:1.5px solid var(--s-line);border-radius:14px;padding:14px;background:#fff;transition:.18s ease;
}
.file-card label{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px;font-weight:800}
.file-card.document-disabled{opacity:.6;background:var(--s-tint);border-style:dashed}
.required-badge{
display:inline-flex;border-radius:999px;padding:4px 9px;background:var(--s-danger-soft);color:#991b1b;
font-size:11px;font-weight:900;border:1px solid var(--s-danger-line);white-space:nowrap;
}
.optional-badge{
display:inline-flex;border-radius:999px;padding:4px 9px;background:#eef1f4;color:var(--s-muted);
font-size:11px;font-weight:900;border:1px solid #d5dde4;white-space:nowrap;
}
.file-note{color:var(--s-muted);font-size:12px;margin-top:6px;line-height:1.4}
.form-status{
padding:14px 16px;border-radius:14px;background:var(--s-warn-soft);border:1px solid var(--s-warn-line);
color:#8a5a06;font-weight:800;margin-bottom:14px;
}
.form-status.ready{background:var(--s-ok-soft);border-color:var(--s-ok-line);color:#0a6c3b}
.submit-postulacion{width:100%;min-height:54px;font-size:16px}
.submit-postulacion:disabled{cursor:not-allowed;opacity:.5}
.hidden-hp{position:absolute;left:-9999px;top:-9999px}
.ant-panel{margin-top:10px;border:1px solid var(--s-line);border-radius:14px;overflow:hidden;background:#fff}
.ant-header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;background:var(--s-tint);border-bottom:1px solid var(--s-line)}
.ant-header strong{color:var(--s-green-800);font-size:14px}
.ant-header a{color:var(--s-green-700);font-size:12px;font-weight:800;text-decoration:none}
.ant-policy{padding:9px 13px;color:var(--s-muted);font-size:12px;line-height:1.4}
.ant-result{margin:0 12px 11px;padding:10px 12px;border-radius:11px;background:#eef2f6;color:#475569;font-size:12.5px;font-weight:700;line-height:1.4}
.ant-result.loading{background:var(--s-warn-soft);color:#8a5a06}
.ant-result.ok{background:var(--s-ok-soft);color:#0a6c3b}
.ant-result.warning{background:var(--s-warn-soft);color:#8a5a06}
.ant-result.error{background:var(--s-danger-soft);color:#991b1b}
.ant-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 12px 12px}
.ant-check{min-width:0;padding:9px 10px;border:1px solid var(--s-line);border-radius:11px;background:var(--s-tint)}
.ant-check-title{display:block;color:var(--s-soft);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.ant-check-detail{display:block;margin-top:3px;color:#334155;font-size:11.5px;font-weight:800;overflow-wrap:anywhere}
.ant-check.ok{border-color:var(--s-ok-line);background:var(--s-ok-soft)}
.ant-check.warning{border-color:var(--s-warn-line);background:var(--s-warn-soft)}
.ant-check.error{border-color:var(--s-danger-line);background:var(--s-danger-soft)}
.dni-mode{margin-top:10px;padding:11px 12px;border:1px solid #bcd7ea;border-radius:11px;background:#eef6fb;color:#1e3a8a;font-size:12.5px;font-weight:700}
.dni-mode .btn{margin-top:8px;min-height:38px;padding:7px 12px;font-size:12.5px}
@media(max-width:700px){.ant-checks{grid-template-columns:1fr}}
.company-data{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.12);margin-top:14px}
.company-data strong{color:#fff}
.company-data div{color:rgba(255,255,255,.92);font-size:14px}
.family-row{position:relative;margin-top:12px;padding:15px;border:1px solid var(--s-line);border-radius:14px;background:var(--s-tint)}
.family-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;gap:10px}
.family-grid label{font-size:12px;margin-bottom:4px}
.signature-box{padding:16px;border:1.5px solid var(--s-warn-line);border-radius:16px;background:var(--s-warn-soft)}
.signature-box ul{margin:6px 0 12px;padding-left:20px}
#signatureCanvas{width:100%;height:190px;display:block;border:2px dashed #86a99a;border-radius:12px;background:#fff;touch-action:none}
.public-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
@media(max-width:820px){.company-data,.family-grid{grid-template-columns:1fr}}
.selection-counters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin-top:18px}
.selection-counter{padding:14px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.1)}
.selection-counter small{display:block;color:rgba(255,255,255,.72);font-size:10.5px;text-transform:uppercase;font-weight:900;letter-spacing:.04em}
.selection-counter strong{display:block;margin-top:5px;color:#fff;font-size:26px;font-weight:900}
.selection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.selection-card{min-height:180px;display:flex;flex-direction:column}
.selection-card h2{margin:0 0 6px;color:var(--s-green-800);font-size:22px}
.selection-card p{color:var(--s-muted);line-height:1.45}
.selection-card .btn{align-self:flex-start;margin-top:auto}
.selection-card.upcoming{background:var(--s-tint) !important;border-style:dashed !important}
.selection-card.upcoming h2{color:var(--s-soft)}
.coming-label{display:inline-flex;align-self:flex-start;margin-top:auto;padding:7px 12px;border-radius:999px;background:#eef1f4;color:var(--s-muted);font-size:11px;font-weight:900}
@media(max-width:850px){.selection-counters{grid-template-columns:repeat(2,minmax(0,1fr))}.selection-grid{grid-template-columns:1fr}}
@media(max-width:520px){.selection-counters{grid-template-columns:1fr 1fr}}
.ing-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:16px}
.ing-stat{padding:13px 14px;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:rgba(255,255,255,.1)}
.ing-stat small{display:block;color:rgba(255,255,255,.72);font-size:10.5px;text-transform:uppercase;font-weight:900;letter-spacing:.04em}
.ing-stat strong{display:block;margin-top:4px;font-size:25px;font-weight:900;color:#fff}
.ing-candidate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.ing-candidate{display:flex;flex-direction:column;padding:16px;border:1px solid var(--s-line);border-radius:15px;background:var(--s-tint)}
.ing-candidate strong{color:var(--s-ink)}
.ing-candidate span{margin-top:6px;color:var(--s-muted);font-size:12.5px;line-height:1.5}
.ing-candidate form{margin-top:auto;padding-top:13px}
.ing-table th,.ing-table td{padding:12px 14px}
.ing-status{
display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;
background:var(--s-ok-soft);color:#0a6c3b;font-size:11.5px;font-weight:900;border:1px solid var(--s-ok-line);
}
@media(max-width:850px){.ing-stats{grid-template-columns:repeat(2,1fr)}.ing-candidate-grid{grid-template-columns:1fr}}
.exp-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;margin-top:18px}
.exp-link{word-break:break-all;padding:12px 13px;border-radius:11px;background:var(--s-tint);border:1px solid var(--s-line);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:#28343f}
.exp-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
@media(max-width:900px){.exp-layout{grid-template-columns:1fr}}
.manual-notice{margin-top:15px;padding:13px 15px;border:1px solid rgba(255,255,255,.24);border-radius:13px;background:rgba(255,255,255,.1);font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.manual-help{display:block;margin-top:5px;color:var(--s-muted);font-size:11.5px;line-height:1.45}
.manual-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.manual-actions .btn{min-height:48px}
@media(max-width:700px){.manual-actions{flex-direction:column}.manual-actions .btn{width:100%}}
.pg-card{border:1px solid var(--s-warn-line) !important;border-radius:var(--s-radius) !important;background:var(--s-warn-soft) !important;overflow:hidden;box-shadow:var(--s-shadow) !important;padding:0 !important}
.pg-card>summary{cursor:pointer;padding:16px 19px;color:#8a5a06;font-weight:900;font-size:15px;list-style:none;display:flex;align-items:center;gap:9px}
.pg-card>summary::-webkit-details-marker{display:none}
.pg-card>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2.5px solid #b98a2e;border-bottom:2.5px solid #b98a2e;transform:rotate(45deg);transition:transform .18s}
.pg-card[open]>summary::after{transform:rotate(225deg)}
.pg-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:0 18px 18px}
.pg-action{padding:16px;border:1px solid var(--s-line);border-radius:15px;background:#fff}
.pg-action h3{margin:0 0 4px;color:var(--s-green-800);font-size:16px}
.pg-action p{color:var(--s-muted);font-size:12.5px;line-height:1.5}
.pg-action textarea{min-height:82px}
.pg-action.danger{border-color:var(--s-danger-line);background:#fff7f6}
.pg-action.restore{border-color:var(--s-ok-line);background:#f4fff8}
@media(max-width:760px){.pg-body{grid-template-columns:1fr}}
.pv-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;margin-top:18px}
@media(max-width:960px){.pv-layout{grid-template-columns:1fr}}
.pv-avatar{background:linear-gradient(135deg,var(--s-green-700),var(--s-green-900)) !important;color:#fff !important;border-radius:16px !important}
.pv-tag,.pv-status,.pv-doc-state{border-radius:999px !important;font-weight:900 !important}
.pv-doc,.pv-summary-item,.pv-requirement,.pv-observation,.pv-dni,.pv-audit,.pv-rrhh{
border:1px solid var(--s-line) !important;border-radius:14px !important;background:#fff !important;
}
.pv-doc-button,.pv-hero-button,.pv-viewer-button{border-radius:12px !important;font-weight:800 !important}
.pv-preview{border-radius:12px !important;border:1px solid var(--s-line) !important}
.pv-empty{color:var(--s-muted)}
#postulacion-form .form-grid{align-items:start}
#postulacion-form .file-card{align-self:start;height:auto;min-height:0}

/* == EMP v1 == Dashboard, empleados y recibos (tema Sheriff moderno) */

/* ---- Dashboard: layout con barra lateral ---- */
.app-layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh;background:var(--s-bg)}
.sidebar{
  background:linear-gradient(180deg,#07382c,#0a4d3c 55%,#0e2f50);color:#fff;
  padding:20px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;align-self:start;height:100vh;overflow:auto;
}
.sidebar .brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:16px}
.sidebar .brand img{width:52px;height:52px;border-radius:14px;object-fit:cover;background:rgba(255,255,255,.1);padding:3px;margin-bottom:6px}
.sidebar .brand strong{font-size:17px;color:#fff}
.sidebar .brand span{font-size:12px;color:var(--s-lime);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.sidebar .nav{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.sidebar .nav a{
  display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:11px;
  color:rgba(255,255,255,.9);text-decoration:none;font-weight:700;font-size:14.5px;transition:background .15s;
}
.sidebar .nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar .nav a.active{background:rgba(217,243,64,.16);color:#fff;box-shadow:inset 3px 0 0 var(--s-lime)}
.sidebar .admin-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px;margin:8px 0;color:#fff}
.sidebar .admin-card small{color:var(--s-lime);font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.sidebar .admin-card strong{display:block;margin:3px 0 5px}
.sidebar .admin-card .small,.sidebar .admin-card p{color:rgba(255,255,255,.75)}
.sidebar .admin-card .btn{margin-top:8px;width:100%}
.sidebar-note{margin-top:auto;padding:12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12.5px;color:rgba(255,255,255,.85)}
.sidebar-note strong{color:#fff}
.main{padding:clamp(16px,3vw,30px);min-width:0}
.main .topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.main .topbar h1{font-size:clamp(20px,2.6vw,28px);font-weight:900;margin:0}
.main .topbar p{margin:4px 0 0;color:var(--s-muted)}
.main .topbar .role{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;background:var(--s-ok-soft);color:#0a6c3b;font-size:11px;font-weight:900;letter-spacing:.06em}
.logout button{background:#c0362b;color:#fff;border:0;border-radius:11px;padding:10px 15px;font-weight:800;cursor:pointer;box-shadow:0 6px 14px rgba(192,54,43,.25)}
.logout button:hover{background:#a4291f}
.hero{
  position:relative;overflow:hidden;color:#fff;border-radius:calc(var(--s-radius) + 6px);
  padding:clamp(20px,3vw,28px);margin-bottom:18px;
  background:radial-gradient(120% 160% at 100% 0%,rgba(217,243,64,.15) 0%,rgba(217,243,64,0) 44%),linear-gradient(132deg,#0a4d3c 0%,#0a4544 46%,#0e2f50 100%);
  box-shadow:0 16px 40px rgba(6,42,60,.22);
}
.hero h2{color:#fff;margin:0 0 6px;font-size:clamp(20px,2.6vw,28px);font-weight:900}
.hero p{color:rgba(255,255,255,.9);margin:0}
.cards,.employee-pro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.cards .card,.admin-card{display:flex;flex-direction:column}
.main .card,.main .admin-card{
  background:#fff;border:1px solid var(--s-line);border-radius:var(--s-radius);box-shadow:var(--s-shadow);padding:20px;
}
.main .card h2,.main .card h3,.main .admin-card strong{color:var(--s-green-800)}
.main .card .btn,.main .admin-card .btn{align-self:flex-start;margin-top:auto}
.main .card small,.main .admin-card small{color:var(--s-green-600);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.06em}

/* Portal del empleado (employee-pro-*) */
.employee-pro-hero{
  color:#fff;border-radius:22px;padding:clamp(20px,3vw,28px);margin-bottom:18px;
  background:radial-gradient(120% 160% at 100% 0%,rgba(217,243,64,.15) 0%,rgba(217,243,64,0) 44%),linear-gradient(132deg,#0a4d3c 0%,#0a4544 46%,#0e2f50 100%);
  box-shadow:0 16px 40px rgba(6,42,60,.22);
}
.employee-pro-hero h1,.employee-pro-hero h2{color:#fff}
.employee-pro-card{background:#fff;border:1px solid var(--s-line);border-radius:var(--s-radius);box-shadow:var(--s-shadow);padding:20px}
.employee-pro-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--s-ok-soft);color:var(--s-green-700);font-weight:900;font-size:20px}
.employee-pro-pills{display:flex;flex-wrap:wrap;gap:8px}
.employee-pro-notice{background:var(--s-warn-soft);border:1px solid var(--s-warn-line);color:#8a5a06;border-radius:14px;padding:13px 15px}

@media(max-width:900px){
  .app-layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:column}
  .sidebar .nav{flex-direction:row;flex-wrap:wrap}
  .sidebar .nav a{flex:1 1 auto}
  .sidebar-note{display:none}
}

/* ---- Zona de pruebas (danger-zone) ---- */
.danger-zone{border:1px solid var(--s-danger-line);background:var(--s-danger-soft);border-radius:16px;padding:16px;margin-bottom:16px}
.danger-zone h3{margin:0 0 4px;color:#9a1e14}
.danger-zone p{color:#9a1e14;font-size:13px}
.danger-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* ---- head/actions helper de listas ---- */
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.table-wrap{overflow-x:auto;border:1px solid var(--s-line);border-radius:14px;background:#fff}
.center{text-align:center}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}