:root{
  --text:#0b1220;
  --muted:#667085;

  --wood2:#4b2f1f;
  --forest:#0f4a2d;
  --forest2:#13653c;

  --line:rgba(17,24,39,.12);
  --shadow:0 18px 60px rgba(0,0,0,.12);
  --shadow2:0 12px 28px rgba(0,0,0,.10);
  --r:18px;
  --r2:24px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap: 1180px;
}

html{scroll-behavior:smooth}
body{
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(11,18,32,.92);
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(75,47,31,.10), transparent 60%),
    radial-gradient(780px 420px at 92% 0%, rgba(15,74,45,.10), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.03), rgba(2,6,23,0) 40%),
    #fff;
}

/* helpers */
.muted{color:var(--muted) !important}
.table-wrap{overflow:auto}
.nowrap{white-space:nowrap}

/* ====== Layout existente ====== */
.admin-shell{display:grid; grid-template-columns: 300px 1fr; min-height:100vh}
.admin-side{
  position:sticky; top:0; align-self:start;
  height:100vh;
  padding:18px 14px;
  background:rgba(255,255,255,.86);
  border-right:1px solid rgba(17,24,39,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.admin-main{padding:18px 18px 44px}

.brand{display:flex; gap:10px; align-items:center; padding:10px 10px; border-radius:18px; border:1px solid rgba(17,24,39,.10); background:rgba(255,255,255,.9); box-shadow:0 12px 30px rgba(0,0,0,.05)}
.brand img{width:44px;height:44px;border-radius:14px; object-fit:cover; box-shadow:var(--shadow2)}
.brand strong{display:block; font-weight:900; letter-spacing:-.02em}
.brand span{display:block; color:var(--muted); font-weight:700; font-size:.92rem}

.side-nav{display:grid; gap:8px; margin-top:12px}
.side-nav a{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  text-decoration:none;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  font-weight:900;
  color:rgba(11,18,32,.90);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.side-nav a small{display:block; font-weight:800; color:var(--muted)}
.side-nav a:hover{transform: translateY(-1px); box-shadow:0 14px 36px rgba(0,0,0,.09)}
.side-nav a.active{
  border:1px solid rgba(15,74,45,.30);
  background:linear-gradient(135deg, rgba(15,74,45,1), rgba(19,101,60,1));
  color:#fff;
  box-shadow:0 18px 50px rgba(15,74,45,.18);
}
.side-nav a.active small{color:rgba(255,255,255,.82)}

.side-footer{position:absolute; left:14px; right:14px; bottom:16px}
.userbox{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px; border-radius:18px; border:1px solid rgba(17,24,39,.10); background:rgba(255,255,255,.92); box-shadow:0 12px 30px rgba(0,0,0,.06)}
.userbox .meta b{display:block; font-weight:900}
.userbox .meta small{display:block; color:var(--muted); font-weight:800}
.userbox a{font-weight:900; text-decoration:none; padding:10px 12px; border-radius:14px; border:1px solid rgba(75,47,31,.22); background:rgba(243,234,220,.55)}
.userbox a:hover{background:rgba(243,234,220,.75)}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
}
.crumbs{font-weight:900; color:rgba(11,18,32,.86)}
.topbar .right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.badge{display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; border:1px solid rgba(17,24,39,.10); background:rgba(255,255,255,.92); font-weight:900}
.badge.muted{color:rgba(11,18,32,.86)}
.clock{padding:8px 10px; border-radius:999px; border:1px solid rgba(17,24,39,.10); background:linear-gradient(135deg, rgba(75,47,31,.06), rgba(15,74,45,.06)); font-weight:900}
.clock{font-variant-numeric: tabular-nums; letter-spacing:-.01em}

.flash{margin-top:12px}
.content{margin-top:14px}

/* ====== UI: panel, KPI, tablas, forms ====== */
.panel{border:1px solid rgba(17,24,39,.10); border-radius:22px; background:rgba(255,255,255,.92); box-shadow:var(--shadow2); overflow:hidden}
.panel + .panel{margin-top:14px}
.panel-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 14px; border-bottom:1px solid rgba(17,24,39,.08); background:linear-gradient(135deg, rgba(75,47,31,.05), rgba(15,74,45,.05))}
.panel-head h3{font-weight:900; letter-spacing:-.02em}
.panel-body{padding:14px 14px}

.actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.kpis, .kpi-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
.kpi{border:1px solid rgba(17,24,39,.10); border-radius:18px; background:#fff; padding:12px; box-shadow:0 12px 30px rgba(0,0,0,.05)}
.kpi h4{margin:0; font-weight:900; color:rgba(11,18,32,.86)}
.kpi p{margin:6px 0 0; font-size:1.35rem; font-weight:900; letter-spacing:-.02em}

.form-row{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:10px}
.col-12{grid-column: span 12}
.col-10{grid-column: span 10}
.col-9{grid-column: span 9}
.col-8{grid-column: span 8}
.col-7{grid-column: span 7}
.col-6{grid-column: span 6}
.col-5{grid-column: span 5}
.col-4{grid-column: span 4}
.col-3{grid-column: span 3}
.col-2{grid-column: span 2}
.col-1{grid-column: span 1}

/* Pico overrides (sin romper) */
button, [type="submit"], input, select, textarea{border-radius:16px !important}
label{font-weight:900}
label{ text-transform: capitalize; }
small{color:var(--muted)}

/* Tablas siempre usables en celular */
.content table{display:block; width:100%; overflow-x:auto}
.content thead, .content tbody, .content tr{display:table; width:100%; table-layout:fixed}

/* Inputs: números legibles */
input[type="number"], .clock{font-variant-numeric: tabular-nums}

button.primary, [type="submit"].primary{
  border:1px solid rgba(15,74,45,.35) !important;
  background:linear-gradient(135deg, rgba(15,74,45,1), rgba(19,101,60,1)) !important;
  box-shadow:0 16px 44px rgba(15,74,45,.18) !important;
}

table{border:1px solid rgba(17,24,39,.10); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.05)}
thead th{background:linear-gradient(135deg, rgba(75,47,31,.06), rgba(15,74,45,.06)); font-weight:900}
tbody tr:nth-child(even){background:rgba(2,6,23,.02)}

/* Acciones dentro de tablas: compactas y consistentes */
.actions [role="button"], .actions a[role="button"]{padding:10px 12px; border-radius:14px}

/* Pico: títulos */
h1,h2,h3,h4{letter-spacing:-.02em}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .admin-shell{grid-template-columns: 1fr}
  .admin-side{position:relative; height:auto}
  .side-footer{position:relative; left:auto; right:auto; bottom:auto; margin-top:12px}
  .admin-main{padding:14px}
  .kpis, .kpi-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-12{grid-column: auto}
}

@media (max-width: 520px){
  .topbar{flex-direction:column; align-items:flex-start}
  .topbar .right{justify-content:flex-start}
  .panel-head{flex-direction:column; align-items:flex-start}
  .actions{justify-content:flex-start}
}