:root{
  --bg:#f7fbff;
  --white:#ffffff;
  --blue:#1565c0;
  --green:#2e7d32;
  --text:#0f172a;
  --muted:#5c6b7a;
  --border:#e6eef7;
  --shadow:0 6px 16px rgba(0,0,0,.06);
  --radius:14px;
  --focus: 0 0 0 4px rgba(21,101,192,.15);
}

/* Base: pensado para TABLET (768–1023px) */
*{box-sizing:border-box}
html{font-size:17px}
@media (min-width: 768px){ html{font-size:18px} }
@media (min-width: 1280px){ html{font-size:16px} }

body{
  margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg); color:var(--text); line-height:1.4;
}

/* Contenedor máximo y paddings cómodos en tablet */
.container{padding:1rem; max-width:1200px; margin:0 auto}

/* Grids: tablet primero */
.grid-2{display:grid; gap:1rem; grid-template-columns:1fr}
.grid-3{display:grid; gap:1rem; grid-template-columns:1fr}
@media (min-width: 768px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3, 1fr)}
}

/* Tarjetas */
.card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow);
}

/* Tipografías */
h1,h2,h3{margin:.2rem 0 .6rem}
h1{font-size:1.6rem}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
.muted{color:var(--muted)}

/* Controles grandes, foco visible (accesible) */
.field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem}
input, select, button, textarea{
  width:100%; padding:1rem 1rem; border:1px solid var(--border); border-radius:12px;
  outline:none; transition:.15s; font-size:1rem; background:#fff;
  min-height:48px; /* tap comfortable */
}
input:focus, select:focus, textarea:focus{ box-shadow:var(--focus); border-color:#cddff5 }
button{cursor:pointer}

.btn-primary{
  background:var(--blue); color:white; border:1px solid #0f4ea6;
}
.btn-primary:hover{ filter:brightness(.98) }
.btn-success{ background:var(--green); color:#fff; border:1px solid #1e5a24 }
.btn-outline{ background:#fff; color:var(--blue); border:1px solid var(--blue) }
.actions{ display:flex; gap:.6rem; flex-wrap:wrap }

/* Badges y alertas */
.badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; font-size:.95rem; border:1px solid var(--border); background:#fff }
.alert{ padding:.9rem 1rem; background:#fff8f0; border:1px solid #ffd5a8; border-radius:12px }

/* Tablas: scroll horizontal suave en tablet si excede */
.table-wrap{ width:100%; overflow:auto; -webkit-overflow-scrolling:touch }
.table{ width:100%; border-collapse:separate; border-spacing:0; min-width:640px }
.table th, .table td{ padding:.9rem 1rem; border-bottom:1px solid var(--border) }
.table th{ text-align:left; color:var(--muted); font-weight:600 }

/* Login */
.bg{ display:grid; place-items:center; min-height:100dvh; padding:1rem }
.login-card{
  width:min(560px, 100%); background:#fff; border:1px solid var(--border);
  border-radius:20px; padding:2rem; box-shadow:var(--shadow);
}

/* Interacciones sin hover (tabletas y móviles) */
@media (hover:none){
  .btn-primary:active, .btn-success:active, .btn-outline:active{ transform:scale(.99) }
}

/* Utilidades */
.hidden{display:none}
.center{display:flex;align-items:center;justify-content:center}

/* === NAV (tablet-first) === */
.navbar{
  background:#ffffff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;
}
.navbar-inner{
  max-width:1200px; margin:0 auto; padding:.6rem 1rem; display:flex; align-items:center; gap:1rem;
}
.brand{ font-weight:700; color:var(--blue); letter-spacing:.2px; }
.spacer{ flex:1 }
.navlinks{ display:flex; gap:.5rem; flex-wrap:wrap }
.navlinks a{
  padding:.55rem .8rem; border-radius:10px; border:1px solid transparent; text-decoration:none; color:var(--text);
}
.navlinks a.active{
  border-color:var(--border); background:#f2f7ff; color:var(--blue); font-weight:600;
}
.nav-rol{
  font-size:.9rem; color:var(--muted); border:1px solid var(--border); padding:.3rem .6rem; border-radius:999px;
}
.footer{
  margin-top:2rem; padding:1.2rem 1rem; border-top:1px solid var(--border); color:var(--muted); background:#fff;
}

.sticky-actions {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
  z-index: 10;

  display: flex;
  gap: .75rem;
  align-items: center;
}