:root{
 --sena:#39a900;--sena-dark:#00324d;--ink:#16323f;--muted:#6b7b83;--bg:#f3f7f5;--white:#fff;
 --danger:#d93025;--warning:#e5a000;--success:#16823b;--shadow:0 10px 28px rgba(0,50,77,.10);--radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45}
a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.topbar{background:var(--sena-dark);color:#fff;padding:12px 0;position:relative;z-index:30}.nav{display:flex;justify-content:space-between;align-items:center;gap:18px}.brand{font-weight:800;font-size:20px;white-space:nowrap}.brand span{color:#72d52e}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:11px 16px;cursor:pointer;font-weight:700;transition:.2s;min-height:42px;white-space:nowrap}.btn:hover{transform:translateY(-1px);filter:brightness(.97)}
.btn-primary{background:var(--sena);color:#fff}.btn-dark{background:var(--sena-dark);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-light{background:#edf3f5;color:var(--ink)}.btn-warning{background:#f2b01e;color:#172b35}
.hero{padding:50px 0;background:linear-gradient(135deg,#00324d,#0a6175 55%,#39a900);color:#fff}.hero h1{font-size:clamp(30px,5vw,52px);margin:0 0 12px}.hero p{max-width:760px;opacity:.92}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.stats{margin-top:-28px;position:relative}.stat strong{display:block;font-size:30px;color:var(--sena-dark)}
.form-card{max-width:650px;margin:40px auto}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}label{font-weight:700;font-size:14px}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid #d8e2e5;border-radius:11px;background:#fff;color:var(--ink);min-height:44px}textarea{min-height:100px;resize:vertical}input:focus,select:focus,textarea:focus{outline:3px solid rgba(57,169,0,.14);border-color:var(--sena)}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table{width:100%;border-collapse:collapse;background:#fff;min-width:760px}.table th,.table td{padding:13px;border-bottom:1px solid #edf1f2;text-align:left;vertical-align:middle}.table th{background:#f4f8f7;font-size:13px}.table td small{color:var(--muted)}
.alert{padding:13px 16px;border-radius:12px;margin:18px 0}.alert-success{background:#e6f7eb;color:#176b33}.alert-error{background:#fdeaea;color:#9d2119}.alert-warning{background:#fff5d9;color:#775400}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.badge-pendiente{background:#fff3cd;color:#7a5b00}.badge-prestado{background:#dff0ff;color:#075985}.badge-devuelto{background:#dff7e7;color:#176b33}.badge-rechazado{background:#fde4e4;color:#9d2018}
.tool-card{display:flex;flex-direction:column;gap:10px}.tool-img{height:180px;border-radius:14px;object-fit:cover;background:#e8eff0;width:100%}.muted{color:var(--muted)}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--sena-dark);color:#fff;padding:22px;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar a{display:block;padding:12px 13px;border-radius:10px;margin:4px 0;color:#e7f2f4}.sidebar a:hover{background:rgba(255,255,255,.1)}.main{padding:28px;min-width:0}.mobile-nav{display:none}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.section-head h1{margin:0 0 4px;font-size:clamp(24px,3vw,34px)}.footer{text-align:center;padding:30px;color:var(--muted)}.empty{text-align:center;padding:45px;color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.modal.open{display:flex}.modal-box{background:#fff;border-radius:18px;padding:24px;width:min(480px,100%);max-height:92vh;overflow:auto}img.thumb{width:55px;height:55px;object-fit:cover;border-radius:10px}

/* Tablas responsivas: un solo HTML, sin duplicar vista escritorio/móvil. */
@media(max-width:1100px){
 .responsive-table{min-width:0!important;border-collapse:separate;border-spacing:0;width:100%;background:transparent}
 .responsive-table thead{display:none}
 .responsive-table tbody,.responsive-table tr{display:block;width:100%}
 .responsive-table tr{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:10px 14px;margin:0 0 13px}
 .responsive-table tr td{display:grid;grid-template-columns:minmax(105px,34%) minmax(0,1fr);gap:10px;width:100%;padding:10px 0;border-bottom:1px solid #edf1f2;text-align:left;overflow-wrap:anywhere}
 .responsive-table tr td:last-child{border-bottom:0}
 .responsive-table tr td::before{content:attr(data-label);font-weight:700;color:var(--muted)}
 .table-wrap{overflow:visible}.table-wrap.card{background:transparent;box-shadow:none;padding:0}
}
@media(min-width:1101px){
 .responsive-table thead{display:table-header-group}.responsive-table tbody{display:table-row-group}.responsive-table tr{display:table-row}.responsive-table td{display:table-cell}.responsive-table td::before{content:none}
}
@media(max-width:600px){.container{width:min(94%,560px)}.hero{padding:32px 0}.hero h1{font-size:31px}.topbar .nav{align-items:flex-start}.topbar .actions{overflow-x:auto;max-width:68vw;flex-wrap:nowrap}.topbar .btn{white-space:nowrap}.main{padding:14px}.card{padding:16px}.section-head{gap:8px}.btn{min-height:44px}.actions{width:100%}.actions .btn{flex:1}.table-wrap{margin:0 -2px}}

@media(max-width:600px){.responsive-table tr td{grid-template-columns:42% 58%;font-size:13px}.responsive-table tr td:last-child .actions{grid-column:1/-1}.responsive-table tr td:last-child .actions .btn{flex:1}.table-wrap{margin:0 -2px}}


/* ============================================================
   V9 MOBILE FIRST - CORRECCIÓN TOTAL PARA CELULARES
   ============================================================ */
html, body { max-width:100%; overflow-x:hidden; }
img, svg, video { max-width:100%; }
.main { min-width:0; overflow-x:hidden; }
.sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sidebar-close { display:none; }
.session-label { color:#b9d1d7; margin:14px 0 12px; }
.sidebar-links a { display:flex; align-items:center; gap:9px; }
.sidebar-backdrop { display:none; }
.mobile-header { display:none; }
.mobile-brand { font-weight:800; font-size:18px; white-space:nowrap; }
.mobile-brand span { color:#72d52e; }
.mobile-user { font-size:12px; color:#d6e8ed; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-menu-toggle { border:0; background:rgba(255,255,255,.10); color:#fff; width:44px; height:44px; border-radius:12px; font-size:23px; cursor:pointer; flex:0 0 44px; }

/* Una sola tabla: en móvil cada fila se convierte en una tarjeta. */
@media (max-width: 900px) {
  body { font-size:14px; }
  .layout { display:block; min-height:100vh; }
  .sidebar {
    position:fixed;
    z-index:120;
    left:0;
    top:0;
    bottom:0;
    width:min(300px, 86vw);
    height:100vh;
    max-height:100dvh;
    padding:18px 14px;
    overflow-y:auto;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:16px 0 35px rgba(0,0,0,.22);
  }
  .sidebar.is-open { transform:translateX(0); }
  .sidebar-close { display:block; border:0; background:rgba(255,255,255,.10); color:#fff; width:40px; height:40px; border-radius:10px; font-size:27px; line-height:1; cursor:pointer; }
  .sidebar-backdrop { position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.45); display:block; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .sidebar-backdrop.is-open { opacity:1; pointer-events:auto; }
  .main { width:100%; padding:0 12px 28px; }
  .mobile-header {
    display:flex;
    position:sticky;
    top:0;
    z-index:90;
    margin:0 -12px 14px;
    padding:8px 12px;
    min-height:60px;
    align-items:center;
    gap:10px;
    background:var(--sena-dark);
    color:#fff;
    box-shadow:0 4px 15px rgba(0,50,77,.18);
  }
  .mobile-user { margin-left:auto; max-width:34vw; }
  .section-head { flex-direction:column; align-items:stretch; gap:9px; margin-bottom:14px; }
  .section-head h1 { font-size:24px; line-height:1.15; }
  .section-head p { margin:3px 0 0; }
  .section-head > .badge { align-self:flex-start; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .card { padding:15px; border-radius:15px; }
  .stats { margin-top:0; }
  .stat strong { font-size:27px; }
  .btn { min-height:44px; padding:10px 12px; }
  .actions { gap:8px; }
  .actions .btn { min-width:0; }
  .table-wrap { width:100%; overflow:visible; margin:0; }
  .table-wrap.card { background:transparent; box-shadow:none; padding:0; }
  .responsive-table { min-width:0 !important; width:100% !important; border-collapse:separate !important; border-spacing:0 !important; background:transparent !important; }
  .responsive-table thead { display:none !important; }
  .responsive-table tbody { display:block !important; width:100% !important; }
  .responsive-table tr { display:block !important; width:100% !important; background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:10px 13px; margin:0 0 12px; }
  .responsive-table td { display:grid !important; grid-template-columns:minmax(92px,34%) minmax(0,1fr); gap:8px; width:100% !important; min-width:0; padding:9px 0 !important; border-bottom:1px solid #edf1f2 !important; text-align:left !important; vertical-align:top !important; overflow-wrap:anywhere; white-space:normal !important; }
  .responsive-table td:last-child { border-bottom:0 !important; }
  .responsive-table td::before { content:attr(data-label); display:block; font-weight:700; color:var(--muted); }
  .responsive-table td > .actions { grid-column:1 / -1; width:100%; }
  .responsive-table td > .actions form { flex:1; min-width:0; }
  .responsive-table td > .actions .btn { width:100%; }
  .responsive-table td.empty { display:block !important; text-align:center !important; padding:25px !important; }
  .responsive-table td.empty::before { content:none; }
  .request-items { width:100%; }
  .request-item { align-items:flex-start; }
  .modal { padding:10px; }
  .modal-box { width:100%; max-height:90dvh; padding:17px; }
  .form-card { margin:15px auto; }
}

@media (max-width: 600px) {
  .main { padding-left:10px; padding-right:10px; }
  .mobile-header { margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px; }
  .mobile-brand { font-size:17px; }
  .mobile-user { max-width:30vw; font-size:11px; }
  .grid { grid-template-columns:1fr; }
  .stat strong { font-size:26px; }
  .section-head h1 { font-size:22px; }
  .responsive-table tr { padding:9px 11px; }
  .responsive-table td { grid-template-columns:38% minmax(0,62%); font-size:13px; }
  .responsive-table td > .actions { display:flex; flex-wrap:wrap; }
  .responsive-table td > .actions form, .responsive-table td > .actions > .btn { flex:1 1 145px; }
  .hero { padding:28px 0; }
  .hero h1 { font-size:28px; }
  .container { width:calc(100% - 18px); }
}

@media (max-width: 360px) {
  .mobile-user { display:none; }
  .responsive-table td { grid-template-columns:1fr; gap:3px; }
  .responsive-table td::before { font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-backdrop { transition:none; }
}