/* ===== Variables & reset ===== */
:root{
  --bg:#0f1115;          /* topbar */
  --bg-page:#f6f7fb;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#111827;
  --primary:#2563eb;
  --primary-600:#1e40af;
  --green:#16a34a;
  --amber:#d97706;
  --red:#dc2626;
  --ring: rgba(37,99,235,.35);
  --radius:14px;
  --shadow:0 6px 18px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.85}

/* ===== Layout ===== */
.container{max-width:1100px;margin:0 auto;padding:20px}
.topbar{
  background:var(--bg); color:#fff;
  position:sticky; top:0; z-index:20;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.topbar .container{display:flex;align-items:center;gap:18px}
.topbar h1{font-size:18px;margin:0}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap}
.topbar nav a{color:#e5e7eb}
.topbar nav a:hover{color:#fff}
.topbar .spacer{flex:1}
.btn-logout{
  background:var(--red); color:#fff; padding:8px 14px; border-radius:10px;
}
.btn-logout:hover{background:#b91c1c}

/* ===== Cards, grid ===== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .grid-3,.grid-2{grid-template-columns:1fr} }

/* ===== Forms ===== */
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=datetime-local],select,textarea{
  width:100%; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; font-size:14px; color:var(--text);
  outline:none; transition: box-shadow .15s, border-color .15s;
}
textarea{min-height:110px; resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary); box-shadow:0 0 0 4px var(--ring);
}
.toolbar{display:flex;flex-wrap:wrap; gap:12px; align-items:end; margin:10px 0 18px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px; padding:8px 12px;
  border-radius:10px; border:1px solid #e5e7eb; background:#fff; color:var(--text);
  cursor:pointer; transition:transform .05s ease, box-shadow .15s;
}
.btn:hover{box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-600)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}

/* ===== Badges ===== */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px}
.badge.en_curso{background:#dbeafe;color:#1e3a8a}
.badge.pendiente{background:#fef3c7;color:#92400e}
.badge.finalizada{background:#dcfce7;color:#065f46}

/* ===== Tables ===== */
.table-wrap{overflow:auto;border-radius:12px; box-shadow:var(--shadow); background:var(--card)}
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:720px}
.table thead th{
  background:#f3f4f6; font-weight:600; text-align:left; padding:12px;
}
.table tbody td{padding:12px; border-top:1px solid #eef2f7}
.table tfoot th{padding:12px; background:#f9fafb}

/* ===== Kanban / Tablero ===== */
.kanban{display:grid; grid-template-columns:repeat(3,minmax(280px,1fr)); gap:16px}
@media (max-width:1100px){ .kanban{grid-template-columns:repeat(3, minmax(260px, 1fr)); overflow-x:auto; padding-bottom:8px} }
@media (max-width:800px){ .kanban{grid-template-columns:repeat(1,minmax(260px,1fr))} }
.col{display:flex; flex-direction:column; gap:12px}
.col > h3{margin:0 0 6px 0}
.card.task{cursor:pointer; transition:transform .08s ease, box-shadow .15s}
.card.task:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.12)}
.task .meta{color:var(--muted); font-size:12px}

/* ===== Helpers ===== */
.mt-1{margin-top:6px} .mt-2{margin-top:12px} .mt-3{margin-top:18px}
.text-right{text-align:right} .muted{color:var(--muted)}

/* Kanban moderno y responsive */
.kanban{display:grid; grid-template-columns:repeat(3,minmax(280px,1fr)); gap:16px}
@media (max-width:1100px){ .kanban{grid-template-columns:repeat(3, minmax(260px, 1fr)); overflow-x:auto; padding-bottom:8px} }
@media (max-width:800px){ .kanban{grid-template-columns:repeat(1,minmax(260px,1fr))} }
.col{display:flex; flex-direction:column; gap:12px}
.card.task{cursor:pointer; transition:transform .08s ease, box-shadow .15s}
.card.task:hover{transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.12)}
.meta{color:#6b7280; font-size:12px}


/* Botón salir consistente */
.btn-logout{background:#dc2626;color:#fff;padding:8px 14px;border-radius:10px}
.btn-logout:hover{background:#b91c1c}

/* === HAMBURGUESA + DRAWER LATERAL === */

/* Botón hamburguesa */
.hamburger{display:none;flex-direction:column;gap:4px;background:#1f2937;border:1px solid #374151;border-radius:10px;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:#fff}

/* En móvil ocultamos el nav horizontal y mostramos la hamburguesa */
@media (max-width:980px){
  .topbar nav{display:none}
  .hamburger{display:flex}
}

/* Drawer lateral (oculto por defecto a la izquierda) */
.drawer{
  position:fixed; inset:0 auto 0 0; width:280px;
  background:#0f172a; color:#e5e7eb;
  transform:translateX(-100%);           /* ← lo deja fuera de pantalla */
  transition:transform .2s ease;
  z-index:40; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.drawer[aria-hidden="false"]{ transform:translateX(0) } /* visible */

.drawer-header{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid #1f2937}
.brand-dot{width:30px;height:30px;border-radius:8px;background:#2563eb;color:#fff;display:grid;place-items:center;font-weight:700}
.drawer-close{margin-left:auto;background:transparent;border:0;color:#94a3b8;font-size:22px;cursor:pointer}

.drawer-nav{display:flex;flex-direction:column;padding:12px}
.drawer-nav a{color:#e5e7eb;padding:10px 12px;border-radius:10px}
.drawer-nav a:hover{background:#111827}

.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}

/* Inputs y selects */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background-color: #fff;
  box-sizing: border-box;
  transition: border 0.3s;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #0056b3;
  outline: none;
}

/* Labels */
label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
  color: #333;
}

/* Botones */
button,
input[type="submit"],
.btn {
  background: #0056b3;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s;
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
  background: #003d82;
}

.form-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}
.table-container {
  overflow-x: auto;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

table th, table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

table th {
  background: #f9f9f9;
  font-weight: 600;
}

table tr:hover {
  background: #f5faff;
}

/* Hamburguesa visible en móvil */
.hamburger{display:none;flex-direction:column;gap:4px;background:#1f2937;border:1px solid #374151;border-radius:10px;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:#fff}
@media (max-width:980px){
  .topbar nav{display:none}   /* oculta el menú horizontal */
  .hamburger{display:flex}
}

/* Drawer lateral */
.drawer{
  position:fixed; inset:0 auto 0 0; width:280px;
  background:#0f172a; color:#e5e7eb;
  transform:translateX(-100%); transition:transform .2s ease;
  z-index:40; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.drawer[aria-hidden="false"]{ transform:translateX(0) }
.drawer-header{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid #1f2937}
.brand-dot{width:30px;height:30px;border-radius:8px;background:#2563eb;color:#fff;display:grid;place-items:center;font-weight:700}
.drawer-close{margin-left:auto;background:transparent;border:0;color:#94a3b8;font-size:22px;cursor:pointer}
.drawer-nav{display:flex;flex-direction:column;padding:12px}
.drawer-nav a{color:#e5e7eb;padding:10px 12px;border-radius:10px}
.drawer-nav a:hover{background:#111827}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35}