/* Estilos basados en Index.html original de Pendia v0.5 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
:root{--bg:#f3f7f4;--pine:#133f35;--line:#e2ebe5;--muted:#657b73;--mint:#b9f39c;--green:#087e62}
*{box-sizing:border-box}
body{background:var(--bg);color:#1a3830;font:14px Montserrat,Arial,sans-serif}
button,input,select{font:inherit}
header{background:var(--pine);color:#fff;padding:18px 5%;display:flex;align-items:center;justify-content:space-between;gap:12px}
header strong{font:700 28px Poppins,Arial,sans-serif;letter-spacing:0}
header strong i{color:var(--mint);font-style:normal}
main{max-width:1160px;margin:auto;padding:30px 20px}
main>h1{font:700 26px Poppins,Arial,sans-serif;letter-spacing:0;margin:0}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;margin:0}
.panel h2,.section-head h2{font:700 18px Poppins,Arial,sans-serif}
.topline{margin:0;min-height:0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.topline .subtitle{font:14px Montserrat,Arial,sans-serif;color:var(--muted);line-height:1.55;margin:4px 0 0}
.navlinks{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.navlinks a,.navlinks .logout-link{background:#fff;border:1px solid var(--line);color:var(--pine);padding:11px 13px;border-radius:10px;font:700 13px Montserrat,Arial,sans-serif}
.navlinks a:hover,.navlinks .logout-link:hover{background:#f2f9f4}
.navlinks .logout-link{font-weight:500}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:25px 0}
.metric{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;min-height:0}
.metric small{color:var(--muted);font-size:12px}
.metric strong{display:block;font:700 33px Poppins,Arial,sans-serif;margin-top:8px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:0}
.section-head h2{margin:0}
.section-head .muted{font-size:12px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.filters>*{padding:10px;border:1px solid var(--line);background:#fff;border-radius:10px;height:auto;font-size:13px}
.filters input{flex:1;min-width:190px}
.filters select{width:auto;max-width:210px;min-width:140px}
.filters button{font-weight:700;background:var(--pine);color:#fff;padding:10px 14px;border:0;height:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)}
.inbox-table{min-width:650px}
.inbox-table th{font:600 12px Montserrat,Arial,sans-serif;color:var(--muted);padding:13px 10px}
.inbox-table td{font:14px Montserrat,Arial,sans-serif;padding:13px 10px;vertical-align:middle}
.inbox-table .request-name{display:block;font-weight:700;font-size:14px;line-height:1.5}
.inbox-table .secondary{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.status-pill{border-radius:20px;padding:5px 9px;font-size:11px;font-weight:700;background:#eef1ef;color:#1a3830}
.status-pill.late{background:#ffe9d9;color:#a65419}
.status-pill.done{background:#d9f7e6;color:#08744d}
.subtle-button{background:#fff;border:1px solid var(--line);color:var(--pine);padding:11px 16px;border-radius:10px;font-weight:700}
.footer-note{font-size:11px;color:var(--muted);margin-top:14px}
.forms-grid{margin-top:24px}
@media(max-width:760px){main{padding:25px 15px}.topline{display:block}.navlinks{margin-top:15px}.metrics{gap:10px}.metric{padding:15px}.metric strong{font-size:29px}.filters input{flex-basis:100%}}
@media(max-width:650px){.metrics{grid-template-columns:1fr}.inbox-table{min-width:650px}header{padding:15px}main>h1{font-size:21px}}

/* Separación coherente entre navegación y paneles de páginas internas. */
main>h1 + .navlinks{margin-top:18px;margin-bottom:25px}
main>h1 + .navlinks + .panel{margin-top:0}
main>h1 + .navlinks ~ .panel + .panel{margin-top:20px}
@media(max-width:650px){main>h1 + .navlinks{margin-top:16px;margin-bottom:22px}}

/* Las pantallas internas incluyen una navegación y varios paneles hermanos. */
.inner-navigation + .panel{margin-top:0}
.inner-navigation + .panel + .panel{margin-top:24px}
.inner-navigation ~ .panel{margin-bottom:0}
@media(max-width:650px){.inner-navigation + .panel + .panel{margin-top:20px}}